/* ============================================================
   DanceAdmin - site.css
   Custom styling bovenop Bootstrap 5.3.
   ============================================================ */

/* --- Tokens --------------------------------------------------- */
:root {
    /* Merkkleuren - orange primair, bruin voor gewicht + goud voor accenten */
    --da-orange:      #f57c00;
    --da-orange-600:  #ea6c00;
    --da-orange-800:  #9a4a00;   /* diepe oranje - voor tekst-links op cream (AA-contrast) */
    --da-orange-50:   #fff4e6;
    --da-brown:       #78350f;   /* deep chocolate - avatar-gradient, gewicht */
    --da-brown-700:   #451a03;   /* espresso - CTA-slot bg */
    --da-brown-50:    #fef3c7;   /* warme tint */
    --da-gold:        #8b6608;   /* dieper goud - haalt WCAG AA op cream en wit */
    --da-gold-300:    #fbbf24;   /* lichte goud - voor kickers op dark hero */
    --da-gold-50:     #fef9c3;   /* very light gold */

    /* Neutrals - warm i.p.v. koud grijs */
    --da-ink:         #1c1917;
    --da-ink-soft:    #44403c;
    --da-ink-muted:   #78716c;
    --da-bg:          #e6e3db;   /* warm cream, matcht EXCITED software */
    --da-bg-soft:     #dcd7c9;   /* iets donkerder cream voor sectie-alternatie */
    --da-bg-white:    #ffffff;   /* echt wit - voor kaarten */
    --da-line:        #cdc7b8;   /* iets warmer dan grijs, past bij cream */

    /* Feedback */
    --da-success:     #16a34a;
    --da-danger:      #dc2626;

    /* Typografie */
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-head: 'Fraunces', 'Iowan Old Style', Georgia, serif;

    /* Rhythm */
    --radius:      12px;
    --radius-lg:   20px;
    --shadow-sm:   0 1px 2px rgba(28, 25, 23, .06), 0 1px 3px rgba(28, 25, 23, .04);
    --shadow-md:   0 4px 6px rgba(28, 25, 23, .05), 0 10px 20px rgba(28, 25, 23, .06);
    --shadow-lg:   0 10px 15px rgba(28, 25, 23, .07), 0 20px 40px rgba(28, 25, 23, .10);

    /* Bootstrap overrides via CSS vars */
    --bs-body-font-family:     var(--font-body);
    --bs-body-color:           var(--da-ink);
    --bs-body-bg:              var(--da-bg);
    --bs-link-color:           var(--da-orange-800);
    --bs-link-hover-color:     var(--da-orange-600);
    /* Bootstrap Reboot leest via -rgb variant, dus die ook zetten - anders blijft alles blauw */
    --bs-link-color-rgb:       154, 74, 0;
    --bs-link-hover-color-rgb: 234, 108, 0;
}

/* --- Base ----------------------------------------------------- */
html { color-scheme: light; }
body {
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--da-ink);
}
h1, .h1 { font-size: clamp(2.4rem, 4vw + 1rem, 3.75rem); letter-spacing: -0.03em; }
h2, .h2 { font-size: clamp(1.8rem, 2.5vw + 1rem, 2.5rem); }
h3, .h3 { font-size: 1.35rem; }

p { color: var(--da-ink-soft); }
.lead { font-size: 1.2rem; color: var(--da-ink-soft); font-weight: 400; }
.text-muted { color: var(--da-ink-muted) !important; }

/* --- Buttons -------------------------------------------------- */
.btn {
    --bs-btn-padding-y: .625rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 999px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn-lg { --bs-btn-padding-y: .85rem; --bs-btn-padding-x: 1.75rem; --bs-btn-font-size: 1rem; }

.btn-primary {
    --bs-btn-bg:                  var(--da-orange);
    --bs-btn-border-color:        var(--da-orange);
    --bs-btn-hover-bg:            var(--da-orange-600);
    --bs-btn-hover-border-color:  var(--da-orange-600);
    --bs-btn-active-bg:           var(--da-orange-600);
    --bs-btn-active-border-color: var(--da-orange-600);
    --bs-btn-color:               #fff;
    --bs-btn-hover-color:         #fff;
    box-shadow: 0 4px 12px rgba(245, 124, 0, .28);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245, 124, 0, .38);
}

