/* ═══════════════════════════════════════════════════════════════════════════
   IT Live — Design System (De Verhuizing)
   Brand: navy #152B5D + oranje #F96706
   Tokens komen al uit head.php :root via DB-settings (sd('primary_color')).
   Dit bestand voegt EXTENDED tokens toe + WCAG-AA + uniforme components.
   Wordt geladen NA premium.css en ux-polish.css zodat het wint.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* Extended tokens (boven op bestaande --primary, --secondary, --accent, --dark) */
    --primary-dark:    #0e1d40;
    --primary-light:   #1f3d80;
    --primary-50:      #eef1f9;
    --secondary-dark:  #d65805;
    --secondary-light: #fb8a3b;
    --secondary-50:    #fff3eb;

    --text:            #0f172a;
    --text-muted:      #475569;   /* slate-600, 7.21:1 op wit */
    --text-light:      #64748b;   /* slate-500, 4.84:1 op wit */
    --text-on-dark:    #f1f5f9;
    --text-on-dark-mut: rgba(255,255,255,0.78);

    --surface:         #ffffff;
    --surface-alt:     #f8fafc;
    --surface-tint:    #f1f5f9;
    --surface-dark:    #0e1d40;

    --border:          #e2e8f0;
    --border-strong:   #cbd5e1;
    --border-focus:    var(--primary, #152B5D);

    --success:         #047857;
    --success-bg:      #ecfdf5;
    --warning:         #d97706;
    --warning-bg:      #fffbeb;
    --danger:          #dc2626;
    --danger-bg:       #fef2f2;

    --font-sans: 'Inter','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-display: 'Playfair Display','Inter',serif;

    --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:16px;
    --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px;
    --fs-hero: clamp(32px, 5.6vw, 56px);
    --lh-tight:1.18; --lh-snug:1.35; --lh-normal:1.55; --lh-relaxed:1.7;

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

    --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

    --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
    --shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md: 0 4px 14px rgba(15,23,42,.10);
    --shadow-lg: 0 10px 28px rgba(15,23,42,.12);
    --shadow-xl: 0 20px 48px rgba(15,23,42,.16);
    --shadow-primary: 0 6px 18px rgba(21,43,93,.30);
    --shadow-accent: 0 6px 18px rgba(249,103,6,.35);

    --ease: cubic-bezier(.2,.8,.2,1);
    --dur-fast: 150ms; --dur: 220ms; --dur-slow: 360ms;
}

