/* =============================================================================
   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:   4px;
  --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.
   -------------------------------------------------------------------------- */
body.pmg-page .section-block.agb-note {
  padding: 20px 24px;
  background: transparent;
  border: 0;
}
body.pmg-page .section-block.agb-note .section-wrap {
  max-width: 1170px;
  margin: 0 auto;
}
body.pmg-page .section-block.agb-note p {
  font-size: 15px;
  line-height: 1.6;
  color: #6b6b6b;
  text-align: center;
  margin: 0;
}
body.pmg-page .section-block.agb-note a {
  color: #127749;
  text-decoration: underline;
}
