/* =============================================================================
   site-chrome.css — the shared chrome owns its own look

   The header, the disclaimer band, the "Our Terms & Conditions / Terms of Use"
   line, the fixed contact bar and the footer must render identically on every
   URL of this site. They did not: fifteen of the pages are independently
   authored documents that ship their own <style>, and every one of them styles
   bare elements and the body. Measured on 08.09.2026 across all 44 sitemap URLs
   (same-origin iframes at 1400px, reading getComputedStyle):

     - the header row came out 72px, 73px or 74px tall depending on the page,
       because it INHERITS line-height from <body> and those pages declare 1.5,
       1.55 and 1.65 against the site's 1.6;
     - the logo and the tabs inherited each page's own text colour
       (#1a241f instead of the site's #394b4e);
     - the terms line rendered 12.6px/#394b4e on the 30 country and legal pages
       and 15px/#6b6b6b on the 14 standalone ones, because standalone-page.css
       restyled it for the drafts.

   The rule this file follows — the same one chrome.css follows in /_preview/ —
   is: PIN THE LEAK SURFACE ON THE COMPONENT ROOT. Everything a foreign document
   can set on a bare element or inherit down is declared here, at a specificity
   (an id, or a class pair) no page-level rule can reach. Values are the ones
   /en/cyprus/ computes — that page is the reference for how the chrome looks.

   Two things this file deliberately does NOT do:

   - no `* { margin:0; padding:0 }` reset inside the components. Written through
     an id that would be (1,0,0) and would outrank the components' own layout
     rules in footer.css and cta-fixed.css — the cure would break the footer.
   - no `revert`. In an author stylesheet `revert` goes to the BROWSER default,
     not to the previous author rule; that is what once made the language pill
     square on every draft.

   Restoring a browser/main.css default (link colour, image sizing) is written
   with :where() so it keeps main.css's own (0,0,1) weight and cannot beat a
   component rule that legitimately styles the same element.

   Loaded LAST in <head> by includes/head.php and, for the standalone pages, by
   includes/site-page.php after standalone-page.css.
   ============================================================================= */


/* ---- 1. the roots: typography cannot be inherited from the page ------------- */

#pmg-mh,
.pmg-disclaimer,
.section-block.agb-note,
.btn-fixed-wrap-desctop,
#footer {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-variant: normal;
  word-spacing: normal;
  text-indent: 0;
}

/* 16px/1.6 is what main.css gives the document; the tabs, the pill and the CTA
   each set their own font-size on top, and their line boxes are 1.6 x that. */
#pmg-mh {
  font-size: 16px;
  line-height: 1.6;
  color: #394b4e;
  text-align: left;
}

.pmg-disclaimer {
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}

/* The terms line under the content. 12.6px/1.4 is what the reference page
   computes (0.9em of the 14px it inherits inside .cy-np) — written out here so
   it no longer depends on which document it happens to sit in. */
.section-block.agb-note {
  font-size: 12.6px;
  line-height: 1.4;
  color: #394b4e;
  text-align: center;
  /* the reference page's own box: a white band, 30px above and below, and the
     text held to 875px in the middle (.section-wrap) */
  padding: 30px 15px;
  margin: 0;
  background: #fff;
  border: 0;
}
.section-block.agb-note .section-wrap {
  max-width: 875px;
  margin: 0 auto;
  padding: 0;
}
.section-block.agb-note p {
  font-size: 12.6px;
  line-height: 1.4;
  color: #394b4e;
  margin: 0;
}
.section-block.agb-note a {
  font-size: 12.6px;
  font-weight: 500;
  color: #127749;
  text-decoration: none;
}
.section-block.agb-note a:hover {
  text-decoration: underline;
}

.btn-fixed-wrap-desctop {
  font-size: 13px;
  line-height: 1.6;
}

#footer {
  font-size: 14px;
  line-height: 1.6;
  color: #cfcfcf;
  text-align: left;
}

/* The band's own box. /en/cyprus/what-we-arrange/ styles a bare `summary` with
   `padding:20px 22px; display:flex` for its accordion cards, and at (0,0,1) that
   still reached the disclaimer's summary for every property the component does
   not declare itself. These restate the component's values so nothing is left
   free to take. */
