.header-mobile {
    padding: 16px 24px;
    z-index: 12;
}

.logo-mobile {
    /* Fixed height + width:auto forces the browser to scale width proportionally from the real decoded image, which max-height alone doesn't guarantee. */
    height: 28px;
    width: auto;
    max-width: 100%;
}

.offcanvas {
    width: 100vw !important;
    background-color: var(--bs-offcanvas-bg);
    --bs-offcanvas-zindex: 1060;
    z-index: 1060;
}

.offcanvas.offcanvas-top {
    --bs-offcanvas-height: auto;
    height: auto !important;
    max-height: 100dvh;
    overflow-y: auto;
}

.offcanvas-header {
    height: 60px;
    padding: 16px 24px;
}

.offcanvas-logo {
    /* Same fix as .logo-mobile above — explicit height + width:auto so the browser always scales width from the real decoded image. */
    height: 28px;
    width: auto;
    max-width: 100%;
}

.offcanvas-body {
    flex: 0 0 auto;
    overflow-y: visible;
    padding: 20px 24px 24px 24px;
}

.offcanvas-body ul {
    margin-left: 0;
}

/* Speed up the mobile submenu accordion — header.css's global 0.9s .collapsing transition also slows these offcanvas submenus, so scope the override to #mobileMenu only to leave other accordions untouched. */
#mobileMenu .collapsing {
    transition: height 0.35s ease-in-out !important;
}

.offcanvas-body .nav-link {
    color: var(--bs-black);
    font-family: var(--font-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase;
}

.offcanvas-body .nav-link:hover, .offcanvas-body .nav-link:focus {
    color: var(--bs-black);
}

/* Category headers stay --bs-black, same as the top-level toggle (already the .nav-link default); only their leaf sub-items need to differ, via the .fw-normal class footer.php applies to that level. */
.offcanvas-body .nav-link.fw-normal {
    color: var(--bs-darkness);
}

.offcanvas-body .nav-link:focus {
    outline: none !important;
}

/* Offcanvas topbar (EN and ES): visual separator from the main menu items above it */
.offcanvas-body .offcanvas-topbar {
    border-top: 1px solid #ccc;
    padding-top: 10px;
    margin-top: 10px;
}

/* Offcanvas topbar links (EN and ES) — same weight as the main menu items above, only the color differs back to gray */
.offcanvas-body .offcanvas-topbar .nav-link {
    color: var(--bs-text-muted);
}

.offcanvas-body .offcanvas-topbar .nav-link:hover,
.offcanvas-body .offcanvas-topbar .nav-link:focus {
    color: var(--bs-main-500);
}

.offcanvas-footer {
    background-color: var(--bs-offcanvas-bg);
    padding: 0 24px 24px;
}

.offcanvas-acf-banner {
    background-color: var(--bs-offcanvas-bg);
}

.site-es-offcanvas .offcanvas-acf-banner {
    background-color: transparent;
    margin-top: 24px;
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px;
}

.site-es-offcanvas .offcanvas-acf-banner .mega-acf-banner {
    position: static;
    width: 100%;
    height: auto;
    left: auto;
    padding: 24px;
    flex-wrap: wrap;
}

.site-es-offcanvas .offcanvas-acf-banner .banner-btn {
    position: static;
    width: 100%;
    margin-top: 16px;
}

/* Separator between category blocks inside the level-1 accordion — :has(> ul) requires the PRECEDING item to have its own nested sub-list, so a flat accordion like "About" gets no separator between its items. */
.offcanvas-body .collapse > .navbar-nav > .nav-item:has(> ul) + .nav-item {
    border-top: 1px solid var(--bs-light);
    margin-top: 16px;
    padding-top: 16px;
}

.subnav-item:first-child .nav-link, .subnav-item:nth-child(2) .nav-link {
    font-size: 16px !important;
    line-height: 20px !important;
    text-transform: none;
    font-weight: 500 !important;
}

.subnav-item:not(:nth-child(-n+2)) .nav-link {
    text-transform: none;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400;
}