/* ─────────────────────────────────────────────────────────────────────────
   ClickHouse brand overlay for antagonist.nl
   Source DESIGN.md: ~/.design/brands/clickhouse.com/DESIGN.md
   Dark-canvas brand (94% dark surfaces in dominant-colors). Hero stays dark.
   ───────────────────────────────────────────────────────────────────────── */

/* §9.5 CSS variable contract — dark-only theme, both states resolve identically */
:root,
[data-theme],
[data-theme="auto"],
[data-theme="light"],
[data-theme="dark"],
.gv-activated {
  /* Surface & text */
  --color-bg-base:        #1f1f1c;          /* §2.3 hero canvas warm dark */
  --color-bg-elev-1:      #282828;          /* §2.3 inputs, tab bg */
  --color-bg-elev-2:      #414141;          /* §2.3 borders, dividers */
  --color-surface-dim:    #131312;          /* §2.3 html root */
  --color-surface-muted:  #151515;          /* §2.3 footer / code bg */
  --color-text-primary:   #ffffff;
  --color-text-secondary: #dfdfdf;          /* §2.3 prose body */
  --color-text-tertiary:  #a0a0a0;          /* §2.3 muted icons / footer */
  --color-text-on-accent: #151515;          /* §7.2 dark on yellow */
  --color-border-default: rgba(65,65,65,0.8); /* §2.7 neutral border */
  --color-border-alt:     #4f5100;          /* §7.3 OLIVE — secondary btn */
  --color-border-semantic:rgba(65,65,65,0.8);

  /* Accent & state */
  --color-accent:         #faff69;          /* §2.1 primary-300 brand yellow */
  --color-accent-hover:   #eef400;          /* §2.1 primary-400 hover */
  --color-accent-bright:  #fbff46;          /* §2.1 primary-350 indicator */
  --color-accent-ring:    rgba(250,255,105,0.2);
  --color-link:           #faff69;          /* §3.6 link in dark prose */
  --color-focus-ring:     rgba(250,255,105,0.2);

  /* Inversion (yellow CTA band — not present on this page; kept for parity) */
  --color-invert-bg:      #faff69;
  --color-invert-fg:      #151515;
  --color-invert-btn-bg:  rgba(21,21,21,0.9);
  --color-invert-btn-fg:  #ffffff;

  /* Olive border family */
  --color-border-olive:        #4f5100;
  --color-border-olive-hover:  #9fa300;

  /* Elevation — §6.3 token mapping */
  --shadow-sm:           rgba(0,0,0,0.05) 0px 1px 2px 0px;
  --shadow-md:           rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px;
  --shadow-lg:           rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px;
  --shadow-card:         rgba(0,0,0,0.06) 0px 4px 4px 0px, rgba(0,0,0,0.14) 0px 4px 25px 0px inset;
  --shadow-glow:         rgba(251,255,70,0.2) 0px 25px 50px -12px;     /* §4.2 featured halo */
  --shadow-glow-hard:    rgb(251,255,70) 0px 4px 60px 0px;
  --shadow-ring-brand:   rgb(250,255,105) 0px 0px 0px 1px inset;
  --shadow-ring-neutral: rgba(65,65,65,0.8) 0px 0px 0px 1px inset;

  /* Radii — §7.14 */
  --radius-button: 4px;
  --radius-input:  6px;
  --radius-card:   8px;

  /* Type — §3.2 Inter primary, DM Sans as Basier Square public fallback */
  --font-display: "DM Sans", "Outfit", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "Inconsolata", ui-monospace, "JetBrains Mono", monospace;
}

/* Source's per-container theme tokens — override at SAME container so source
   rules resolve to brand without specificity battle. Source vars in §6 of
   skill: --grey, --grey-dark, --white, --blue, --text, --shadow, --background, --label.
   Cover header / :root / dark-mode media query branches. */
:root,
header,
header[data-theme],
header[data-theme="auto"],
header[data-theme="light"],
header[data-theme="dark"] {
  --grey:       var(--color-bg-elev-1);     /* was #f6f6f6 */
  --grey-dark:  var(--color-surface-muted); /* was #eee  */
  --white:      var(--color-bg-base);       /* was #fff — used as surface, not text */
  --blue:       var(--color-text-primary);  /* was #122e5c — used for text */
  --text:       var(--color-text-secondary);/* was #444 */
  --background: var(--color-bg-base);       /* was #f6f6f6 */
  --label:      var(--color-accent);        /* was #335ca8 (the source brand blue) */
  --shadow:     none;                       /* §6.6 brand uses tier shadows, not ambient */
}

