/* =============================================================================
   chrome.css  —  the shared header, on EVERY page under /_preview/
   -----------------------------------------------------------------------------
   Loaded by pmg_pv_chrome_head() on all 24 real-site routes, all 16 staged
   drafts and the notes page. It styles three things:

     row 1 + ribbon   includes/header.php, whose own stylesheet is
                      assets/css/components/header.css (loaded alongside this
                      file). Only the bits that live in site.css are restated
                      here, because a draft must not load site.css.
     the menu row     #pmg-bar
     the disclaimer   #pmg-disc

   WHY IDs AND NOT CLASSES
   The drafts are independently authored documents and two of them declare
   `* { margin:0; padding:0 }`, one styles a bare `header {}` and one a bare
   `nav {}`. A component built only on classes is safe from those by accident,
   not by design. #pmg-bar / #pmg-disc give every rule here an ID's specificity
   (1,0,0 or better), which a page's universal or element selector cannot reach.

   The bar is NOT wrapped in a container div on purpose: `position:sticky` is
   confined to its parent's box, so a wrapper only as tall as the header would
   stop it sticking as the page scrolls.
   ============================================================================= */

/* ---- brand palette --------------------------------------------------------
   components/header.css needs these three. They live in main.css, which a
   draft must not load, so they are restated here.
   -------------------------------------------------------------------------- */
:root {
  --brand-green: #127749;
  --brand-green-dark: #0b3e27;
  --brand-gold: #eed6a3;
}

/* The header's own tokens. Named --hdr-* deliberately: _src/system.php owns the
   --pv-* namespace for the drafts and is injected into the same document, so a
   --pv-gold here would be silently overwritten (its value is #B8975A).
   Gold is the LIGHT gold: site.css makes gold context-aware and flips it to
   #eed6a3 inside dark-green sections, and this bar is one. */
:root {
  --hdr-green: #127749;
  --hdr-green-deep: #0b3e27;
  --hdr-green-line: rgba(238, 214, 163, .22);
  --hdr-gold: #eed6a3;
  --hdr-gold-soft: #eed6a3;
  --hdr-ivory: #fff;
}

/* ---- the three main.css globals the header depends on ---------------------
   A draft cannot load main.css (it would restyle the whole draft), and it turns
   out the header quietly relied on three of its rules:

       body { color: #394b4e; }
       img  { max-width: 100%; height: auto; display: block; }
       a    { color: inherit; text-decoration: none; }

   Without them the logo link and all four social links rendered UNDERLINED on
   every draft, the logo images lost their max-width, and the header took its
   text colour from whichever draft was hosting it. Found by diffing every
   computed property of all 80 nodes in the header subtree against a real route:
   these were the only real differences out of ~3,200 raw ones (the rest were
   the colour chain — border-color, caret-color and friends all resolve from
   `color` — plus each draft's private custom properties, which no header rule
   reads).

   :where() so the rules carry the SAME specificity as main.css's own (0,0,1)
   rather than the ID's — they restore a default, they do not impose one, and
   .geo-opt's own colour must still win. And scoped to the header, so a draft's
   page content is untouched.
   -------------------------------------------------------------------------- */
