/*
Theme Name: Dine 'n Dance 2026
Description: Event-thema voor Dine 'n Dance 2026 (child van Astra). Alle teksten en foto's zijn bewerkbaar via ACF-velden in het beheer. Ontwerp ligt vast in de templates.
Author: Ardan V0ss
Template: astra
Version: 2.0
*/

/* === Dine 'n Dance — Lions Sint-Joris-Winge === */
:root{
  --purple:#1F1A22;       /* warm near-black with hint of cool */
  --purple-dark:#14101A;
  --gold:#C9A961;         /* antique gold — primary accent */
  --gold-light:#E3CC92;
  --gold-deep:#A88940;
  --ivory:#FAF7F2;
  --cream:#F2EDE2;
  --charcoal:#2C2C2C;
  --muted:#6B6258;
  --line:rgba(31,26,34,0.12);
  --lions:#56247E;        /* Lions purple — tiny accents only */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--purple-dark)}
body{color:var(--charcoal);font-family:'Lato','Helvetica Neue',sans-serif;font-weight:300;line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;font-weight:500;color:var(--purple);line-height:1.2}
h1{font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-0.5px}
h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:1rem}
h3{font-size:1.4rem;margin-bottom:0.6rem}
p{margin-bottom:1rem;color:var(--charcoal)}
a{color:var(--purple);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold)}
img{max-width:100%;display:block}

.container{max-width:1140px;margin:0 auto;padding:0 2rem}
.narrow{max-width:780px;margin:0 auto;padding:0 2rem}

/* === Header === */
header.site{position:sticky;top:0;z-index:50;background:var(--purple-dark);border-bottom:none}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;max-width:1280px;margin:0 auto;gap:1.5rem;flex-wrap:wrap}
.brand{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:600;color:#fff;letter-spacing:0.5px}
.brand small{display:block;font-family:'Lato',sans-serif;font-size:0.65rem;font-weight:400;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-top:2px}
nav ul{display:flex;list-style:none;gap:0.55rem;flex-wrap:wrap;justify-content:flex-end}
nav a{display:inline-block;font-size:0.66rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-weight:500;padding:0.55rem 1rem;border:1px solid rgba(201,169,97,0.45);border-radius:999px;background:transparent;transition:all .2s;line-height:1}
nav a:hover{border-color:var(--gold);background:rgba(201,169,97,0.12)}
nav a.active{background:var(--gold);color:var(--purple-dark);border-color:var(--gold)}
nav a.cta{background:var(--gold);color:var(--purple-dark);border-color:var(--gold);font-weight:700;box-shadow:0 0 0 1px var(--gold)}
nav a.cta:hover{background:var(--gold-light);border-color:var(--gold-light);box-shadow:0 0 0 1px var(--gold-light),0 4px 12px rgba(201,169,97,0.4)}
/* Hamburger (verborgen op desktop) */
.nav-toggle{display:none}
.nav-burger{display:none}
@media(max-width:960px){nav a{font-size:0.62rem;padding:0.45rem 0.8rem}}

@media(max-width:820px){
  .nav{flex-wrap:wrap}
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:38px;padding:8px;cursor:pointer;margin-left:auto}
  .nav-burger span{display:block;height:2px;width:100%;background:var(--gold);border-radius:2px;transition:transform .25s,opacity .2s}
  header.site nav{display:none;flex-basis:100%;width:100%}
  .nav-toggle:checked ~ nav{display:block}
  header.site nav ul{flex-direction:column;align-items:stretch;justify-content:center;gap:0.5rem;padding:1rem 0 0.25rem;flex-wrap:nowrap}
  header.site nav a{display:block;text-align:center;font-size:0.72rem;padding:0.7rem 1rem}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* === Hero === */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;background:
  radial-gradient(ellipse at top, rgba(201,169,97,0.18) 0%, transparent 60%),
  linear-gradient(180deg,var(--purple-dark) 0%,var(--purple) 100%);
  color:#fff;overflow:hidden;padding:6rem 2rem}
.hero.with-photo{
  background:
    linear-gradient(180deg, rgba(20,16,26,0.85) 0%, rgba(20,16,26,0.55) 35%, rgba(20,16,26,0.85) 100%),
    url('images/hero-rietlaer.jpg') center/cover no-repeat;
}
.hero::before{content:"";position:absolute;inset:0;background-image:
  radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 1px, transparent 1px),
  radial-gradient(circle at 70% 80%, rgba(201,169,97,0.06) 1px, transparent 1px);
  background-size:60px 60px,90px 90px;opacity:0.6}