.btn-outline-primary {
    --bs-btn-color:              var(--da-orange-600);
    --bs-btn-border-color:       var(--da-orange);
    --bs-btn-hover-bg:           var(--da-orange);
    --bs-btn-hover-border-color: var(--da-orange);
    --bs-btn-hover-color:        #fff;
}

.btn-outline-secondary {
    --bs-btn-color:              var(--da-ink);
    --bs-btn-border-color:       var(--da-line);
    --bs-btn-hover-bg:           var(--da-ink);
    --bs-btn-hover-border-color: var(--da-ink);
    --bs-btn-hover-color:        #fff;
}

.btn-link { text-decoration: none; font-weight: 600; }
.btn-link:hover { text-decoration: underline; }

/* --- Nav ------------------------------------------------------ */
.site-nav {
    /* Licht in plaats van de neutrale bijna-zwarte balk: de nav is nu hetzelfde
       wit als de kaarten in de secties en zweeft op een schaduw boven de
       pagina. Tegen de cream body geeft wit wel het contrast dat een cream balk
       miste; tegen de foto-hero leest 'ie als een schone lichte band. */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    /* Geen border-bottom: de schaduw scheidt van de cream secties, en tegen de
       donkere hero zou een lijn een naad worden. */
    box-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 8px 24px rgba(28, 25, 23, .08);
    padding-block: .5rem;
}
.site-nav .navbar-brand { padding-block: 0; }
.site-nav .nav-link { color: var(--da-ink-soft); font-weight: 500; padding-inline: .875rem; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: var(--da-orange-600); }
/* Labels nooit laten afbreken: een pill die over drie regels breekt wordt
   een oranje bal in plaats van een knop. */
.site-nav .nav-link,
.site-nav .navbar-nav .btn { white-space: nowrap; }
.site-nav .nav-link-login .bi { opacity: .7; }
.site-nav .navbar-toggler { color: var(--da-ink); }
.site-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(245, 124, 0, .3); }

/* De Inloggen-knop heeft geen eigen override meer nodig: de basis
   .btn-outline-secondary is al de variant voor een lichte ondergrond.
   Alleen de hero staat nog op donker, die regel staat bij de Hero-sectie. */

