/**
 * Default Header Styles
 *
 * Standaard sticky header met lichte achtergrond.
 *
 * @package Kolk
 */

/* Base styling - light from start */
header.header--default {
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(199, 178, 153, 0.35);
    box-shadow: none;
    padding: 20px;
    transform-origin: top;
}

/* Logo switching - show light logo before scroll, dark after */
header.header--default .nav-logo--light,
header.header--default .mobile-logo--light {
    display: block;
}

header.header--default .nav-logo--dark,
header.header--default .mobile-logo--dark {
    display: none;
}

/* Navigation text colors */
header.header--default #primary-navigation a {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

header.header--default #primary-navigation a:hover {
    color: #F5E7D6 !important;
    background: rgba(209, 191, 165, 0.15) !important;
}

/* Navigation pill - transparent on default */
header.header--default #primary-navigation {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
}

/* Mini-cart icon color follows header state */
header.header--default .kolk-cart-toggle {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

header.header--default .kolk-cart-toggle:hover {
    color: #F5E7D6 !important;
    background: rgba(209, 191, 165, 0.15) !important;
}

/* After scroll - keep same, just tighten height */
header.header--default.scrolled {
    background: rgba(255, 255, 255, 0.97);
    padding: 6px 20px;
}

/* Mobile scrolled: more padding for better spacing */
@media (max-width: 767.98px) {
    header.header--default.scrolled {
        padding: 6px 20px;
    }
}

header.header--default.scrolled .nav-logo--light,
header.header--default.scrolled .mobile-logo--light {
    display: none;
}

header.header--default.scrolled .nav-logo--dark,
header.header--default.scrolled .mobile-logo--dark {
    display: block;
}

header.header--default.scrolled #primary-navigation a {
    color: #1A1E21 !important;
    text-shadow: none;
}

header.header--default.scrolled .kolk-cart-toggle {
    color: #1A1E21 !important;
    text-shadow: none;
}

header.header--default.scrolled .kolk-cart-toggle:hover {
    color: #D1BFA5 !important;
    background: rgba(209, 191, 165, 0.15) !important;
}

header.header--default.scrolled #primary-navigation a:hover {
    color: #D1BFA5 !important;
    background: rgba(209, 191, 165, 0.15) !important;
}

/* Border divider color switch */
header.header--default #primary-navigation .border-l {
    border-color: rgba(26, 30, 33, 0.1);
}

/* Mobile hamburger styling - white in unscrolled state */
header.header--default #primary-menu-toggle {
    color: #FFFFFF;
    background: transparent;
    border: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

header.header--default #primary-menu-toggle:hover {
    color: #F5E7D6;
    background: rgba(209, 191, 165, 0.15);
}

/* Mobile hamburger - dark in scrolled state */
header.header--default.scrolled #primary-menu-toggle {
    color: #1A1E21;
    text-shadow: none;
}

header.header--default.scrolled #primary-menu-toggle:hover {
    color: #D1BFA5;
}

/* Height management - vaste hoogte voorkomt layout shift bij scroll */
header.header--default {
    min-height: 84px;
}

header.header--default.scrolled {
    min-height: 44px;
}

header.header--default.scrolled .nav-logo img {
    max-height: 26px;
    transition: max-height 0.3s ease;
    transform: translateY(-1px);
}

/* Mobile solid state */
@media (max-width: 767.98px) {
    header.header--default.mobile-solid {
        background: rgba(255, 255, 255, 0.97);
    }
}

/* Transitions */
header.header--default,
header.header--default #primary-navigation {
    transition: background-color 0.2s ease-out, backdrop-filter 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out, padding 0.2s ease-out, min-height 0.2s ease-out;
}

header.header--default .nav-logo--light,
header.header--default .nav-logo--dark {
    transition: opacity 0.2s ease-out;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    header.header--default,
    header.header--default #primary-navigation,
    header.header--default .nav-logo--light,
    header.header--default .nav-logo--dark {
        transition: none !important;
    }
}