/* ========================================
   HEADER SUPER - Logo System
   ======================================== */

.brand-item {
    position: relative;
}

.logo-white,
.logo-dark,
.logo-color {
    position: absolute;
    inset: 0;
    transition: opacity .3s ease;
}

.logo-white {
    opacity: 1;
    position: relative;
}

/* Breathing animation on hover for center logos */
#super-center-logos .brand-item:hover .logo-white,
#super-center-logos .brand-item:hover .logo-dark,
#super-center-logos .brand-item:hover .logo-color {
    animation: logo-breathe 2.2s ease-in-out infinite;
}

@keyframes logo-breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}



.logo-dark {
    opacity: 0;
    pointer-events: none;
}

.logo-color {
    opacity: 0;
    pointer-events: none;
}

/* ACTIVE → always show color */
.brand-item.active .logo-color {
    opacity: 1;
}

.brand-item.active .logo-white {
    opacity: 0;
}

.brand-item.active .logo-dark {
    opacity: 0;
}

/* HOVER → show color */
.brand-item:hover .logo-color {
    opacity: 1;
}

/* HOVER → hide others to prevent overlap */
.brand-item:hover .logo-white {
    opacity: 0;
}

#site-super-header.scrolled .brand-item:hover .logo-dark {
    opacity: 0;
}

/* ========================================
   HEADER SUPER - Scroll Logic
   ======================================== */

#site-super-header.scrolled .logo-white {
    opacity: 0;
}

#site-super-header.scrolled .logo-dark {
    opacity: 1;
}

/* Active stays color even on scroll */
#site-super-header.scrolled .brand-item.active .logo-color {
    opacity: 1;
}

#site-super-header.scrolled .brand-item.active .logo-dark {
    opacity: 0;
}

/* ========================================
   HEADER SUPER - Brand Gradients
   ======================================== */

.brand-item::before {
    content: "";
    position: absolute;
    /* Measured: offset from brand-item to header edge is ~16px */
    top: -16px;
    bottom: -16px;
    /* Increased by 1px each side (was -12px) to reach/overlap dividers */
    left: -15px;
    right: -15px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity .35s ease, transform .35s ease;
    z-index: -1;
    background: linear-gradient(to top,
            rgba(255, 248, 240, 0.6),
            rgba(151, 148, 142, 0.6) 60%,
            rgba(97, 95, 93, 0.6) 100%);
}

/* hover + active glow */
.brand-item:hover::before,
.brand-item.active::before {
    opacity: 1;
    transform: scale(1);
    animation: none;
}

/* Arrow indicator for clickable logos */
.brand-arrow-indicator {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 16px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    z-index: 10;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    animation: arrow-bounce 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.15));
}

.brand-arrow-indicator svg {
    width: 100%;
    height: 100%;
}

@keyframes arrow-bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-4px);
    }
}

.brand-item:hover .brand-arrow-indicator {
    color: white;
    transform: translateX(-50%) translateY(-6px);
    animation: none;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));
}

#site-super-header.scrolled .brand-arrow-indicator {
    color: rgba(12, 17, 28, 0.9);
    filter: drop-shadow(0 0 3px rgba(12, 17, 28, 0.08));
}

#site-super-header.scrolled .brand-item:hover .brand-arrow-indicator {
    color: #0b1220;
    filter: drop-shadow(0 0 8px rgba(12, 17, 28, 0.2));
}

/* White underline on logo hover */
.brand-item::after {
    content: "";
    position: absolute;
    /* Match horizontal sizing with overlay (increased to -13px) */
    left: -15px;
    right: -15px;
    /* Position at bottom of header (16px below logo bottom) */
    bottom: -16px;
    transform: scaleX(0);
    height: 5px;
    background: white;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.brand-item:hover::after,
.brand-item.active::after {
    transform: scaleX(1);
    opacity: 1;
}

#site-super-header.scrolled .brand-item::after {
    background-color: rgba(12, 17, 28, 0.9);
}

/* ========================================
   HEADER SUPER - Base Styles
   ======================================== */

#site-super-header {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.15));
    backdrop-filter: blur(3px);
    transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.divider {
    transition: background-color .3s, opacity .3s;
}

#site-super-header::after {
    transition: background-color .3s, opacity .3s;
}

#site-super-header.scrolled::after {
    background-color: rgba(12, 17, 28, 0.5);
}

.lang-link,
.slash {
    color: #fff;
    opacity: .95;
    transition: .3s;
}

#site-super-header.scrolled {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 18px rgba(12, 12, 15, 0.06);
    backdrop-filter: none;
}

#site-super-header.scrolled .divider {
    background-color: rgba(12, 17, 28, 0.9);
}

#site-super-header.scrolled .lang-link,
#site-super-header.scrolled .slash {
    color: #0b1220;
    opacity: 1;
}