/* ─── BASE typography ────────────────────────────────────────────────── */
body {
    font-family: var(--font-sans);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--lh-normal);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
    font-family: var(--font-sans);
    color: var(--text);
    line-height: var(--lh-snug);
    font-weight: 800;
    letter-spacing: -0.01em;
}
h1, .h1 { font-weight: 900; line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2, .h2 { font-weight: 800; line-height: var(--lh-snug); }

p, li { color: var(--text-muted); line-height: var(--lh-normal); }
a { color: var(--primary, #152B5D); transition: color var(--dur-fast) var(--ease); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* ─── A11y FOCUS ─────────────────────────────────────────────────────── */
*:focus-visible {
    outline: 2px solid var(--secondary, #F96706);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ─── BUTTONS — unified ──────────────────────────────────────────────── */
.btn, .button, button.btn,
a.btn, a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    font-weight: 700;
    font-size: var(--fs-base);
    border-radius: var(--r-md);
    border: none;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    text-decoration: none;
    line-height: 1.2;
}
.btn-primary, .button.primary, button.primary, a.button-primary, .btn.primary {
    background: var(--primary, #152B5D) !important;
    color: var(--surface) !important;
    box-shadow: var(--shadow-primary);
}
.btn-primary:hover, .button.primary:hover, button.primary:hover, a.button-primary:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(21,43,93,.40);
    color: var(--surface) !important;
}
.btn-accent, .btn-secondary, .button.accent, .button.secondary, .btn.accent, .btn.secondary,
.btn-orange, .button-orange {
    background: var(--secondary, #F96706) !important;
    color: var(--surface) !important;
    box-shadow: var(--shadow-accent);
}
.btn-accent:hover, .btn-secondary:hover, .button.accent:hover, .btn-orange:hover {
    background: var(--secondary-dark) !important;
    transform: translateY(-2px);
    color: var(--surface) !important;
}
.btn-outline, .btn.outline, .button.outline {
    background: transparent !important;
    color: var(--primary, #152B5D) !important;
    border: 2px solid var(--primary, #152B5D) !important;
}
.btn-outline:hover {
    background: var(--primary, #152B5D) !important;
    color: var(--surface) !important;
}
.btn-ghost {
    background: rgba(255,255,255,.10) !important;
    color: var(--text-on-dark) !important;
    border: 1.5px solid rgba(255,255,255,.55) !important;
}

/* Tap-targets mobile ≥44px */
@media (max-width: 768px) {
    .btn, .button, button.btn, a.btn, a.button,
    input[type=submit], input[type=button] {
        min-height: 44px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

/* ─── CARDS — uniform ────────────────────────────────────────────────── */
.card, .dv-card, .feature-card, .testimonial-card, article.post-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur-fast);
    overflow: hidden;
}
.card:hover, .feature-card:hover, .testimonial-card:hover, article.post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
}

/* ─── FORMS — unified ────────────────────────────────────────────────── */
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: var(--font-sans);
    font-size: var(--fs-md);
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: 11px 14px;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    width: 100%;
    box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--primary, #152B5D) !important;
    box-shadow: 0 0 0 3px rgba(21,43,93,.14) !important;
    outline: none;
}
::placeholder { color: var(--text-light); opacity: 1; }
label { color: var(--text); font-weight: 600; }
.req, label .req, .required { color: var(--danger) !important; font-weight: 700 !important; }

/* iOS auto-zoom fix */
@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;
    }
}

/* ─── BADGE / NOTICES — semantic colors WCAG AA ──────────────────────── */
.badge, .tag, .pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.badge-primary { background: var(--primary, #152B5D); color: var(--surface); }
.badge-accent { background: var(--secondary, #F96706); color: var(--surface); }
.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(--r-md);
    border-left: 4px solid var(--primary, #152B5D);
    background: var(--surface-alt);
    color: var(--text);
}
.notice-info, .alert-info { border-left-color: var(--primary, #152B5D); background: var(--primary-50); }
.notice-success, .alert-success { border-left-color: var(--success); background: var(--success-bg); color: #064e3b; }
.notice-warning, .alert-warning { border-left-color: var(--warning); background: var(--warning-bg); color: #78350f; }
.notice-danger, .alert-danger, .notice-error, .alert-error { border-left-color: var(--danger); background: var(--danger-bg); color: #7f1d1d; }

/* ─── TABLES ─────────────────────────────────────────────────────────── */
table.dv-table, .table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.table th { background: var(--surface-alt); color: var(--text); font-weight: 700; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.table tr:last-child td { border-bottom: 0; }
.table tr:nth-child(even) td { background: var(--surface-alt); }

/* ─── IMAGES ─────────────────────────────────────────────────────────── */
img { max-width: 100%; height: auto; }
.dv-img-rounded, figure img { border-radius: var(--r-md); }

/* ─── RATING STARS ───────────────────────────────────────────────────── */
.stars, .rating-stars, [class*="star-"] {
    color: var(--secondary, #F96706);
}
.rating-count, .reviews-count { color: var(--text-muted); }

/* ─── SECTION SPACING ────────────────────────────────────────────────── */
.section, section.hv-section { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
.section-alt, section.hv-section.alt { background: var(--surface-alt); }

/* ─── SELECTION + Misc ───────────────────────────────────────────────── */
::selection { background: var(--primary, #152B5D); color: var(--surface); }
hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-8) 0; }

/* ─── 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, .btn:hover { transform: none !important; }
}

/* ─── PRINT ──────────────────────────────────────────────────────────── */
@media print {
    header, footer, .header, .footer, nav, .navbar,
    .dv-fab, [class*="floating"], #ilchat-widget, .ilchat-widget,
    .skip-link, .scroll-progress { display: none !important; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
    .card, .feature-card { box-shadow: none; border: 1px solid #ccc; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY HEADER + SHADOW ON SCROLL
   ─────────────────────────────────────────────────────────────────────────── */
header.site-header, header.main-header, .topbar, .header,
header[role="banner"] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    transition: box-shadow .22s ease, background .22s ease;
}
header.site-header.dv-scrolled, header.main-header.dv-scrolled,
.topbar.dv-scrolled, .header.dv-scrolled {
    background: rgba(255,255,255,0.99);
    box-shadow: 0 4px 18px rgba(15,23,42,0.08);
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT-FIXES (2026-04-28) — mobile menu, footer contrast, hero
   ─────────────────────────────────────────────────────────────────────────── */
/* P0-4: Mobile menu blue-on-blue (1.77:1) — invert links op donker bg */
@media (max-width: 768px) {
    nav.is-open a, .mobile-nav.is-open a, .nav-mobile.open a,
    .mobile-menu a, .nav-links.open a, [class*="menu-open"] .nav-links a {
        color: #fff !important;
        background: rgba(255,255,255,0.04);
    }
    nav.is-open a:hover, .mobile-nav.is-open a:hover,
    .mobile-menu a:hover, .nav-links.open a:hover {
        background: rgba(255,255,255,0.10);
        color: #fff !important;
    }
}

/* P0-5: Footer text invisible (slate-200 on white) — forceer donker bg */
footer.site-footer, footer.main-footer, footer[role="contentinfo"], footer.footer {
    background: #0e1d40 !important;
    color: #fff !important;
}
footer.site-footer a, footer.main-footer a, footer[role="contentinfo"] a {
    color: var(--secondary, #F96706) !important;
}
footer.site-footer p, footer.main-footer p,
footer.site-footer li, footer.main-footer li,
footer.site-footer span, footer.main-footer span {
    color: rgba(255,255,255,0.85) !important;
}
footer.site-footer h1, footer.site-footer h2, footer.site-footer h3,
footer.site-footer h4, footer.site-footer h5, footer.site-footer h6 {
    color: #fff !important;
}

/* P0-6: Hero overlay tekst — text-shadow safety */
.hero h1, .hero .hero-title, .hero-subtitle, .page-hero h1, .page-hero p {
    text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}

/* P1-2: Footer link orange-on-orange (2.05:1) */
footer .social-links a, footer .menu-social a {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    border-radius: 8px;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* P1-7 + P1-10: Chat-widget vs sticky-bottom CTA conflict */
.chat-bubble-tooltip { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
@media (max-width: 768px) {
    .floating-chat-widget, [class*="floating-chat"] {
        bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        right: 12px !important;
    }
}

/* P0-7: Admin-login broken logo fallback */
.admin-login-logo img[src*="sites.itlive.nl/assets/images/logo-header.svg"] {
    display: none;
}
.admin-login-logo::before {
    content: attr(data-brand);
    font-size: 24px; font-weight: 800; color: var(--primary, #152B5D);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE LOGO CONSTRAINT (was full-width op hetverhuizteam.nl)
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav-logo, .nav-logo-img, header .logo, header .site-logo,
    .navbar-brand, header img.logo, header a.logo {
        max-width: 200px !important;
        max-height: 56px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
    /* Voorkom dat logo-link de hele rij vult als block */
    header .logo a, .navbar-brand {
        display: inline-block !important;
        flex: 0 0 auto !important;
    }
}