/* =========================================================
   DALLAS MEDIA GROUP
   CLEAN MOBILE MENU V1

   This file is the ONLY mobile drawer authority.

   Architecture:
   - #dmMobileMenuButton = hamburger
   - #nav.dm-mobile-drawer = drawer
   - #dmMobileBackdrop = backdrop
   - JS moves #nav to body on mobile
   ========================================================= */


/* ---------------------------------------------------------
   BUTTON
   Hidden on desktop.
   --------------------------------------------------------- */

#dmMobileMenuButton {
    display: none;
}


/* ---------------------------------------------------------
   MOBILE ONLY
   --------------------------------------------------------- */

@media (max-width: 980px) {

    /*
    Hamburger
    Long / medium / short
    */

    #dmMobileMenuButton {
        display: flex;

        position: absolute;
        top: 12px;
        right: 12px;

        z-index: 50020;

        width: 48px;
        height: 44px;

        margin: 0;
        padding: 8px 9px;

        border: 0;
        border-radius: 10px;

        background: #ffffff;

        box-shadow:
            0 3px 12px
            rgba(0,0,0,.10);

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

        gap: 5px;

        cursor: pointer;

        appearance: none;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;
    }


    #dmMobileMenuButton .dm-menu-bar {
        display: block;

        height: 3px;

        flex: 0 0 3px;

        margin: 0;
        padding: 0;

        border: 0;
        border-radius: 999px;

        background: #111111;

        transition:
            width .18s ease,
            transform .18s ease,
            opacity .18s ease;
    }


    #dmMobileMenuButton .dm-menu-bar--long {
        width: 28px;
    }


    #dmMobileMenuButton .dm-menu-bar--medium {
        width: 21px;
    }


    #dmMobileMenuButton .dm-menu-bar--short {
        width: 14px;
    }


    #dmMobileMenuButton:active {
        transform: scale(.96);
    }


    /*
    Backdrop

    Attached directly to BODY.
    Never inside sticky header.
    */

    #dmMobileBackdrop {
        position: fixed;

        inset: 0;

        z-index: 49990;

        display: block;

        background:
            rgba(0,0,0,.46);

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

        transition:
            opacity .20s ease,
            visibility .20s ease;
    }


    #dmMobileBackdrop.dm-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }


    /*
    Drawer

    IMPORTANT:
    JS physically moves #nav into BODY on mobile.

    Therefore this fixed element has no sticky-header,
    backdrop-filter or transformed ancestor.
    */

    #nav.dm-mobile-drawer {
        position: fixed;

        top: 0;
        right: 0;
        bottom: 0;
        left: auto;

        z-index: 50000;

        width:
            min(
                86vw,
                360px
            );

        height: 100dvh;
        max-height: 100dvh;

        margin: 0;

        padding:
            max(
                22px,
                env(safe-area-inset-top)
            )
            16px
            max(
                24px,
                env(safe-area-inset-bottom)
            );

        display: flex;

        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        gap: 0;

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

        background: #ffffff;

        border: 0;
        border-left:
            1px solid
            rgba(0,0,0,.08);

        box-shadow:
            -12px 0 34px
            rgba(0,0,0,.16);

        transform:
            translate3d(
                105%,
                0,
                0
            );

        visibility: hidden;
        pointer-events: none;

        transition:
            transform .24s ease,
            visibility .24s ease;

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

        scrollbar-width: none;
    }


    #nav.dm-mobile-drawer::-webkit-scrollbar {
        width: 0;
        height: 0;
    }


    #nav.dm-mobile-drawer.dm-open {
        transform:
            translate3d(
                0,
                0,
                0
            );

        visibility: visible;
        pointer-events: auto;
    }


    /*
    Links
    */

    #nav.dm-mobile-drawer > a {
        position: relative;

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

        display: flex;

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

        flex: 0 0 auto;

        margin: 0;

        padding:
            11px
            8px;

        border: 0;
        border-bottom:
            1px solid
            rgba(0,0,0,.075);

        background:
            transparent;

        color: #111111;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 15px;
        font-weight: 600;
        line-height: 1.25;

        text-align: left;
        text-decoration: none;

        white-space: normal;

        transform: none;
    }


    #nav.dm-mobile-drawer > a.active {
        color: #ed1c24;

        background:
            rgba(
                237,
                28,
                36,
                .05
            );

        border-radius: 8px;
    }


    /*
    Document scroll lock.

    No position: fixed on BODY.
    No top manipulation.
    No scroll restoration tricks.
    */

    html.dm-menu-open,
    html.dm-menu-open body {
        overflow: hidden;
    }


    /*
    Button open state.

    Keep the tiered three-stick identity.
    */

    #dmMobileMenuButton[aria-expanded="true"]
    .dm-menu-bar--long {
        width: 28px;
    }


    #dmMobileMenuButton[aria-expanded="true"]
    .dm-menu-bar--medium {
        width: 21px;
    }


    #dmMobileMenuButton[aria-expanded="true"]
    .dm-menu-bar--short {
        width: 14px;
    }

}


@media (max-width: 420px) {

    #nav.dm-mobile-drawer {
        width:
            min(
                88vw,
                330px
            );
    }

}


/* =========================================================
   DALLAS MOBILE DRAWER CLOSE BUTTON V1
   ========================================================= */

@media (max-width: 980px) {

    #dmMobileCloseButton {
        position: sticky;

        top: 0;

        align-self: flex-end;

        width: 42px;
        height: 42px;

        flex: 0 0 42px;

        display: grid;
        place-items: center;

        margin:
            0
            0
            10px
            auto;

        padding: 0;

        border: 0;
        border-radius: 50%;

        background:
            #f5f5f5;

        color:
            #111111;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size:
            32px;

        font-weight:
            400;

        line-height:
            1;

        cursor: pointer;

        z-index: 3;

        -webkit-tap-highlight-color:
            transparent;
    }


    #dmMobileCloseButton span {
        display: block;

        transform:
            translateY(-1px);
    }


    #dmMobileCloseButton:active {
        transform:
            scale(.95);
    }

}


/* Desktop safety */

@media (min-width: 981px) {

    #dmMobileCloseButton {
        display: none !important;
    }

}