/* ═══════════════════════════════════════════════════════════════════════════
   IT Live — Design System Extension (SaniSafe)
   Boven op sanisafe-brand-tokens.css. Behoudt luxe gouden brand,
   voegt WCAG-AA fixes + functional polish toe (a11y, motion, print, taps).
   Wordt geladen NA andere stylesheets zodat het wint.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* Extended tokens */
    --ss-text-strong:   #1a1810;        /* 16:1 op cream */
    --ss-text:          #312d29;        /* brown, 11:1 op cream */
    --ss-text-muted:    #5c4a26;        /* primary-dark, 7.4:1 op cream — voor small text */
    --ss-text-subtle:   #6b6560;        /* 4.7:1 op cream */
    --ss-on-dark:       #f9f6f1;
    --ss-on-dark-muted: rgba(249,246,241,.85);

    --ss-border:        #e7dfd0;        /* warm beige border */
    --ss-border-strong: #d4c8b0;
    --ss-success:       #047857;
    --ss-warning:       #b45309;
    --ss-danger:        #b91c1c;

    --ss-fs-xs:12px; --ss-fs-sm:13px; --ss-fs-base:15px; --ss-fs-md:16px;
    --ss-fs-lg:18px; --ss-fs-xl:22px; --ss-fs-2xl:28px; --ss-fs-3xl:36px;
    --ss-lh-tight:1.18; --ss-lh-snug:1.35; --ss-lh-normal:1.6;

    --ss-sp-1:4px; --ss-sp-2:8px; --ss-sp-3:12px; --ss-sp-4:16px;
    --ss-sp-5:20px; --ss-sp-6:24px; --ss-sp-8:32px; --ss-sp-10:40px;
    --ss-sp-12:48px; --ss-sp-16:64px;

    --ss-r-sm:4px; --ss-r-md:8px; --ss-r-lg:12px; --ss-r-xl:18px;

    --ss-shadow-xs: 0 1px 2px rgba(49,45,41,.06);
    --ss-shadow-sm: 0 1px 3px rgba(49,45,41,.08), 0 1px 2px rgba(49,45,41,.04);
    --ss-shadow-md: 0 6px 18px rgba(163,129,68,.12);
    --ss-shadow-lg: 0 14px 36px rgba(163,129,68,.18);

    --ss-ease: cubic-bezier(.4,0,.2,1);
    --ss-dur-fast: 180ms; --ss-dur: 280ms; --ss-dur-slow: 420ms;
}