:where(#header) { color: #394b4e; }
:where(#pmg-bar, #pmg-disc) { color: var(--hdr-ivory); }   /* a dark bar: default to ivory */
:where(#header, #pmg-bar, #pmg-disc) a { color: inherit; text-decoration: none; }
:where(#header, #pmg-bar, #pmg-disc) img { max-width: 100%; height: auto; display: block; }

/* ---- row 1: pinned against the pages' own element selectors ----------------
   `#header` is a <header> element sitting inside a page that may style bare
   elements. Across the 16 drafts:

       12 declare `header { }`  background, border-bottom, color, padding,
                                position, top, z-index, display, align-items,
                                justify-content
        9 declare `nav { }`     color, display, font-size, gap
       16 declare `* { }`       box-sizing, and 9 of them margin + padding

   components/header.css declares only `position` and `z-index` on #header, so
   every other property was there for the taking at (0,0,1). That is how
   /_preview/pmg-cyprus-residency-non-dom-table/ ended up with
   `header { padding: 22px 0 }` — row 1 rendered 44px taller than on the real
   routes, which is the "header is still different" nobody could place: the
   colours, the menu row and the band all matched, only the row's HEIGHT did not.

   Every value below is the real route's own computed value, read off
   /_preview/en/cyprus/, so pinning them cannot change how the real routes look —
   it only stops a draft from moving them. At (1,0,0) they outrank any bare
   element or class rule a page can bring.
   -------------------------------------------------------------------------- */
#header {
  margin: 0;
  padding: 0;
  border: 0;
  position: relative;          /* header.css's own two values, restated so a  */
  z-index: 200;                /* draft's position:sticky/top cannot take over */
  top: 0;
  display: block;
  align-items: normal;
  justify-content: normal;
  gap: normal;
  background-color: transparent;
  background-image: none;      /* the gradient and pattern are on .header-wrap */
  box-shadow: none;
  font-size: 16px;
  overflow: visible;
  max-width: none;
}

/* `nav { font-size }` and `nav { color }` reach .pv-nav, which had no value of
   its own for either. Both pinned to the real route's. */
#pmg-bar .pv-nav { font-size: 16px; color: var(--hdr-ivory); }

/* ---- row 1: typography ----------------------------------------------------
   site.css unifies the whole domain on Open Sans with !important, header
   included. A draft does not load site.css, so without this row 1 renders in
   the draft's own font while the real routes render Open Sans. Font Awesome is
   excluded so the social glyphs survive — the same exclusion site.css uses.
   -------------------------------------------------------------------------- */
#header,
#header *:not(i):not([class*="fa-"]) {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  line-height: 1.7;
}

/* ---- the geo / language switcher ------------------------------------------
   Styled in TWO files on the live site: components/header.css for the shell and
   site.css for these internals — including the only rule that makes the pill
   cream. Copied verbatim, because site.css cannot be loaded on a draft.
   -------------------------------------------------------------------------- */
.geo-switch .geo-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.geo-current { font: 700 14px 'Roboto', sans-serif; letter-spacing: .4px; white-space: nowrap; color: #2f3f3a; }
#desctopHeader .geo-switch .geo-current { color: var(--brand-gold); }
.geo-dd { min-width: 160px; padding: 6px; }
.geo-group { padding: 3px 0; }
.geo-group + .geo-group { border-top: 1px solid #ece6d7; margin-top: 3px; padding-top: 6px; }
.geo-group__label { display: block; font: 700 10px/1 'Roboto', sans-serif; letter-spacing: .13em;
  text-transform: uppercase; color: #a89a78; padding: 4px 12px 6px; }
.geo-opt { display: block; padding: 7px 12px; border-radius: 5px; font: 600 13px 'Roboto', sans-serif;
  color: #2f3f3a; text-decoration: none; }
.geo-opt:hover { background: #f3efe3; color: var(--brand-green); }
.geo-opt.is-active { color: var(--brand-green); font-weight: 700; }
.geo-opt.is-active::after { content: " ✓"; color: var(--brand-green); }

/* ---- the menu row ---------------------------------------------------------
   Every value below is the live Cyprus page's own — the 68px row, the 1080px
   width, the 32px gutter, the 22px mark, 13.5px tabs, the 980px breakpoint — so
   the header on a draft and the header on /_preview/en/cyprus/ are the same
   header rather than two that merely resemble each other.
   -------------------------------------------------------------------------- */

/* Local reset. (1,0,0) — beats a page's `*` rule; every component rule below
   carries an ID *and* a class, so this can never win over them. */
#pmg-bar, #pmg-bar *,
#pmg-disc, #pmg-disc * { box-sizing: border-box; margin: 0; padding: 0; }

#pmg-bar {
  position: sticky;
  top: 0;
  z-index: 50;                       /* under #header (200): its gold ribbon is
                                        absolutely positioned below it and a bar
                                        above 200 covers the ribbon */
  background: var(--hdr-green-deep);
  border-bottom: 1px solid var(--hdr-green-line);
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 16px;                   /* pinned with line-height, below */
  line-height: 1.7;                  /* pinned: inherited from body these differed
                                        per page and moved the row's width */
}
/* Clear the ribbon, which hangs 8px down into this bar. site.css solves the
   same collision on the real page with padding-top:26px; same value, and
   desktop only because the ribbon is hidden below 1000px. */
@media screen and (min-width: 1000px) {
  #pmg-bar { padding-top: 26px; }
}

#pmg-bar .pv-bar__in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

/* the PMG / CYPRUS wordmark */
#pmg-bar .pv-mark {
  flex: 0 0 auto;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .14em;
  line-height: 1.7;
  color: var(--hdr-ivory);
}
#pmg-bar .pv-mark strong { font-weight: 700; }
#pmg-bar .pv-mark small {
  display: block;
  font-family: inherit;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .34em;
  line-height: 1.7;
  margin-top: 1px;
  color: var(--hdr-gold-soft);
}

/* the six section links */
#pmg-bar .pv-nav { display: flex; gap: 4px; align-items: center; }
#pmg-bar .pv-tab {
  display: inline-block;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, .75);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: normal;
  padding: 10px 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s;
}
#pmg-bar .pv-tab:hover { color: var(--hdr-ivory); }
#pmg-bar .pv-tab.pv-on { color: var(--hdr-gold); border-color: var(--hdr-gold); }

/* a section that has staged drafts under it */
#pmg-bar .pv-tw { position: relative; display: inline-flex; align-items: center; }
#pmg-bar .pv-tw > .pv-tab::after { content: "▾"; margin-left: 5px; font-size: 8px; opacity: .55; }
#pmg-bar .pv-tw:hover > .pv-tab::after { opacity: 1; }
#pmg-bar .pv-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 236px;
  padding: 9px 8px;
  border: 1px solid var(--hdr-green-line);
  border-radius: 10px;
  background: var(--hdr-green-deep);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  text-align: left;
}
#pmg-bar .pv-tw:hover > .pv-drop,
#pmg-bar .pv-tw:focus-within > .pv-drop { display: block; }
#pmg-bar .pv-drop a {
  display: block;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, .86);
  text-decoration: none;
  white-space: nowrap;
}
#pmg-bar .pv-drop a:hover { background: rgba(238, 214, 163, .12); color: var(--hdr-gold-soft); }
#pmg-bar .pv-drop a.pv-here { background: rgba(238, 214, 163, .1); color: var(--hdr-gold-soft); }
#pmg-bar .pv-drop a.pv-all {
  margin-top: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--hdr-green-line);
  border-radius: 0;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(238, 214, 163, .7);
}

