/*=========================================================
GLOBAL - NAVIGATION
=========================================================*/

.site_header
{
    --navigation_scroll_progress:0;
    --navigation_height:6rem;

    position:fixed;
    top:0;
    right:0;
    left:0;

    z-index:2000;

    width:100%;

    color:var(--aob-soft-white);

    /*
    Solid black by default for mobile/tablet.
    Desktop restores the progressive transparent background.
    */
    background:var(--aob-black);

    border-bottom:1px solid var(--aob-gold);

    box-shadow:
        0
        calc(6px * var(--navigation_scroll_progress))
        calc(22px * var(--navigation_scroll_progress))
        rgb(
            0 0 0 /
            calc(0.22 * var(--navigation_scroll_progress))
        );
}


/*=========================================================
NAVIGATION INNER
=========================================================*/

.site_header_inner
{
    position:relative;
    z-index:3;

    display:flex;

    width:100%;
    min-height:var(--navigation_height);

    margin:0;
    padding-right:0.75rem;
    padding-left:0.75rem;

    align-items:center;
    justify-content:space-between;

    gap:var(--space_lg);
}


/*=========================================================
LOGO
=========================================================*/

.site_logo
{
    display:inline-flex;

    width:auto;
    max-width:13rem;

    flex:0 0 auto;
    align-items:center;

    line-height:1;

    transition:
        opacity 200ms ease,
        transform 220ms ease;
}

.site_logo:hover,
.site_logo:focus-visible
{
    opacity:0.88;
}

.site_logo_image
{
    display:block;

    width:100%;
    max-width:13rem;
    height:auto;

    object-fit:contain;

    transition:
        width 220ms ease,
        max-width 220ms ease,
        opacity 200ms ease;
}


/*=========================================================
MOBILE MENU BUTTON
=========================================================*/

.menu_button
{
    position:relative;
    z-index:4;

    display:grid;

    width:3rem;
    height:3rem;

    flex:0 0 auto;

    padding:0.65rem;

    border:0;

    background:transparent;

    cursor:pointer;

    place-content:center;
    gap:0.38rem;
}

.menu_button span
{
    display:block;

    width:2rem;
    height:2px;

    background:var(--aob-gold-light);

    transform-origin:center;

    transition:
        transform 250ms ease,
        opacity 200ms ease;
}

body.menu_open .menu_button span:nth-child(1)
{
    transform:translateY(0.5rem) rotate(45deg);
}

body.menu_open .menu_button span:nth-child(2)
{
    opacity:0;
}

body.menu_open .menu_button span:nth-child(3)
{
    transform:translateY(-0.5rem) rotate(-45deg);
}


/*=========================================================
MOBILE NAVIGATION PANEL
=========================================================*/

.site_navigation
{
    position:absolute;

    top:100%;
    right:0;
    left:0;

    z-index:2;

    display:block;

    width:100%;
    height:calc(100dvh - var(--navigation_height));
    max-height:calc(100dvh - var(--navigation_height));

    padding:1.25rem 1.25rem 2rem;

    overflow-x:hidden;
    overflow-y:auto;

    background:rgba(5,4,3,0.99);

    border-bottom:1px solid var(--aob-gold);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateY(-0.75rem);

    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    transition:
        opacity 220ms ease,
        visibility 220ms ease,
        transform 220ms ease;
}

body.menu_open .site_header
{
    background:var(--aob-black);

    box-shadow:
        0 6px 22px rgba(0,0,0,0.24);
}

body.menu_open .site_navigation
{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateY(0);
}


/*=========================================================
MOBILE NAVIGATION LINKS
=========================================================*/

.site_navigation ul
{
    display:flex;

    width:100%;
    min-height:100%;

    margin:0;
    padding:0;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:0;

    list-style:none;

    text-align:center;
}

.site_navigation li
{
    width:100%;

    margin:0;
    padding:0;

    border-bottom:1px solid rgba(255,255,255,0.08);
}

.site_navigation li:last-child
{
    border-bottom:0;
}

.site_navigation a
{
    display:flex;

    width:100%;
    min-height:3.65rem;

    padding:0.85rem 1rem;

    align-items:center;
    justify-content:center;

    color:var(--aob-soft-white);

    font-size:0.8rem;
    font-weight:600;
    letter-spacing:0.12em;
    line-height:1.35;
    text-align:center;
    text-transform:uppercase;

    transition:
        background-color 200ms ease,
        color 200ms ease;
}

.site_navigation a:hover,
.site_navigation a:focus-visible
{
    background:rgba(255,255,255,0.05);

    color:var(--aob-champagne-gold);
}


/*=========================================================
NESTED NAVIGATION LINKS
=========================================================*/

.site_navigation_item_main
{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:center;
}

.site_navigation_item_main > a
{
    width:auto;
    flex:1 1 auto;
}

.site_submenu_toggle
{
    display:grid;
    width:2.75rem;
    min-width:2.75rem;
    min-height:2.75rem;
    padding:.65rem;
    place-items:center;
    border:0;
    background:transparent;
    color:var(--aob-champagne-gold);
    cursor:pointer;
}

