/* ============================================================
   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; }
.hero .lead   { color: rgba(255, 255, 255, 0.88); max-width: 55ch; margin-inline: auto; }
.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 ---------------------------------------------- */
.klanten-strip img {
    max-height: 48px;
    width: auto;
    opacity: 0.72;
    filter: grayscale(100%);
    transition: opacity .2s ease, filter .2s ease;
}
.klanten-strip img:hover { opacity: 1; filter: grayscale(0%); }
.klant-placeholder {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--da-ink-muted);
    font-size: 1.25rem;
    padding-inline: .5rem;
    letter-spacing: -0.01em;
}

/* --- 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 ---------------------------------------------- */
.step-card {
    padding: 1.75rem;
    border-left: 3px solid var(--da-orange);
    height: 100%;
}
.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 --------------------------------------------- */
.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;
}
.price-card.featured::before {
    content: "Meest gekozen";
    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;
}
.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); }

/* --- 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;
}
.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; }
.text-white-75 { color: rgba(255, 255, 255, 0.75); }
.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }

/* --- Forms --------------------------------------------------- */
.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--da-line);
    padding: .75rem 1rem;
    font-size: 1rem;
    color: var(--da-ink);
}
.form-control:focus, .form-select:focus {
    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: 767.98px) {
    .klanten-strip { justify-content: center; }
}
@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 .col-lg-9 > * {
        animation: heroEnter 500ms cubic-bezier(0.23, 1, 0.32, 1) both;
    }
    .hero .col-lg-9 > *:nth-child(1) { animation-delay:   0ms; }
    .hero .col-lg-9 > *:nth-child(2) { animation-delay:  80ms; }
    .hero .col-lg-9 > *:nth-child(3) { animation-delay: 160ms; }
    .hero .col-lg-9 > *: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; }

/* 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 .col-lg-9 > * {
        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;
    }
    .btn:active {
        transform: none;
    }
}