/* one.com brand overlay — loads AFTER site.css / menu.css.
 * Honors DESIGN.md §9.2 CSS variable contract verbatim.
 * Light-only canvas; footer is sole sanctioned dark surface (user rule).
 */

/* ---- §9.2 CSS variable contract ---- */
:root {
  /* Surface & text */
  --color-bg-base:         #FFFFFF;
  --color-bg-elev-1:       #FFFFFF;
  --color-bg-elev-2:       #FFFFFF;
  --color-surface-dim:     #F7F7F7;
  --color-surface-muted:   #E2E2E2;
  --color-surface-warm:    #FFFDF8;
  --color-surface-mint:    #DBF9E4;
  --color-surface-mint-alt:#E0F8E5;

  --color-text-primary:    #141414;
  --color-text-secondary:  #69686B;
  --color-text-tertiary:   #949494;
  --color-text-on-accent:  #141414;

  --color-border-default:  #CECECE;
  --color-border-alt:      #E2E2E2;
  --color-border-soft:     #CCCBCB;
  --color-border-semantic: #007343;

  /* Accent & state */
  --color-accent:          #FEC600;
  --color-link:            #0066AA;

  /* Inversion — footer only */
  --color-invert-bg:       #002510;
  --color-invert-fg:       #F7F7F7;
  --color-invert-btn-bg:   #FEC600;
  --color-invert-btn-fg:   #141414;

  /* Elevation */
  --shadow-md:             0 4px 16px 0 rgba(60,60,60,0.1);
  --shadow-card:           none;

  /* Dot-grid (§4 distinctive) */
  --dot-color-dark:        rgba(0,192,112,0.3);
  --dot-color-light:       rgba(20,20,20,0.15);
  --dot-size:              1.5px;
  --dot-gap:               24px;

  /* Typography */
  --font-display:          'Outfit', 'Plus Jakarta Sans', Arial, sans-serif;
  --font-body:             'Plus Jakarta Sans', Arial, Verdana, sans-serif;
  --font-swap-scale:       0.92;
}

/* ---- §3 Global typography ---- */
html, body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  /* Neutralize any source body background-image (decorative SVG / fixed bg) */
  background-image: none;
  background-attachment: scroll;
}

/* Display scope: only major headings get Outfit. Body context <hN> stay at Plus Jakarta. */
h1, h2, h3, h4, h5, h6,
.kop, .tussenkop, .proposition,
.hero h1, .hero h2,
.packages h2, .packages h3, .packages .titel {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--color-text-primary);
}

/* §3.3 Hero-only display size — scoped so nested card <h3> don't inherit 72px */
.herobg h1, .kop {
  font-size: calc(72px * var(--font-swap-scale));
  line-height: 1.05;
  letter-spacing: -2.5px;
}
.herobg h2, .subkop {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
  font-family: var(--font-body);
  color: var(--color-text-primary);
}

/* ---- §2.6 Hero — LIGHT (user rule: light-only except footer) ---- */
/* Principle override: map said §1 dark hero, but dark-surface share is 22.3%,
   light-dominance 69.1% > 60% → hero must be LIGHT. */
.herobg {
  background-color: var(--color-surface-warm);
  background-image: radial-gradient(var(--dot-color-light) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: 0 0;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-alt);
}
.herobg .white, .herobg .darkgrey, .herobg .darkergrey, .herobg .lightgrey, .herobg .grey {
  color: var(--color-text-primary);
}
.herobg input, .herobg select, .herobg textarea {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-alt);
}

/* ---- §2.7 Decorative dark panels → demoted to mint w/ §4 dot-grid atmospheric treatment ---- */
.darkblue {
  background-color: var(--color-surface-mint);
  background-image: radial-gradient(var(--dot-color-light) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: 0 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-border-alt);
  border-bottom: 1px solid var(--color-border-alt);
}
.darkblue .white, .darkblue .lightgrey, .darkblue .grey,
.darkblue .darkgrey, .darkblue .darkergrey { color: var(--color-text-primary); }