.site_submenu_toggle span
{
    width:.55rem;
    height:.55rem;
    border-right:1px solid currentColor;
    border-bottom:1px solid currentColor;
    transform:rotate(45deg) translateY(-.12rem);
    transition:transform 180ms ease;
}

.site_navigation_item.has_submenu.is-open > .site_navigation_item_main .site_submenu_toggle span
{
    transform:rotate(225deg) translate(-.08rem,-.08rem);
}

.site_navigation .site_submenu
{
    display:none;
    width:100%;
    min-height:0;
    margin:0;
    padding:.25rem 0 .6rem;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    list-style:none;
    background:rgba(255,255,255,.035);
}

.site_navigation_item.has_submenu.is-open > .site_submenu
{
    display:flex;
}

.site_navigation .site_submenu li
{
    width:100%;
    border:0;
}

.site_navigation .site_submenu a
{
    min-height:2.8rem;
    padding:.65rem 1rem;
    color:rgba(247,243,237,.84);
    font-size:.72rem;
    letter-spacing:.09em;
}

.site_navigation .site_submenu .nav_cta
{
    width:min(100%,18rem);
    margin:.4rem auto;
}

.site_submenu_toggle:focus-visible
{
    outline:2px solid var(--aob-champagne-gold);
    outline-offset:-3px;
}


/*=========================================================
CONSULTATION BUTTON
=========================================================*/

.site_navigation .nav_cta
{
    width:min(100%,18rem);
    min-height:3.5rem;

    margin:1rem auto 0;

    border:1px solid var(--aob-gold);

    color:var(--aob-champagne-gold);
}

.site_navigation .nav_cta:hover,
.site_navigation .nav_cta:focus-visible
{
    background:var(--aob-gold);
    border-color:var(--aob-champagne-gold);

    color:var(--aob-black);
}


/*=========================================================
OPEN MENU PAGE STATE
=========================================================*/

body.menu_open
{
    overflow:hidden;

    touch-action:none;
}


/*=========================================================
SMALL MOBILE
=========================================================*/

@media (max-width:29.99rem)
{
    .site_header
    {
        --navigation_height:5.5rem;

        background:var(--aob-black);
    }

    .site_header_inner
    {
        padding-right:0.65rem;
        padding-left:0.65rem;
    }

    .site_logo
    {
        max-width:10.25rem;
    }

    .site_logo_image
    {
        max-width:10.25rem;
    }

    .menu_button
    {
        width:2.85rem;
        height:2.85rem;

        padding:0.6rem;
    }

    .menu_button span
    {
        width:1.85rem;
    }
}


/*=========================================================
STANDARD MOBILE
=========================================================*/

@media (min-width:30rem) and (max-width:47.99rem)
{
    .site_header
    {
        background:var(--aob-black);
    }

    .site_logo
    {
        max-width:11.5rem;
    }

    .site_logo_image
    {
        max-width:11.5rem;
    }
}


/*=========================================================
TABLET
=========================================================*/

@media (min-width:48rem) and (max-width:67.99rem)
{
    .site_header
    {
        --navigation_height:6.25rem;

        background:var(--aob-black);
    }

    .site_header_inner
    {
        padding-right:1.5rem;
        padding-left:1.5rem;
    }

    .site_logo
    {
        max-width:14rem;
    }

    .site_logo_image
    {
        max-width:14rem;
    }
}


/*=========================================================
SHORT MOBILE SCREENS
=========================================================*/

@media (max-height:43rem)
{
    .site_navigation ul
    {
        min-height:auto;

        justify-content:flex-start;
    }

    .site_navigation a
    {
        min-height:3.15rem;

        padding:0.7rem 1rem;
    }

    .site_navigation .nav_cta
    {
        min-height:3.15rem;

        margin-top:0.75rem;
    }
}


/*=========================================================
DESKTOP NAVIGATION
=========================================================*/

