/**
 * 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);
        transition: padding var(--transition-normal);
    }

    /* ========================================
       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);
        transition: padding var(--transition-normal);
    }

    /* ----------------------------------------
       Logo - Centered
       ---------------------------------------- */
    .site-nav__logo {
        order: 1;
    }

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

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

    /* ----------------------------------------
       CTA Button Styling
       ---------------------------------------- */
    .cta-btn {
        display: block;
        padding: var(--space-3) var(--space-4);
        text-align: center;
        text-transform: uppercase;
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.5px;
        color: var(--color-text-bright);
        background-color: var(--color-primary);
        border-radius: var(--radius-sm);
        transition: background-color var(--transition-fast), transform var(--transition-fast);
    }

    .cta-btn:hover {
        background-color: var(--color-primary-dark);
        text-decoration: none;
        transform: translateY(-1px);
    }

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

    /* Current page indicator */
    .cta-btn[aria-current="page"] {
        background-color: var(--color-bg-card);
        box-shadow: inset 0 0 0 2px var(--color-primary);
    }

    /* Primary CTA (Festival) - More prominent */
    .cta-btn--primary {
        background-color: var(--color-secondary);
    }

    .cta-btn--primary:hover {
        background-color: #2d7a61;
    }

    /* ----------------------------------------
       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;
    }

    /* ========================================
       Desktop Layout (min-width: 700px)
       ======================================== */
    @media (min-width: 700px) {
        .site-nav {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap;
        }

        .site-nav__logo {
            order: 1;
            flex-shrink: 0;
        }

        .site-nav__ctas {
            order: 2;
            justify-content: flex-end;
        }

        .cta-btn {
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-xs);
        }
    }

    /* ========================================
       Large Desktop (min-width: 900px)
       ======================================== */
    @media (min-width: 900px) {
        .cta-btn {
            padding: var(--space-2) var(--space-4);
            font-size: var(--text-sm);
        }
    }

    /* ========================================
       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);
        }
    }
}