/*
 * site-header.css — InterAIP.ai mega-menu header (desktop)
 * Mobile overrides live in site-header-mobile.css
 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    --nav-height:   116px;
}

/* ── Header shell ───────────────────────────────────────────────────── */
.site-header {
    position:         sticky;
    top:              0;
    z-index:          200;
    background:       rgba(255,255,255,0.88);
    backdrop-filter:  blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom:    2px solid var(--header-accent, #fbbf24);
    box-shadow:       0 1px 0 rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.05);
    overflow:         visible;
}
[data-theme="dark"] .site-header {
    background:    rgba(15,23,42,0.92);
    border-bottom-color: #334155;
    box-shadow:    0 1px 0 rgba(0,0,0,0.2), 0 4px 20px rgba(0,0,0,0.35);
}

/* ── Single-row inner ───────────────────────────────────────────────── */
.nav-inner {
    display:      flex;
    align-items:  center;
    gap:          0;
    padding:      0 1.5rem;
    min-height:   var(--nav-height);
    overflow:     visible;
}

/* ── Logo ───────────────────────────────────────────────────────────── */
.nav-logo {
    display:         flex;
    align-items:     center;
    text-decoration: none;
    flex-shrink:     0;
    margin-right:    1.75rem;
}
.nav-logo-img {
    height:    110px;
    width:     auto;
    display:   block;
}

/* ── Nav links (ul) ─────────────────────────────────────────────────── */
.nav-links {
    display:     flex;
    align-items: center;
    gap:         2px;
    list-style:  none;
    flex:        1;
    overflow:    visible;
    padding:     0;
    margin:      0;
}

/* ── Nav item (li) — anchor for mega menu ───────────────────────────── */
.nav-item {
    position: relative;
}

