/* FrightFind.com brand overlay — pitch-black canvas, teal neon-glow on every CTA.
 * §9 CSS variable contract verbatim. No gradients. No backdrop-filter.
 * 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:         #000000;
  --color-bg-elev-1:       #081f22;
  --color-bg-elev-2:       #094742;
  --color-surface-dim:     #15383d;
  --color-surface-muted:   #2e4d52;
  --color-surface-near-black: #131e23;

  --color-text-primary:    #c7c7c5;
  --color-text-secondary:  #cecbc2;
  --color-text-tertiary:   #5d8b87;
  --color-text-on-accent:  #bce3e0;

  --color-border-default:  #c7c7c5;
  --color-border-alt:      #cecbc2;
  --color-border-semantic: #5d8b87;

  --color-accent:          #d21c19;
  --color-accent-hover:    #d21919;
  --color-accent-ring:     rgba(210, 28, 25, 0.18);
  --color-accent-teal:     #094742;
  --color-accent-teal-mid: #087669;

  --color-link:            #63aba1;
  --color-link-hover:      #bce3e0;
  --color-focus-ring:      #174EA6;

  --color-invert-bg:       #094742;
  --color-invert-fg:       #bce3e0;
  --color-invert-btn-bg:   rgba(16, 90, 84, 0.79);
  --color-invert-btn-fg:   #bce3e0;

  --color-heading-glow:    #caf7a6;
  --color-star:            #ffa417;
  --color-star-off:        #908e8e;

  --shadow-sm:             rgb(121, 90, 49) 2px 2px 4px 0px;
  --shadow-md:             rgb(0, 0, 0) -2px -2px 6px 0px, rgba(89, 80, 73, 0.6) 1px 1px 3px 0px;
  --shadow-lg:             rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
  --shadow-card:           var(--shadow-sm);
  --shadow-glow:           rgba(15, 147, 112, 0.75) 0px 0px 12px 0px;

  --font-display:          'Special Elite', 'Crimson Text', Georgia, serif;
  --font-body:             Arial, Helvetica, sans-serif;
}

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

/* Source header uses --blue, --grey-dark, --white, --text. The `header > nav` bg is
 * `var(--blue)`. Repaint to abyss teal (§4 brand nav surface). */
header, header[data-theme], header[data-theme="auto"], header[data-theme="light"], header[data-theme="dark"] {
  --blue:       var(--color-bg-elev-1);
  --text:       var(--color-text-on-accent);
  --fg:         var(--color-text-on-accent);
  --bg:         var(--color-bg-elev-1);
  --grey:       var(--color-surface-near-black);
  --grey-dark:  var(--color-bg-elev-1);
  --white:      var(--color-text-on-accent);
  --shadow:     none;
  background-color: var(--color-bg-elev-1) !important;
  color: var(--color-text-on-accent);
}
@media (prefers-color-scheme: dark) {
  header, header[data-theme], header[data-theme="auto"] {
    --blue:       var(--color-bg-elev-1);
    --text:       var(--color-text-on-accent);
    --bg:         var(--color-bg-elev-1);
    --white:      var(--color-text-on-accent);
  }
}