/* Override source's @media(prefers-color-scheme: dark) values too — brand is
   dark-only so both pref states resolve identically. */
@media (prefers-color-scheme: dark) {
  :root,
  header,
  header[data-theme],
  header[data-theme="auto"],
  header[data-theme="light"],
  header[data-theme="dark"] {
    --grey:       var(--color-bg-elev-1);
    --grey-dark:  var(--color-surface-muted);
    --white:      var(--color-bg-base);
    --blue:       var(--color-text-primary);
    --text:       var(--color-text-secondary);
    --background: var(--color-bg-base);
    --label:      var(--color-accent);
    --shadow:     none;
  }
}

/* Page canvas — dark-canvas brand (§7.4 body is #1f1f1c exact) */
html, body {
  background-color: var(--color-bg-base);
  background-image: none;
  background-attachment: scroll;
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

/* ─── Typography (§3) ─────────────────────────────────────────────── */

body, p, li, td, th, input, textarea, select, button, label, a {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.kop, .tussenkop, .titel, .tagline, .proposition {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  text-shadow: none !important;       /* §3 — no light text-shadow on dark */
  letter-spacing: normal;             /* §3.5 letter-spacing reserved */
}

/* §3.4 hero H1 — Inter 900 only on actual hero, not every nested h1 */
.hero h1, .herobg h1 {
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: -0.01em;
}

code, pre, kbd, samp, .glyphicon, .icon {
  /* glyph icons keep their icon font; only true code uses Inconsolata */
}
code, pre, kbd, samp { font-family: var(--font-mono); }

/* Body links → brand yellow, but exclude buttons, nav, footer, card wrappers */
a:not(.knop):not(.app-button):not([class*="button"])
 :not([class*="card"]):not([class*="-card"])
 :not([class*="preview"]):not([class*="tile"])
 :not([class*="-link"]):not(.promolink):not(.imagelink) {
  color: var(--color-link);
}
a:not(.knop):hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}
/* Nav/menu/footer link colour inherits surface text color */
header a, nav a, footer a, .menu a, .sitemap a {
  color: inherit;
}
header a:hover, nav a:hover, .menu a:hover, footer a:hover, .sitemap a:hover {
  color: var(--color-accent);
}

/* ─── Utility text-color classes (off-brand sweep) ─────────────────── */
/* Source: .lightgrey #727074 / .darkgrey #1b1b1f / .darkergrey #1b1b1f /
   .grey varies / .wit #f4f3fa / .white #fff / .darkblue / .bluebase /
   .barblue. All used on light-canvas — flip to dark-canvas equivalents. */

.darkergrey { color: var(--color-text-primary) !important; }
.darkgrey   { color: var(--color-text-secondary) !important; }
.lightgrey  { color: var(--color-text-tertiary) !important; }
.grey       { color: var(--color-text-tertiary) !important; }
.white      { color: var(--color-text-primary); }

/* ─── Hero (§2.6 hero canvas warm dark) ────────────────────────────── */
.herobg {
  background: var(--color-bg-base);
  box-shadow: none;
  border-bottom: 1px solid var(--color-bg-elev-2);
}
.herobg h1, .herobg h2 {
  color: var(--color-text-primary);
}

/* §1 hero accent line — 1px brand-yellow strip across top of hero */
.herobg::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent-bright), transparent);
  position: absolute;
  top: 0; left: 0; right: 0;
}
.herobg { position: relative; }

