/* =============================================================================
   standalone-page.css  —  the standalone Cyprus pages only
   -----------------------------------------------------------------------------
   Linked by includes/site-page.php, and by nothing else: the country routes
   already carry the site's own stylesheets and must not be touched by it.
   (It began as _preview/_assets/css/drafts.css, for the same pages while they
   were staged; the class is .pmg-page now that they are published.)

   The pages were authored separately, at different times, and drifted:

       ivory ground   #FBF8F2  #FBF8F3  #FAF7F0  #FBF8F1
       ink            #1C2620  #1A1A1A  #1A241F  #1C231F  #1B231F  #1E2420
       body font      six different Carlito/Caladea fallback stacks
       button radius  3px  4px  6px  8px
       token names    two rival schemes, --ivory/--ink and --pmg-ivory/--pmg-ink

   Nobody would notice any single one, but put two drafts side by side and they
   read as two different companies. This file settles each value once, under both
   naming schemes, so a page picks up the unified value whichever it happens to
   reference.

   HOW IT WINS
   Load order, not force. site-page.php injects this link LAST in <head>, after the
   draft's own <style> block, so an identical-specificity :root here overrides
   the page's :root without a single !important. Nothing below reaches inside
   #pmg-bar / #pmg-disc / #header — the shared header owns those (chrome.css),
   and this file must never restyle it.
   ============================================================================= */

/* ---- page ground ----------------------------------------------------------
   Nine of the fifteen pages never reset the body margin, so the browser's
   default 8px showed as a pale strip above and beside the dark header — the
   "broken header" on those pages.
   -------------------------------------------------------------------------- */
html, body { margin: 0; padding: 0; }

/* ---- the settled tokens ---------------------------------------------------
   Both naming schemes get the same value. Greens are the live site's: #0b3e27
   deep and #127749 mid.
   -------------------------------------------------------------------------- */
body.pmg-page {
  --ivory:       #faf7f0;   --pmg-ivory:      #faf7f0;
  --ink:         #1a241f;   --pmg-ink:        #1a241f;
  --text:        #1a241f;
  --green:       #0b3e27;   --pmg-green:      #0b3e27;
  --green-deep:  #0b3e27;   --pmg-green-deep: #0b3e27;
  --green-mid:   #127749;

  --r-btn:   8px;
  --r-card:  8px;
  --r-input: 5px;
}

/* ---- typography -----------------------------------------------------------
   Open Sans, because that is what site.css imposes on the whole domain — the
   real routes are already Open Sans, and a page in Carlito next to them looks
   like a different site.

   The icon exclusions belong in THIS selector and not in a follow-up rule: a
   later `i { font-family: inherit }` inherits Open Sans and turns every Font
   Awesome social glyph into an empty box.
   -------------------------------------------------------------------------- */