/* Header icons */
.header-icon {
    color: #fff;
}

#site-super-header.scrolled .header-icon {
    color: #0b1220;
}

/* Language underlines */
.lang-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.lang-link.lang-active::after,
.lang-link:hover::after {
    transform: scaleX(1);
}

/* ========================================
   HEADER SUPER - Desktop Styles (1024px+)
   ======================================== */
@media (min-width: 1024px) {
    #site-super-header>div:first-child {
        height: 90px;
    }

    /* Scale down for 1280-1400px */
    @media (max-width: 1400px) {
        #site-super-header>div:first-child {
            height: 80px;
        }

        #super-center-logos {
            gap: 0.75rem;
        }

        #super-center-logos .brand-item {
            width: 130px !important;
        }

        /* Adjusted: -7px (was -6px) */
        .brand-item::before {
            top: -16px;
            bottom: -16px;
            left: -7px;
            right: -7px;
        }

        .brand-item::after {
            left: -7px;
            right: -7px;
            bottom: -16px;
        }

        /* Scale Kaz logo */
        #site-super-header .absolute.left-4 img {
            height: 60px !important;
        }

        /* Adjust brand header position */
        #site-brand-header {
            top: 80px !important;
        }
    }

    /* Further scale down for 1150-1280px */
    @media (max-width: 1280px) {
        #site-super-header>div:first-child {
            height: 75px;
        }

        #super-center-logos {
            gap: 0.5rem;
        }

        #super-center-logos .brand-item {
            width: 115px !important;
        }

        #super-center-logos .divider {
            height: 2.5rem;
        }

        /* Adjusted: -5px (was -4px) */
        .brand-item::before {
            top: -17px;
            bottom: -17px;
            left: -5px;
            right: -5px;
        }

        .brand-item::after {
            left: -5px;
            right: -5px;
            bottom: -17px;
        }

        /* Scale Kaz logo */
        #site-super-header .absolute.left-4 img {
            height: 55px !important;
        }

        /* Adjust brand header position */
        #site-brand-header {
            top: 75px !important;
        }
    }

    /* Smallest scale for 1024-1150px */
    @media (max-width: 1150px) {
        #site-super-header>div:first-child {
            height: 70px;
        }

        #super-center-logos {
            gap: 0.375rem;
        }

        #super-center-logos .brand-item {
            width: 100px !important;
        }

        #super-center-logos .divider {
            height: 2rem;
        }

        /* Adjusted: -4px (was -3px) */
        .brand-item::before {
            top: -17px;
            bottom: -17px;
            left: -4px;
            right: -4px;
        }

        .brand-item::after {
            left: -4px;
            right: -4px;
            bottom: -17px;
            height: 3px;
        }

        /* Scale Kaz logo */
        #site-super-header .absolute.left-4 img {
            height: 50px !important;
        }

        /* Adjust brand header position */
        #site-brand-header {
            top: 70px !important;
        }
    }
}

/* ========================================
   HEADER SUPER - Mobile/Tablet Styles (<1024px)
   ======================================== */
@media (max-width: 1023px) {
    #site-super-header>div:first-child {
        height: 60px !important;
    }

    #site-super-header .absolute.left-4 img {
        height: 36px !important;
    }

    #super-right {
        gap: 0.5rem;
    }

    #super-lang {
        font-size: 12px;
    }

    /* Smaller icons on mobile/tablet */
    #super-right .header-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Smaller burger button on mobile */
    #super-burger-btn {
        padding: 0.375rem;
        gap: 0.25rem;
    }

    #super-burger-btn .burger-line {
        width: 1.25rem;
        height: 2px;
    }
}

/* Extra compact styles for very small screens */
@media (max-width: 350px) {

    /* Move logo closer to edge for more breathing room */
    #site-super-header .absolute.left-4 {
        left: 0.5rem !important;
    }

    #site-super-header .absolute.left-4 img {
        height: 32px !important;
    }

    /* Move right icons closer to edge */
    #super-right {
        right: 0.5rem !important;
        gap: 0.25rem;
    }

    #super-lang {
        font-size: 11px;
        gap: 0.125rem;
    }

    #super-lang .slash {
        padding: 0 0.125rem;
    }

    /* Smaller icons on very small screens */
    #super-right .header-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Smaller burger button */
    #super-burger-btn {
        padding: 0.25rem;
    }

    #super-burger-btn .burger-line {
        width: 1.125rem;
    }
}

/* Burger menu open state */
#super-burger-btn.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

#super-burger-btn.active .burger-line:nth-child(2) {
    opacity: 0;
}

#super-burger-btn.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* Mobile menu open state */
#super-mobile-menu.open {
    transform: translateX(0);
}