/* Netron ICT — Custom Styles (Light/White Theme, Dark Nav+Hero+Footer) */

/* ===== Font Awesome — force rendering (override Tailwind preflight) ===== */
.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ===== Mobile menu — voorkom horizontaal overflow ===== */
html, body { max-width: 100%; overflow-x: clip; }
#mobile-menu { box-sizing: border-box; }

/* ===== Section Background Helpers ===== */
.bg-dark-surface { background-color: #f1f5f9 !important; }
.bg-dark-bg      { background-color: #ffffff !important; }
.bg-dark-card    { background-color: #ffffff !important; }

/* ===== Base Variables ===== */
:root {
    --bg-base:       #ffffff;
    --bg-surface:    #f1f5f9;
    --bg-card:       #ffffff;
    --bg-card-hover: #f8fafc;
    --border:        rgba(15,23,42,0.1);
    --border-hover:  rgba(37,99,235,0.3);
    --blue:          #2563eb;
    --blue-bright:   #3b82f6;
    --text-head:     #0f172a;
    --text-body:     #334155;
    --text-muted:    #64748b;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #f8fafc;
    background-color: #f8fafc;
    color: #334155;
}

/* All headings dark on light bg */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: var(--text-head);
}

/* ===== Global text resets for light theme ===== */
p { color: #334155; }

/* ===== Tailwind overrides — light sections ===== */
section.bg-white   { background-color: #ffffff !important; }
section.bg-cream   { background-color: #f8fafc !important; }
.bg-cream          { background-color: #f8fafc !important; }

/* Headings in sections — always dark, but NOT the dark hero or dark sections */
section:not([data-hero]):not([data-dark]) h1,
section:not([data-hero]):not([data-dark]) h2,
section:not([data-hero]):not([data-dark]) h3,
section:not([data-hero]):not([data-dark]) h4 {
    color: #0f172a !important;
}

/* Section text colors — light sections only */
section:not([data-hero]):not([data-dark]) .text-gray-900  { color: #0f172a !important; }
section:not([data-hero]):not([data-dark]) .text-gray-800  { color: #0f172a !important; }
section:not([data-hero]):not([data-dark]) .text-gray-700  { color: #111827 !important; }
section:not([data-hero]):not([data-dark]) .text-gray-600  { color: #1e293b !important; }
section:not([data-hero]):not([data-dark]) .text-gray-500  { color: #374151 !important; }
section:not([data-hero]):not([data-dark]) .text-gray-400  { color: #64748b !important; }
section:not([data-hero]):not([data-dark]) p               { color: #1e293b !important; }
section:not([data-hero]):not([data-dark]) li              { color: #1e293b !important; }
/* Exception: p inside explicitly white-text containers (e.g. dark gradient boxes) */
section:not([data-hero]):not([data-dark]) .text-white p  { color: #ffffff !important; }
section span                             { color: inherit; }

/* Border overrides */
section .border-gray-100 { border-color: rgba(0,0,0,0.06) !important; }
section .border-gray-200 { border-color: rgba(0,0,0,0.1) !important; }

/* White card bg inside light sections */
section.bg-white .bg-white,
section.bg-cream .bg-white {
    background-color: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Gray-50/100 backgrounds inside sections */
section .bg-gray-50  { background-color: #f8fafc !important; }
section .bg-gray-100 { background-color: #f1f5f9 !important; }

/* shadow-sm — clean light shadow */
section .shadow-sm {
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}

/* Primary colors inside sections — needs to beat the section p { ... } rule (specificity 0,0,2,2) */
section .bg-primary\/10 { background-color: rgba(37,99,235,0.08) !important; }
section:not([data-hero]):not([data-dark]) .text-primary   { color: #2563eb !important; }
section .bg-purple-50   { background-color: rgba(139,92,246,0.08) !important; }
section:not([data-hero]):not([data-dark]) .text-purple-600 { color: #7c3aed !important; }

/* ===== Hero section — stays dark, immune to ALL light-theme overrides ===== */
section[data-hero] h1   { color: #ffffff !important; }
section[data-hero] h2   { color: #ffffff !important; }
section[data-hero] p    { color: #e2e8f0 !important; }
section[data-hero] li   { color: #e2e8f0 !important; }
/* Spans in hero: do NOT override with inherit — let inline styles win */
section[data-hero] span { color: inherit; }

/* ===== Hero (stays dark) ===== */
.hero-gradient {
    background: linear-gradient(150deg, #060912 0%, #0c1525 45%, #0e1e3a 100%);
}

.hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
}
.hero-wave svg { display: block; width: 100%; height: 60px; }
.hero-section  { position: relative; }

/* ===== Navigation (stays dark) ===== */
#main-nav {
    background: rgba(6, 9, 18, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255,255,255,0.055);
    transition: all 0.3s ease;
}
#main-nav.scrolled {
    background: rgba(6, 9, 18, 0.99);
    box-shadow: 0 4px 40px rgba(0,0,0,0.35);
}

.nav-link {
    color: rgba(255,255,255,0.92);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* Hulp Op Afstand highlight */
.nav-link-highlight {
    color: #93c5fd !important;
    font-weight: 600;
}
.nav-link-highlight:hover {
    color: #fff !important;
    background: rgba(59,130,246,0.15);
}

/* Active nav link */
.nav-link.active-page {
    color: #93c5fd !important;
}

/* ===== Mega Menu (white dropdown on dark nav) ===== */
.mega-menu {
    transform: translateY(8px);
    transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
}
.group:hover .mega-menu {
    transform: translateY(0);
}
.mega-menu-panel {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.12);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04);
    border-radius: 1rem;
}
.mega-menu-panel .menu-cat-title {
    color: #2563eb;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(37,99,235,0.12);
    display: block;
}
.mega-menu-panel .menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.45rem;
    font-size: 0.825rem;
    color: #334155;
    transition: all 0.12s ease;
}
.mega-menu-panel .menu-item:hover {
    background: rgba(37,99,235,0.06);
    color: #0f172a;
}
.mega-menu-panel .menu-item i {
    width: 1rem;
    color: #3b82f6;
    font-size: 0.7rem;
    text-align: center;
    flex-shrink: 0;
}
.mega-menu-panel .menu-item:hover i {
    color: #2563eb;
}

/* Branch/small dropdown */
.nav-dropdown-panel {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.12);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
    border-radius: 0.875rem;
}
.nav-dropdown-panel a {
    color: #334155;
    font-size: 0.825rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.12s ease;
}
.nav-dropdown-panel a:hover {
    background: rgba(37,99,235,0.06);
    color: #0f172a;
}
.nav-dropdown-panel a i {
    width: 0.9rem;
    color: #3b82f6;
    font-size: 0.65rem;
    text-align: center;
}

/* ===== Cards ===== */
.glass-card {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}
.glass-card:hover {
    box-shadow: 0 20px 50px rgba(37,99,235,0.1), 0 0 0 1px rgba(37,99,235,0.15);
    border-color: rgba(37,99,235,0.2);
    transform: translateY(-2px);
}
.glass-card h3 { color: #0f172a !important; }
.glass-card p  { color: #1e293b !important; }

/* Feature card (render_features) */
.feature-card {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 0.875rem;
    padding: 1.5rem;
    transition: all 0.25s ease;
}
.feature-card:hover {
    border-color: rgba(37,99,235,0.2);
    background: #f8fafc;
    box-shadow: 0 12px 35px rgba(37,99,235,0.08);
    transform: translateY(-2px);
}
.feature-card .feature-icon {
    width: 3rem;
    height: 3rem;
    background: #dbeafe;
    border: 1px solid rgba(37,99,235,0.3);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: background 0.2s;
}
.feature-card:hover .feature-icon {
    background: #bfdbfe;
    border-color: #93c5fd;
}
.feature-card .feature-icon i {
    color: #1e40af;
    font-size: 1.15rem;
}
.feature-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a !important;
    margin-bottom: 0.5rem;
}
.feature-card p {
    font-size: 0.82rem;
    line-height: 1.7;
    color: #1e293b !important;
}

/* Dark inner cards within light sections — protect their white text */
/* Must come AFTER .feature-card rules above to win the !important cascade battle */
.cta-card h2, .cta-card h3, .cta-card h4 { color: #ffffff !important; }
.cta-card p { color: #e2e8f0 !important; }
.cta-card span { color: #ffffff !important; }
.cta-card li { color: #e2e8f0 !important; }

/* feature-card heeft altijd een witte achtergrond — herstel leesbare kleuren
   ook als cta-card er tegelijk op staat (hogere specificiteit + !important wint) */
.feature-card.cta-card h2,
.feature-card.cta-card h3,
.feature-card.cta-card h4 { color: #0f172a !important; }
.feature-card.cta-card p  { color: #475569 !important; }
.feature-card.cta-card li { color: #475569 !important; }

/* Service card top border hover */
.service-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.1);
    transition: all 0.3s ease;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #818cf8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.service-card:hover::before  { transform: scaleX(1); }
.service-card:hover {
    border-color: rgba(37,99,235,0.2);
    box-shadow: 0 20px 50px rgba(37,99,235,0.1);
    transform: translateY(-3px);
}

/* ===== Section label ===== */
.section-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 0.75rem;
}

/* ===== Divider line ===== */
.section-divider {
    width: 3rem;
    height: 2px;
    background: linear-gradient(90deg, #2563eb, transparent);
    margin: 0.5rem auto 0;
}

/* ===== Blue badge ===== */
.blue-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(37,99,235,0.08);
    border: 1px solid rgba(37,99,235,0.15);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    border-radius: 2rem;
    margin-bottom: 1rem;
}

/* ===== Client logos carousel ===== */
.logo-marquee-wrap {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.logo-marquee-wrap:hover .logo-track { animation-play-state: paused; }

@keyframes logo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.logo-track {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: max-content;
    animation: logo-scroll 40s linear infinite;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.875rem;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    transition: all 0.2s ease;
    height: 72px;
    width: 160px;
    flex-shrink: 0;
    overflow: hidden;
}
.logo-item:hover {
    border-color: rgba(37,99,235,0.22);
    box-shadow: 0 4px 16px rgba(37,99,235,0.09);
}
.logo-item img {
    max-height: 38px;
    max-width: 120px;
    width: auto;
    height: auto;
    filter: none;
    opacity: 1;
    transition: all 0.25s;
    object-fit: contain;
    display: block;
}
.logo-item:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.05);
}
.logo-item .logo-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(15,23,42,0.45);
    letter-spacing: 0.04em;
    transition: color 0.2s;
}
.logo-item:hover .logo-text { color: rgba(15,23,42,0.75); }

/* ===== FAQ ===== */
.faq-item {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 0.875rem;
    overflow: hidden;
    transition: border-color 0.2s;
}
.faq-item.active { border-color: rgba(37,99,235,0.25); }

.faq-item .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.faq-item.active .faq-answer { max-height: 500px; }
.faq-item.active .faq-icon    { transform: rotate(180deg); }

.faq-trigger {
    background: transparent;
    color: #0f172a !important;
    font-weight: 600;
    font-size: 0.9rem;
}
.faq-trigger span { color: #0f172a !important; }
.faq-trigger:hover { background: rgba(0,0,0,0.02) !important; }
.faq-answer > div { color: #1e293b !important; }

/* ===== Counter ===== */
.counter { font-variant-numeric: tabular-nums; }

/* ===== CTA Section (stays dark blue) ===== */
.cta-section {
    background: linear-gradient(135deg, #0c1a3a 0%, #0e1d46 50%, #061228 100%);
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(59,130,246,0.12) 0%, transparent 70%);
}
.cta-section h2 { color: #ffffff !important; }
.cta-section p  { color: rgba(179,210,255,0.85) !important; }

/* ===== Testimonials ===== */
.testimonial-card {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.25s ease;
}
.testimonial-card:hover {
    border-color: rgba(37,99,235,0.15);
    box-shadow: 0 12px 40px rgba(37,99,235,0.08);
    transform: translateY(-2px);
}
.testimonial-card .border-t { border-color: rgba(15,23,42,0.08) !important; }
.testimonial-card p  { color: #334155 !important; }

/* ===== Branch cards ===== */
.branch-card {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 0.875rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}
.branch-card:hover {
    background: #f8fafc;
    border-color: rgba(37,99,235,0.2);
    transform: translateX(3px);
    box-shadow: 0 4px 20px rgba(37,99,235,0.08);
}

/* ===== Stat cards ===== */
.stat-card {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.stat-card:hover {
    border-color: rgba(37,99,235,0.2);
    box-shadow: 0 8px 30px rgba(37,99,235,0.1);
}

/* ===== News cards ===== */
.news-card {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}
.news-card:hover {
    border-color: rgba(37,99,235,0.2);
    box-shadow: 0 20px 50px rgba(37,99,235,0.1);
    transform: translateY(-3px);
}

/* ===== ScreenConnect iframe ===== */
.screenconnect-frame {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.875rem;
    overflow: hidden;
}

/* ===== Glow button ===== */
.btn-glow {
    box-shadow: 0 0 25px rgba(37,99,235,0.3);
}
.btn-glow:hover {
    box-shadow: 0 0 35px rgba(37,99,235,0.45);
}

/* ===== Homepage hero wave ===== */
.hero-home-wave path { fill: var(--bg-surface); }

/* ===== Mobile menu (stays dark) ===== */
body.menu-open { overflow: hidden; }
#mobile-menu { background: #0b1525; }

/* ===== WhatsApp pulse ===== */
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50%       { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
}

/* ===== USP icon box ===== */
.usp-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: #eff6ff;
    border: 2px solid #bfdbfe;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    transition: all 0.2s;
}
.usp-icon:hover, *:hover .usp-icon {
    background: #dbeafe;
    border-color: #93c5fd;
}
.usp-icon i { color: #1d4ed8; font-size: 1.3rem; }

/* ===== Intro text sections ===== */
.intro-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #1e293b !important;
}
.body-text {
    line-height: 1.75;
    color: #1e293b !important;
}

/* ===== Service intro highlight ===== */
.problem-box {
    background: rgba(239,68,68,0.05);
    border: 1px solid rgba(239,68,68,0.12);
    border-radius: 0.875rem;
    padding: 1.25rem 1.5rem;
}
.problem-box p { color: #dc2626 !important; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .mega-menu {
        position: static;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}
@media (max-width: 768px) {
    .hero-wave svg { height: 40px; }
}

/* ===== Print ===== */
@media print {
    #main-nav, footer { display: none; }
}

/* ===== Mobiel fixes ===== */
@media (max-width: 767px) {
    /* Minder wit ruimte bovenaan hero op mobiel */
    section[data-hero="true"] { padding-top: 80px !important; }

    /* 3 Basic/Standard/Premium kaarten verbergen op mobiel (werkplek-compleet) */
    .werkplek-pakketten { display: none !important; }
}

/* ===== Stats card labels op donkere achtergrond (over-ons) ===== */
/* Hogere specificiteit (0,2,3) wint van de globale p-override (0,2,2) */
div.text-white div.text-center p { color: #ffffff !important; }