/*
 * site-header-mobile.css — responsive overrides for the mega-menu header
 */

/* ── Scale logo at mid widths ─────────────────────────────────────── */
@media (max-width: 1300px) {
    .nav-logo-img { height: 88px !important; }
    :root { --nav-height: 96px; }
}
@media (max-width: 1100px) {
    .nav-logo-img { height: 70px !important; }
    :root { --nav-height: 78px; }
    .nav-link { padding: 7px 9px !important; font-size: 0.82rem !important; }
    .nav-actions { gap: 4px !important; }
}

/* ── Tablet: hide mega menus, keep nav visible ────────────────────── */
@media (max-width: 960px) {
    .mega-menu { display: none !important; }
    .nav-chevron { display: none !important; }
    .nav-link { font-size: 0.8rem !important; padding: 6px 8px !important; }
    .nav-btn-outline { display: none !important; }
}

/* ── Mobile: hamburger drawer ─────────────────────────────────────── */
@media (max-width: 780px) {
    html, body { overflow-x: clip !important; }

    :root { --nav-height: 72px; }
    .nav-logo-img { height: 58px !important; }

    /* Show hamburger, hide nav links */
    .mobile-toggle { display: inline-flex !important; margin-left: auto; }
    .nav-links      { display: none !important; }

    /* Drawer when .open */
    .nav-links.open {
        display:        flex !important;
        position:       absolute !important;
        top:            100%;
        left:           0;
        right:          0;
        max-height:     calc(100vh - var(--nav-height, 72px));
        overflow-y:     auto;
        flex-direction: column !important;
        background:     #ffffff !important;
        border-top:     1px solid #e2e8f0;
        border-bottom:  2px solid #7c3aed;
        box-shadow:     0 8px 24px rgba(15,23,42,0.12);
        padding:        0.75rem 1rem !important;
        gap:            2px !important;
        z-index:        300;
        list-style:     none !important;
    }
    [data-theme="dark"] .nav-links.open {
        background:   #0f172a !important;
        border-color: #334155;
        box-shadow:   0 8px 24px rgba(0,0,0,0.5);
    }
    .nav-links.open .nav-item { width: 100%; }

    /* Flat links in drawer — no mega menus */
    .nav-links.open .nav-link {
        width:       100% !important;
        color:       #1e293b !important;
        font-size:   0.95rem !important;
        padding:     10px 12px !important;
        border-radius: 8px;
    }
    [data-theme="dark"] .nav-links.open .nav-link { color: #f1f5f9 !important; }
    .nav-links.open .nav-link:hover,
    .nav-links.open .nav-link.active {
        background: rgba(37,99,235,0.08) !important;
        color:      #2563eb !important;
    }
    /* ── Nav buttons as section labels in mobile drawer ─────────────── */
    /* Buttons that open mega menus become non-interactive section headers */
    .nav-links.open .nav-link[data-mobile-href],
    .nav-links.open button.nav-link {
        color:         var(--text-secondary, #64748b) !important;
        font-size:     0.72rem !important;
        font-weight:   700 !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
        padding:       10px 12px 2px !important;
        cursor:        default !important;
        pointer-events: none;
        background:    transparent !important;
    }
    .nav-links.open button.nav-link:first-child { padding-top: 4px !important; }

    /* Actions: compact row — hide CTA (it's in the drawer), keep lang + theme */
    .nav-actions {
        gap:        5px !important;
    }
    .nav-btn-outline { display: none !important; }
    .nav-btn-primary { display: none !important; }
    .theme-toggle {
        width:  32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 0.9rem !important;
        padding: 0 !important;
    }
    /* Pill: toon alleen vlag op mobiel, verberg code + caret */
    .lang-dropdown-trigger {
        height:    32px !important;
        padding:   0 8px !important;
        font-size: 1.1rem !important;
        min-width: 0 !important;
        width:     auto !important;
    }
    .lang-current-code,
    .lang-dropdown-trigger .lang-caret { display: none !important; }

    /* ── Flat sub-links from mega menus ──────────────────────────────── */
    /* Show menu-card links as indented flat links; hide everything else */
    .nav-links.open .mega-menu,
    .nav-links.open .mega-menu-wide,
    .nav-links.open .mega-menu-int,
    .nav-links.open .mega-menu-narrow {
        display:    block !important;
        position:   static !important;
        transform:  none !important;
        left:       auto !important;
        background: transparent !important;
        box-shadow: none !important;
        padding:    0 0 0.25rem 1rem !important;
        border:     none !important;
        width:      auto !important;
        min-width:  0 !important;
        margin:     0 !important;
        animation:  none !important;
        overflow:   visible !important;
    }
    .nav-links.open .mega-grid-3,
    .nav-links.open .mega-grid-2,
    .nav-links.open .mega-2col,
    .nav-links.open .mega-2col > div { display: block !important; }

    .nav-links.open .menu-card {
        display:    flex !important;
        align-items: center !important;
        gap:        0.5rem !important;
        padding:    6px 8px !important;
        border:     none !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 6px;
        text-decoration: none;
    }
    .nav-links.open .menu-card:hover { background: rgba(37,99,235,0.07) !important; }

    .nav-links.open .menu-card-icon {
        width:    20px !important;
        height:   20px !important;
        min-width: 20px !important;
        font-size: 0.7rem !important;
        border-radius: 4px !important;
    }
    .nav-links.open .menu-card-desc   { display: none !important; }
    .nav-links.open .menu-card-title  { font-size: 0.88rem !important; color: var(--text-secondary, #4b5563) !important; font-weight: 500 !important; }
    .nav-links.open .mega-section-label { display: none !important; }
    .nav-links.open .menu-divider       { display: none !important; }
    .nav-links.open .menu-card-all      { display: none !important; }
    /* Featured "alle functies" link — show as small link */
    .nav-links.open .menu-featured {
        display:   flex !important;
        padding:   6px 8px !important;
        font-size: 0.82rem !important;
        border:    none !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 6px;
    }
    .nav-links.open .menu-featured-icon,
    .nav-links.open .menu-featured-arrow { display: none !important; }
    .nav-links.open .menu-featured-title { font-size: 0.82rem !important; color: var(--primary, #2563eb) !important; }
    .nav-links.open .menu-featured-sub   { display: none !important; }

    /* CTA in drawer */
    .nav-mobile-cta {
        display:         block !important;
        margin:          0.75rem 0 0 !important;
        padding:         10px 12px !important;
        background:      linear-gradient(135deg, #2563eb, #7c3aed) !important;
        color:           #fff !important;
        text-align:      center !important;
        border-radius:   8px !important;
        font-weight:     700 !important;
        font-size:       0.9rem !important;
        text-decoration: none !important;
    }

    /* Mobile lang row injected by site-header-mobile.js */
    .nav-mobile-lang-item {
        border-top:  1px solid #e2e8f0;
        padding-top: 0.5rem !important;
        margin-top:  0.25rem !important;
    }
    [data-theme="dark"] .nav-mobile-lang-item { border-top-color: #334155; }
}

/* ── Breadcrumb responsive ────────────────────────────────────────── */
@media (max-width: 600px) {
    .site-breadcrumb { padding: 0 1rem; }
    .breadcrumb-list { font-size: 0.75rem; gap: 0; }
}

@media (max-width: 420px) {
    .nav-btn-primary {
        padding:   5px 9px !important;
        font-size: 0.75rem !important;
    }
    .theme-toggle,
    .lang-dropdown-trigger {
        width:  28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }
}