.bluebase {
  background-color: var(--color-surface-mint-alt);
  color: var(--color-text-primary);
}
.bluebase .white { color: var(--color-text-primary); }

/* ---- Promo box (migration) — cream + dot-grid (was dark bg in source) ---- */
.promobox {
  background-color: var(--color-surface-warm);
  background-image: radial-gradient(var(--dot-color-light) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-alt);
  box-shadow: none;
}
.promobox .white, .promobox .lightgrey, .promobox .darkgrey { color: var(--color-text-primary); }
.promobox a.white { color: var(--color-link); text-decoration: underline; }
.promobox .bluebase { background-color: var(--color-surface-mint); }

/* ---- §2.1 Footer — sole sanctioned dark surface ---- */
footer.darkgrey, footer {
  background-color: var(--color-invert-bg);
  color: var(--color-invert-fg);
  border-top: none;
}
footer a { color: var(--color-invert-fg); transition: opacity 0.2s; }
footer a:hover { opacity: 0.7; }
footer .white, footer .darkgrey, footer .darkergrey { color: var(--color-invert-fg); }
footer .lightgrey, footer .grey { color: var(--color-text-tertiary); }

/* Zoned sitemap strip inside footer */
footer .sitemap {
  background-color: var(--color-surface-dim);
  color: var(--color-text-primary);
}
footer .sitemap a { color: var(--color-text-primary); }
footer .sitemap .lightgrey, footer .sitemap .grey { color: var(--color-text-secondary); }
footer .sitemap h3, footer .sitemap .kop { color: var(--color-text-primary); }

/* Zoned copyright band — white */
footer .copyright {
  background-color: var(--color-bg-base);
  color: var(--color-text-secondary);
}
footer .copyright a { color: var(--color-text-secondary); }
footer .copyright .lightgrey, footer .copyright p.lightgrey { color: var(--color-text-secondary); }

/* Speech-bubble (testimonial) is a white card inside dark footer — dark text on it */
footer .speech-bubble, footer .speech-bubble * { color: var(--color-text-primary); }
footer .speech-bubble i { color: var(--color-text-primary); }

/* #headlines links inside footer — source has .grey { !important } so match specificity */
footer ul#headlines a, footer ul#headlines a.grey, footer #headlines .grey {
  color: var(--color-invert-fg) !important;
}

