/**
 * Header Component Styles
 *
 * This file contains all styles for the site header component,
 * including navigation, CTA buttons, admin/user menus, and responsive behavior.
 */

@layer components.header {
    /* ========================================
       Header Wrapper - Full Width & Sticky
       ======================================== */
    .header-wrapper {
        width: 100%;
        background-color: rgb(50, 52, 54);
        position: sticky;
        inset-block-start: 0;
        z-index: var(--z-sticky);
        transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
    }

    /* Scrolled state - darker solid background */
    .header-wrapper.is-scrolled {
        background-color: rgb(31, 33, 34);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    /* Compact header when scrolled */
    .header-wrapper.is-scrolled .header-wrapper__inner {
        padding-block: var(--space-2);
    }

    .header-wrapper.is-scrolled .site-nav {
        padding-block: var(--space-2);
    }

    .header-wrapper.is-scrolled .site-nav__logo img {
        inline-size: clamp(8rem, 18vw, 12rem);
    }

    /* Inner container - constrained width */
    .header-wrapper__inner {
        max-width: var(--content-max-width);
        margin-inline: auto;
        padding: var(--space-4) var(--space-5);
    }

    /* ========================================
       Site Navigation - Mobile First
       ======================================== */
    .site-nav {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
        padding-block: var(--space-3);
    }

    /* ----------------------------------------
       Brand Bar - Logo only
       ---------------------------------------- */
    .site-nav__brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
    }

    .site-nav__logo img {
        display: block;
        inline-size: clamp(12rem, 25vw, 18rem);
        block-size: auto;
    }

    /* ----------------------------------------
       Nav Row - CTAs + Utils container
       ---------------------------------------- */
    .site-nav__nav-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
    }

    /* ----------------------------------------
       CTA Buttons Container - Mobile First
       ---------------------------------------- */
    .site-nav__ctas {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
    }

    /* ----------------------------------------
       CTA Buttons: the live definition is .cta-btn in
       components/buttons/buttons.css, a later layer. Only the
       current-page state lives here.
       ---------------------------------------- */
    /* Current page indicator */
    .cta-btn[aria-current="page"] {
        background-color: var(--color-bg-card);
        box-shadow: inset 0 0 0 2px var(--color-primary);
    }

    /* ----------------------------------------
       Decorative Separator - Full Width
       ---------------------------------------- */
    hr.main {
        block-size: 2px;
        border: none;
        margin: 0;
        background: var(--gradient-animate);
        background-size: 200% 100%;
        animation: gradient-shift 20s linear infinite;
    }

    /* ========================================
       Admin & User Menus - Full Width
       ======================================== */
    .admin-menu,
    .user-menu {
        width: 100%;
        background-color: var(--color-bg-card);
    }

    .admin-menu__inner,
    .user-menu__inner {
        max-width: var(--content-max-width);
        margin-inline: auto;
        padding: var(--space-3) var(--space-5);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .admin-menu a,
    .user-menu a {
        margin: var(--space-2);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-sm);
        transition: background-color var(--transition-fast);
    }

    .admin-menu a:hover,
    .user-menu a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        text-decoration: none;
    }

    /* ========================================
       Nav Utils - Login & Language Switcher
       ======================================== */
    .site-nav__utils {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: 0.8em;
    }

    .site-nav__lang {
        display: flex;
        gap: var(--space-1);
    }

    /* Login button - subtle outline style */
    .nav-login-btn {
        display: inline-flex;
        align-items: center;
        padding: var(--space-1) var(--space-2);
        font-family: var(--font-heading);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--color-text-bright);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: var(--radius-sm);
        min-block-size: 2rem;
        white-space: nowrap;
        transition: background-color var(--transition-fast), border-color var(--transition-fast);
    }

    .nav-login-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
    }

    .nav-login-btn:focus-visible {
        outline: 2px solid var(--color-text-bright);
        outline-offset: 2px;
    }

    /* ========================================
       Desktop Layout (min-width: 700px)
       ======================================== */
    @media (min-width: 700px) {
        .site-nav__logo {
            flex-shrink: 0;
        }

        .site-nav__brand {
            flex-direction: row;
            align-items: center;
        }

        .site-nav__ctas {
            justify-content: flex-start;
        }

        .site-nav__nav-row {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    }

    /* ========================================
       Large Desktop (min-width: 900px)
       ======================================== */
    @media (min-width: 900px) {
        /* with-hugo sets flex-wrap: nowrap from 700px, sized for the three
           CTAs it carries. This branch has five, and the header inner is
           capped at --content-max-width however wide the window gets, so
           between 700 and 900 the row overflowed its own container — by 93px
           at 700 and 54px at 800 — pushing the login button and language
           switcher out of view. The labels themselves never wrapped, and the
           document never scrolled horizontally, so neither a line-count nor a
           page-overflow check would have caught it. Measured clean here with
           37px to spare. This is the only place where this branch's CSS
           diverges from with-hugo's. */
        .site-nav__ctas {
            flex-wrap: nowrap;
        }
    }

    /* ========================================
       Phones: the header scrolls away instead of holding 29-36% of the
       viewport, and every control reaches the 44px touch target.
       ======================================== */
    @media (max-width: 699px) {
        .header-wrapper {
            position: static;
        }

        .header-wrapper__inner {
            padding-block: var(--space-3);
        }

        .site-nav {
            gap: var(--space-2);
            padding-block: 0;
        }

        .site-nav__logo img {
            inline-size: clamp(9rem, 40vw, 12rem);
        }

        .site-nav__nav-row {
            gap: var(--space-2);
        }

        /* Six CTAs as three full-width pairs instead of a centred wrap
           that leaves an orphan on its own row */
        .site-nav__ctas {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-2);
            inline-size: 100%;
        }

        .nav-login-btn {
            min-block-size: 44px;
            padding-inline: var(--space-3);
        }
    }

    /* ========================================
       Small screens - reduced padding
       ======================================== */
    @media (max-width: 400px) {
        .header-wrapper__inner {
            padding-inline: var(--space-3);
        }

        .admin-menu__inner,
        .user-menu__inner {
            padding-inline: var(--space-3);
        }
    }
}