/* Consultation — the live page's .btn.btn-gold at .bar .cta size */
#pmg-bar .pv-cta {
  flex: 0 0 auto;
  display: inline-block;
  background: var(--hdr-gold);
  color: var(--hdr-green-deep);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: normal;
  padding: 10px 18px;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all .25s ease;
}
#pmg-bar .pv-cta:hover { background: var(--hdr-gold-soft); transform: translateY(-1px); }

/* the narrow-screen toggle — the live page's .menu-toggle */
#pmg-bar .pv-burger {
  display: none;
  background: none;
  border: 1px solid var(--hdr-green-line);
  border-radius: 4px;
  color: var(--hdr-ivory);
  padding: 8px 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* ---- the disclaimer band -------------------------------------------------- */
#pmg-disc {
  background: var(--hdr-green-deep);
  border-top: 1px solid var(--hdr-green-line);
  border-bottom: 1px solid var(--hdr-green-line);
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  /* font-size pinned, not only line-height: the <details> is a block container, so its
     line box is 1.7 x its OWN font-size. Inherited, /_preview/notes/ gave it 15px and
     the band came out 47.5px against everyone else's 49.2px. */
  font-size: 16px;
  line-height: 1.7;
}
#pmg-disc > div { max-width: 1080px; margin: 0 auto; padding: 10px 32px; }
#pmg-disc details > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hdr-gold-soft);
}
#pmg-disc details > summary::-webkit-details-marker { display: none; }
#pmg-disc details > summary::after { content: "▾"; font-size: 9px; letter-spacing: 0; transition: transform .18s ease; }
#pmg-disc details[open] > summary::after { transform: rotate(180deg); }
#pmg-disc details > summary:hover { color: #fff; }
#pmg-disc p { margin: 10px 0 2px; font-size: 12.5px; line-height: 1.65; color: rgba(238, 214, 163, .85); }

