/* ==========================================================================
   Site-specific overrides — privacymanagementgroup.com (v1).
   The CV chrome (header/footer) wraps self-contained content pages that carry
   their own in-page nav. Tweaks to make the two coexist cleanly.
   ========================================================================== */

/* Unified typography — Open Sans everywhere (chrome + content). Overrides the
   CV Poppins/Roboto and the content pages' own Carlito/Caladea declarations.
   `.cy-np *` catches every content element (incl. plain <div>s like .fact .v);
   Font Awesome <i> and .fa-* icons are excluded so their glyph font survives. */
body, button, input, select, textarea,
.lang-code, .geo-current, .geo-opt, .geo-group__label,
.cy-np, .cy-np *:not(i):not([class*="fa-"]) {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
}

/* Center the desktop fixed CTA bar across the viewport. */
.btn-fixed-wrap-desctop {
    left: 0;
    right: 0;
    justify-content: center;
}

/* Terms-of-Use modal body: the source uses .bold sub-headings (content CSS not
   loaded on this trimmed site, so define the one class the modal needs). */
.modal-body .bold { font-weight: 600; color: #0b3e27; }

/* ==========================================================================
   Static legal/info pages (.legal-page) — a dedicated, readable document style.
   A centred single column on a warm-ivory band with a green title rule.
   Distinct from the marketing content (.cy-np sections) by design.
   ========================================================================== */
.legal-page { background: #f8f8f8; padding: 56px 20px 80px; }
.legal-wrap {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(11,62,39,.12);
    border-radius: 10px;   /* wraps: 10px (site radius system) */
    padding: 48px clamp(22px, 5vw, 60px) 52px;
    box-shadow: 0 18px 50px -34px rgba(0, 61, 38, .4);
}
.legal-wrap h1 {
    font-size: clamp(26px, 3.4vw, 34px);
    color: var(--brand-green, #127749);
    line-height: 1.2;
    margin: 0 0 8px;
    padding-bottom: 20px;
    border-bottom: 2px solid #785813;   /* brand-gold rule */
}
.legal-wrap h2 { font-size: 21px; color: var(--brand-green, #127749); margin: 34px 0 10px; }
/* A SECOND top-level jurisdiction heading (e.g. "Legal Details - U.A.E.") that must
   read exactly like the page h1. Keeps a single <h1> per page for SEO while giving
   both jurisdiction blocks equal visual weight; larger top margin separates them. */
/* ---- Jurisdiction tabs on the Terms page (.tc-tabs / .tc-panel) -----------
   Two-panel switcher (Cyprus / U.A.E.). Panels are toggled by JS in the page
   and are also driven by the URL hash (#cyprus / #uae) so a tab can be linked
   to directly from anywhere on the site. `hidden` on the inactive panel keeps
   it out of the a11y tree and out of in-page find. */
.legal-wrap .tc-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 28px;
    border-bottom: 1px solid rgba(11,62,39,.12);
}
.legal-wrap .tc-tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 18px;
    font: inherit;
    font-size: 15.5px;
    font-weight: 700;
    color: rgba(11,62,39,.6);
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.legal-wrap .tc-tab:hover { color: var(--brand-green, #127749); }
.legal-wrap .tc-tab.is-active {
    color: var(--brand-green, #127749);
    border-bottom-color: #785813;   /* brand-gold rule, matches the h1 underline */
}
.legal-wrap .tc-tab:focus-visible { outline: 2px solid #785813; outline-offset: 2px; }
.legal-wrap .tc-panel[hidden] { display: none; }
/* The first heading inside a panel sits right under the tab bar. */
.legal-wrap .tc-panel > h2:first-child { margin-top: 0; }

.legal-wrap h2.legal-title {
    font-size: clamp(26px, 3.4vw, 34px);
    line-height: 1.2;
    margin: 56px 0 8px;
    padding-bottom: 20px;
    border-bottom: 2px solid #785813;   /* brand-gold rule, same as h1 */
}
.legal-wrap h3 { font-size: 17px; color: #0b3e27; margin: 24px 0 8px; }
.legal-wrap p,
.legal-wrap li { font-size: 15.5px; line-height: 1.7; color: rgba(11,62,39,.72); }
.legal-wrap p { margin: 0 0 14px; }
.legal-wrap strong { color: #0b3e27; font-weight: 700; }
.legal-wrap ul, .legal-wrap ol { margin: 0 0 16px; padding-left: 22px; }
.legal-wrap li { margin-bottom: 7px; }
.legal-wrap ul { list-style: none; padding-left: 4px; }
.legal-wrap ul li { position: relative; padding-left: 20px; }
.legal-wrap ul li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 7px; height: 7px; transform: rotate(45deg);
    border: 1px solid #785813;          /* gold diamond bullet */
}
.legal-wrap a { color: var(--brand-green, #127749); font-weight: 600; text-decoration: none; }
.legal-wrap a:hover { color: #0b3e27; text-decoration: underline; }
.legal-wrap sup { font-size: .62em; }
@media (max-width: 600px) {
    .legal-page { padding: 32px 12px 56px; }
    .legal-wrap { padding: 30px 20px 36px; border-radius: 10px; }
}

/* ==========================================================================
   Brand-colour system (6 colours + white/#f8f8f8). Gold is CONTEXT-AWARE:
   dark gold (#785813) on light backgrounds, light gold (#eed6a3) on the green /
   dark-green sections — so every gold accent keeps contrast. Text follows the
   same rule (white + light gold on green; dark green + dark gold on light).
   The content pages set --gold:#785813 by default (light-bg); we flip it to
   light gold inside the dark sections here.
   ========================================================================== */
.cy-np .hero, .cy-np .facts, .cy-np .panel, .cy-np .final, .cy-np .site,
.cy-np .journey, .cy-np .open, .cy-np .cta {
    --gold: #eed6a3;
    --gold-soft: #eed6a3;
}
/* Stats band on green: light-gold numbers + near-white captions. */
.cy-np .facts .fact .v { color: #eed6a3; }
.cy-np .facts .fact .k { color: rgba(255, 255, 255, .9); }

/* Real photos in the content image slots (.ph placeholders → .ph--img). Higher
   specificity than the pages' own .ph rules so the caption/gradient is dropped. */
.cy-np .ph--img { background: none !important; }
.cy-np .ph--img::after { display: none; }
.cy-np .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* AI disclosure marker on AI-generated content images — EU AI Act Art. 50(4),
   using the Commission's official Basic icon (assets/img/icons/eu-ai-circle-*.svg).
   Sits inside the slot's bottom-right corner: .ph is position:relative, so the
   marker anchors to the image itself. The img overrides are required because
   `.cy-np .ph img` above stretches every img in the slot to fill it. */
.cy-np .ph .ai-mark {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
}
.cy-np .ph .ai-mark img {
  position: static;
  inset: auto;
  width: 26px;
  height: 26px;
  object-fit: contain;
  /* Keeps the mark legible over light areas of a photo. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}
/* Region cards use a shorter 140px slot — scale the mark down to match. */
.cy-np .region .ph .ai-mark { left: 6px; bottom: 6px; }
.cy-np .region .ph .ai-mark img { width: 20px; height: 20px; }

/* The Consultation CTA exists twice in the bar markup (.cta-menu inside the
   .tabs nav is a legacy clone for the old mobile dropdown) — hide the clone
   everywhere. No #content prefix: the content-editor preview renders the
   fragment without #content, and the duplicate showed up there. */
.cy-np header.site .tabs .cta-menu { display: none; }

/* Under 1000px the in-page bar (logo + tabs + CTA) is gone entirely — the
   header hamburger opens the site menu (#side-menu), which carries the page's
   sections as an "On this page" group (mobile-nav.js clones them from #tabs,
   which still exists in the DOM as the source — just never displayed). */
@media screen and (max-width: 999px) {
    #content .cy-np header.site { display: none; }
}

/* Combined Country·Language selector — one pill, two independent switch groups.
   Reuses the language-pill look (.lang-dd-wrap/.current-lang/.lang-dd/.lang-caret
   from header.css) and adds the grouped dropdown panel. */
.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); }   /* gold on the green header */
.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: " \2713"; color: var(--brand-green); }

/* Fixed CV mobile header is 53px tall and doesn't reserve space — pad the body
   so page content isn't hidden beneath it. (The in-page nav is display:none at
   these widths, so no sticky offset needed anymore.) */
@media screen and (max-width: 999px) {
    body { padding-top: 53px; }
}

/* Desktop only: the CV header's gold ribbon (.header-bottom) hangs a little way
   down into the content and, sitting above it (z-index), would cover the top of
   the page's in-page nav bar. Pad the first content block so its logo/tabs clear
   the ribbon — its green background fills the added space, flush with the header.
   (#desctopHeader/.header-bottom are hidden below 1000px, so this is desktop-only.) */
@media screen and (min-width: 1000px) {
    /* Push the in-page nav's logo/tabs clear of the CV gold ribbon while the page
       is at the top. Once the nav pins (ribbon gone), sticky-nav.js adds .is-stuck
       and we drop the padding so there's no gap at the top of the pinned bar. */
    #content .cy-np > header.site { padding-top: 26px; transition: padding-top .12s ease; }
    #content .cy-np > header.site.is-stuck { padding-top: 0; }
}

/* Final-section slogan: the header's gold slogan image instead of the old
   italic text line (same asset as .header-wrap__slogan). */
.cy-np .final .slogan img {
    display: block;
    margin: 0 auto;
    width: min(300px, 70vw);
    height: auto;
}

/* ==========================================================================
   Border-radius system (Denys, 2026-07-05): wraps/containers 10px, small
   elements (buttons, chips) 8px. The content pages ship square by design —
   this layer rounds them site-wide and survives page regeneration. Circles
   (50%) and the underline-style tabs (.tab/.stab) stay as they are.
   ========================================================================== */
.cy-np a.btn,
.cy-np button.btn,
.cy-np .menu-toggle { border-radius: 8px; }
.cy-np .bcard,
.cy-np .panel,
.cy-np .cond,
.cy-np .faq,
.cy-np .ph { border-radius: 10px; }
.cy-np .ph { overflow: hidden; }               /* clip the photo to the rounded slot */
/* Facts band → ONE rounded dark card on the page background (the old
   full-bleed strip left odd background steps once tiles were rounded).
   The card is the content-width .wrap; tiles divide with 1px hairlines. */
.cy-np .facts { background: transparent; padding: 26px 0; }
.cy-np .facts .wrap {
    /* gold-tint bg shows through the 1px grid gaps = hairline dividers that
       work at 4/2/1 columns alike; padding 0 so the grid fills the card and
       the tint never shows as side gutters. */
    background: var(--green-line, rgba(238,214,163,.22));
    gap: 1px;
    padding: 0;
    /* No side padding on this .wrap (the tint bg would show as gutters), so
       cap the width to the CONTENT width of every other section — .wrap is
       1080px minus 2×32px gutters (2×22px below 980px). Keeps all blocks on
       one shared edge. */
    width: min(1016px, calc(100% - 64px));
    border-radius: 10px;
    overflow: hidden;
}
@media (max-width: 980px) {
    .cy-np .facts .wrap { width: calc(100% - 44px); }
}
.cy-np .fact { background: var(--green, #127749); }
.cy-np table.tbl {
    border-radius: 10px;
    overflow: hidden;                          /* clip cell corners */
    border-collapse: separate;                 /* collapse ignores border-radius */
    border-spacing: 0;
}

/* Topical FA icons in the benefit-card markers (set by content-widgets.js;
   unmatched cards keep the original diamond). */
.cy-np .bcard .mk--icon i {
    font-size: 15px;
    line-height: 1;
    color: var(--gold, #785813);
}

/* One shared container width (Denys, 2026-07-05): the pages' narrower
   variants (.wrap.narrow 780px, .conds 840px, .final .wrap 680px) now align
   with the standard 1080px .wrap so every block sits on the same edges. */
.cy-np .wrap.narrow { max-width: 1080px; }
.cy-np .conds { max-width: none; }
.cy-np .final .wrap { max-width: 1080px; }