/* ===== Spin Sensation licht-thema (goedgekeurd 18-7-2026) ===== */
:root{
  --bg:#faf6ec !important;
  --container:#ffffff !important;
  --container-alt:#f3ecd9 !important;
  --text:#241d0e !important;
  --body:#5b5240 !important;
  --muted:#8a7e66 !important;
  --border:#e4dabe !important;
  --gold:#a8823a !important;       /* origineel #c9a84c wordt flets op licht */
  --gold-light:#8a6a28 !important;
  --gold-dim:#b89a55 !important;
}
body{background:#faf6ec !important;color:#241d0e !important}

/* navigatiebalk licht */
nav, .nav{background:rgba(250,246,236,.94) !important;border-color:#e4dabe !important}

/* logo: zwarte variant (bestand bestaat al in de repo) */
.ss-logo-img{content:url('../images/logo/spin-sensation-logo-2026-zwart.png')}
/* NB: pad relatief aan de CSS-file (css/ -> ../images/). */

/* photobooth.html: LED-kleuren-showcase, lichte studio-variant i.p.v. donkere achtergrond */
.led-showcase-img{content:url('../images/photobooth-led-kleuren-licht.webp?v=2')}

/* knoppen: goud met witte tekst; op hover wordt de achtergrond transparant, dus dan goud */
.btn-primary{color:#ffffff !important}
.btn-primary:hover{color:#8a6a28 !important}
.btn-ghost:hover{color:#ffffff !important}

/* knop-/badge-tekst die leunde op var(--bg) voor contrast tegen goud (klopte toen --bg donker was) */
.btn:hover,.nav-cta:hover,.cookie-btn-primary,.floating-phone:hover,
.modal-submit,.package-cta:hover,.package-featured .package-cta,.reviews-arrow:hover,.skip-to-main,
.email-popup-form button{color:#ffffff !important}

/* HOMEPAGE hero: ivoren fade i.p.v. hardgecodeerde donkergrijze waas; telefoons blijven scherp */
.home-hero-fade{background:
  linear-gradient(90deg, #faf6ec 0%, rgba(250,246,236,.95) 30%, rgba(250,246,236,.55) 48%, transparent 66%),
  linear-gradient(180deg, #faf6ec 0%, transparent 16%, transparent 84%, #faf6ec 100%),
  linear-gradient(270deg, #faf6ec 0%, transparent 12%) !important}

/* booth-minikaartjes onder de hero-CTA: wit i.p.v. donkergrijs glas */
.home-booth-card{background:rgba(255,255,255,.9) !important;border:1px solid #e4dabe !important}
.home-booth-card.active{background:rgba(168,130,58,.1) !important;border-color:rgba(168,130,58,.5) !important}

/* Google-reviewstrip: gouden overgangswaas i.p.v. ivoor-naar-zwart band */
.reviews-trust-strip{background:linear-gradient(180deg, #faf6ec 0%, #f3e7c6 55%, #ecd9a8 100%) !important;
  border-top:none !important;border-bottom:1px solid rgba(168,130,58,.15) !important}
.reviews-trust-strip *{color:#4a3e22 !important}
.reviews-trust-strip strong{color:#8a6a28 !important}

/* opdrachtgevers-carrousel: wit voor contrast met de ivoren pagina-achtergrond */
.clients{background:#ffffff !important}

/* fotokaarten (booth-choice): de foto-fade moet eindigen in de kaartkleur, en die is nu wit */
.booth-choice-img{background:#ffffff !important}
.booth-choice-zoom::after{background:linear-gradient(180deg, transparent 42%, rgba(250,246,236,.72) 74%, #ffffff 92%, #ffffff 100%) !important}

/* secties met hardgecodeerde donkere inline-achtergronden */
[style*="background:#0a0a0a"]{background:#f3ecd9 !important}
[style*="background:#111111"]{background:#ffffff !important}

/* donkergrijze zijfades -> subtiel goud */
[style*="rgba(17,17,17,.3)"]{background:linear-gradient(90deg, transparent 0%, rgba(201,168,76,.16) 100%) !important}

/* mobiel navigatiemenu (dropdown), zelfde donkere achtergrond als de oude .nav */
.nav-links{background:rgba(250,246,236,.98) !important}

/* mobiele sticky CTA-balk onderaan (alleen magazine-booth.html) */
.mobile-sticky-cta{background:rgba(250,246,236,.98) !important}

/* split-secties (foto/video naast tekst): randfade was donkergrijs, nu subtiel goud */
.split-image::after{background:linear-gradient(90deg, transparent 0%, rgba(201,168,76,.16) 100%) !important}
.split-video::after{background:linear-gradient(90deg, transparent 70%, rgba(201,168,76,.16) 100%) !important}

/* carousel-fotovignet: zwarte schaduw -> warme goudtint */
.carousel-item::after{background:linear-gradient(180deg, transparent 55%, rgba(90,74,42,.25) 100%) !important}

/* ===== magazine-booth.html: eigen variabelenschema (--surface/--text-primary/etc.), los van de rest van de site ===== */
:root{
  --dark:#faf6ec !important;
  --surface:#ffffff !important;
  --surface2:#f3ecd9 !important;
  --border:#e4dabe !important;
  --border-light:#ece2c8 !important;
  --text-primary:#241d0e !important;
  --text-body:#5b5240 !important;
  --text-muted:#8a7e66 !important;
  --text-dim:#8a7e66 !important;
}
/* tekst-op-goud-elementen die specifiek zijn voor deze pagina */
.cover-signature,.mobile-sticky-cta a,.modal-checkbox-row.checked .modal-checkbox::after{color:#ffffff !important}

/* hardgecodeerde donkere gradients (geen variabelen) */
body.magazine-booth-page .hero,.finale-section{background:radial-gradient(ellipse 100% 80% at 50% 0%, rgba(201,168,76,.12) 0%, transparent 65%),
  linear-gradient(160deg, #faf6ec 0%, #f3e7c6 50%, #faf6ec 100%) !important}
.partner-inner{background:linear-gradient(160deg, #f3ecd9 0%, #ece0bb 50%, #f3ecd9 100%) !important}
.gold-band{background:linear-gradient(90deg, #faf6ec 0%, #f3e7c6 20%, #ecd9a8 50%, #f3e7c6 80%, #faf6ec 100%) !important}
.how-step{background:linear-gradient(180deg, #faf6ec 0%, #f3ecd9 100%) !important}
/* pakketten-sectie (photobooth.html/magazine-booth.html): ivoren vlak met witte kaarten, zelfde opzet als videobooth.html */
.packages-bg{background:#faf6ec !important}
.package-card{background:#ffffff !important}
.package-card.featured{background:linear-gradient(180deg, rgba(201,168,76,.04) 0%, #ffffff 60%) !important}
/* video-placeholder/thumb: onbeladen videoscherm, bewust donker laten (zelfde als telefoon-placeholders) */
.video-placeholder{background:linear-gradient(160deg, #161410, #0a0800) !important}

/* addons-paneel (los in magazine-booth.html, .packages-addons in photobooth.html): zwarte overlay -> lichte kaart */
.addons-block,.packages-addons{background:#f3ecd9 !important}

/* ===== site-brede footer: hardgecodeerd #080808 op de meeste pagina's (over-ons, alle stadspagina's, werken-bij, blog) ===== */
footer,.site-footer{background:#ffffff !important}

/* ===== "press card" (Red Bull/NPO 3FM/etc.), alleen op index.html/faq.html/videobooth.html: gradient liep door naar hardgecodeerd donker ===== */
.press-card{background:
  radial-gradient(ellipse at center, rgba(201,168,76,.14) 0%, rgba(201,168,76,.05) 35%, transparent 75%),
  linear-gradient(180deg, #ffffff 0%, #ffffff 100%) !important}
.press-card:hover{background:
  radial-gradient(ellipse at center, rgba(201,168,76,.24) 0%, rgba(201,168,76,.08) 40%, transparent 75%),
  linear-gradient(180deg, #ffffff 0%, #f3ecd9 100%) !important}

/* ===== over-ons.html: twee inline secties met dezelfde donkere gradient-staart ===== */
[style*="var(--surface) 0%,#0e0c08"]{background:linear-gradient(180deg, #ffffff 0%, #f3ecd9 100%) !important}

/* ===== photobooth.html-specifiek ===== */
/* finale-CTA: hardgecodeerde donkere gradient (zelfde als magazine-booth's .hero, andere paginas' .cta-finale gebruiken al var()) */
body.photobooth-page .cta-finale{background:
  radial-gradient(ellipse 80% 70% at 50% 50%, rgba(201,168,76,.10) 0%, transparent 65%),
  linear-gradient(160deg, #faf6ec 0%, #f3e7c6 50%, #faf6ec 100%) !important}
/* backdrops-sectie ("Acht backdrops"): volledig donkere sectie + kaarten met lichte tekst-op-donker */
.backdrops-bg{background:linear-gradient(180deg, #faf6ec 0%, #f3ecd9 100%) !important}
.backdrop-tile{background:#ffffff !important}
.backdrop-name{color:#241d0e !important}
.backdrop-sub{color:#8a7e66 !important}
.backdrops-cta-row a:hover{color:#ffffff !important}

/* ===== FAQ-accordions site-breed: overal dezelfde boxed-card stijl (wit met rand) als magazine-booth.html/photobooth.html ===== */
.faq-list{border-top:none !important;display:flex !important;flex-direction:column;gap:10px !important}
.faq-item{background:#ffffff !important;border:1px solid var(--border) !important;padding:0 24px !important}

/* ===== Leesbaarheid serif-bodytekst in het lichte thema (site-breed) =====
   Cormorant Garamond op gewicht 300 wordt te dun in lopende tekst op een lichte
   achtergrond. We tillen alle serif-lopende-tekst (alinea's, quotes, bijschriften,
   subkoppen) naar gewicht 500. Grote paginakoppen (h1/h2/.section-title) blijven
   ongemoeid: daar is het dunne gewicht juist elegant en leesbaar.
   De donkere (live) site raakt dit NIET: staat alleen in het licht-thema. */
p[style*="var(--serif)"],
div[style*="var(--serif)"],
blockquote[style*="var(--serif)"],
cite[style*="var(--serif)"],
span[style*="var(--serif)"],
li[style*="var(--serif)"]{font-weight:500 !important}
/* blog-pull-quotes (class-based italic serif) */
article blockquote{font-weight:500 !important}
/* class-based serif lopende tekst (bijschriften, juridische subkop/CTA) */
.backdrops-footnote,.legal-hero-sub,.legal-footer-cta,.footer-brand p{font-weight:500 !important}
/* videobooth-intro stond italic in gedempt goud: rechtop en donkerbruin, gewicht 500 */
.hero-intro{font-weight:500 !important;color:#4a4029 !important;font-style:normal !important}
[style*="color:var(--gold-light)"][style*="var(--serif)"]{color:#4a4029 !important;font-weight:500 !important}

/* ---- Beeld in artikelen ---- */
.article-figure{
  margin:44px 0;
  position:relative;
}
.article-figure picture,
.article-figure img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  border-radius:2px;
}
.article-figure .fig-frame{
  position:relative;
  overflow:hidden;
  background:#151515;
}
.article-figure .fig-frame::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  pointer-events:none;
}
.article-figure figcaption{
  margin-top:14px;
  padding-left:16px;
  border-left:2px solid var(--gold,#b8934e);
  font-family:var(--sans,'Jost',sans-serif);
  font-size:13.5px;
  line-height:1.7;
  color:var(--muted,#7a7368);
}
.article-figure figcaption strong{
  color:var(--text,#2b2724);
  font-weight:500;
}
@media (max-width:700px){
  .article-figure{margin:32px 0}
  .article-figure figcaption{font-size:13px;padding-left:12px}
}