/* ─── Promo box (Verhuisservice block) → brand feature card §4.2 ──── */
.promobox {
  background: rgba(20,20,20,0.5);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.bluebase {
  background-color: rgba(20,20,20,0.6) !important;
  color: var(--color-text-primary);
}
.bluebase h2, .bluebase .proposition {
  color: var(--color-text-primary);
}

/* Source uses .barblue as a coloured icon-bar bg.
   On pricing tier icons, brand pattern paints the circle BRAND-YELLOW with
   dark glyph (§4.5 #1 yellow chip). Inside other contexts → neutral. */
.barblue { background-color: var(--color-bg-elev-2) !important; }
.packages .icon.barblue {
  background-color: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
}
.packages .icon.barblue .glyphicon,
.packages .icon.barblue span {
  color: var(--color-text-on-accent) !important;
}

/* Tooltip info glyphs — light icon on dark card surface */
.packages .feature .tooltip .info,
.packages .feature .tooltip .glyphicon,
.feature .info.glyphicon {
  color: var(--color-text-tertiary) !important;
}
.packages .feature .tooltip .info:hover {
  color: var(--color-accent) !important;
}

/* ─── Pricing tier cards §4.2 CUI Feature / Pricing Plan Card ──────── */

/* Card-equivalent containers — sweep ALL light-bg source surfaces.
   Source uses #fffbff and #f4f3fa as the dominant light card / panel color.
   Override every container that paints them. */
.packages.contentpackage > .wit,
.packages > .wit,
.wit,
.contentpackage,
.content,
.lijstje,
.medewerker,
.notetip,
.notenote,
.noteclassic,
.tableprice,
details summary,
details[open] p {
  background-color: rgba(20,20,20,0.5) !important;
  background-image: none !important;
  color: var(--color-text-secondary) !important;
  border-radius: var(--radius-card);
}

/* Headings + body inside light-card-equivalent containers — surface-light text */
.contentpackage h1, .contentpackage h2, .contentpackage h3, .contentpackage h4,
.content h1, .content h2, .content h3, .content h4,
.lijstje h1, .lijstje h2, .lijstje h3, .lijstje h4,
.medewerker h1, .medewerker h2, .medewerker h3, .medewerker h4,
.contentpackage strong, .content strong,
.contentpackage p, .content p, .lijstje p {
  color: var(--color-text-primary);
  text-shadow: none !important;
}
.contentpackage .lightgrey, .content .lightgrey,
.contentpackage .grey, .content .grey {
  color: var(--color-text-tertiary) !important;
}
.contentpackage a:not(.knop), .content a:not(.knop),
.lijstje a:not(.knop) {
  color: var(--color-link);
}

/* §4.2 cards get the inset shadow recipe */
.packages {
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card);
  background: rgba(20,20,20,0.5);
}

/* §9 plan card 4px yellow top-stripe — every pricing tier card */
.packages::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--color-accent);
  z-index: 100;
}

/* Card section borders */
.wittop  { border-top:    1px solid var(--color-border-default) !important; }
.witbottom { border-bottom: 1px solid var(--color-border-default) !important; }

/* Feature row — slightly darker than card surface for layering */
.packages .feature {
  background: rgba(20,20,20,0.3);
  color: var(--color-text-secondary);
  border-radius: var(--radius-card);
  border: 1px solid rgba(65,65,65,0.4);
}
.packages .vink {
  color: var(--color-text-secondary) !important;
  text-shadow: none;
}
.packages .titel {
  color: var(--color-text-primary) !important;
  text-shadow: none !important;
}
.packages .icon {
  color: var(--color-text-on-accent);
  background-color: var(--color-accent);
  /* halo recipe matches card bg — §6 "Card icon halo" rule */
  box-shadow: 0 0 0 15px #1f1f1c !important;
}
.packages .lijn {
  background-color: var(--color-border-default) !important;
}

/* Tooltip overlays inside features — paint dark surface */
.tooltiptext {
  background: var(--color-bg-elev-1) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border-default) !important;
  box-shadow: var(--shadow-md) !important;
}
.tooltiptext h3 { color: var(--color-text-primary) !important; }
.tooltiptext .close { color: var(--color-text-tertiary); }

/* ─── Featured pricing tier (Plus) §4.2 — yellow border + glow ───── */

.promopackage {
  border: 1px solid var(--color-accent) !important;
  margin: 0 !important;
  box-shadow: var(--shadow-glow) !important;
}
.promopackage::before {
  background: var(--color-accent);   /* highlighted top-stripe stays yellow */
}
/* Halo on featured icon matches the slightly darker featured-card surface */
.promopackage .packages .icon,
.promopackage .icon {
  box-shadow: 0 0 0 15px rgba(20,20,20,0.8) !important;
}

/* Promo "Meest gekozen" badge §2.6 — yellow with dark text, brand-yellow */
.promobadge > span {
  background-color: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: normal;
  border-radius: var(--radius-button);
  padding: 4px 16px;
  box-shadow: var(--shadow-glow-hard);
}

/* ─── Buttons §4.1 Primary CTA ──────────────────────────────────────── */