.lang-switcher .btn { border-radius: 999px; padding: .35rem .75rem; font-weight: 500; color: var(--da-ink-soft); }
.lang-switcher .btn:hover, .lang-switcher .btn:focus { color: var(--da-orange-600); }
.lang-switcher .dropdown-item.active { background: var(--da-orange); color: #fff; }

/* --- Sections ------------------------------------------------- */
.section       { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section-tight { padding-block: clamp(2rem, 4vw, 3rem); }
.bg-da-soft    { background: var(--da-bg-soft); }

.kicker {
    display: inline-block;
    color: var(--da-gold);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --- Hero ----------------------------------------------------- */
.hero {
    padding-block: clamp(5rem, 12vw, 8rem) clamp(3.5rem, 8vw, 6rem);
    color: #fff;
    background:
        /* warme dark overlay zodat tekst leesbaar blijft over de foto */
        linear-gradient(135deg, rgba(28, 25, 23, 0.78) 0%, rgba(69, 26, 3, 0.72) 55%, rgba(124, 45, 18, 0.65) 100%),
        /* echte productfoto: iPad met DanceAdmin-app op donker toetsenbord */
        url('/assets/images/hero/danceadmin-ipad-keyboard.jpg') center / cover no-repeat;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* subtiel gouden glow onderaan */
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(184, 134, 11, 0.18) 0%, transparent 60%),
        /* vignette voor extra text-focus */
        radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero h1      { color: #fff; max-width: 20ch; margin-inline: auto; }
/* 55ch liet "Nederland." als losse derde regel achter. 64ch past de zin in
   twee regels; balance verdeelt ze gelijk (77/78 tekens) in plaats van de
   scheve 86/69 die je zonder krijgt. Zonder ondersteuning voor balance is
   het nog steeds twee regels, alleen ongelijker. */
.hero .lead   { color: rgba(255, 255, 255, 0.88); max-width: 60ch; margin-inline: auto; text-wrap: balance; }
.hero .kicker { color: var(--da-gold-300); }

/* Outline-knop op de donkere hero (Zie een live widget). Stond eerst samen met
   de nav in een gedeelde regel; nu de nav licht is, is dit hero-only. */
.hero .btn-outline-secondary {
    --bs-btn-color:              #fff;
    --bs-btn-border-color:       rgba(255, 255, 255, 0.4);
    --bs-btn-hover-bg:           rgba(255, 255, 255, 0.15);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color:        #fff;
}

/* --- Klantstrip ---------------------------------------------- */
/* De logo's stonden los op de cream band met justify-content-around, waardoor
   vier stuks zich over de volle containerbreedte verspreidden. Die gaten
   waren wat de rij leeg deed ogen. Nu zitten ze in een witte kaart: de groep
   leest als een object, dicht op elkaar en gecentreerd. Het wit verbergt
   bovendien de witte rechthoek die in een JPG-logo gebakken zit. */
.klanten-band {
    max-width: 880px;
    margin-inline: auto;
    background: var(--da-bg-white);
    border: 1px solid var(--da-line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2.5rem);
    box-shadow: var(--shadow-sm);
}
/* Zelfde behandeling als .kicker, maar als los label bruikbaar. */
.klanten-label {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--da-gold);
}
/* Grid in plaats van flex-wrap: bij flex bepaalt de toevallige breedte van
   de logo's waar de rij breekt, en dat gaf 3+1 met ZoukLovers alleen op de
   tweede regel. Met een grid ligt de opdeling vast: vier naast elkaar, of
   netjes 2+2 op smal. */
.klanten-strip {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 767.98px) {
    .klanten-strip { grid-template-columns: repeat(2, auto); gap: 1.75rem 2rem; }
}
.klanten-strip img {
    max-height: 44px;
    width: auto;
    opacity: .72;
    filter: grayscale(100%);
    transition: opacity .2s ease, filter .2s ease;
}
/* Optische balans. Logo's met heel verschillende verhoudingen ogen niet
   gelijk op dezelfde pixelhoogte: een woordmerk van 3,4:1 draagt veel meer
   gewicht dan een vierkant embleem van dezelfde hoogte. De hoogtes hieronder
   zijn afgeleid van de verhouding (hoe smaller, hoe hoger) en daarna op het
   oog bijgesteld. Nieuwe logo's vallen terug op de 44px hierboven. */
.klanten-strip img[src*="salsaventura"]  { max-height: 40px; opacity: .88; }  /* dunne lijnen, verdwijnt bij .72 */
.klanten-strip img[src*="zouklovers"]    { max-height: 42px; }
.klanten-strip img[src*="dosbailadores"] { max-height: 52px; }
.klanten-strip img[src*="latinsupreme"]  { max-height: 58px; }
/* Tekstnaam zolang een logo nog ontbreekt: body-font in plaats van de
   display-serif, zodat het als logotype leest en niet als kop, en dezelfde
   gedempte behandeling als de plaatjes ernaast. */
.klant-placeholder {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--da-ink-muted);
    opacity: .72;
    transition: opacity .2s ease, color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
    .klanten-strip img:hover      { opacity: 1; filter: grayscale(0%); }
    .klant-placeholder:hover      { opacity: 1; color: var(--da-ink-soft); }
}

/* --- Widget-embed frame -------------------------------------- */
.widget-frame {
    background: #fff;
    border: 1px solid var(--da-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.widget-frame iframe { display: block; border: 0; width: 100%; }

/* --- Feature cards ------------------------------------------- */
.feature-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius);
    padding: 1.75rem;
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.feature-icon {
    color: var(--da-orange);
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: var(--da-orange-50);
    margin-bottom: 1rem;
}
.feature-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.feature-card p  { color: var(--da-ink-muted); margin-bottom: 0; }

/* --- Step cards ---------------------------------------------- */
/* Achtergrond is een voorwaarde voor de uitwaaier-animatie onderaan: zonder
   ondoorzichtige kaart schuiven stap 2 en 3 dwars door elkaars tekst heen.
   Radius alleen rechts, zodat de oranje rand een strakke lijn blijft. */
.step-card {
    padding: 1.75rem;
    border-left: 3px solid var(--da-orange);
    height: 100%;
    background: var(--da-bg-white);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: var(--shadow-sm);
}
.step-num {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    color: var(--da-orange);
    margin-bottom: .5rem;
}
.step-card h3 { font-size: 1.25rem; }
.step-card p  { color: var(--da-ink-muted); }

/* --- Price cards --------------------------------------------- */

/* De kolom is de meetlat, niet het venster. Op de homepage staan er drie
   kaarten naast elkaar vanaf 768px en is een kaart nog maar ~215px breed;
   op de prijzenpagina staan er op diezelfde vensterbreedte twee naast
   elkaar en is er ruimte zat. Een media query zou beide gevallen over een
   kam scheren, een container query kijkt naar de kaart zelf. */
.price-col { container-type: inline-size; }

.price-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius);
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.price-card.featured {
    border-color: var(--da-orange);
    box-shadow: 0 0 0 2px var(--da-orange), var(--shadow-md);
    position: relative;
}
/* Het label staat als <span> in de markup en niet als content: in deze regel.
   Tekst in CSS is niet te vertalen en bereikt een schermlezer niet
   betrouwbaar. */
.price-badge {
    position: absolute;
    top: -.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--da-orange);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .75rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
    /* Zonder dit breekt het label in een smalle kaart over twee regels en zakt
       het over de pakketnaam heen. Uitsteken buiten de kaart mag, het is een
       vrij zwevend label. */
    white-space: nowrap;
}
.price-card h3    { font-size: 1.15rem; margin-bottom: .25rem; color: var(--da-gold); font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.price-card .plan-note { font-size: .9rem; color: var(--da-ink-muted); margin-bottom: 1.25rem; }
.price-card .price {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 3rem;
    color: var(--da-ink);
    margin-block: 0 1.25rem;
    line-height: 1;
}
.price .currency { font-size: 1.5rem; vertical-align: super; margin-right: .1em; color: var(--da-ink-muted); }
.price .per      { font-family: var(--font-body); font-size: .95rem; font-weight: 400; color: var(--da-ink-muted); margin-left: .2em; }
.price-card .feature-list {
    list-style: none;
    padding: 0;
    margin-block: 0 1.5rem;
    flex: 1;
}
.price-card .feature-list li  { padding-block: .35rem; color: var(--da-ink-soft); font-size: .95rem; }
.price-card .feature-list li i { margin-right: .5rem; }
.price-card .feature-list .bi-check2  { color: var(--da-success); }
.price-card .feature-list .bi-x       { color: var(--da-ink-muted); opacity: .5; }
.price-card .feature-list .disabled   { color: var(--da-ink-muted); text-decoration: line-through; text-decoration-color: rgba(120, 113, 108, .3); }

/* "€54,95/mnd" is een aaneengesloten stuk tekst zonder afbreekpunt: past
   het niet, dan steekt het buiten de kaart uit in plaats van af te breken.
   Vanaf hier krimpt de prijsregel mee, zodat dat niet kan gebeuren. */
@container (max-width: 270px) {
    .price-card        { padding: 1.5rem; }
    .price-card .price { font-size: 2.25rem; }
    .price .currency   { font-size: 1.15rem; }
    .price .per        { font-size: .85rem; }
    .price-card .feature-list li { font-size: .9rem; }
}

/* --- FAQ-accordion ------------------------------------------- */

/* Bootstrap kleurt een open accordion-item in zijn eigen primary-blauw:
   lichtblauwe achtergrond, blauwe focusring en een blauwe chevron. Die
   variabelen staan los van --bs-link-color, dus het merk-oranje bovenin
   dit bestand raakt ze niet. Hier zetten we ze alsnog in de merkkleuren.
   De open vraag krijgt --da-brown en niet --da-orange-800: dat laatste
   haalt op --da-bg-soft maar 4,35:1 en blijft daarmee onder AA. Voor de
   chevron mag het wel, een pictogram heeft genoeg aan 3:1.
   De achtergrond blijft doorzichtig: dit is een accordion-flush op een
   gekleurde sectie, de scheidingslijn doet het werk. */
.accordion {
    --bs-accordion-bg:            transparent;
    --bs-accordion-btn-bg:        transparent;
    --bs-accordion-active-bg:     transparent;
    --bs-accordion-btn-color:     var(--da-ink);
    --bs-accordion-active-color:  var(--da-brown);
    --bs-accordion-border-color:  var(--da-line);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(245, 124, 0, .3);
    --bs-accordion-btn-icon:        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2344403c' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239a4a00' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
.accordion-button:hover { color: var(--da-brown); }

/* Een open item zet vraag en antwoord samen op een eigen wit vlak. Zonder dat
   zweeft het antwoord tussen de vraag erboven en de vraag eronder in, en is
   niet te zien waar het bij hoort: alle regels hebben dezelfde ondergrond en
   ongeveer hetzelfde gewicht. Het vlak volgt de kaarten elders op de site. */
.accordion-item:has(.accordion-button:not(.collapsed)) {
    background: var(--da-bg-white);
    border-radius: var(--radius);
    border-bottom-color: transparent;
    box-shadow: var(--shadow-sm);
}

/* Bootstrap trekt een lijn onder de open vraag. Die scheidt de vraag van zijn
   eigen antwoord, precies de verkeerde groepering. We doven hem via de
   variabele die alleen die ene inset-schaduw voedt; box-shadow zelf laten we
   met rust, anders verdwijnt de focusring mee.
   De ring is er voor wie met het toetsenbord navigeert. Na een muisklik bleef
   hij staan tot je ergens anders klikte - dat was het blauwe kader. */
.accordion-button:not(.collapsed)        { --bs-accordion-border-color: transparent; }
.accordion-button:focus:not(:focus-visible) { box-shadow: none; }

/* Het antwoord is ondergeschikt aan de vraag: zachtere inkt, en strak onder de
   vraag geplakt in plaats van er los van. */
.accordion-body {
    color: var(--da-ink-soft);
    padding-top: 0;
}

/* --- Over-avatar --------------------------------------------- */
.over-avatar {
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    max-width: 340px;
    margin: 0 auto;
}
/* De container is al vierkant (aspect-ratio) en snijdt bij met overflow:
   hidden, dus de foto vult hem en behoudt z'n verhouding. */
.over-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Nog in gebruik op de Over-pagina, waar de foto van Ed nog ontbreekt. */
.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--da-orange), var(--da-brown));
    color: #fff;
    font-family: var(--font-head);
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* --- CTA slot ------------------------------------------------ */
.cta-slot {
    background: var(--da-brown-700);
    color: #fff;
    text-align: center;
}
.cta-slot h2       { color: #fff; }
.cta-slot .lead    { color: rgba(255, 255, 255, 0.85); }
.cta-slot a.text-white { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.cta-slot .btn-primary { box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }

/* --- Footer -------------------------------------------------- */
.site-footer {
    background: var(--da-ink);
    color: #d6d3d1;
    padding-block: 3rem 1.5rem;
}
.site-footer h5 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #f5f5f4;
    margin-bottom: 1rem;
}
.site-footer p       { color: #a8a29e; margin-bottom: .35rem; }
.site-footer a       { color: #f5f5f4; text-decoration: none; }
.site-footer a:hover { color: var(--da-orange); }
.site-footer ul li a { line-height: 2; }
/* Link in de gedimde copyrightregel volgt de regelkleur, oranje op hover */
.site-footer .text-white-50 a       { color: inherit; }
.site-footer .text-white-50 a:hover { color: var(--da-orange); }
.text-white-75 { color: rgba(255, 255, 255, 0.75); }
.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }

/* --- Forms --------------------------------------------------- */

/* Een formulier staat op een witte kaart, net als de prijskaarten en de
   contactblokken. Zonder die kaart zweeft het los op de cream achtergrond en
   valt het uit de toon met de rest van de site. */
.form-card {
    background: var(--da-bg-white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}
@media (max-width: 575.98px) {
    .form-card { padding: 1.25rem; }
}

/* Bootstrap geeft velden --bs-body-bg mee, en dat is hier dezelfde cream als
   de pagina zelf: de velden verdwenen daardoor in de achtergrond. Ze krijgen
   een eigen, iets koelere vulling zodat ze op de witte kaart nog leesbaar
   als invulveld overkomen. */
.form-control, .form-select {
    background-color: #fbfaf7;
    border-radius: 10px;
    border-color: var(--da-line);
    padding: .75rem 1rem;
    font-size: 1rem;
    color: var(--da-ink);
}
.form-control:hover, .form-select:hover { border-color: var(--da-ink-muted); }
.form-control:focus, .form-select:focus {
    background-color: var(--da-bg-white);
    border-color: var(--da-orange);
    box-shadow: 0 0 0 .2rem rgba(245, 124, 0, .15);
}
.form-label { font-weight: 500; color: var(--da-ink); margin-bottom: .35rem; }
.form-text  { color: var(--da-ink-muted); }

/* Honeypot */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- Alerts -------------------------------------------------- */
.alert-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
    border-radius: var(--radius);
}
.alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
    border-radius: var(--radius);
}

/* --- Colored text helpers ------------------------------------ */
.text-gold { color: var(--da-gold) !important; }
.text-orange { color: var(--da-orange) !important; }

/* --- Contact card ------------------------------------------- */
.contact-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    height: 100%;   /* gelijke hoogte binnen dezelfde row */
}
.contact-card h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.contact-card p  { margin-bottom: .35rem; color: var(--da-ink-soft); }
.contact-card a  { color: var(--da-orange-800); font-weight: 500; }

/* --- Responsive tweaks -------------------------------------- */
/* De nav klapt om op lg (992px) in plaats van md: tussen 768 en 992 pasten
   vier links, Inloggen, de demo-knop en de taalkiezer niet naast elkaar. */
@media (max-width: 991.98px) {
    .site-nav .navbar-collapse { padding-block: 1rem; }
    /* Volle breedte in het uitgeklapte menu; een 999px-pill wordt dan een
       langgerekte capsule, dus terug naar de normale radius. */
    .site-nav .nav-item .btn   { width: 100%; --bs-btn-border-radius: var(--radius); }
}
/* Net boven het omklappunt blijft het krap: iets minder lucht tussen de links. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-nav .nav-link { padding-inline: .5rem; }
}
@media (max-width: 575.98px) {
    /* Hero-CTAs stapelen onder sm en rekken dan mee met de kolom. */
    .hero-actions .btn { --bs-btn-border-radius: var(--radius); }
}

