/**
 * Author Pro Header - Block Styles (Pure SCSS BEM)
 */

@use '../../../styles/variables' as *;
@use '../../../styles/mixins' as *;
@use '../../../styles/buttons' as *;

.awt-header {
    --awt-header-bg: #ffffff;
    --awt-header-title-color: #{$awt-color-primary};
    --awt-header-link-color: #{$awt-color-secondary};
    --awt-header-link-hover: #{$awt-color-accent};
    --awt-header-border: #f1f5f9;

    width: 100%;
    position: relative;
    z-index: 50;
    background-color: var(--awt-header-bg);
    border-bottom: 1px solid var(--awt-header-border);
    transition: background-color $awt-transition-normal, box-shadow $awt-transition-normal;
    box-sizing: border-box;

    // --- Sticky State Modifier ---
    &--sticky {
        position: sticky !important;
        top: 0;
        z-index: 990;
        width: 100%;
        transition: top 0.2s ease;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: $awt-shadow-sm;
    }

    // --- Container Layout ---
    &__inner {
        @include awt-container-styles;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        box-sizing: border-box;
    }

    // --- Brand / Logo ---
    &__brand {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        color: inherit;

        &:hover {
            text-decoration: none;
        }
    }

    &__logo {
        width: 8rem;
        height: auto;
        display: block;

        @include md {
            width: 10rem;
        }
    }

    &__title {
        font-family: $awt-font-serif;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.025em;
        color: var(--awt-header-title-color);
        margin: 0;
        transition: color $awt-transition-fast;

        @include md {
            font-size: 1.875rem;
        }

        &:hover {
            color: var(--awt-header-link-hover);
        }
    }

    // --- Desktop Navigation ---
    &__nav {
        display: none;

        @include lg {
            display: flex;
            align-items: center;
        }

        &--align-right {
            margin-left: auto;
        }
    }

    &__menu-list {
        display: flex;
        align-items: center;
        gap: 2rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    &__menu-item {
        position: relative;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    &__menu-link {
        font-family: $awt-font-inter;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--awt-header-link-color);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 0;
        transition: color $awt-transition-fast;

        &:hover,
        &:focus {
            color: var(--awt-header-link-hover);
            text-decoration: none;
        }

        svg {
            width: 0.75rem;
            height: 0.75rem;
            margin-left: 0.25rem;
            opacity: 0.7;
        }
    }

    // Desktop Submenu Visibility & Multi-level Flyouts (Levels 2, 3, 4)
    @media (min-width: 1025px) {
        // Shared Submenu Styles (Level 2, Level 3, Level 4)
        .awt-header__menu-item--has-children,
        .awt-header__submenu-item--has-children {
            position: relative;

            &:hover > .awt-header__submenu,
            &:focus-within > .awt-header__submenu {
                opacity: 1 !important;
                visibility: visible !important;
                pointer-events: auto !important;
                transform: translate(0, 0) !important;
            }
        }

        // LEVEL 2: Direct Dropdown from Main Navigation
        .awt-header__nav > ul > .awt-header__menu-item--has-children > .awt-header__submenu {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 220px;
            margin: 0 !important;
            padding: 0.5rem 0;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.06);
            list-style: none;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(8px);
            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
            z-index: 1000;

            // Hover bridge covering the top gap
            &::before {
                content: '';
                position: absolute;
                top: -15px;
                left: 0;
                right: 0;
                height: 15px;
                background: transparent;
            }
        }

        // LEVEL 3 & LEVEL 4: Flyout Dropdowns (Opens to the Right)
        .awt-header__submenu .awt-header__menu-item--has-children,
        .awt-header__submenu .awt-header__submenu-item--has-children {
            > .awt-header__submenu {
                position: absolute;
                top: 0;
                left: 100%; // Fly out to the right
                min-width: 220px;
                margin-left: 2px;
                padding: 0.5rem 0;
                background-color: #ffffff;
                border-radius: 8px;
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
                border: 1px solid rgba(0, 0, 0, 0.06);
                list-style: none;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transform: translateX(-8px);
                transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
                z-index: 1010;

                // Hover bridge covering the horizontal gap between levels
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: -10px;
                    width: 10px;
                    background: transparent;
                }
            }

            // Submenu item link layout (shows title + right arrow indicator)
            > a {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.6rem 1.25rem;
                font-size: 0.875rem;
                color: #1e293b;
                text-decoration: none;
                transition: background-color 0.15s ease, color 0.15s ease;

                &:hover {
                    background-color: #f8fafc;
                    color: var(--awt-header-link-hover, #{$awt-color-accent});
                }
            }
        }

        // Deep Level 4 Z-Index Boost
        .awt-header__submenu .awt-header__submenu .awt-header__submenu {
            z-index: 1020;
        }
    }

    &__submenu-item {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    &__submenu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem 1.25rem;
        font-family: $awt-font-inter;
        font-size: 0.875rem;
        color: var(--awt-header-link-color, #1e293b);
        text-decoration: none;
        transition: background-color $awt-transition-fast, color $awt-transition-fast;

        &:hover,
        &:focus {
            background-color: #f8fafc;
            color: var(--awt-header-link-hover);
            text-decoration: none;
        }

        svg {
            width: 0.875rem;
            height: 0.875rem;
            margin-left: 0.5rem;
            opacity: 0.7;
            flex-shrink: 0;
        }
    }

    // --- Right Actions & CTA ---
    &__actions {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    // Hide top-bar CTA button on tablet & mobile
    @media (max-width: 1024px) {
        .awt-header__actions .awt-header__btn,
        .awt-header__actions .awt-header__cta {
            display: none !important;
        }
    }

    &__cart {
        position: relative;
        display: inline-flex;
        align-items: center;
        color: var(--awt-header-link-color);
        text-decoration: none;
        transition: color $awt-transition-fast;

        &:hover {
            color: var(--awt-header-link-hover);
            text-decoration: none;
        }

        svg {
            width: 1.5rem;
            height: 1.5rem;
        }
    }

    &__cart-badge {
        position: absolute;
        top: -0.25rem;
        right: -0.375rem;
        background-color: $awt-color-accent;
        color: #ffffff;
        font-size: 0.625rem;
        font-weight: 700;
        padding: 0.125rem 0.375rem;
        border-radius: $awt-radius-full;
        line-height: 1;
        box-shadow: $awt-shadow-sm;
    }

    &__btn {
        display: none;

        @include lg {
            display: inline-flex;
        }

        background-color: var(--awt-header-btn-bg, #{$awt-color-accent});
        color: var(--awt-header-btn-color, #ffffff);
        border-color: var(--awt-header-btn-bg, #{$awt-color-accent});
        border-radius: $awt-radius-full;
        font-size: 0.875rem;
        padding: 0.625rem 1.5rem;
        box-shadow: 0 4px 14px rgba(234, 88, 12, 0.25);

        &:hover {
            background-color: var(--awt-header-btn-hover-bg, #c2410c);
            color: var(--awt-header-btn-hover-color, #ffffff);
            border-color: var(--awt-header-btn-hover-bg, #c2410c);
        }
    }

    // --- Mobile Hamburger Toggle Button ---
    &__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 0.25rem;
        color: var(--awt-header-title-color);
        cursor: pointer;
        transition: color $awt-transition-fast;

        @include lg {
            display: none;
        }

        &:focus-visible {
            @include focus-ring;
        }

        svg {
            width: 2rem;
            height: 2rem;
            stroke-width: 2.25;
        }
    }

    // --- Mobile Menu Accordion Drawer ---
    &__mobile-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        border-top: 1px solid #f1f5f9;
        box-shadow: $awt-shadow-xl;
        z-index: 40;

        &.is-awt-open {
            display: block;
        }

        @include lg {
            display: none !important;
        }
    }

    &__mobile-list {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0.5rem 1rem;
    }

    &__mobile-item {
        list-style: none;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #f8fafc;

        &:last-child {
            border-bottom: none;
        }
    }

    &__mobile-link {
        display: block;
        padding: 0.75rem 0.5rem;
        font-family: $awt-font-inter;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--awt-header-link-color);
        text-decoration: none;
        transition: color $awt-transition-fast;

        &:hover,
        &:focus {
            color: var(--awt-header-link-hover);
            text-decoration: none;
        }
    }

    &__mobile-sublist {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    &__mobile-nested {
        background-color: #f8fafc;
        border-radius: 6px;
        margin: 0.25rem 0 0.5rem 0;

        &--level-1 {
            padding-left: 0.75rem;
        }

        &--level-2 {
            padding-left: 1.25rem;
            background-color: #f1f5f9;
        }

        &--level-3 {
            padding-left: 1.75rem;
            background-color: #e2e8f0;
        }
    }

    &__mobile-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0.5rem;
        font-family: $awt-font-inter;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--awt-header-link-color);
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker {
            display: none;
        }

        svg {
            width: 1rem;
            height: 1rem;
            transition: transform $awt-transition-fast;
        }

        details[open] > & svg {
            transform: rotate(180deg);
        }
    }

    &__mobile-actions {
        padding: 1rem;
        border-top: 1px solid #f1f5f9;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;

        .awt-header__btn,
        .awt-header__cta {
            display: flex !important;
            width: 100%;
            margin-top: 1.5rem;
            text-align: center;
            justify-content: center;
        }
    }

    // Ensure the CTA button inside the mobile drawer remains visible
    .awt-header__drawer .awt-header__cta,
    .awt-header__mobile-menu .awt-header__cta {
        display: block !important;
        width: 100%;
        margin-top: 1.5rem;
        text-align: center;
    }

    // --- Header Style Variations ---
    &--style-elegant {
        --awt-header-title-color: #1e293b;
        --awt-header-link-color: #334155;
        --awt-header-link-hover: #0f172a;
        --awt-header-border: #e2e8f0;

        .awt-header__title {
            font-size: 1.5rem;
        }

        .awt-header__menu-link {
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 0.8125rem;
        }

        .awt-header__btn {
            border-radius: $awt-radius-sm;
            background-color: var(--awt-header-btn-bg, #0f172a);
            border-color: var(--awt-header-btn-bg, #0f172a);
            box-shadow: none;

            &:hover {
                background-color: var(--awt-header-btn-hover-bg, #1e293b);
                border-color: var(--awt-header-btn-hover-bg, #1e293b);
            }
        }
    }

    &--style-fun {
        --awt-header-title-color: #{$awt-color-navy};
        --awt-header-link-color: #{$awt-color-navy};
        --awt-header-link-hover: #{$awt-color-blue-sky};
        --awt-header-border: rgba(255, 209, 102, 0.3);

        .awt-header__title {
            font-family: $awt-font-sans;
            font-weight: 900;
        }

        .awt-header__menu-link {
            font-weight: 700;
        }

        .awt-header__btn {
            background-color: var(--awt-header-btn-bg, #{$awt-color-yellow-sun});
            color: var(--awt-header-btn-color, #{$awt-color-navy});
            border-color: transparent;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;

            &:hover {
                background-color: var(--awt-header-btn-hover-bg, #facc15);
                color: var(--awt-header-btn-hover-color, #{$awt-color-navy});
                transform: scale(1.03);
            }
        }
    }
}

// Handle WordPress Admin Bar offset
body.admin-bar .awt-header--sticky {
    top: 32px !important; // Default WP Desktop Admin Bar height

    @media screen and (max-width: 782px) {
        top: 46px !important; // WP Mobile Admin Bar height
    }

    @media screen and (max-width: 600px) {
        // In WP, admin bar is position:absolute under 600px
        top: 0 !important;
    }
}