body.pmg-page,
body.pmg-page *:not(i):not([class*="fa-"]):not([class*="flag-icon"]) {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

/* ---- one button radius ----------------------------------------------------
   Scoped to the pages' own button classes. The header's button is .pv-cta and
   its dropdown is .pv-drop, neither of which is matched here — an earlier
   attempt to keep this out of the header with `border-radius: revert` on
   `#header *` is what made the language pill square on every draft: `revert` in
   an author stylesheet reverts to the BROWSER default (0), not to the rule in
   components/header.css that makes the pill 8px.
   -------------------------------------------------------------------------- */
body.pmg-page .btn,
body.pmg-page .cta,
body.pmg-page a.btn,
body.pmg-page button.btn,
body.pmg-page .button { border-radius: var(--r-btn); }


/* ---- small screens ---------------------------------------------------------
   These fifteen pages were written as desktop documents and none of them was
   built for a 390px viewport. Rather than patch each one, the handful of rules
   that actually caused a sideways scroll live here.

   Measured at 360/390/414px on every page: the offender was a fixed-width
   submit button inside a non-wrapping .submit-row (339px wide next to a
   paragraph), plus the usual wide media.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 700px) {
  body.pmg-page .submit-row { flex-wrap: wrap; row-gap: 14px; }
  body.pmg-page .submit-row .fine { max-width: 100%; }
  body.pmg-page .btn,
  body.pmg-page button[type=submit] { max-width: 100%; }
  body.pmg-page img,
  body.pmg-page video,
  body.pmg-page iframe { max-width: 100%; height: auto; }
  body.pmg-page pre { overflow-x: auto; }
}
@media screen and (max-width: 420px) {
  body.pmg-page .btn,
  body.pmg-page button[type=submit] { padding-left: 18px; padding-right: 18px; white-space: normal; }
}

/* -----------------------------------------------------------------------------
   AGB note — the "Our Terms & Conditions and our Terms of Use." line that
   includes/site-page.php now renders above the footer, as the country pages do.
   The rules live here rather than pulling in content-base.css: that stylesheet
   carries the whole content system and would restyle each page's own sections.
   -------------------------------------------------------------------------- */
/* The terms line is chrome, not page content: components/site-chrome.css owns it
   now (removed 08.09.2026). It used to be restyled here to 15px/#6b6b6b, which
   is why it looked different on these fifteen pages than on the other thirty. */


/* -----------------------------------------------------------------------------
   One frame for the fifteen pages (08.09.2026)
   Each document was written standalone and set its own content width — 680,
   760, 820, 860, 920, 1080, 1100 and 1120px across the family — which is the
   main reason they read as different sites. One frame here, the same as the
   country pages' own .wrap: 1080px with 32px gutters.

   Weighs (0,2,0), so it beats each page's `.wrap{max-width:…}` (0,1,0) and
   `header .wrap` (0,1,1), and this file is linked after the page's own <style>.
   Only the horizontal metrics are set — every page keeps its vertical rhythm.

   .pmg-narrow is for the three pages whose content IS one form column (payment
   and the two registration forms): a form field row 1080px wide reads worse,
   so they keep a narrower column inside the same page frame.
   -------------------------------------------------------------------------- */
body.pmg-page .wrap,
body.pmg-page .container {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}
body.pmg-narrow .wrap { max-width: 820px; }
@media screen and (max-width: 700px) {
  body.pmg-page .wrap,
  body.pmg-page .container { padding-left: 18px; padding-right: 18px; }
}

/* main.css resets `ul { list-style: none }` for the site's own components. The
   "Ins / Outs" boxes on /en/cyprus/services-in-detail/ are plain <ul> prose
   lists, so they lost their bullets and read as loose lines (08.09.2026).
   Lists that draw their own marker (.checklist, .advantages, .compare-list,
   .highlights, .juris-list, .cross, .order-benefits — all ::before) are left
   alone, or they would show two. */
body.pmg-page .io-box ul { list-style: disc; padding-left: 20px; }
body.pmg-page .io-box ul li { display: list-item; }
body.pmg-page .io-box ul li::marker { color: #B8975A; }

/* -----------------------------------------------------------------------------
   "Go to Top" (08.09.2026)
   The footer include ships <a id="toTop"> on every page and footer.css styles
   it, but the class that reveals it (#toTop.visible) is added by
   assets/js/main.js — and these fifteen documents load neither main.js nor the
   jQuery it needs. So the button sat in the markup, invisible, on all of them.
   Revealed here; `href="#"` returns to the top on its own, no script involved.
   Where the browser supports scroll-driven animation it fades in after the
   first screen, as it does on the country pages; everywhere else it just stays.
   -------------------------------------------------------------------------- */
body.pmg-page #toTop { opacity: 1; pointer-events: auto; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body.pmg-page #toTop {
      opacity: 0;
      animation: pmg-totop-in linear both;
      animation-timeline: scroll();
      animation-range: 220px 420px;
    }
    @keyframes pmg-totop-in { to { opacity: 1; } }
  }
}