@media (min-width:68rem)
{
    .site_header
    {
        --navigation_height:calc(
            7.75rem -
            (1.55rem * var(--navigation_scroll_progress))
        );

        /*
        Desktop retains the original progressive
        transparency/scroll behaviour.
        */
        background:rgb(
            5 4 3 /
            calc(
                0.50 +
                (var(--navigation_scroll_progress) * 0.43)
            )
        );

        -webkit-backdrop-filter:blur(8px);
        backdrop-filter:blur(8px);
    }

    /*
    Explicit padding is used instead of a constrained width
    so the global .container rule cannot override or reduce
    the desktop navigation margins.
    */

    .site_header_inner
    {
        width:100%;
        max-width:none;
        min-height:var(--navigation_height);

        margin:0;

        padding-right:clamp(3.5rem,6vw,7rem);
        padding-left:clamp(3.5rem,6vw,7rem);

        gap:2.5rem;
    }


    /*=====================================================
    DESKTOP LOGO
    =====================================================*/

    .site_logo
    {
        width:calc(
            18.25rem -
            (2.25rem * var(--navigation_scroll_progress))
        );

        max-width:none;
    }

    .site_logo_image
    {
        width:100%;
        max-width:none;
        height:auto;
    }


    /*=====================================================
    DESKTOP MENU BUTTON
    =====================================================*/

    .menu_button
    {
        display:none;
    }


    /*=====================================================
    DESKTOP NAVIGATION PANEL
    =====================================================*/

    .site_navigation
    {
        position:static;

        display:block;

        width:auto;
        height:auto;
        max-height:none;

        margin-left:auto;
        padding:0;

        overflow:visible;

        background:transparent;

        border:0;

        opacity:1;
        visibility:visible;
        pointer-events:auto;

        transform:none;

        transition:none;
    }

    .site_navigation ul
    {
        width:auto;
        min-height:0;

        flex-direction:row;
        align-items:center;
        justify-content:flex-end;

        gap:1.4rem;

        text-align:left;
    }

    .site_navigation li
    {
        width:auto;

        border-bottom:0;
    }

    .site_navigation a
    {
        position:relative;

        display:inline-flex;

        width:auto;
        min-height:0;

        padding:0.35rem 0;

        background:transparent;

        font-size:0.65rem;
        white-space:nowrap;
    }

    .site_navigation a:not(.nav_cta)::after
    {
        content:"";

        position:absolute;

        left:50%;
        bottom:-0.3rem;

        width:0;
        height:1px;

        background:var(--aob-gold);

        transform:translateX(-50%);

        transition:width 220ms ease;
    }

    .site_navigation a:not(.nav_cta):hover::after,
    .site_navigation a:not(.nav_cta):focus-visible::after,
    .site_navigation a:not(.nav_cta).active::after
    {
        width:100%;
    }

    .site_navigation .nav_cta
    {
        width:auto;
        min-height:2.55rem;

        margin:0;

        padding:0.78rem 1.25rem;
        font-size:0.7rem;
    }

    .site_navigation_item_main
    {
        width:auto;
        align-items:center;
        justify-content:flex-start;
        gap:.1rem;
    }

    .site_navigation .has_submenu
    {
        position:relative;
    }

    .site_navigation_item_main > a
    {
        flex:0 0 auto;
        transform:translateY(0.12rem);
    }

    .site_submenu_toggle
    {
        width:1.55rem;
        min-width:1.55rem;
        min-height:2rem;
        padding:.45rem;
    }

    .site_navigation .site_submenu
    {
        position:absolute;
        top:100%;
        left:-.75rem;
        z-index:10;
        display:grid;
        width:max-content;
        min-width:14rem;
        max-width:min(22rem,80vw);
        padding:.45rem;
        border:1px solid rgba(230,205,153,.55);
        background:rgba(13,12,11,.98);
        box-shadow:0 1rem 2rem rgba(0,0,0,.28);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(.35rem);
        transition:opacity 160ms ease,visibility 160ms ease,transform 160ms ease;
    }

    .site_navigation .has_submenu.is-open > .site_submenu
    {
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
    }

    .site_navigation .site_submenu a
    {
        display:flex;
        width:100%;
        min-height:2.7rem;
        padding:.7rem .85rem;
        justify-content:flex-start;
        font-size:.65rem;
        line-height:1.45;
        white-space:normal;
    }

    .site_navigation .site_submenu a:not(.nav_cta)::after
    {
        display:none;
    }
}


/*=========================================================
INTERMEDIATE DESKTOP
=========================================================*/

@media (min-width:68rem) and (max-width:79.99rem)
{
    .site_header_inner
    {
        padding-right:2.5rem;
        padding-left:2.5rem;

        gap:1.5rem;
    }

    .site_logo
    {
        width:calc(
            15.5rem -
            (1.5rem * var(--navigation_scroll_progress))
        );
    }

    .site_navigation ul
    {
        gap:1rem;
    }

    .site_navigation a
    {
        font-size:0.59rem;
    }

    .site_navigation .nav_cta
    {
        padding-right:0.8rem;
        padding-left:0.8rem;
    }
}


/*=========================================================
LARGE DESKTOP
=========================================================*/

@media (min-width:80rem)
{
    .site_logo
    {
        width:calc(
            19rem -
            (2.5rem * var(--navigation_scroll_progress))
        );
    }
}


/*=========================================================
VERY LARGE DESKTOP
=========================================================*/

@media (min-width:100rem)
{
    .site_header_inner
    {
        padding-right:7rem;
        padding-left:7rem;
    }

    .site_logo
    {
        width:calc(
            20rem -
            (2.75rem * var(--navigation_scroll_progress))
        );
    }

    .site_navigation ul
    {
        gap:1.55rem;
    }
}


/*=========================================================
REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion:reduce)
{
    .site_logo,
    .site_logo_image,
    .menu_button span,
    .site_navigation,
    .site_navigation a,
    .site_navigation a::after,
    .site_navigation .nav_cta
    {
        transition:none;
    }
}