.knop, .knop.groteknop, .knop.middelknop, .knop.knop260, .knop.knop160 {
  background-color: var(--color-accent) !important;
  background-image: none !important;
  color: var(--color-text-on-accent) !important;
  border: 1px solid var(--color-accent) !important;
  border-bottom: 1px solid var(--color-accent) !important;
  border-radius: var(--radius-button) !important;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: normal;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1) !important;
}
.knop:hover {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  color: var(--color-text-on-accent) !important;
  top: 0 !important;                  /* kill source's :hover top-shift */
  box-shadow: var(--shadow-glow-hard) !important;
}
.knop.disabled, .knop[disabled] {
  background-color: var(--color-bg-elev-2) !important;
  border-color: var(--color-bg-elev-2) !important;
  color: var(--color-text-tertiary) !important;
}

/* Form/input swap to dark §4.4 */
input[type="text"], input[type="email"], input[type="search"], input[type="url"],
input[type="tel"], input[type="number"], input[type="password"], textarea, select {
  background-color: var(--color-bg-elev-1) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-bg-elev-2) !important;
  border-radius: var(--radius-input) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-accent) !important;
  outline: none !important;
}
::placeholder { color: var(--color-text-tertiary) !important; }

/* ─── Decorative dark panels (.darkblue, #keuzehulp) §2.6 ──────────── */
.darkblue {
  background-color: rgba(20,20,20,0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
}
.darkblue h1, .darkblue h2, .darkblue h3,
.darkblue .proposition, .darkblue p {
  color: var(--color-text-primary);
}

/* ─── Footer §2.3 footer-dark ──────────────────────────────────────── */
footer, footer.darkgrey, .footer,
footer .sitemap, footer table, .email-footer {
  background-color: var(--color-surface-muted) !important;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-bg-elev-2);
}
footer .wit, footer .lijstje { background-color: var(--color-bg-base) !important; }
footer h1, footer h2, footer h3, footer h4, footer .titel,
footer .darkgrey, footer .darkergrey {
  color: var(--color-text-primary) !important;
}
footer a, footer .lightgrey, footer .grey {
  color: var(--color-text-tertiary) !important;
}
footer a:hover { color: var(--color-accent) !important; }

