/**
 * Mobile header (<= 820px).
 *
 * Markup: inc/mobile-header.php   Behavior: js/mobile-header.js
 *
 * 820px is not an arbitrary choice: it is the site's own mobile-nav breakpoint.
 * The live header is NOT the Genesis responsive menu — it is a hand-written
 * <nav> inside a Custom HTML widget in the header widget area, with its own
 * .mobile_btn hamburger and .main_menu list, and style.css only switches that
 * nav to its mobile form at `@media (max-width: 820px)`. Using any other value
 * shows this header while .main_menu is still laid out horizontally, i.e. two
 * menus at once.
 *
 * Desktop keeps the widget-driven .before-header-row header untouched.
 */

/* Desktop: the mobile header does not exist. */
.emaids-mh {
    display: none;
}

@media only screen and (max-width: 820px) {

    /* ---- Take over from the Genesis header ------------------------------ */

    /*
     * .emaids-mh__main replaces the stock logo row, but .site-header must NOT be
     * display:none — the site's only menu lives inside it (header widget area >
     * Custom HTML widget > <nav> > .main_menu). Hiding the header would hide the
     * very menu our button opens. Collapse its chrome instead.
     *
     * The `body` prefix is not noise: these tie in specificity with style.css's
     * own `.site-header .wrap` (min-height:95px) and `.header-image .title-area`
     * rules, so without it the winner would depend on stylesheet order.
     */
    body .site-header > .wrap {
        min-height: 0;
        padding: 0;
    }

    /* The old logo, absolutely positioned by style.css over the header. */
    body .site-header .title-area {
        display: none;
    }

    /* style.css gives this <nav> 15px padding at <=820px, which would show as a
       white strip under our header while the menu is closed. .main_menu brings
       its own spacing once open. */
    body .site-header nav {
        padding: 0;
    }

    /*
     * The site's own Call + hamburger buttons, replaced by .emaids-mh__call and
     * .emaids-mh__menu.
     *
     * .mobile_btn is hidden but NOT removed: it owns the real click handler
     * (js/script.js binds .mobile_btn -> .main_menu.slideToggle()), and our Menu
     * button forwards taps to it. jQuery still fires handlers on display:none
     * elements, so hiding it is safe.
     *
     * Only these two are hidden — never their .mobile_nav_btns parent, which
     * also contains .main_menu itself.
     */
    body .site-header .mobile_btn,
    body .site-header .mobile_btn_phone {
        display: none !important;
    }

    /* ---- Shell ---------------------------------------------------------- */

    .emaids-mh {
        display: block;
        font-family: Roboto, sans-serif;
    }

    /* ---- Row 1: location + Book Online ---------------------------------- */

    .emaids-mh__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 14px;
        background: #f5f4f0;
    }

    .emaids-mh__loc {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        font-size: 14px;
        line-height: 1;
        color: #1a1a1a;
    }

    .emaids-mh__loc i {
        flex: none;
        font-size: 14px;
        color: #267749;
    }

    /* 700, not 600: the theme only loads Roboto 300/400/700/900 (functions.php),
       so 600 would just resolve to the 700 face anyway. */
    .emaids-mh__loc-name {
        overflow: hidden;
        color: #111;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .emaids-mh__loc-change {
        flex: none;
        margin-left: 4px;
        color: #267749 !important;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none !important;
    }

    .emaids-mh__loc-change:hover,
    .emaids-mh__loc-change:focus-visible {
        text-decoration: underline !important;
    }

    .emaids-mh__book {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: 999px;
        background: #1a7a35;
        color: #fff !important;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    }

    .emaids-mh__book:hover,
    .emaids-mh__book:focus-visible {
        background: #156129;
    }

    /* ---- Row 2: logo + Call Us + Menu ----------------------------------- */

    .emaids-mh__main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 14px;
        background: #fff;
        border-top: 1px solid #e6e4de;
    }

    .emaids-mh__logo {
        flex: 0 1 auto;
        display: block;
        min-width: 0;
        line-height: 0;
        text-decoration: none !important;
    }

    .emaids-mh__logo img {
        display: block;
        width: auto;
        max-width: 160px;
        height: auto;
        max-height: 46px;
    }

    .emaids-mh__logo-text {
        font-size: 20px;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.2;
    }

    .emaids-mh__actions {
        flex: none;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .emaids-mh__call {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: 999px;
        background: #123a63;
        color: #fff !important;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none !important;
        white-space: nowrap;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    }

    .emaids-mh__call:hover,
    .emaids-mh__call:focus-visible {
        background: #0d2b4a;
    }

    /*
     * The design's handset is fa-phone-alt, which only exists from Font Awesome
     * 5.9 — the theme loads 5.8.2 (functions.php), where it renders as an empty
     * box. Rotating fa-phone 90deg produces that exact glyph: fa-phone runs
     * top-right to bottom-left, fa-phone-alt runs top-left to bottom-right.
     *
     * Done here rather than with FA's own .fa-rotate-90 utility class in the
     * markup so the orientation is owned by this file, which is cache-busted by
     * filemtime, instead of depending on the markup and on FA's utility CSS.
     */
    .emaids-mh__call i {
        transform: rotate(90deg);
    }

    /* Menu button: bars (closed) / X (open) rendered as inline SVG in the markup. */
    .emaids-mh__menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 2px 0;
        background: none !important;
        border: 0 !important;
        border-radius: 0;
        color: #123a63;
        cursor: pointer;
    }

    .emaids-mh__menu:hover,
    .emaids-mh__menu:focus {
        background: none !important;
        color: #123a63;
    }

    .emaids-mh__menu-ico {
        display: block;
    }

    /*
     * .is-open is toggled by js/mobile-header.js (which also swaps the label to
     * "Close"). Closed shows the bars, open shows the X.
     */
    .emaids-mh__menu-ico--close {
        display: none;
    }

    .emaids-mh__menu.is-open .emaids-mh__menu-ico--bars {
        display: none;
    }

    .emaids-mh__menu.is-open .emaids-mh__menu-ico--close {
        display: block;
    }

    .emaids-mh__menu-label {
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        color: #123a63;
    }

    /* ---- Narrow phones --------------------------------------------------- */

    @media only screen and (max-width: 400px) {
        .emaids-mh__bar,
        .emaids-mh__main {
            padding: 8px 10px;
        }
        .emaids-mh__book,
        .emaids-mh__call {
            padding: 9px 12px;
        }
        .emaids-mh__loc,
        .emaids-mh__loc-change {
            font-size: 13px;
        }
        .emaids-mh__logo img {
            max-width: 120px;
        }
    }
}