/* Mobile / tablet header + menu. Desktop (≥1150px) nav markup is unchanged. */

#siteNav {
    z-index: 40;
}

@media (max-width: 1149px) {
    #siteNav {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    #siteNav > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0;
        max-width: none;
    }

    #desktopLogo {
        display: none !important;
    }

    #desktopNav,
    #desktopActions {
        display: none !important;
    }

    #mobileActions {
        display: flex !important;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin: 0;
        min-height: 48px;
    }

    .sys-mobile-logo {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .sys-mobile-logo img {
        display: block;
        width: 150px;
        max-width: 42vw;
        height: auto;
        object-fit: contain;
    }

    .sys-mobile-header__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
        flex: 0 0 auto;
        margin-left: auto;
    }

    #languageDropdownButtonMobile {
        min-height: 44px;
        padding: 0.4rem 0.85rem;
        font-size: 0.85rem;
    }

    #mobileMenuButton {
        position: relative;
        z-index: 70;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        background: #0b2e1a;
        color: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
        backdrop-filter: none;
    }

    #mobileMenuButton:hover,
    #mobileMenuButton:focus-visible {
        background: #14532d;
        color: #fff;
        outline: 2px solid rgba(255, 255, 255, 0.55);
        outline-offset: 2px;
    }

    #mobileMenuButton svg {
        width: 1.35rem;
        height: 1.35rem;
        stroke: #fff;
        color: #fff;
    }

    #mobileMenu.sys-mobile-drawer {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 210;
        background: #ffffff;
        color: #1f2937;
        color-scheme: light;
        forced-color-adjust: none;
    }

    #mobileMenuPanel.sys-mobile-drawer__panel {
        background: #ffffff;
        color: #1f2937;
        color-scheme: light;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .sys-mobile-menu-inner {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-height: 100%;
        min-width: 0;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }

    .sys-mobile-drawer__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 2;
        background: #ffffff;
        padding-bottom: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .sys-mobile-drawer__logo {
        display: flex;
        align-items: center;
        min-width: 0;
        flex: 1 1 auto;
        color: inherit;
    }

    .sys-mobile-drawer__logo img {
        display: block;
        width: min(150px, 52vw);
        max-width: 100%;
        height: auto;
        max-height: 48px;
        object-fit: contain;
        object-position: left center;
    }

    .sys-mobile-drawer__close {
        appearance: none;
        -webkit-appearance: none;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border-radius: 999px;
        border: 1px solid #2d5016;
        background: #0b2e1a;
        color: #ffffff;
        cursor: pointer;
    }

    .sys-mobile-drawer__close svg {
        width: 1.35rem;
        height: 1.35rem;
        stroke: #ffffff;
        color: #ffffff;
    }

    .sys-mobile-drawer__link,
    .sys-mobile-drawer__sublink,
    .sys-mobile-drawer__section-label,
    .sys-mobile-drawer__chip,
    .sys-mobile-drawer__action {
        color: #1f2937;
        -webkit-text-fill-color: #1f2937;
    }

    .sys-mobile-drawer__link {
        display: block;
        font-weight: 600;
        font-size: 1.5rem;
        line-height: 1.3;
        padding: 0.5rem 0;
        text-decoration: none;
    }

    .sys-mobile-drawer__link:hover,
    .sys-mobile-drawer__link:focus-visible,
    .sys-mobile-drawer__sublink:hover,
    .sys-mobile-drawer__sublink:focus-visible {
        color: #2d5016;
        -webkit-text-fill-color: #2d5016;
    }

    .sys-mobile-drawer__sublink {
        display: block;
        font-size: 1.125rem;
        padding: 0.5rem 0;
        color: #4b5563;
        -webkit-text-fill-color: #4b5563;
        text-decoration: none;
    }

    .sys-mobile-drawer__icon-btn {
        appearance: none;
        -webkit-appearance: none;
        padding: 0.5rem;
        background: transparent;
        border: 0;
        color: #4b5563;
        cursor: pointer;
    }

    .sys-mobile-drawer__icon-btn svg {
        stroke: #4b5563;
        color: #4b5563;
    }

    .sys-mobile-drawer__section {
        padding-top: 1rem;
        margin-top: 0.5rem;
        border-top: 1px solid #d1d5db;
    }

    .sys-mobile-drawer__section-label {
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 0.8rem;
        color: #4b5563;
        -webkit-text-fill-color: #4b5563;
        margin-bottom: 0.5rem;
    }

    .sys-mobile-drawer__chip {
        appearance: none;
        -webkit-appearance: none;
        flex: 1 1 5.5rem;
        min-width: 5.5rem;
        text-align: center;
        padding: 0.75rem 1rem;
        border-radius: 999px;
        border: 2px solid #2d5016;
        background: #ffffff;
        color: #2d5016 !important;
        -webkit-text-fill-color: #2d5016 !important;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    .sys-mobile-drawer__chip.is-active,
    .sys-mobile-drawer__chip.bg-\[\#2d5016\],
    #mobileMenu .currency-option.bg-\[\#2d5016\] {
        background: #2d5016 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .sys-mobile-drawer__auth {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding-top: 1.5rem;
        margin-top: auto;
        border-top: 1px solid #d1d5db;
    }

    .sys-mobile-drawer__action {
        appearance: none;
        -webkit-appearance: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1rem 1rem;
        border-radius: 999px;
        border: 2px solid #2d5016;
        background: #f5f5dc;
        color: #2d5016 !important;
        -webkit-text-fill-color: #2d5016 !important;
        font-weight: 600;
        font-size: 1.125rem;
        text-decoration: none;
        cursor: pointer;
    }

    .sys-mobile-drawer__action--primary {
        background: #2d5016;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .sys-mobile-drawer__action:hover,
    .sys-mobile-drawer__action:focus-visible {
        background: #2d5016;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

@media (min-width: 768px) and (max-width: 1149px) {
    .sys-mobile-logo img {
        width: 175px;
        max-width: 38vw;
    }

    .sys-mobile-drawer__logo img {
        width: min(175px, 38vw);
        max-height: 56px;
    }
}

@media (min-width: 1150px) {
    #mobileActions,
    #mobileMenu {
        display: none !important;
    }
}

body.mobile-nav-open #siteNav {
    z-index: 200;
}

body.mobile-nav-open #bird {
    visibility: hidden;
}

/* Decorative hero rocks/trees never steal clicks or cover nav */
.sys-hero-deco,
.sys-hero-deco img {
    pointer-events: none;
}