/* Barbie.com brand overlay — light canvas, hot pink as primary surface.
 * §9 CSS variable contract verbatim. No gradients (§7).
 * Reslop is a paint layer — no padding/border-width changes on layout containers
 * (preserves source's float-based 3-up pricing layout).
 */

/* ---- §9 CSS variable contract ---- */
:root {
  --color-bg-base:         #ffffff;
  --color-bg-elev-1:       #ffffff;
  --color-bg-elev-2:       #f5f5f7;
  --color-surface-dim:     #ebebeb;
  --color-surface-muted:   #e1e1e1;

  --color-text-primary:    #000000;
  --color-text-secondary:  #333333;
  --color-text-tertiary:   #62656a;
  --color-text-on-accent:  #ffffff;

  --color-border-default:  rgba(14, 14, 14, 0.1);
  --color-border-alt:      #f5f5f7;
  --color-border-semantic: #c5c5c5;

  --color-accent:          #ff3eb5;
  --color-accent-hover:    #ff3db3;
  --color-accent-warm:     #f747b7;
  --color-accent-soft:     #f395c7;
  --color-accent-pale:     #ffd8ef;
  --color-accent-ring:     rgba(255, 62, 181, 0.18);

  --color-link:            #000000;
  --color-focus-ring:      #3699f1;

  --color-invert-bg:       #ff3eb5;
  --color-invert-fg:       #ffffff;
  --color-invert-btn-bg:   #ffffff;
  --color-invert-btn-fg:   #333333;

  --cta-bg-color:          #1a1a1a;
  --cta-color:             #ffffff;
  --cta-border-color:      #1a1a1a;
  --cta-border-radius:     50px;

  --shadow-sm:             0 0.5rem 1rem 0 rgba(0, 0, 0, 0.04);
  --shadow-md:             0 0 10px 3px rgba(122, 122, 122, 0.2);
  --shadow-lg:             0 0.125rem 0.75rem rgba(0, 0, 0, 0.6);
  --shadow-card:           var(--shadow-sm);
  --shadow-glow:           none;

  --font-display:          'DM Sans', 'Outfit', Arial, sans-serif;
  --font-body:             'Work Sans', Arial, sans-serif;
}

/* ---- Global canvas ---- */
html, body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  background-image: none;
  background-attachment: scroll;
}

/* Source header uses --blue, --grey-dark, --white, --text, --grey, --shadow.
 * The `header > nav` bg is `var(--blue)`. Repaint to Barbie pink (§4 brand sub-nav). */
header, header[data-theme], header[data-theme="auto"], header[data-theme="light"], header[data-theme="dark"] {
  --blue:       var(--color-accent);
  --text:       var(--color-invert-fg);
  --fg:         var(--color-invert-fg);
  --bg:         var(--color-accent);
  --grey:       var(--color-surface-dim);
  --grey-dark:  var(--color-surface-muted);
  --white:      var(--color-bg-base);
  --shadow:     none;
}
@media (prefers-color-scheme: dark) {
  header, header[data-theme], header[data-theme="auto"] {
    --blue:       var(--color-accent);
    --text:       var(--color-invert-fg);
    --bg:         var(--color-accent);
    --grey-dark:  var(--color-surface-muted);
    --white:      var(--color-bg-base);
  }
}
/* Header logo: white silhouette on pink nav */
header > nav > a img, header > nav img,
header[data-theme="auto"] img,
header img {
  filter: brightness(0) invert(1);
}

h1, h2, h3, h4, h5, h6,
.kop, .tussenkop, .proposition, .heading, .title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--color-text-primary);
}