/* --- Animations ---------------------------------------------- */

/* Hero entrance - pure CSS, werkt ook zonder JS.
   Fadet elementen (kicker/h1/lead/buttons) na elkaar in met korte stagger. */
@media (prefers-reduced-motion: no-preference) {
    .hero-copy > * {
        animation: heroEnter 500ms cubic-bezier(0.23, 1, 0.32, 1) both;
    }
    .hero-copy > *:nth-child(1) { animation-delay:   0ms; }
    .hero-copy > *:nth-child(2) { animation-delay:  80ms; }
    .hero-copy > *:nth-child(3) { animation-delay: 160ms; }
    .hero-copy > *:nth-child(4) { animation-delay: 240ms; }
}
@keyframes heroEnter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* Section content reveal on scroll.
   Container fadet met kleine y-lift; background stays put (bg-da-soft/cta-slot
   band blijft dus zichtbaar tijdens reveal, alleen de content beweegt).
   Gated op .js-anim zodat zonder JS alles gewoon direct staat. */
.js-anim .reveal-on-scroll > .container {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
}
.js-anim .reveal-on-scroll.is-visible > .container {
    opacity: 1;
    transform: none;
}

/* Card stagger binnen een revealende sectie - alleen op .row.g-4 (kaart-grids),
   niet op title-rows. Delays starten na 200ms zodat de container eerst
   grotendeels op zijn plek staat voordat de kaarten inpoppen. */
