/* Mobile drawer + role-aware bottom navigation */
@media (max-width: 991.98px) {
    :root { --mobile-bottom-nav-height: 76px; }

    body {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    body.mobile-drawer-open { overflow: hidden; }

    .site-header .navbar { min-height: 64px; }
    .site-header .navbar > .container { flex-wrap: nowrap; }
    .site-header .navbar-brand { max-width: calc(100% - 58px); overflow: hidden; }
    .site-header .navbar-brand > span { overflow: hidden; text-overflow: ellipsis; }
    .mobile-drawer-toggle { border: 0; box-shadow: none !important; padding: .45rem; }

    .mobile-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1085;
        background: rgba(12, 18, 31, .48);
        backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity .24s ease;
    }
    .mobile-drawer-backdrop.is-visible { opacity: 1; }

    .mobile-nav-drawer {
        position: fixed;
        z-index: 1090;
        top: 0;
        right: 0;
        width: min(88vw, 360px);
        height: 100dvh;
        display: flex;
        flex-direction: column;
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        border-left: 1px solid var(--bs-border-color);
        box-shadow: -18px 0 46px rgba(16, 24, 40, .16);
        transform: translateX(102%);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.2,.75,.25,1), visibility .28s;
        text-align: right;
    }
    .mobile-nav-drawer.is-open { transform: translateX(0); visibility: visible; }

    .mobile-nav-drawer__header {
        min-height: 68px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
    }
    .mobile-nav-drawer__brand {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: .65rem;
        color: var(--bs-body-color);
        text-decoration: none;
        font-weight: 900;
    }
    .mobile-nav-drawer__brand span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .mobile-nav-drawer__close {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border: 1px solid var(--bs-border-color);
        border-radius: 12px;
        background: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
        font-size: 1rem;
    }
    .mobile-nav-drawer__body {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .8rem;
    }
    .mobile-nav-list { display: grid; gap: .35rem; }
    .mobile-nav-link,
    .mobile-nav-group > summary {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: .7rem;
        width: 100%;
        padding: .68rem .75rem;
        border: 0;
        border-radius: 13px;
        color: var(--bs-body-color);
        background: transparent;
        text-decoration: none;
        font-weight: 750;
        list-style: none;
        cursor: pointer;
        text-align: right;
    }
    .mobile-nav-link:hover,
    .mobile-nav-link:focus,
    .mobile-nav-group[open] > summary,
    .mobile-nav-group > summary:hover { background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
    .mobile-nav-link > i,
    .mobile-nav-group > summary > span:first-child > i { width: 22px; text-align: center; font-size: 1.05rem; }
    .mobile-nav-link .mobile-nav-badge { margin-right: auto; }
    .mobile-nav-group { border-radius: 14px; overflow: hidden; }
    .mobile-nav-group > summary::-webkit-details-marker { display: none; }
    .mobile-nav-group > summary { justify-content: space-between; }
    .mobile-nav-group > summary > span:first-child { display: flex; align-items: center; gap: .7rem; min-width: 0; }
    .mobile-nav-summary-tail { display: inline-flex; align-items: center; gap: .45rem; margin-right: auto; }
    .mobile-nav-chevron { transition: transform .2s ease; font-size: .8rem; }
    .mobile-nav-group[open] .mobile-nav-chevron { transform: rotate(180deg); }
    .mobile-nav-submenu {
        margin: .15rem .85rem .55rem 0;
        padding: .3rem .75rem .35rem .15rem;
        border-right: 2px solid rgba(var(--bs-primary-rgb), .18);
        display: grid;
        gap: .18rem;
    }
    .mobile-nav-submenu a,
    .mobile-nav-form-link {
        width: 100%;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .65rem;
        padding: .52rem .65rem;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--bs-secondary-color);
        text-decoration: none;
        font-size: .86rem;
        font-weight: 650;
        text-align: right;
    }
    .mobile-nav-submenu a:hover,
    .mobile-nav-form-link:hover { background: var(--bs-tertiary-bg); color: var(--bs-primary); }
    .mobile-nav-submenu__featured { color: var(--bs-primary) !important; font-weight: 850 !important; }
    .mobile-nav-section-label {
        margin-top: .35rem;
        padding: .42rem .65rem .25rem;
        color: var(--bs-secondary-color);
        font-size: .7rem;
        font-weight: 900;
        opacity: .8;
    }
    .mobile-nav-badge,
    .mobile-bottom-badge {
        min-width: 20px;
        height: 20px;
        padding: 0 .35rem;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        background: var(--bs-danger);
        color: #fff;
        font-size: .65rem;
        font-weight: 900;
        line-height: 1;
    }
    .mobile-nav-drawer__footer {
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
    }
    .mobile-nav-theme-btn {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        border: 1px solid var(--bs-border-color);
        border-radius: 12px;
        background: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
        font-weight: 750;
    }

    .mobile-bottom-nav {
        position: fixed;
        z-index: 1075;
        right: 0;
        left: 0;
        bottom: 0;
        height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        padding: 0 .45rem env(safe-area-inset-bottom, 0px);
        background: color-mix(in srgb, var(--bs-body-bg) 94%, transparent);
        border-top: 1px solid var(--bs-border-color);
        box-shadow: 0 -10px 30px rgba(15, 23, 42, .09);
        backdrop-filter: blur(14px);
    }
    .mobile-bottom-nav__inner {
        position: relative;
        height: var(--mobile-bottom-nav-height);
        max-width: 560px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
        gap: .05rem;
        direction: rtl;
    }
    .mobile-bottom-item,
    .mobile-bottom-form .mobile-bottom-item {
        min-width: 0;
        height: 62px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        padding: .25rem .12rem .35rem;
        border: 0;
        background: transparent;
        color: var(--bs-secondary-color);
        text-decoration: none;
        font-family: inherit;
        font-size: .68rem;
        font-weight: 750;
        white-space: nowrap;
    }
    .mobile-bottom-item > i,
    .mobile-bottom-icon-wrap > i { font-size: 1.18rem; line-height: 1; }
    .mobile-bottom-item:active,
    .mobile-bottom-item:hover { color: var(--bs-primary); }
    .mobile-bottom-spacer { display: block; min-width: 0; }
    .mobile-bottom-form { margin: 0; min-width: 0; }
    .mobile-bottom-form .mobile-bottom-item { width: 100%; }
    .mobile-bottom-icon-wrap { position: relative; display: inline-grid; place-items: center; }
    .mobile-bottom-badge {
        position: absolute;
        top: -9px;
        right: -11px;
        min-width: 18px;
        height: 18px;
        font-size: .58rem;
        box-shadow: 0 0 0 2px var(--bs-body-bg);
    }
    .mobile-bottom-home {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: .12rem;
        padding-bottom: .35rem;
        color: var(--bs-primary);
        text-decoration: none;
        font-weight: 900;
        font-size: .68rem;
    }
    .mobile-bottom-home > span {
        width: 58px;
        height: 58px;
        margin-top: -23px;
        display: grid;
        place-items: center;
        border: 5px solid var(--bs-body-bg);
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        box-shadow: 0 8px 22px rgba(var(--bs-primary-rgb), .34);
        font-size: 1.42rem;
    }
    .mobile-bottom-home small { color: var(--bs-primary); font-size: .68rem; font-weight: 900; }

    .site-footer { margin-bottom: 0 !important; }
}