/* §3.2 Hero/section heading sizes — scoped only */
.hero h1, .herobg h1, .proposition, .kop {
  font-size: clamp(2.625rem, 4vw + 1rem, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.4px;
}

p, li, span, label, td {
  font-family: var(--font-body);
  letter-spacing: -0.4px;
  color: var(--color-text-primary);
}
input, textarea, select { letter-spacing: normal !important; }

/* Links — primary text + pink underline */
a:not(.knop):not(.btn):not(.button):not([class*="-card"]):not([class*="-tile"]):not([class*="-preview"]):not([class*="-teaser"]):not(.app-button) {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
a:hover:not(.knop):not(.btn):not(.button) {
  color: var(--color-accent);
}

header nav a, header nav label,
nav a:not(.btn):not(.knop):not(.app-button) {
  color: inherit;
  opacity: 1;
}
header nav a:hover, header nav label:hover { opacity: 0.7; }

/* §4 brand sub-nav saturation: header > nav is the Barbie pink strip. No body::before
 * needed — the source's header navigation IS the brand's sub-nav strip when repainted. */

/* ---- Off-brand text utility class overrides ---- */
.darkgrey, .darkergrey,
p.darkgrey, p.darkergrey, h1.darkgrey, h2.darkgrey, h3.darkgrey, h4.darkgrey,
span.darkgrey, a.darkgrey {
  color: var(--color-text-primary) !important;
}
.lightgrey, p.lightgrey, span.lightgrey, a.lightgrey {
  color: var(--color-text-tertiary) !important;
}
.grey, p.grey, span.grey, a.grey, h3.grey {
  color: var(--color-text-secondary) !important;
}
.white, .text-white, .heading-white,
p.white, h1.white, h2.white, h3.white, span.white {
  color: var(--color-text-primary) !important;
}
.wit {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
}
.wit p, .wit span, .wit h1, .wit h2, .wit h3, .wit h4, .wit h5, .wit h6,
.wit a:not(.knop):not(.btn), .wit li, .wit label {
  color: var(--color-text-primary) !important;
}
.wit .lightgrey { color: var(--color-text-tertiary) !important; }

/* .bluebase → Barbie pink signature inversion surface */
.bluebase {
  background-color: var(--color-invert-bg) !important;
  color: var(--color-invert-fg) !important;
}
.bluebase p, .bluebase li, .bluebase span,
.bluebase h1, .bluebase h2, .bluebase h3, .bluebase h4,
.bluebase a:not(.knop) {
  color: var(--color-invert-fg) !important;
}

/* .barblue → soft pink secondary accent */
.barblue {
  background-color: var(--color-accent-soft);
  color: var(--color-text-primary);
}

/* .darkblue → white (demoted, no atmospheric per Barbie's flat brand) */
.darkblue {
  background-color: var(--color-bg-base) !important;
  color: var(--color-text-primary) !important;
}
.darkblue h1, .darkblue h2, .darkblue h3, .darkblue h4,
.darkblue p, .darkblue li, .darkblue span, .darkblue a:not(.knop) {
  color: var(--color-text-primary) !important;
}

/* ---- §4.1 Buttons (default dark CTA recipe — §4.1 brand-spec) ---- */
.knop, .btn, button.btn, a.btn, .button:not(input.button),
.app-button, .app-cta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0.33px;
  border-radius: var(--cta-border-radius);
  padding: 10px 32px;
  background-color: var(--cta-bg-color);
  color: var(--cta-color);
  border: 1px solid var(--cta-border-color);
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.knop:hover, .btn:hover, a.btn:hover {
  background-color: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}
.groteknop {
  font-size: 20px;
  padding: 12px 40px;
  white-space: nowrap;
  min-width: max-content;
}

/* CTA on pink surface inverts: white button with dark text */
.bluebase .knop, .bluebase .btn,
footer .knop, footer.darkgrey .knop {
  background-color: var(--color-invert-btn-bg);
  color: var(--color-invert-btn-fg);
  border-color: var(--color-invert-btn-bg);
}
.bluebase .knop:hover, footer.darkgrey .knop:hover {
  background-color: transparent;
  color: var(--color-invert-fg);
  border-color: var(--color-invert-btn-bg);
}

/* ---- §4.2 Pricing tiers — NO padding/border (preserve content-box float layout) ---- */
.rij.mar40top > .eenderde {
  background-color: var(--color-bg-elev-1);
  border-radius: 16px;
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-border-default);
}

/* Highlighted Plus tier — inset box-shadow border (no width change) */
div.eenderde.promobadge {
  position: relative;
  border-radius: 16px;
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), inset 0 0 0 2px var(--color-accent);
}
.promobadge > span {
  background-color: var(--color-accent) !important;
  color: var(--color-invert-fg) !important;
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.14px;
}
.promopackage {
  border-color: var(--color-accent) !important;
}

/* ---- §4.3 Footer — Barbie pink signature inversion ---- */
footer.darkgrey, footer {
  background-color: var(--color-invert-bg);
  color: var(--color-invert-fg);
}
footer.darkgrey *, footer * {
  color: var(--color-invert-fg);
}
footer .lightgrey, footer .lightgrey *,
footer.darkgrey .lightgrey, footer.darkgrey .lightgrey * {
  color: var(--color-invert-fg) !important;
  opacity: 0.85;
}
footer .lightgrey:hover { opacity: 1; }
footer .darkgrey, footer.darkgrey .darkgrey {
  color: var(--color-invert-fg) !important;
}
footer .grey, footer.darkgrey .grey,
footer .footerblock .grey {
  color: var(--color-invert-fg) !important;
}

/* footer .copyright + footer .sitemap — light sub-strips inside the pink footer */
footer .copyright, footer.darkgrey .copyright,
footer .sitemap, footer.darkgrey .sitemap {
  background-color: var(--color-bg-base) !important;
  color: var(--color-text-primary) !important;
}
footer .copyright *, footer .sitemap * {
  color: var(--color-text-primary) !important;
}
footer .copyright .lightgrey, footer .copyright a.lightgrey,
footer .sitemap .lightgrey, footer .sitemap a.lightgrey,
footer .copyright .lightgrey *, footer .copyright p.lightgrey > span,
footer .copyright p.lightgrey > a, footer .sitemap .lightgrey *,
footer .copyright span.wegger, footer .copyright span.weg {
  color: var(--color-text-tertiary) !important;
  opacity: 1;
}
footer .copyright .grey, footer .sitemap .grey,
footer .copyright h3.grey, footer .sitemap h3.grey {
  color: var(--color-text-secondary) !important;
}