.js-anim .reveal-on-scroll .row.g-4 > [class*="col-"] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 400ms ease-out,
                transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.js-anim .reveal-on-scroll.is-visible .row.g-4 > [class*="col-"] {
    opacity: 1;
    transform: none;
}
.js-anim .reveal-on-scroll.is-visible .row.g-4 > [class*="col-"]:nth-child(1) { transition-delay: 200ms; }
.js-anim .reveal-on-scroll.is-visible .row.g-4 > [class*="col-"]:nth-child(2) { transition-delay: 260ms; }
.js-anim .reveal-on-scroll.is-visible .row.g-4 > [class*="col-"]:nth-child(3) { transition-delay: 320ms; }
.js-anim .reveal-on-scroll.is-visible .row.g-4 > [class*="col-"]:nth-child(4) { transition-delay: 380ms; }
.js-anim .reveal-on-scroll.is-visible .row.g-4 > [class*="col-"]:nth-child(5) { transition-delay: 440ms; }
.js-anim .reveal-on-scroll.is-visible .row.g-4 > [class*="col-"]:nth-child(6) { transition-delay: 500ms; }

/* "In 3 stappen live": de drie kaarten beginnen opgestapeld op de plek van
   stap 1 en waaieren naar rechts uit naar hun eigen kolom. translateX is
   relatief aan de eigen breedte en de kolommen zijn even breed, dus -100%
   en -200% laten kaart 2 en 3 precies op kaart 1 landen: geen overflow
   links. Alleen vanaf md, want daaronder staan de kaarten onder elkaar op
   volle breedte en zou -200% ze het scherm uit duwen; daar blijft de
   gewone verticale reveal staan. De delays komen uit de generieke stagger
   hierboven (200/260/320), die hoeven dus niet opnieuw. */
