/*!
 * =============================================================================
 * GPS HEADER
 * =============================================================================
 * PURPOSE      : Premium-SaaS site header. Sticky met glass/backdrop-blur,
 *                white surface met subtiele shadow on-scroll, dark grijs
 *                nav-items met brand-hover, en een pill-CTA voor Inloggen.
 *                Vervangt de oude solid-blauwe balk uit header.php zonder
 *                de markup te wijzigen.
 *
 * PATH         : wp-content/themes/sportlist/css/header-premium.css
 *
 * DEPENDENCIES : tokens.css (semantische kleurvars: --color-surface,
 *                --color-text, --color-text-muted, --color-brand, etc.)
 *                style.css (basis .nav-item-stijl wordt hier overruled)
 *                js/custom-script.js (toggelt `.is-scrolled` op .header)
 *
 * =============================================================================
 * CSS-VARIABELEN (gebruik uitsluitend deze)
 * =============================================================================
 *   --color-surface, --color-text, --color-text-muted, --color-brand,
 *   --color-brand-hover, --color-border-default, --color-focus-ring
 *
 * =============================================================================
 * SECTIONOVERZICHT
 * =============================================================================
 *   1. STICKY GLASS-WRAPPER
 *   2. CONTAINER-LAYOUT
 *   3. LOGO
 *   4. DESKTOP NAVIGATIE
 *   5. LOGIN PILL-CTA
 *   6. MOBIEL MENU-BUTTON
 *   7. RESPONSIVE + REDUCED-MOTION
 *
 * @package Sportlist
 */

/* ============================================================
   1. STICKY GLASS-WRAPPER
   De header.php-inline-CSS zet `.header-container` op brand-blauw.
   Hier overrulen we naar transparant + glass via een sticky wrap.
   ============================================================ */
header > .header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: background 0.2s ease, box-shadow 0.2s ease,
                border-color 0.2s ease;
}

header > .header.is-scrolled {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}

/* Override inline `background-color: var(--primary-color)` uit header.php. */
.header-container,
.header-top {
    background: transparent !important;
}

/* ============================================================
   2. CONTAINER-LAYOUT
   ============================================================ */
.header-container-items {
    width: min(1280px, 92%);
    margin: 0 auto;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* ============================================================
   3. LOGO
   ============================================================ */
.header-container-items .logo {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.header-container-items .logo img {
    width: 44px;
    height: 44px;
    transition: transform 0.2s ease;
}

.header-container-items .logo:hover img,
.header-container-items .logo:focus-visible img {
    transform: scale(1.04);
}

/* ============================================================
   4. DESKTOP NAVIGATIE
   We targeten met hogere specificiteit dan `.nav-item` in style.css
   zodat de witte tekstkleur (voor de blauwe balk) wordt overruled.
   ============================================================ */
.nav-items-desktop {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-weight: 500;
}

.header-container-items .nav-items-desktop .nav-item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 8px 14px;
    min-height: auto;
    max-width: none;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.2;
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease;
}

.header-container-items .nav-items-desktop .nav-item:hover,
.header-container-items .nav-items-desktop .nav-item:focus-visible {
    color: var(--color-brand);
    background: rgba(0, 74, 173, 0.06);
    outline: none;
}

.header-container-items .nav-items-desktop .nav-item--quiet {
    color: var(--color-text-muted);
}

.header-container-items .nav-items-desktop .nav-item--quiet:hover {
    color: var(--color-brand);
}

/* ============================================================
   5. LOGIN PILL-CTA
   ============================================================ */
.header-container-items .nav-items-desktop .nav-item.login-button {
    margin-left: 8px;
    padding: 10px 20px;
    background: var(--color-brand);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                0 4px 12px rgba(0, 74, 173, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                background 0.2s ease;
}

.header-container-items .nav-items-desktop .nav-item.login-button:hover {
    background: var(--color-brand-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 74, 173, 0.28);
}

.header-container-items .nav-items-desktop .nav-item.login-button:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 3px;
}

/* ============================================================
   6. MOBIEL MENU-BUTTON
   ============================================================ */
#menu-button-header {
    background: transparent;
    border: 1px solid var(--color-border-default);
    color: var(--color-text);
    padding: 8px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

#menu-button-header:hover {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.16);
}

#menu-button-header .nav-items-mobiel-menu-text h3 {
    color: var(--color-text);
    margin: 0;
    font-size: 13px;
    line-height: 1;
}

#menu-button-header .material-icons {
    color: var(--color-text);
    font-size: 20px;
}

/* ============================================================
   7. RESPONSIVE + REDUCED-MOTION
   ============================================================ */
@media (max-width: 1000px) {
    .header-container-items {
        padding: 10px 0;
    }
    .nav-items-desktop {
        display: none;
    }
}

@media (max-width: 600px) {
    .header-container-items .logo img {
        width: 38px;
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    header > .header,
    .header-container-items .logo img,
    .header-container-items .nav-items-desktop .nav-item,
    #menu-button-header {
        transition: none;
    }
    .header-container-items .nav-items-desktop .nav-item.login-button:hover {
        transform: none;
    }
}