/* ---- §4 Card recipe ---- */
.packages {
  background-color: var(--color-bg-elev-1);
  border: 1px solid var(--color-border-alt);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

/* §4 card-plan-recommended — Plus tier (highlighted_index=1) */
.packages.promopackage,
.eenderde.promobadge > .packages.promopackage {
  background-color: var(--color-surface-mint-alt);
  border: 2px solid var(--color-border-semantic);
}
/* Extend highlight to inner bg-utility sections (per skill guidance — discovered from source) */
.packages.promopackage .wit,
.packages.promopackage .lichtgrijs,
.packages.promopackage .feature {
  background-color: var(--color-surface-mint-alt);
}
.packages.promopackage .wittop { border-top-color: var(--color-border-semantic); }
.packages.promopackage .witbottom { border-bottom-color: var(--color-border-semantic); }

/* Badge: .weg inside .promobadge is "Meest gekozen" span. Scope-verified:
   direct-child combinator isolates from other .weg usages elsewhere. */
.promobadge { position: relative; }
.promobadge > .weg,
.promobadge > span.weg {
  display: inline-block;
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background-color: var(--color-border-semantic);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05px;
  line-height: 1.4;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Plus card elevation — brand §6 is flat, so translate instead of shadow */
.eenderde.promobadge > .packages.promopackage,
.packages.promopackage {
  transform: translateY(-4px);
}

/* Icon circles inside packages — brand green */
.packages .icon.barblue, .packages .icon.barred, .packages .icon.baryellow,
.packages .icon.bargreen, .packages .icon.blauw {
  background-color: var(--color-border-semantic);
  color: #FFFFFF;
}

/* Icon halo (box-shadow spread) must match the card's bg so it reads as a cutout,
   not a ring. Source uses a fixed hex; we adopt the card bg per context. */
.packages .icon { box-shadow: 0 0 0 15px var(--color-bg-elev-1); }
.packages.promopackage .icon,
.eenderde.promobadge > .packages.promopackage .icon {
  box-shadow: 0 0 0 15px var(--color-surface-mint-alt);
}

/* Divider line (.lijn): default cards need contrast against light bg → brand border.
   Highlighted card needs contrast against its own mint bg → brand green. */
.packages .lijn { background-color: var(--color-border-alt); }
.packages.promopackage .lijn,
.eenderde.promobadge > .packages.promopackage .lijn {
  background-color: var(--color-border-semantic);
}

/* ---- §4.3 Primary CTA ---- */
.knop, a.knop, .btn, button.knop, .koop, .koop a, a.koop {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  border: none;
  border-radius: 6px;
  transition: opacity 0.2s;
}
.knop:hover, .btn:hover, .koop:hover, a.koop:hover { opacity: 0.7; }
.knop, .koop, a.knop, a.koop { color: var(--color-text-on-accent) !important; }

/* ---- Header / nav — override source CSS custom prop values + cover all attribute variants ---- */
header, header[data-theme], header[data-theme="auto"],
header[data-theme="light"], header[data-theme="dark"] {
  --grey: var(--color-bg-base);
  --grey-dark: var(--color-bg-base);
  --white: var(--color-text-primary);
  --blue: var(--color-bg-base);
  --text: var(--color-text-primary);
  --shadow: none;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
}
header a, header nav a, header nav label { color: var(--color-text-primary); }
/* Override source's `header nav label { opacity: .8 }` which composites to grey-on-white look */
header nav label { opacity: 1; }
header nav a:hover, header nav label:hover { opacity: 0.7; }

/* Neutralize source's prefers-color-scheme:dark branch — brand is single-canvas light */
@media (prefers-color-scheme: dark) {
  header, header[data-theme], header[data-theme="auto"] {
    --grey: var(--color-bg-base);
    --grey-dark: var(--color-bg-base);
    --white: var(--color-text-primary);
    --blue: var(--color-bg-base);
    --text: var(--color-text-primary);
    --shadow: none;
  }
  header[data-theme="auto"] nav label, header[data-theme="dark"] nav label {
    color: var(--color-text-primary);
  }
  header[data-theme="auto"] nav label img, header[data-theme="dark"] nav label img {
    filter: none;
  }
  html, body {
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
  }
}

/* ---- Links ---- */
a { color: var(--color-link); transition: opacity 0.2s; }
a:hover { opacity: 0.7; }
.herobg a, .packages a, .promobox a { color: var(--color-link); }
.promopackage a.koop, .packages a.koop { color: var(--color-text-on-accent); }

/* ---- Utility class text colors ---- */
.darkgrey, .darkergrey { color: var(--color-text-primary); }
.grey { color: var(--color-text-secondary); }
.lightgrey { color: var(--color-text-secondary); }
.white { color: #FFFFFF; }

/* ---- §6.4 Borders ---- */
hr, .lijn { border-color: var(--color-border-alt); background-color: var(--color-border-alt); }

/* ---- Third-party shop bundle (gravity) — override palette custom properties at bundle root ---- */
.gv-activated, :root {
  --color-primary: var(--color-border-semantic);
  --color-cta: var(--color-accent);
  --color-secondary: var(--color-link);
  --color-button-bg-primary: var(--color-border-semantic);
  --color-button-bg-cta: var(--color-accent);
  --color-button-fg-on-primary: #FFFFFF;
  --color-button-fg-on-cta: var(--color-text-on-accent);
  --color-button-bg-upgrade: var(--color-border-semantic);
  --color-icon-upgrade-bg: var(--color-border-semantic);
  --color-loader-secondary: var(--color-surface-mint);
}