/* ─── Header / nav (§4.3) ──────────────────────────────────────────── */
header,
header[data-theme="auto"],
header[data-theme="light"],
header[data-theme="dark"] {
  background-color: rgba(20,20,20,0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
/* Source paints nav background via radio-button trick → override at same
   selector so var lookup hits brand surface. */
header > input[type="radio"]:not(:checked) ~ nav,
header > input[type="radio"]:checked ~ nav,
header nav {
  background-color: rgba(20,20,20,0.85) !important;
  color: var(--color-text-primary) !important;
}
header nav a, header nav label {
  color: var(--color-text-primary) !important;
  background: transparent !important;
  background-image: none !important;
  opacity: 1 !important;                       /* §6 — kill source nav opacity */
  text-shadow: none !important;
}
header nav label:not(:last-of-type)::after {
  color: var(--color-text-primary) !important; /* tooltip-after labels */
}
header nav a:hover, header nav label:hover {
  background-color: rgba(255,255,255,0.05) !important;
  color: var(--color-accent) !important;
  opacity: 1 !important;
}
header * { text-shadow: none !important; }

/* Logo — invert source PNG so it reads on dark canvas */
header img[alt*="logo" i],
header img[title*="Home" i] {
  filter: brightness(0) invert(1);
}

/* ─── Notes / status surfaces — keep semantic meaning (§7.9) ────── */
.notetip {
  background-color: rgba(0,202,72,0.08) !important;
  outline: 2px dashed #00ca48 !important;
  color: var(--color-text-primary);
}

/* ─── GravityView shop bundle scope override (.gv-activated) ─────── */
/* Bundle's semantic: gray-900 = darkest (used as default text color on light bg).
   For dark canvas we INVERT: darkest semantics = lightest pixel values. */
.gv-activated {
  --color-primary:        var(--color-accent);
  --color-cta:            var(--color-accent);
  --color-secondary:      var(--color-accent-bright);
  --color-surface-accent: var(--color-accent);
  --color-surface-accent-light: var(--color-bg-elev-1);
  --color-surface-highlight:    var(--color-bg-base);
  /* Inverted gray scale — text-roles map to LIGHT, surface-roles map to DARK */
  --color-gray-100:       var(--color-bg-base);          /* was #fff (lightest surface) */
  --color-gray-200:       var(--color-surface-muted);    /* was #f7f7f7 */
  --color-gray-250:       var(--color-bg-elev-1);        /* was #f1f1f1 */
  --color-gray-300:       var(--color-bg-elev-2);        /* was #e2e2e2 */
  --color-gray-400:       var(--color-text-tertiary);    /* was #cecece — muted */
  --color-gray-500:       var(--color-text-secondary);   /* was #69686b — body alt */
  --color-gray-600:       var(--color-text-secondary);   /* was #3a383e — text */
  --color-gray-650:       var(--color-text-primary);     /* was #312f34 */
  --color-gray-700:       var(--color-text-primary);     /* was #282629 */
  --color-gray-800:       var(--color-text-primary);     /* was #1e1d1f */
  --color-gray-900:       var(--color-text-primary);     /* was #141414 (darkest text) */
  --color-button-bg-upgrade: var(--color-accent-hover);
  /* Body-on tokens (some bundle versions expose these directly) */
  --color-body-on-default: var(--color-text-primary);
  --color-body-on-inverted: var(--color-text-primary);
  --color-body-on-alternative: var(--color-text-secondary);
}

/* Sweep gravity-bundle remaining hex literals that aren't tokenised */
.gv-activated [class*="primary"]    { color: var(--color-accent); }
.gv-activated [class*="cta"]        { background-color: var(--color-accent); color: var(--color-text-on-accent); }
.gv-activated h1, .gv-activated h2,
.gv-activated h3, .gv-activated h4 { color: var(--color-text-primary); }

/* ─── Lottie / decorative — let source SVG colors stand inside cards */

/* ─── Misc source-specific ─────────────────────────────────────────── */
.fadedpackage { opacity: 0.85; }     /* keep source faded behaviour but lift slightly */
.lijn { background-color: var(--color-border-default) !important; }

/* Inline help/price links inside feature rows — source paints #335ca8 navy
   text. On dark surface that's invisible. Map to brand yellow per §3.6. */
.feature .help, .feature .helplink, .feature .helptext,
.packages .feature a, .help, .helplink {
  color: var(--color-link) !important;
}

/* Testimonial speech-bubble — light bg leaks light-on-light */
.speech-bubble, .speech-bubble *, .footerblock blockquote, .footerblock .speech-bubble {
  background-color: rgba(20,20,20,0.5) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border-default) !important;
}
.speech-bubble::after, .speech-bubble::before {
  background-color: rgba(20,20,20,0.5) !important;
  border-color: var(--color-border-default) !important;
}

/* Copyright + sub-footer line (.copyright) — source paints #faf9ff bg */
.copyright, .copyright *, .copyright .lightgrey {
  background-color: var(--color-surface-muted) !important;
  color: var(--color-text-tertiary) !important;
}
.copyright a { color: var(--color-text-tertiary) !important; }
.copyright a:hover { color: var(--color-accent) !important; }

/* GravityView basket icon — small badge in header */
header app-basket-icon, header app-basket-icon * {
  color: var(--color-text-primary) !important;
  background-color: transparent !important;
}
header app-basket-icon .gv-amount,
header app-basket-icon .gv-btn-cart .gv-amount {
  background-color: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  border-radius: 9999px;
}

/* §6.6 — eliminate source backdrop-blur on non-nav surfaces */
.darkblue, .promobox, .wit, .feature {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ─── Global cursor halo (DESIGN.md §4.5 #16) ──────────────────────────
   Detected via effects.json runtime probe: 5 mousemove + 8 pointermove
   listeners on window/document/#__next on the brand site. Implementation
   pattern was AMBIGUOUS in the static scrape; a soft yellow radial halo
   is the most brand-consistent interpretation (dynamic version of §4.5 #8
   "Yellow Glow Pulse") and respects §7.6 one-glow-per-viewport budget.
   --mouse-x / --mouse-y are written by clickhouse-cursor.js on mousemove. */
body {
  --mouse-x: 50%;
  --mouse-y: 50%;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y),
    rgba(250, 255, 105, 0.10),
    rgba(250, 255, 105, 0.04) 30%,
    transparent 60%
  );
  mix-blend-mode: screen;
  transition: opacity 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
}