/* §3 Special Elite for display/heading/UI/CTA */
h1, h2, h3, h4, h5, h6,
.kop, .tussenkop, .proposition, .heading, .title,
button, .btn, .knop, .button {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* §3.2 Hero/section heading sizes — scoped only */
.hero h1, .herobg h1, .proposition, .kop, h1.loop-title {
  font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
}

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

/* Links — light teal */
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-teal-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover:not(.knop):not(.btn):not(.button) { color: var(--color-link-hover); }

/* Header nav labels — EXPLICIT misty-teal color (fix invisible labels from prior run) */
header nav, header nav a, header nav label,
header > nav, header > nav a, header > nav label,
nav a:not(.btn):not(.knop):not(.app-button) {
  color: var(--color-text-on-accent) !important;
  opacity: 1;
  text-decoration: none;
  font-family: var(--font-display);
}
header nav a:hover, header nav label:hover { opacity: 0.7; }

/* ---- Off-brand utility class overrides ---- */
.darkgrey, p.darkgrey, h1.darkgrey, h2.darkgrey, h3.darkgrey, h4.darkgrey,
span.darkgrey, a.darkgrey, .darkergrey {
  color: var(--color-text-primary) !important;
}
.lightgrey, p.lightgrey, span.lightgrey, a.lightgrey {
  color: var(--color-text-secondary) !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 / .content / .feature / .vink — flip to dark surfaces */
.wit, .content, .vink, .packages .feature, .packages.contentpackage > .wit {
  background-color: var(--color-surface-near-black) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-default);
}
.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, .wit div,
.content p, .content span, .content h1, .content h2, .content h3, .content h4,
.content li, .content a:not(.knop):not(.btn) {
  color: var(--color-text-primary) !important;
  background-color: transparent;
}
.wit .lightgrey, .content .lightgrey {
  color: var(--color-text-tertiary) !important;
}

.ratingyellow {
  background-color: var(--color-surface-near-black) !important;
  color: var(--color-star) !important;
}

/* Source page-section containers transparent — body bg shows through */
.rij, .volledig, .container, .container-wrap,
section, .row, .esp {
  background-color: transparent;
}

/* .bluebase → deep teal CTA panel (§4.2 brand inverted) */
.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 {
  background-color: var(--color-surface-near-black);
  color: var(--color-text-on-accent);
}
.darkblue {
  background-color: var(--color-surface-near-black) !important;
  color: var(--color-text-primary) !important;
  height: auto !important;
  min-height: 0;
}
.darkblue p, .darkblue li, .darkblue span,
.darkblue h1, .darkblue h2, .darkblue h3, .darkblue h4,
.darkblue a:not(.knop) {
  color: var(--color-text-primary) !important;
}
.darkblue .eenderde, .darkblue .helft, .darkblue .kwart {
  overflow: visible;
  width: auto;
  min-width: 0;
}

/* ---- §4.1 CTA Buttons — teal glass + neon glow (SIGNATURE) ---- */
.knop, .btn, button.btn, a.btn, .button:not(input.button),
.app-button, .app-cta {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.03em;
  border-radius: 5px;
  padding: 10px 28px;
  background-color: var(--color-invert-btn-bg);
  color: var(--color-invert-btn-fg);
  border: 1px solid transparent;
  box-shadow: var(--shadow-glow);
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.knop:hover, .btn:hover, a.btn:hover {
  opacity: 0.85;
  box-shadow: var(--shadow-glow), 0 0 20px rgba(15, 147, 112, 0.5);
}
.groteknop {
  font-size: 17.5px;
  padding: 12px 36px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  min-width: max-content;
}

/* ---- §4.2 Pricing tiers — NO padding/border (preserve floats) ---- */
.rij.mar40top > .eenderde {
  background-color: var(--color-surface-near-black);
  border-radius: 6px;
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--color-border-default);
  color: var(--color-text-primary);
}
.rij.mar40top > .eenderde p,
.rij.mar40top > .eenderde li,
.rij.mar40top > .eenderde span:not(.glyphicon),
.rij.mar40top > .eenderde h2,
.rij.mar40top > .eenderde h3 {
  color: var(--color-text-primary);
}

/* Highlighted Plus tier — inset box-shadow + signature glow (no width change) */
div.eenderde.promobadge {
  position: relative;
  border-radius: 6px;
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow), inset 0 0 0 2px var(--color-accent-teal-mid);
}
.promobadge > span {
  background-color: var(--color-accent) !important;
  color: #ffffff !important;
  border-radius: 5px;
  font-family: var(--font-display);
}
.promopackage {
  border-color: var(--color-accent-teal-mid) !important;
}

/* Force inner pricing-tier surfaces dark */
.packages.contentpackage > .wit,
.packages.contentpackage > .wit > .right50,
.packages.contentpackage > .wit > .left-30,
.wit.left-30, .wit.wittop, .wit.witbottom,
.wit > .right50, .wit > .left50, .wit .right50, .wit .left50,
.lijstje, ul.ticks, ul.ticks > li, ul.lijstje > li {
  background-color: var(--color-surface-near-black) !important;
  color: var(--color-text-primary) !important;
}
.lijstje *, ul.ticks *, ul.lijstje * {
  color: var(--color-text-primary) !important;
}

/* ---- §4.3 Footer — pitch black with sub-strips of near-black-teal ---- */
footer.darkgrey, footer {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
}
footer.darkgrey *, footer * {
  color: var(--color-text-primary);
}
footer .lightgrey, footer .lightgrey *,
footer.darkgrey .lightgrey, footer.darkgrey .lightgrey * {
  color: var(--color-text-secondary) !important;
}
footer .lightgrey:hover { color: var(--color-link-hover) !important; }
footer .footerblock .grey, footer.darkgrey .footerblock .grey {
  color: var(--color-text-primary) !important;
}