.pmg-disclaimer { color: #394b4e; }
.pmg-disc { margin: 0; padding: 0; }
.pmg-disc summary { margin: 0; padding: 0; line-height: 1.7; }
.pmg-disc p { margin: 10px 0 2px; padding: 0; }


/* ---- 2. the three main.css globals the chrome is built on ------------------
   A standalone page cannot load main.css (it would restyle the whole document),
   so the header's links came out underlined and its images unsized there. These
   restore the default INSIDE the chrome only, at main.css's own weight, so any
   component rule that means to style these elements still wins. */

/* The id goes INSIDE :where() on purpose. `#pmg-mh :where(img)` still counts the
   id — (1,0,0) — and it beat site-header.css's own
   `.pmg-mh__brand .header-wrap__logo img { height:38px }` (0,2,1), which blew the
   logo up to its natural 684px on every page for ten minutes on 08.09.2026.
   `:where(#pmg-mh) img` weighs (0,0,1): exactly what main.css declares, so it
   restores the default and loses to every component rule, while still beating a
   page's own bare `img {}` because this file is linked last. */
:where(#pmg-mh) a,
:where(.pmg-disclaimer) a,
:where(#footer) a { color: inherit; text-decoration: none; }

:where(#pmg-mh) img,
:where(#footer) img { max-width: 100%; height: auto; display: block; }

:where(#pmg-mh) ul, :where(#pmg-mh) ol,
:where(#footer) ul, :where(#footer) ol { list-style: none; }


/* ---- 3. box-sizing ---------------------------------------------------------
   Nine of the standalone documents declare `* { box-sizing: border-box }` and
   two declare content-box. The chrome is laid out for border-box throughout. */

#pmg-mh, #pmg-mh *,
.pmg-disclaimer, .pmg-disclaimer *,
.btn-fixed-wrap-desctop, .btn-fixed-wrap-desctop *,
#footer, #footer * { box-sizing: border-box; }

/* ---- 4. header hardening (08.09.2026) --------------------------------------
   The header must render identically on all fifteen pages, whatever CSS the
   page itself ships. The break that started this: standalone-page.css carries
   `body.pmg-page img { height:auto }` inside its 700px overflow guard, which
   weighs the same (0,1,1) as site-header.css's `.pmg-mh__slogan img` and is
   linked later — so on a phone the slogan lost its 13px height and rendered at
   its natural 108px, on these pages only. Anything a page ships can collide the
   same way, so the header's own metrics are pinned here, in the last-linked
   chrome file, at id weight.

   The values are site-header.css's own, including its deliberate phone
   behaviour: hidden below 1320px, back at 13px below 700px (there is room once
   the wordmark goes), gone again below 360px. Keep the two in step. */
#pmg-mh .pmg-mh__brand .header-wrap__logo img { height: 38px; width: auto; max-width: none; }
#pmg-mh.is-scrolled .pmg-mh__brand .header-wrap__logo img { height: 28px; }
#pmg-mh .pmg-mh__slogan img { height: 20px; width: auto; max-width: none; }
@media screen and (max-width: 1320px) {
  #pmg-mh .pmg-mh__slogan,
  #pmg-mh .pmg-mh__brand-div { display: none; }
}
@media screen and (max-width: 700px) {
  #pmg-mh .pmg-mh__brand .header-wrap__logo img { height: 26px; }
  #pmg-mh.is-scrolled .pmg-mh__brand .header-wrap__logo img { height: 24px; }
  #pmg-mh .pmg-mh__slogan { display: flex; }
  #pmg-mh .pmg-mh__slogan img { height: 13px; opacity: .85; }
}
@media screen and (max-width: 359px) {
  #pmg-mh .pmg-mh__slogan { display: none; }
}

/* ---- 5. anchor jumps clear the sticky header (08.09.2026) -------------------
   #pmg-mh is position:sticky, top:0, so /en/cyprus/services-in-detail/#non-dom
   scrolled the target to y=0 and the bar covered it. Every possible jump target
   gets a scroll margin: the bar is 73px at rest and 57px once scrolled, so 92px
   lands the heading just below it with room to breathe. 72px on phones, where
   the bar is 53px.
   Written at (0,2,0): /en/cyprus/services-in-detail/ sets scroll-margin-top:24px
   on its own sections, which was measured landing the heading 41px under the bar. */
body.pmg-page [id],
body.pmg-site [id] { scroll-margin-top: 92px; }
@media screen and (max-width: 700px) {
  body.pmg-page [id],
  body.pmg-site [id] { scroll-margin-top: 72px; }
}

/* main.css sets `html { scroll-behavior: smooth }`. A fragment jump on page load
   is then an animation, and Chrome cancels it when the hero image arrives and
   shifts the layout — /en/cyprus/services-in-detail/#banking opened at the top
   of the page instead of at the section (measured 08.09.2026). Instant jumps
   land every time, and with the scroll margin above they land below the bar. */
html { scroll-behavior: auto; }
/* …but a click inside the page should glide. :focus-within is the switch: on a
   fresh load nothing in the document has focus, so the deep link jumps; once the
   visitor clicks an anchor the document holds focus and the scroll animates.
   Skipped for anyone who asked their system for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}