/* ---- narrow screens -------------------------------------------------------
   The live page switches its own nav at 980px; same breakpoint here.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  #pmg-bar .pv-nav { display: none; }
  #pmg-bar .pv-burger { display: block; }
  #pmg-bar .pv-nav.pv-open {
    display: flex;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--hdr-green-deep);
    border-bottom: 1px solid var(--hdr-green-line);
    padding: 8px 0;
  }
  #pmg-bar .pv-nav.pv-open .pv-tab { padding: 13px 32px; text-align: left; border-bottom: none; }
  #pmg-bar .pv-tw { display: block; }
  #pmg-bar .pv-tw > .pv-tab::after { float: right; }
  /* no hover on a phone: the panels sit inline, indented under their section */
  #pmg-bar .pv-drop {
    display: block;
    position: static;
    transform: none;
    min-width: 0;
    margin: 0 0 6px 32px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  #pmg-bar .pv-drop a { padding: 8px 0; font-size: 13px; white-space: normal; color: rgba(255, 255, 255, .62); }
  #pmg-bar .pv-bar__in { padding: 0 20px; }
  #pmg-disc > div { padding: 9px 20px; }
  #pmg-disc p { font-size: 12px; }
}

/* ---- real routes only -----------------------------------------------------
   The Cyprus/Dubai pages ship their own menu row and disclaimer band, which the
   shared ones above replace. Hidden rather than removed: the page's inline
   script ends with getElementById('mtoggle').addEventListener(...) and would
   throw on a missing element.
   -------------------------------------------------------------------------- */
.cy-np > header.site,
.cy-np > .pmg-disclaimer { display: none !important; }

/* ---- the fixed contact bar ------------------------------------------------
   components/cta-fixed.css offsets the bar by `left: 306px` to clear the 306px
   sidebar, and site.css line 18 centres it again with `left: 0` because this
   site has no such sidebar. A draft cannot load site.css, so without this it
   sat 153px right of centre. Same values as site.css's own rule, so on the 24
   real routes - which do load it - nothing changes.
   -------------------------------------------------------------------------- */
.btn-fixed-wrap-desctop { left: 0; right: 0; justify-content: center; }

/* Its typography is inherited, so it followed whatever the host page set. On
   /_preview/notes/ (body `15px/1.6 -apple-system`, and bold links) the four
   buttons came out wide enough to WRAP: a 72px two-row bar instead of 45px.
   Pinned to the real route's own computed values. Icon fonts excluded in the
   selector - a follow-up `i { font-family: inherit }` inherits Open Sans and
   turns every glyph into an empty box. */
.btn-fixed-wrap-desctop,
.btn-fixed-wrap-desctop *:not(i):not([class*="fa-"]):not([class*="flag-icon"]) {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
.btn-fixed-wrap-desctop ul { font-size: 16px; }
.btn-fixed-wrap-desctop ul li a { font-size: 13px; font-weight: 400; }

/* Same for the footer, for the same reason. */
#footer.pmg-footer,
#footer.pmg-footer *:not(i):not([class*="fa-"]):not([class*="flag-icon"]) {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
/* The public site's own computed values, read off /en/cyprus/ - 14px/1.6, not the
   16px the page body would otherwise hand it. */
#footer.pmg-footer { font-size: 14px; line-height: 1.6; font-weight: 400; color: #cfcfcf; }