/* -- Header v5 ------------------------------------------------ */

.hdr.v5 {
    --hdr-lg-mx-wd: 280; 
	--hdr-lg-mx-wd-mbl: 170;
    --hdr-lg-mx-ht: 60; 
	--hdr-lg-mx-ht-mbl: 100;
    
    /* Hide phone icon at all sizes — minimal logo + hamburger header */
    .phn-icn {
        display: none;
    }

    /* At desktop sizes, enable the mobile-nav patterns that are normally
       restricted to max-width:1279px in header-tools.css */
    @media screen and (min-width: 1280px) {

        /* Show the hamburger menu button */
        .mnu-btn {
            display: block;
            color: var(--buttons);
        }

        /* Let the popover API control mobile nav visibility */
        .mbl-mnu {
            display: revert;
            width: 83%;
            height: 100dvh;
            left: 0;
            right: auto;
            overflow: auto;
            padding-top: 0.811rem;
            padding-bottom: 4rem;
            translate: -100% 0;
            border: none;
            position: fixed;
            transition: translate var(--g-trn-sp) var(--g-trn-tf),
                        display var(--g-trn-sp) var(--g-trn-tf) allow-discrete,
                        overlay var(--g-trn-sp) var(--g-trn-tf) allow-discrete;

            &::backdrop {
                opacity: 0;
                background: hsl(from var(--black) h s l / var(--bx-sdw-o));
                transition: opacity var(--g-trn-sp) var(--g-trn-tf);
                backdrop-filter: blur(3px);
            }

            &:popover-open {
                translate: 0 0;

                &::backdrop {
                    opacity: 1;
                }

                @starting-style {
                    translate: -100% 0;

                    &::backdrop {
                        opacity: 0;
                    }
                }
            }

            .mbl-mnu {
                width: 75%;
            }

            .mbl-nv {
                flex: 1 1 auto;
            }
        }

        .lg-bx {
            width: 100%;
        }

        &.lt-bg .nv {
            background-color: var(--inner-bg);
        }

        &.dk-bg .nv {
            background-color: var(--inner-bg-alt);
        }
    }
}