/* ─── A11y FOCUS — gouden ring past bij brand ────────────────────────── */
*:focus-visible {
    outline: 2px solid var(--primary, #a38144);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ─── WCAG-AA FIX: gold-on-cream op kleine tekst → primary-dark ──────── */
/* Section-kickers/tags die in goud op cream stonden waren 3.37:1 (te licht) */
.section-kicker, .section-tag, .badge-gold,
.kicker, .eyebrow,
[class*="-kicker"], [class*="-tag"]:not([class*="-stag"]) {
    color: var(--primary-dark, #5c4a26) !important;
    background: rgba(163,129,68,0.08);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--ss-fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Algemene gold-on-light tekst die te licht was */
.gold-text:not(h1):not(h2):not(.cta-button), .text-gold:not(h1):not(h2):not(.cta-button),
[class*="primary-text"]:not(h1):not(h2) {
    color: var(--primary-dark, #5c4a26);
}

/* ─── Form-field consistency (was er niet uniform) ───────────────────── */
input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=number], input[type=search], input[type=password], input[type=date],
textarea, select {
    font-family: inherit;
    font-size: var(--ss-fs-md);
    color: var(--ss-text);
    background: var(--white, #fff);
    border: 1.5px solid var(--ss-border-strong);
    border-radius: var(--ss-r-md);
    padding: 11px 14px;
    transition: border-color var(--ss-dur-fast), box-shadow var(--ss-dur-fast);
    width: 100%;
    box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--primary, #a38144) !important;
    box-shadow: 0 0 0 3px rgba(163,129,68,0.18) !important;
    outline: none;
}
::placeholder { color: var(--ss-text-subtle); opacity: 1; }
label { color: var(--ss-text); font-weight: 600; }
.req, label .req, .required { color: var(--ss-danger) !important; font-weight: 700 !important; }

/* iOS: voorkomt auto-zoom */
@media (max-width: 768px) {
    input[type=text], input[type=email], input[type=tel], input[type=url],
    input[type=number], input[type=search], input[type=password], textarea, select {
        font-size: 16px !important;
    }
}

/* ─── TAP-TARGETS ≥44px op mobile ────────────────────────────────────── */
@media (max-width: 768px) {
    .cta-button, .btn, .button,
    a.cta-button, button.cta-button,
    a.mnav-cta, .mnav-cta,
    input[type=submit], input[type=button], button[type=submit] {
        min-height: 48px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ─── BADGES / NOTICES — semantic ────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--ss-fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.badge-primary { background: var(--primary, #a38144); color: var(--white, #fff); }
.badge-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-warning { background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; }
.badge-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

.notice, .alert {
    padding: 14px 18px;
    border-radius: var(--ss-r-md);
    border-left: 4px solid var(--primary, #a38144);
    background: var(--cream, #f9f6f1);
}
.notice-success { border-left-color: var(--ss-success); background: #ecfdf5; color: #064e3b; }
.notice-warning { border-left-color: var(--ss-warning); background: #fffbeb; color: #78350f; }
.notice-danger { border-left-color: var(--ss-danger); background: #fef2f2; color: #7f1d1d; }

/* ─── CARDS — subtle hover ───────────────────────────────────────────── */
.card, .feature-card, article.post-card {
    transition: transform var(--ss-dur) var(--ss-ease), box-shadow var(--ss-dur) var(--ss-ease);
}
.card:hover, .feature-card:hover, article.post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ss-shadow-lg);
}

/* ─── RATING STARS — goud past al ────────────────────────────────────── */
.stars, .rating-stars { color: var(--gold-mid, #c9a050); }
.rating-count, .reviews-count { color: var(--ss-text-muted); font-size: var(--ss-fs-sm); }

/* ─── SELECTION ──────────────────────────────────────────────────────── */
::selection { background: var(--primary, #a38144); color: var(--white, #fff); }

/* ─── REDUCED MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .card:hover, .feature-card:hover, .cta-button:hover { transform: none !important; }
}

/* ─── PRINT ──────────────────────────────────────────────────────────── */
@media print {
    header, footer, nav, .header, .footer, .navbar,
    .cta-button, .floating, [class*="floating"], #ilchat-widget, .ilchat-widget,
    .skip-link, .scroll-progress, .mnav, .mobile-nav { display: none !important; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
    img { max-width: 70%; height: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY HEADER (subtle shadow on scroll)
   ─────────────────────────────────────────────────────────────────────────── */
header.site-header, header.main-header, .topbar, header[role="banner"] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(249,246,241,0.94);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    transition: box-shadow .22s ease, background .22s ease;
}
header.site-header.ss-scrolled, header.main-header.ss-scrolled, .topbar.ss-scrolled {
    background: rgba(249,246,241,0.99);
    box-shadow: 0 4px 14px rgba(49,45,41,.10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .ss-fade-in {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 480ms cubic-bezier(.4,0,.2,1), transform 480ms cubic-bezier(.4,0,.2,1);
        will-change: opacity, transform;
    }
    .ss-fade-in.is-visible { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT-FIXES (2026-04-28) — header CTA contrast + tap-targets
   ─────────────────────────────────────────────────────────────────────────── */
/* Header CTA was wit-op-cream (1.08:1) — fix met solid gold + dark border */
.header .cta-button, .header a.cta-button,
header .cta-button, header a.cta-button,
.mnav-cta, a.mnav-cta {
    background: var(--primary, #a38144) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--primary-dark, #5c4a26) !important;
    box-shadow: 0 2px 8px rgba(92,74,38,0.20);
}
.header .cta-button:hover, header .cta-button:hover, .mnav-cta:hover {
    background: var(--primary-dark, #5c4a26) !important;
    color: #fff !important;
}

/* H4 goud-op-wit was 3.63:1 — donkerder voor body-tekst */
h4, h4.gold, .feature-card h4, .service-card h4 {
    color: var(--primary-dark, #5c4a26);
}

/* Section-kicker was 1.65:1 op donker-cream — verhoog */
.section-kicker, .section-tag, .badge-gold, .kicker, .eyebrow,
[class*="-kicker"], [class*="-tag"]:not([class*="-stag"]) {
    color: #3d2f1a !important;
    background: rgba(163,129,68,0.14) !important;
}

/* Tap-targets header-info links */
@media (max-width: 768px) {
    .topbar a, header a[href^="tel:"], header a[href^="mailto:"],
    .header-info a, .mobile-phone-link {
        min-height: 44px;
        padding: 10px 8px;
        display: inline-flex;
        align-items: center;
    }
}

/* Footer copyright was 2.87:1 op brown */
footer .copyright, footer p, footer span {
    color: rgba(255,255,255,0.78) !important;
}

/* Hero text-shadow safety net (voor trage image-loads) */
.hero h1, .hero .hero-title, .revolutionary-text, .hero-subtitle, .hero-highlight {
    text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}