.hero.with-photo::before{display:none}
.hero-inner{position:relative;z-index:2;max-width:880px}
.eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:0.9rem;max-width:100%;font-size:0.75rem;letter-spacing:5px;text-transform:uppercase;color:var(--gold-light);margin-bottom:2rem}
.eyebrow span{padding:0;white-space:nowrap}
.eyebrow::before,.eyebrow::after{content:"";flex:0 0 40px;height:1px;background:var(--gold)}
/* Links uitgelijnde tussenkopjes (twee-koloms blokken): forceer linkslijning zodat
   het kopje (incl. voorste lijntje) exact uitlijnt met de titel/tekst eronder. */
.two-col .eyebrow{display:flex;justify-content:flex-start}
.hero h1{color:#fff;font-style:italic;margin-bottom:1.5rem}
.hero h1 em{font-style:normal;color:var(--gold-light)}
.hero .lede{font-size:1.15rem;color:rgba(255,255,255,0.85);max-width:600px;margin:0 auto 2.5rem;font-weight:300}
.hero-meta{display:flex;gap:3rem;justify-content:center;flex-wrap:wrap;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(201,169,97,0.3)}
.hero-meta div{text-align:center}
.hero-meta .label{font-size:0.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:0.4rem}
.hero-meta .value{font-family:'Playfair Display',serif;font-size:1.15rem;color:#fff}

/* === Buttons === */
.btn{display:inline-block;padding:0.9rem 2.4rem;font-size:0.8rem;letter-spacing:3px;text-transform:uppercase;border:1px solid var(--gold);color:var(--gold);background:transparent;font-weight:400;transition:all .3s;cursor:pointer}
.btn:hover{background:var(--gold);color:var(--purple-dark)}
.btn-solid{background:var(--gold);color:var(--purple-dark)}
.btn-solid:hover{background:var(--gold-light);color:var(--purple-dark)}
.btn-dark{border-color:var(--purple);color:var(--purple)}
.btn-dark:hover{background:var(--purple);color:#fff}
.btn-group{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* === Sections === */
section{padding:6rem 0;background:var(--ivory)}
section.alt{background:var(--cream)}
.section-head{text-align:center;margin-bottom:4rem}
.section-head .eyebrow{color:var(--gold)}
.section-head .eyebrow::before,.section-head .eyebrow::after{background:var(--gold)}
.section-head p{color:var(--muted);max-width:600px;margin:1rem auto 0}
.divider{width:60px;height:1px;background:var(--gold);margin:1.5rem auto}

/* === Grid === */
.grid{display:grid;gap:2.5rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card{background:#fff;padding:2.5rem 2rem;text-align:center;border:1px solid var(--line);transition:all .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(61,20,86,0.08);border-color:var(--gold)}
.card .icon{font-family:'Playfair Display',serif;font-size:2rem;color:var(--gold);margin-bottom:1rem;font-style:italic}

/* === Sponsor packages === */
.pkg{background:#fff;border:1px solid var(--line);padding:3rem 2rem;text-align:center;position:relative;transition:all .3s}
.pkg.featured{border:2px solid var(--gold);background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);transform:scale(1.03)}
.pkg .tier{font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--purple);margin-bottom:0.3rem}
.pkg .badge{display:inline-block;padding:0.25rem 1rem;background:var(--gold);color:var(--purple-dark);font-size:0.7rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:1rem}
.pkg .price{font-family:'Playfair Display',serif;font-size:2.8rem;color:var(--charcoal);margin:1rem 0}
.pkg .price small{font-size:1rem;color:var(--muted)}
.pkg ul{list-style:none;text-align:left;margin:2rem 0}
.pkg ul li{padding:0.6rem 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:0.95rem;position:relative;padding-left:1.5rem}
.pkg ul li::before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:0.85rem}
.pkg ul li:last-child{border-bottom:none}

/* === Sponsors grid === */
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-top:3rem}
.logo-tile{aspect-ratio:3/2;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:1.5rem;color:var(--muted);font-style:italic;font-size:0.9rem;text-align:center;transition:all .2s}
.logo-tile:hover{border-color:var(--gold);color:var(--purple)}
.sponsor-tier-title{text-align:center;font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--gold);margin:3rem 0 1rem;letter-spacing:2px;text-transform:uppercase}

/* === Practical info === */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border:1px solid var(--line);background:#fff}
.info-cell{padding:2.5rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.info-cell .label{font-size:0.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:0.8rem}
.info-cell .value{font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--purple);line-height:1.4}
.info-cell .sub{color:var(--muted);font-size:0.9rem;margin-top:0.4rem}

/* === Two-column content === */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.two-col-img{background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:'Playfair Display',serif;font-size:1.2rem;font-style:italic;text-align:center;padding:2rem;position:relative;overflow:hidden}
.two-col-img::after{content:"";position:absolute;inset:1rem;border:1px solid rgba(201,169,97,0.3)}
.two-col h2{margin-bottom:1.5rem}
@media(max-width:768px){.two-col{grid-template-columns:1fr;gap:3rem}}

/* === Quote === */
.quote{text-align:center;max-width:780px;margin:0 auto;padding:4rem 2rem}
.quote p{font-family:'Playfair Display',serif;font-size:1.6rem;font-style:italic;color:var(--purple);line-height:1.5}
.quote .attribution{font-family:'Lato',sans-serif;font-style:normal;font-size:0.8rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-top:2rem}

/* === Footer === */
footer.site{background:var(--purple-dark);color:rgba(255,255,255,0.7);padding:4rem 0 2rem;font-size:0.9rem}
footer.site .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(201,169,97,0.2)}
footer.site h4{color:var(--gold);font-size:0.8rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:1.2rem}
footer.site a{color:rgba(255,255,255,0.7)}
footer.site a:hover{color:var(--gold)}
footer.site p{color:rgba(255,255,255,0.6);margin-bottom:0.5rem}
.copyright{text-align:center;padding-top:2rem;color:rgba(255,255,255,0.4);font-size:0.8rem;letter-spacing:1px}

/* === Hero partner logos === */
.hero-partners{display:flex;justify-content:center;align-items:flex-end;gap:3.5rem;margin-top:2.5rem;flex-wrap:wrap}
.hero-partner{display:flex;flex-direction:column;align-items:center;gap:0.7rem;text-align:center}
.hero-partner .lbl{font-size:0.62rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold-light)}
.hero-partner img{max-height:70px;width:auto;background:transparent;padding:0;border-radius:0;box-shadow:none}
.hero-partner img[src*="amber"]{filter:brightness(0) invert(1)}
.hero-partner .placeholder-sm{height:60px;min-width:150px;background:rgba(255,255,255,0.95);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-style:italic;font-size:0.78rem;padding:0 16px;box-shadow:0 4px 14px rgba(0,0,0,0.25)}
@media(max-width:600px){.hero-partners{gap:1.5rem}}