/* Speech-bubble (testimonial) inside pink footer — keeps its own light bg with dark text */
.speech-bubble, footer .speech-bubble, footer.darkgrey .speech-bubble {
  background-color: var(--color-bg-base) !important;
  color: var(--color-text-primary) !important;
  border-radius: 12px;
  padding: 16px;
}
.speech-bubble *, footer .speech-bubble *, footer.darkgrey .speech-bubble * {
  color: var(--color-text-primary) !important;
  background-color: transparent;
}

/* .darkblue eenderde overflow fix (button text inside dark panel column) */
.darkblue .eenderde, .darkblue .helft, .darkblue .kwart {
  overflow: visible;
  width: auto;
  min-width: 0;
}
.darkblue { height: auto !important; min-height: 0; }

/* ---- Promo box — source bg #1d427f navy → repaint white with pink accent right ---- */
.promobox {
  border-radius: 12px;
  background-color: var(--color-bg-base) !important;
  background-image: none !important;
}
.borderradius18left, .borderradius18left1, .borderradius18left2, .borderradius18right {
  border-radius: 12px;
}
.right50.bluebase, .promobox .right50.bluebase {
  background-color: var(--color-invert-bg) !important;
  color: var(--color-invert-fg) !important;
  height: auto !important;
  min-height: 0;
  padding-bottom: 24px;
}
.right50.bluebase *, .promobox .right50.bluebase * {
  color: var(--color-invert-fg) !important;
}

/* ---- Hero band ---- */
.herobg, .hero {
  background-color: var(--color-bg-base);
  background-image: none;
  color: var(--color-text-primary);
}

/* ---- Cards & inputs ---- */
.card, article, .box, .tile {
  background-color: var(--color-bg-elev-1);
  border-radius: 16px;
  border: 1px solid var(--color-border-default);
}
input[type="text"], input[type="email"], input[type="search"],
input[type="password"], input[type="tel"], textarea, select {
  font-family: var(--font-body);
  font-size: 16px;
  border: 1px solid var(--color-border-semantic);
  border-radius: 6px;
  padding: 12px 16px;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-ring);
}

/* ---- Modal scrims ---- */
.modal-overlay, .overlay, dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

/* ---- Effects removal — no gradients per §7 ---- */
[class*="gradient"] { background-image: none !important; }

/* ---- Tinted hairlines per §2.6 ---- */
hr, .lijn, .divider {
  border: none;
  height: 1px;
  background-color: var(--color-border-default);
}

/* ---- Card-as-link wrapper exclusion ---- */
a[class*="-card"], a[class*="-tile"], a[class*="-preview"], a[class*="-teaser"] {
  color: inherit;
  text-decoration: none;
}

/* ---- Logo filter (skill §"Logo visibility") ---- */
/* Original colored logo on white canvas (header) — leave as-is, visible. */
/* Logo on Barbie-pink footer — invert to white silhouette */
footer img, footer .logo img,
footer.darkgrey img, footer.darkgrey .logo img {
  filter: brightness(0) invert(1);
}

/* ---- Glyphicons — visible on light surfaces, invert on pink ---- */
.glyphicon, i.glyphicon, span.glyphicon,
.tooltip .glyphicon, .feature .glyphicon, .info.glyphicon,
span.info.glyphicon {
  color: var(--color-text-secondary) !important;
}
.bluebase .glyphicon, footer .glyphicon, footer.darkgrey .glyphicon {
  color: var(--color-invert-fg) !important;
}
footer .copyright .glyphicon, footer .sitemap .glyphicon {
  color: var(--color-text-secondary) !important;
}

/* Reclaim white within all pink-painted containers */
.bluebase .white, footer .white, footer.darkgrey .white {
  color: var(--color-invert-fg) !important;
}
ul#headlines, ul#headlines li, ul#headlines a {
  color: var(--color-invert-fg) !important;
}

/* ---- Third-party shop bundle (GravityView) palette override ---- */
.gv-activated, :root {
  --color-primary:   var(--color-accent);
  --color-cta:       #1a1a1a;
  --color-secondary: var(--color-accent-soft);
}
.gv-button, .gv-button-cta, button.gv-button,
app-product .gv-button, app-product .gv-button-cta,
app-product button.gv-button-cta,
app-product.gv-activated button.gv-button,
button.gv-button *, .gv-button-cta * {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border-color: #1a1a1a !important;
}
button.gv-button, .gv-button-cta {
  border-radius: 50px;
}
.gv-button:hover, .gv-button-cta:hover,
.gv-button:hover *, .gv-button-cta:hover * {
  background-color: var(--color-accent) !important;
  color: #ffffff !important;
}