/* ── Nav link / button ──────────────────────────────────────────────── */
.nav-link {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    padding:         8px 13px;
    border-radius:   8px;
    font-family:     var(--font-display);
    font-size:       0.875rem;
    font-weight:     600;
    letter-spacing:  0.01em;
    color:           var(--text-secondary, #4b5563);
    text-decoration: none;
    white-space:     nowrap;
    background:      none;
    border:          none;
    cursor:          pointer;
    transition:      color 0.15s, background 0.15s;
    line-height:     1.4;
}
[data-theme="dark"] .nav-link {
    color: var(--text-secondary, #94a3b8);
}
.nav-link:hover,
.nav-item.is-open > .nav-link,
.nav-link.active {
    color:      var(--primary, #2563eb);
    background: rgba(37,99,235,0.07);
}
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-item.is-open > .nav-link,
[data-theme="dark"] .nav-link.active {
    color:      #93c5fd;
    background: rgba(37,99,235,0.14);
}

.nav-chevron {
    font-size:  0.58rem;
    opacity:    0.45;
    transition: transform 0.2s, opacity 0.2s;
    line-height: 1;
}
.nav-item.is-open > .nav-link .nav-chevron {
    transform: rotate(180deg);
    opacity:   0.75;
}

/* ══════════════════════════════════════════════════════════════════════
   MEGA MENU
══════════════════════════════════════════════════════════════════════ */
.mega-menu {
    display:       none;
    position:      absolute;
    top:           calc(100% + 10px);
    left:          50%;
    transform:     translateX(-50%);
    background:    var(--surface, #fff);
    border:        1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    box-shadow:    0 12px 40px rgba(0,0,0,0.13);
    z-index:       400;
    animation:     megaIn 0.18s ease both;
    overflow:      hidden;
}
[data-theme="dark"] .mega-menu {
    background: var(--surface, #1e293b);
    border-color: var(--border, #334155);
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
.nav-item.is-open > .mega-menu { display: block; }

@keyframes megaIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.mega-menu-wide { width: 680px; padding: 1.25rem; }
.mega-menu-int  { width: 540px; padding: 1.25rem; }
.mega-menu-narrow { width: 310px; padding: 0.75rem; }

/* Section heading */
.mega-section-label {
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--text-muted, #9ca3af);
    padding:        0 0.5rem 0.6rem;
}

/* Grid layouts */
.mega-grid-3 {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   3px;
}
.mega-grid-2 {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   3px;
}
.mega-2col {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0 1.5rem;
}

/* ── Menu card ── */
.menu-card {
    display:         flex;
    align-items:     flex-start;
    gap:             11px;
    padding:         10px 11px;
    border-radius:   10px;
    text-decoration: none;
    color:           var(--text, #0f172a);
    transition:      background 0.13s;
    cursor:          pointer;
}
.menu-card:hover { background: rgba(37,99,235,0.06); }
[data-theme="dark"] .menu-card:hover { background: rgba(37,99,235,0.13); }

.menu-card-icon {
    width:           36px;
    height:          36px;
    border-radius:   9px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1rem;
    flex-shrink:     0;
}
[data-theme="dark"] .menu-card-icon { filter: brightness(0.85) saturate(0.9); }

.menu-card-title {
    font-family:  var(--font-display);
    font-size:    0.86rem;
    font-weight:  600;
    color:        var(--text, #0f172a);
    margin-bottom:2px;
    display:      block;
}
[data-theme="dark"] .menu-card-title { color: var(--text, #f1f5f9); }

.menu-card-desc {
    font-size:   0.77rem;
    color:       var(--text-secondary, #4b5563);
    line-height: 1.4;
    display:     block;
}
[data-theme="dark"] .menu-card-desc { color: var(--text-secondary, #94a3b8); }

/* "All integrations" row */
.menu-card-all {
    background:    rgba(37,99,235,0.04);
    border-radius: 10px;
}
[data-theme="dark"] .menu-card-all { background: rgba(37,99,235,0.09); }
.menu-card-icon-grad {
    background:  linear-gradient(135deg, #2563eb, #7c3aed);
    color:       #fff;
    font-size:   1.1rem;
    font-weight: 700;
}

/* Active menu card — current page highlighted in mega menu */
.menu-card-active {
    background:  rgba(37,99,235,0.08) !important;
    box-shadow:  inset 3px 0 0 #2563eb;
}
[data-theme="dark"] .menu-card-active {
    background: rgba(37,99,235,0.16) !important;
    box-shadow: inset 3px 0 0 #60a5fa;
}
.menu-card-active .menu-card-title {
    color: var(--primary, #2563eb) !important;
}
[data-theme="dark"] .menu-card-active .menu-card-title {
    color: #93c5fd !important;
}

/* Active featured CTA (e.g. "Alle functies") */
.menu-featured-active {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.5) inset, 0 4px 16px rgba(37,99,235,0.4);
    opacity:    0.95;
}

/* Divider */
.menu-divider {
    height:     1px;
    background: var(--border, #e2e8f0);
    margin:     0.7rem 0;
}

/* Featured gradient CTA */
.menu-featured {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         13px 15px;
    border-radius:   10px;
    background:      linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color:           #fff;
    text-decoration: none;
    transition:      opacity 0.15s, transform 0.1s;
}
.menu-featured:hover { opacity: 0.9; transform: translateY(-1px); }
.menu-featured-icon  { font-size: 1.4rem; flex-shrink: 0; }
.menu-featured-title { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 1px; }
.menu-featured-sub   { display: block; font-size: 0.76rem; opacity: 0.85; }
.menu-featured-arrow { margin-left: auto; font-size: 1.3rem; opacity: 0.7; }

/* Status bar */
.menu-status {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     7px 11px;
    font-size:   0.77rem;
    color:       var(--text-secondary, #4b5563);
}
[data-theme="dark"] .menu-status { color: var(--text-secondary, #94a3b8); }
.status-dot {
    width:        7px;
    height:       7px;
    border-radius:50%;
    background:   #10b981;
    box-shadow:   0 0 0 2px rgba(16,185,129,0.22);
    flex-shrink:  0;
}
.menu-status-link {
    margin-left:     auto;
    color:           var(--primary, #2563eb);
    font-weight:     600;
    text-decoration: none;
}
.menu-status-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   ACTIONS (right side)
══════════════════════════════════════════════════════════════════════ */
.nav-actions {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Theme toggle */
.theme-toggle {
    width:           36px;
    height:          36px;
    border-radius:   8px;
    border:          1px solid var(--border, #e2e8f0);
    background:      none;
    color:           var(--text-secondary, #4b5563);
    font-size:       1.05rem;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
}
.theme-toggle:hover {
    background:   rgba(37,99,235,0.08);
    color:        var(--primary, #2563eb);
    border-color: rgba(37,99,235,0.3);
}

/* Language dropdown */
.lang-dropdown         { position: relative; flex-shrink: 0; }
.lang-dropdown-trigger {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    height:        32px;
    padding:       0 9px 0 7px;
    border-radius: 999px;
    border:        none;
    background:    rgba(15,23,42,0.07);
    font-size:     1.05rem;
    color:         var(--text, #1e293b);
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s;
    line-height:   1;
    font-family:   inherit;
}
[data-theme="dark"] .lang-dropdown-trigger {
    background: rgba(255,255,255,0.12);
    color:      var(--text, #f1f5f9);
}
.lang-dropdown-trigger:hover,
.lang-dropdown.open .lang-dropdown-trigger {
    background: rgba(37,99,235,0.13);
    color:      var(--primary, #2563eb);
}
[data-theme="dark"] .lang-dropdown-trigger:hover,
[data-theme="dark"] .lang-dropdown.open .lang-dropdown-trigger {
    background: rgba(124,58,237,0.25);
    color:      #a78bfa;
}
.lang-flag-svg {
    width:        20px;
    height:       14px;
    border-radius: 2px;
    flex-shrink:  0;
    display:      block;
    overflow:     hidden;
    box-shadow:   0 0 0 1px rgba(0,0,0,0.12);
}
.lang-current-code {
    font-size:     0.75rem;
    font-weight:   700;
    letter-spacing: 0.03em;
    line-height:   1;
}
.lang-caret { font-size: 0.55rem; opacity: 0.5; transition: transform 0.2s; margin-left: 1px; }
.lang-dropdown.open .lang-caret { transform: rotate(180deg); }

.lang-dropdown-menu {
    display:       none;
    position:      absolute;
    top:           calc(100% + 6px);
    right:         0;
    min-width:     170px;
    background:    #fff;
    border:        1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow:    0 12px 32px rgba(15,23,42,0.15);
    padding:       6px;
    list-style:    none;
    z-index:       500;
}
[data-theme="dark"] .lang-dropdown-menu {
    background:   #1e293b;
    border-color: #334155;
    box-shadow:   0 12px 32px rgba(0,0,0,0.5);
}
.lang-dropdown.open .lang-dropdown-menu { display: block; }
.lang-dropdown-menu li { list-style: none; }

.landing-lang-btn {
    display:      flex;
    align-items:  center;
    gap:          10px;
    width:        100%;
    padding:      8px 12px !important;
    border-radius:6px;
    border:       none;
    background:   transparent;
    font-size:    0.88rem !important;
    font-weight:  500;
    color:        #1e293b;
    cursor:       pointer;
    text-align:   left;
    transition:   background 0.13s;
    opacity:      1 !important;
}
[data-theme="dark"] .landing-lang-btn { color: #f1f5f9; }
.landing-lang-btn:hover           { background: rgba(37,99,235,0.08); }
.landing-lang-btn.active          { background: rgba(37,99,235,0.1); color: #2563eb; font-weight: 600; }
[data-theme="dark"] .landing-lang-btn.active { color: #93c5fd; }
.lang-flag { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.lang-name { flex: 1; }

/* Login button */
.nav-btn-outline {
    padding:         7px 15px;
    border-radius:   8px;
    border:          1.5px solid var(--border, #e2e8f0);
    background:      none;
    font-family:     var(--font-display);
    font-size:       0.85rem;
    font-weight:     600;
    color:           var(--text, #0f172a);
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
    transition:      border-color 0.15s, color 0.15s, background 0.15s;
    white-space:     nowrap;
}
[data-theme="dark"] .nav-btn-outline {
    color:        #f1f5f9;
    border-color: #334155;
}
.nav-btn-outline:hover {
    border-color: var(--primary, #2563eb);
    color:        var(--primary, #2563eb);
    background:   rgba(37,99,235,0.04);
    text-decoration: none;
}

/* CTA button */
.nav-btn-primary {
    padding:         8px 18px;
    border-radius:   8px;
    border:          none;
    background:      linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    font-family:     var(--font-display);
    font-size:       0.875rem;
    font-weight:     700;
    color:           #fff;
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    box-shadow:      0 2px 8px rgba(37,99,235,0.3);
    transition:      opacity 0.15s, box-shadow 0.15s, transform 0.1s;
    white-space:     nowrap;
}
.nav-btn-primary:hover {
    opacity:         0.92;
    box-shadow:      0 4px 14px rgba(37,99,235,0.4);
    transform:       translateY(-1px);
    text-decoration: none;
}

/* Mobile toggle — hidden on desktop */
.mobile-toggle {
    display:    none;
    background: none;
    border:     none;
    font-size:  1.5rem;
    color:      var(--text, #0f172a);
    cursor:     pointer;
    padding:    4px 6px;
}
[data-theme="dark"] .mobile-toggle { color: #f1f5f9; }

/* Backward-compat: old two-row classes — hide if still referenced */
.header-nav-row, .header-actions-row { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   BREADCRUMB BAR
══════════════════════════════════════════════════════════════════════ */
.site-breadcrumb {
    background:   rgba(248,250,252,0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border, #e2e8f0);
    padding:      0 1.5rem;
}
[data-theme="dark"] .site-breadcrumb {
    background:   rgba(15,23,42,0.6);
    border-bottom-color: #1e293b;
}

.breadcrumb-list {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         2px;
    list-style:  none;
    margin:      0;
    padding:     0.55rem 0;
    max-width:   1400px;
    font-size:   0.8rem;
}

.breadcrumb-item,
.breadcrumb-sep {
    display:     flex;
    align-items: center;
}

.breadcrumb-sep {
    color:       var(--text-muted, #9ca3af);
    font-size:   0.75rem;
    padding:     0 3px;
    user-select: none;
}

.breadcrumb-link {
    color:           var(--text-secondary, #4b5563);
    text-decoration: none;
    border-radius:   4px;
    padding:         1px 4px;
    transition:      color 0.13s, background 0.13s;
}
.breadcrumb-link:hover {
    color:       var(--primary, #2563eb);
    background:  rgba(37,99,235,0.07);
    text-decoration: none;
}
[data-theme="dark"] .breadcrumb-link {
    color: var(--text-secondary, #94a3b8);
}
[data-theme="dark"] .breadcrumb-link:hover {
    color: #93c5fd;
    background: rgba(37,99,235,0.14);
}

.breadcrumb-current span {
    color:       var(--text, #0f172a);
    font-weight: 500;
    padding:     1px 4px;
}
[data-theme="dark"] .breadcrumb-current span {
    color: var(--text, #f1f5f9);
}