/* === Brand logo === */
.brand-logo{display:flex;align-items:center;gap:0.8rem}
.brand-logo img{height:36px;width:auto}
.brand-logo .placeholder-mini{width:36px;height:36px;border:1px dashed var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:0.6rem;font-style:italic}

/* === Page hero (smaller) === */
.page-hero{background:linear-gradient(180deg,var(--purple-dark) 0%,var(--purple) 100%);color:#fff;padding:7rem 2rem 5rem;text-align:center;position:relative}
.page-hero h1{color:#fff;font-style:italic;font-size:clamp(2rem,4vw,3.5rem)}
.page-hero h1 em{font-style:normal;color:var(--gold-light)}
.page-hero .eyebrow{color:var(--gold-light)}

/* === CTA banner === */
.cta-banner{background:var(--purple);color:#fff;text-align:center;padding:5rem 2rem}
.cta-banner h2{color:#fff}
.cta-banner p{color:rgba(255,255,255,0.8);max-width:600px;margin:1rem auto 2rem}

@media(max-width:768px){
  .hero-meta{gap:1.5rem}
  section{padding:4rem 0}
  .info-cell{border-right:none}
}

/* Bovenschrift-lijntjes compact houden op smalle schermen (niet naar 2e regel) */
@media(max-width:600px){
  .eyebrow{letter-spacing:0.5px;gap:0.45rem;font-size:clamp(0.46rem,2.5vw,0.68rem);margin-bottom:1.5rem}
  .eyebrow::before,.eyebrow::after{flex:0 0 18px}
}

/* Programma-tijdlijn op smalle schermen: tijd boven de omschrijving (gestapeld) */
@media(max-width:600px){
  .dnd-tl-row{grid-template-columns:1fr!important;gap:0.15rem!important;align-items:start!important}
}

/* Astra's 'scroll naar boven'-knop verbergen (past niet bij dit ontwerp) */
#ast-scroll-top,.ast-scroll-to-top-wrapper{display:none!important}

/* === Inschrijfformulier (Fluent Forms) in Dine 'n Dance-stijl === */
.dnd-form{max-width:640px;margin:2.5rem auto 0;background:#fff;border:1px solid var(--line);padding:2.5rem 2.25rem}
.dnd-form h1,.dnd-form h2,.dnd-form h3{color:var(--purple);text-align:center;margin-bottom:1.5rem}
.dnd-form .ff-el-group{margin-bottom:1.25rem}
.dnd-form label,.dnd-form .ff-el-input--label label{font-family:'Lato',sans-serif;font-size:0.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:0.45rem;display:inline-block}
.dnd-form .ff-el-form-control{width:100%;border:1px solid var(--line);background:var(--ivory);padding:0.8rem 1rem;font-family:'Lato',sans-serif;font-size:1rem;color:var(--charcoal);border-radius:0;transition:border-color .2s,box-shadow .2s}
.dnd-form .ff-el-form-control:focus{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 1px var(--gold)}
.dnd-form .ff-el-form-control::placeholder{color:var(--muted);opacity:.7}
.dnd-form textarea.ff-el-form-control{min-height:120px;resize:vertical}
.dnd-form .ff-el-is-required-icon{color:var(--gold)}
.dnd-form .ff-btn-submit{display:inline-block;padding:0.9rem 2.6rem;font-family:'Lato',sans-serif;font-size:0.8rem;letter-spacing:3px;text-transform:uppercase;font-weight:700;border:1px solid var(--gold)!important;background:var(--gold)!important;color:var(--purple-dark)!important;border-radius:0!important;cursor:pointer;transition:all .3s}
.dnd-form .ff-btn-submit:hover{background:var(--gold-light)!important;border-color:var(--gold-light)!important;color:var(--purple-dark)!important;box-shadow:0 4px 12px rgba(201,169,97,0.35)}
.dnd-form .ff-custom_html{font-size:0.92rem;color:var(--muted);line-height:1.6}
.dnd-form .error,.dnd-form .text-danger{color:#a3282d;font-size:0.85rem}
.dnd-form .ff-el-is-error .ff-el-form-control{border-color:#a3282d}
.dnd-form .ff-message-success{background:var(--cream);border:1px solid var(--gold);color:var(--purple);padding:1.5rem;text-align:center}