footer .copyright, footer.darkgrey .copyright,
footer .sitemap, footer.darkgrey .sitemap {
  background-color: var(--color-surface-near-black) !important;
  color: var(--color-text-primary) !important;
}
footer .copyright *, footer .sitemap * {
  color: var(--color-text-primary) !important;
}
footer .copyright .lightgrey, footer .sitemap .lightgrey,
footer .copyright a, footer .sitemap a {
  color: var(--color-text-secondary) !important;
  opacity: 1;
}
footer .sitemap .grey, footer .copyright .grey {
  color: var(--color-text-secondary) !important;
}

/* Speech-bubble (testimonial inside footer) — dark surface */
.speech-bubble, footer .speech-bubble, footer.darkgrey .speech-bubble {
  background-color: var(--color-surface-near-black) !important;
  color: var(--color-text-primary) !important;
  border-radius: 6px;
  padding: 16px;
}
.speech-bubble *, footer .speech-bubble *, footer.darkgrey .speech-bubble * {
  color: var(--color-text-primary) !important;
  background-color: transparent;
}

ul#headlines, ul#headlines li, ul#headlines a {
  color: var(--color-text-primary) !important;
}

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

/* Widget headings get the lime glow per §4 */
h3.widget-title, h1.center {
  color: var(--color-heading-glow) !important;
}

/* ---- Promo box — repaint dark with deep teal accent right ---- */
.promobox {
  border-radius: 6px;
  background-color: var(--color-surface-near-black) !important;
  background-image: none !important;
}
.borderradius18left, .borderradius18left1, .borderradius18left2, .borderradius18right {
  border-radius: 6px;
}
.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;
}

/* ---- Cards & inputs ---- */
.card, article, .box, .tile {
  background-color: var(--color-surface-near-black);
  border-radius: 6px;
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
}

/* §6.2 Listing image sepia warm-brown shadow (signature) */
.listing_img, .listing_img img,
article.post .listing_img,
.entry img {
  box-shadow: var(--shadow-sm);
}

input[type="text"], input[type="email"], input[type="search"],
input[type="password"], input[type="tel"], textarea, select {
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--color-border-semantic);
  border-radius: 4px;
  padding: 12px 16px;
  background-color: var(--color-surface-near-black);
  color: var(--color-text-primary);
}
input::placeholder, textarea::placeholder {
  color: var(--color-text-tertiary);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-accent-teal-mid);
  box-shadow: 0 0 0 4px rgba(15, 147, 112, 0.18);
}

/* ---- Glyphicons / icons ---- */
.glyphicon, i.glyphicon, span.glyphicon,
.tooltip .glyphicon, .feature .glyphicon, .info.glyphicon,
span.info.glyphicon {
  color: var(--color-text-tertiary) !important;
}
.bluebase .glyphicon, footer .glyphicon, footer.darkgrey .glyphicon {
  color: var(--color-invert-fg) !important;
}
.wit .glyphicon, .content .glyphicon, .promobadge .glyphicon,
.rij.mar40top > .eenderde .glyphicon {
  color: var(--color-text-tertiary) !important;
}

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

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

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

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

/* ---- Logo & illustration filters (skill §"Logo visibility") ---- */
/* Antagonist logo: white silhouette on the dark canvas */
header img, header .logo img,
nav > a img, header > nav img,
footer img, footer .logo img {
  filter: brightness(0) invert(0.92);
}
/* Truck illustration in promo-block — dim+desaturate for horror tonality */
.left50 lottie-player, .left50 img,
.promobox .left50 img, .promobox .left50 lottie-player {
  filter: brightness(0.65) saturate(0.45) sepia(0.3);
}
/* Inline SVG icons / illustrations — apply same dim treatment */
.imgres, img.imgres, .floatright.imgres {
  filter: brightness(0.7) saturate(0.5);
}
/* Lottie players elsewhere — also dim */
lottie-player {
  filter: brightness(0.7) saturate(0.5);
}

/* ---- Third-party shop bundle palette override ---- */
.gv-activated, :root {
  --color-primary:    var(--color-accent-teal);
  --color-cta:        var(--color-accent-teal);
  --color-secondary:  var(--color-accent-teal-mid);
}
.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: var(--color-invert-btn-bg) !important;
  color: var(--color-invert-btn-fg) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow) !important;
}
button.gv-button, .gv-button-cta {
  border-radius: 5px;
}
.gv-button:hover, .gv-button-cta:hover {
  opacity: 0.85;
}