/**
 * CZAR Theme - Header Styles
 *
 * Fixed top header: logo on the far edge, nav in center,
 * language toggle on opposite edge. Solid white background.
 * Full monochrome hover states — no gold in interactive elements.
 *
 * @package Czar_Theme
 * @since   1.0.0
 */

/* ─── Header Container ────────────────────────────────────────────────────── */
.czar-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--czar-header-height);
    background-color: #FFFFFF; /* Explicit hex — prevents CSS variable bleed on mobile */
    border-bottom: 1px solid var(--czar-grey-light);
    z-index: var(--czar-z-header);
    display: flex;
    align-items: center;
    padding: 0 var(--czar-space-lg);
    /* Promote to its own compositor layer so nothing can paint above it */
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Safety: no content ever leaks outside header bounds */
    box-sizing: border-box;
}

/* Admin bar offset */
.admin-bar .czar-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .czar-header {
        top: 46px;
    }
}

/* ─── Header Inner Layout ──────────────────────────────────────────────────── */
.czar-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--czar-max-width);
    margin: 0 auto;
}

/* ─── Logo ─────────────────────────────────────────────────────────────────── */
.czar-header__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    max-height: var(--czar-header-height);
    overflow: hidden;
}

/* Text logo (fallback when no custom logo uploaded) */
.czar-header__logo a {
    font-size: var(--czar-fs-lg);
    font-weight: var(--czar-fw-bold);
    letter-spacing: var(--czar-tracking-widest);
    text-transform: uppercase;
    color: var(--czar-black);
    transition: color var(--czar-transition-fast);
}

.czar-header__logo a:hover {
    color: var(--czar-grey-hover);
}

/* Custom Logo (uploaded via Customizer) — bulletproof containment */
.czar-header__logo .custom-logo-link {
    display: flex;
    align-items: center;
    height: 100%;
}

.czar-header__logo .custom-logo-link:hover {
    /* Prevent the global a:hover color from flashing on the logo wrapper */
    color: inherit;
}

.custom-logo {
    max-height: 60px;
    max-width: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ─── Navigation ───────────────────────────────────────────────────────────── */
.czar-header__nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.czar-header__nav-list {
    display: flex;
    align-items: center;
    gap: var(--czar-space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.czar-header__nav-item {
    position: relative;
}

/* ─── Nav Links ────────────────────────────────────────────────────────────── */
.czar-header__nav-link {
    font-size: var(--czar-fs-sm);
    font-weight: var(--czar-fw-medium);
    letter-spacing: var(--czar-tracking-wider);
    text-transform: uppercase;
    color: var(--czar-black);
    padding: var(--czar-space-xs) 0;
    position: relative;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
    transition: color var(--czar-transition-fast),
                text-decoration-color var(--czar-transition-fast);
}

/* Hover: medium-gray with editorial underline */
.czar-header__nav-link:hover {
    color: var(--czar-grey-hover);
    text-decoration-color: var(--czar-grey-hover);
}

/* Active: medium-gray text only (no permanent underline) */
.czar-header__nav-link.active {
    color: var(--czar-grey-hover);
}

/* WordPress current-page awareness (auto-added by wp_nav_menu) */
.czar-header__nav-item.current-menu-item > .czar-header__nav-link,
.czar-header__nav-item.current-menu-ancestor > .czar-header__nav-link {
    color: var(--czar-grey-hover);
}

/* ─── Category Submenu ─────────────────────────────────────────────────────── */
.czar-header__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--czar-white);
    border: 1px solid var(--czar-grey-light);
    padding: var(--czar-space-sm) var(--czar-space-md);
    list-style: none;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--czar-transition-fast), visibility var(--czar-transition-fast);
    margin-top: var(--czar-space-xs);
}

.czar-header__nav-item:hover .czar-header__submenu {
    opacity: 1;
    visibility: visible;
}

.czar-header__submenu-link {
    display: block;
    padding: 6px 0;
    font-size: var(--czar-fs-sm);
    font-weight: var(--czar-fw-regular);
    letter-spacing: var(--czar-tracking-wide);
    text-transform: uppercase;
    color: var(--czar-grey-dark);
    white-space: nowrap;
}

.czar-header__submenu-link:hover {
    color: var(--czar-grey-hover);
}

/* ─── Language Toggle ──────────────────────────────────────────────────────── */
.czar-header__lang {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.czar-lang-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--czar-fs-sm);
    font-weight: var(--czar-fw-medium);
    letter-spacing: var(--czar-tracking-wide);
    text-transform: uppercase;
    color: var(--czar-grey-mid);
    padding: 4px 8px;
    transition: color var(--czar-transition-fast);
    font-family: var(--czar-font-primary);
}

.czar-lang-btn:hover {
    color: var(--czar-black);
}

.czar-lang-btn.active {
    color: var(--czar-black);
    border-bottom: 1px solid var(--czar-black);
}

.czar-lang-divider {
    color: var(--czar-grey-light);
    font-size: var(--czar-fs-sm);
    user-select: none;
}

/* ─── Mobile Menu Toggle ───────────────────────────────────────────────────── */
.czar-header__menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}

.czar-header__menu-toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    background-color: var(--czar-black);
    transition: transform var(--czar-transition-base), opacity var(--czar-transition-fast);
}

/* ─── Mobile Responsive ────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .czar-header {
        padding: 0 var(--czar-space-sm);
        /* The header keeps transform: translateZ(0) (from the base rule) for
           GPU layer promotion so page content never paints above the header.
           That transform creates a containing block that traps position: fixed
           children, so the mobile nav below uses position: absolute instead.
           Ensure the nav — which overflows the 72 px header — is visible. */
        overflow: visible;
    }

    .czar-header__menu-toggle {
        display: flex;
    }

    .czar-header__nav {
        /* position: absolute (not fixed) because the header's
           transform: translateZ(0) creates a containing block that would make
           position: fixed relative to the 72 px header, giving the nav zero
           height.  Since the header itself is position: fixed the absolute nav
           stays viewport-pinned just the same. */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        /* Fill from below the header to the bottom of the viewport. */
        height: calc(100vh - var(--czar-header-height));
        height: calc(100dvh - var(--czar-header-height));  /* iOS Safari dynamic viewport */
        /* Explicit hex — never rely on a CSS variable for a full-screen
           opaque background.  Matches the header itself. */
        background-color: #FFFFFF;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--czar-space-xl) var(--czar-space-lg);
        transform: translateX(-100%);
        transition: transform var(--czar-transition-base);
        z-index: calc(var(--czar-z-header) - 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    .admin-bar .czar-header__nav {
        /* Admin bar is 46 px on mobile (<782 px). Subtract from viewport. */
        height: calc(100vh - var(--czar-header-height) - 46px);
        height: calc(100dvh - var(--czar-header-height) - 46px);
    }

    .czar-header__nav.is-open {
        transform: translateX(0);
    }

    .czar-header__nav-list {
        flex-direction: column;
        gap: var(--czar-space-md);
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .czar-header__nav-link {
        font-size: var(--czar-fs-sm);
        text-align: center;
    }

    .czar-header__submenu {
        position: static;
        transform: none;
        border: none;
        padding: var(--czar-space-xs) 0 var(--czar-space-xs) var(--czar-space-md);
        opacity: 1;
        visibility: visible;
        margin-top: 0;
    }

    /* Custom logo scales down on mobile but stays legible */
    .custom-logo {
        max-height: 50px;
        max-width: 160px;
    }
}