@media (min-width: 992px) {
    .mobile-nav-drawer,
    .mobile-drawer-backdrop,
    .mobile-bottom-nav { display: none !important; }
}


/* Quick Search is a first-class mobile navigation item. */
@media (max-width: 991.98px) {
    .mobile-bottom-nav__inner {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .mobile-bottom-search {
        cursor: pointer;
    }

    .mobile-bottom-search:focus-visible {
        outline: 2px solid rgba(var(--bs-primary-rgb), .45);
        outline-offset: -2px;
        border-radius: .65rem;
    }
}

@media (max-width: 380px) {
    .mobile-bottom-item,
    .mobile-bottom-form .mobile-bottom-item,
    .mobile-bottom-home,
    .mobile-bottom-home small {
        font-size: .61rem;
    }

    .mobile-bottom-item > i,
    .mobile-bottom-icon-wrap > i {
        font-size: 1.08rem;
    }
}


/* Shared layout metric used by the fixed compact footer. */
:root {
    --mobile-bottom-nav-height: 74px;
}


/* Ultra-compact phone header: keep logo/menu close to the header edges. */
@media (max-width: 767.98px) {
    .site-header .navbar {
        min-height: 38px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .site-header .navbar > .container {
        min-height: 38px;
        padding-top: 0;
        padding-bottom: 0;
        padding-inline: 8px;
    }

    .site-header .navbar-brand {
        max-width: calc(100% - 42px);
        gap: .3rem !important;
        margin: 0;
        padding-top: 1px;
        padding-bottom: 1px;
        font-size: .86rem;
        line-height: 1;
    }

    .site-header .site-logo {
        width: 32px;
        height: 32px;
        border-radius: .45rem;
    }

    .site-header .mobile-drawer-toggle {
        width: 36px;
        height: 36px;
        min-height: 36px;
        display: grid;
        place-items: center;
        padding: 3px;
        margin: 0;
        line-height: 1;
    }

    .site-header .mobile-drawer-toggle .navbar-toggler-icon {
        width: 1.15rem;
        height: 1.15rem;
        background-size: 1.15rem 1.15rem;
    }
}


/* Force a truly compact mobile header.
   Bootstrap's .py-2 utility uses !important, so we must override it explicitly. */
@media (max-width: 767.98px) {
    .site-header .navbar.py-2 {
        min-height: 36px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .site-header .navbar > .container {
        min-height: 36px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: center !important;
    }

    .site-header .navbar-brand {
        min-height: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 1px !important;
        padding-bottom: 1px !important;
        line-height: 1 !important;
        gap: .3rem !important;
    }

    .site-header .site-logo {
        width: 30px !important;
        height: 30px !important;
        display: block !important;
        margin: 0 !important;
    }

    .site-header .brand-link > span {
        line-height: 1 !important;
        margin: 0 !important;
    }

    .site-header .navbar-toggler.mobile-drawer-toggle {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 2px !important;
        margin: 0 !important;
        border-width: 0 !important;
        display: grid !important;
        place-items: center !important;
    }

    .site-header .navbar-toggler-icon {
        width: 18px !important;
        height: 18px !important;
        background-size: 18px 18px !important;
        margin: 0 !important;
    }
}


/* Mobile: footer is hidden; only the bottom navigation needs reserved space. */
@media (max-width: 767.98px) {
    .site-footer,
    .site-footer--compact {
        display: none !important;
    }

    body {
        padding-bottom: calc(
            var(--mobile-bottom-nav-height, 74px)
            + env(safe-area-inset-bottom)
        ) !important;
    }
}


/* Exact phone header metric shared with the sticky Home map.
   Use a fixed box height, not only min-height, to avoid a 1-3px sticky snap. */
@media (max-width: 767.98px) {
    :root {
        --mobile-site-header-height: 36px;
    }

    .site-header {
        height: var(--mobile-site-header-height) !important;
        min-height: var(--mobile-site-header-height) !important;
        max-height: var(--mobile-site-header-height) !important;
    }

    .site-header .navbar,
    .site-header .navbar.py-2 {
        box-sizing: border-box !important;
        height: var(--mobile-site-header-height) !important;
        min-height: var(--mobile-site-header-height) !important;
        max-height: var(--mobile-site-header-height) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .site-header .navbar > .container {
        box-sizing: border-box !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}