@media (min-width: 768px) {
    .js-anim .reveal-on-scroll .row.g-4.steps-fan > [class*="col-"] {
        /* Geen eigen fade, anders zijn de kaarten tijdens hun vlucht half
           doorzichtig en schijnen ze door elkaar heen. De container fadet
           al als geheel in, en groepsopacity composit de kinderen eerst.
           Opgestapeld zie je dus een kaart, geen doorschijnende stapel. */
        opacity: 1;
        transform: none;
        transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    /* Kaart 1 bovenop de stapel, 3 onderop: stap 3 schuift onder 2 en 1
       vandaan, zoals kaarten van een stapel. Kolommen zijn flex-items, dus
       z-index werkt zonder position. */
    .js-anim .reveal-on-scroll .row.g-4.steps-fan > [class*="col-"]:nth-child(1) { z-index: 3; }
    .js-anim .reveal-on-scroll .row.g-4.steps-fan > [class*="col-"]:nth-child(2) { z-index: 2; }
    .js-anim .reveal-on-scroll .row.g-4.steps-fan > [class*="col-"]:nth-child(3) { z-index: 1; }
    .js-anim .reveal-on-scroll .row.g-4.steps-fan > [class*="col-"]:nth-child(2) { transform: translateX(-100%); }
    .js-anim .reveal-on-scroll .row.g-4.steps-fan > [class*="col-"]:nth-child(3) { transform: translateX(-200%); }
    .js-anim .reveal-on-scroll.is-visible .row.g-4.steps-fan > [class*="col-"]:nth-child(2),
    .js-anim .reveal-on-scroll.is-visible .row.g-4.steps-fan > [class*="col-"]:nth-child(3) { transform: none; }
}

/* Widget-frame fadet in wanneer iframe geladen is (met 3s fallback in JS). */
.js-anim .widget-frame {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
}
.js-anim .widget-frame.is-loaded {
    opacity: 1;
    transform: none;
}

/* Button press-feedback - lichte scale-down bij :active voor tactile response. */
.btn:active {
    transform: scale(0.97);
    transition-duration: 80ms;
}

/* Reduced-motion: alle beweging uit, content direct zichtbaar. */
@media (prefers-reduced-motion: reduce) {
    .hero-copy > * {
        animation: none;
    }
    .js-anim .reveal-on-scroll > .container,
    .js-anim .reveal-on-scroll .row.g-4 > [class*="col-"],
    .js-anim .widget-frame {
        opacity: 1;
        transform: none;
        transition: none;
    }
    /* De steps-fan-regels wegen zwaarder dan de generieke hierboven, dus
       die moeten hier apart uit. */
    .js-anim .reveal-on-scroll .row.g-4.steps-fan > [class*="col-"],
    .js-anim .reveal-on-scroll .row.g-4.steps-fan > [class*="col-"]:nth-child(2),
    .js-anim .reveal-on-scroll .row.g-4.steps-fan > [class*="col-"]:nth-child(3) {
        transform: none;
        transition: none;
    }
    .btn:active {
        transform: none;
    }
}