/* =========================================================================
   Drawer do menu mobile (CSS puro, servido direto — sem passar pelo Tailwind).

   Por que fora do src/css: o build do Tailwind deste tema está quebrado
   (regras .hidden próprias em LPs tornam '@apply hidden' circular), então
   assets/css/theme.css não pode ser regerado. Este arquivo é a fonte de
   verdade destas regras e é enfileirado após o theme.css em
   functions/theme-assets.php.
   ========================================================================= */

/* Neutraliza as regras do menu de abas antigo que seguem compiladas no theme.css */
.mobile-menu.is-open{ height:auto; width:auto; margin-left:0; align-items:stretch; }


.mobile-menu {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--alper-header-h, 84px);
    bottom: 0;
    z-index: 20;
    flex-direction: column;
    background: #fff;
    overscroll-behavior: contain;
}

.mobile-menu.is-open {
    display: flex;
}

/* Acima de 1199px o menu de desktop assume o comando.
   O !important vence a regra antiga (display:flex!important até 1299px) que
   continua compilada no theme.css. */
@media (min-width: 1199px) {
    .mobile-menu,
    .mobile-menu.is-open {
        display: none !important;
    }
}

/* Trava o scroll da página enquanto o drawer está aberto */
html.mobile-menu-open,
body.mobile-menu-open {
    overflow: hidden;
}

/* ---- Busca ---- */
.mobile-menu__search {
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #E6EDF4;
}

.mobile-menu__search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #D7D7D7;
    border-radius: 8px;
    background: #F7FAFD;
}

.mobile-menu__search-field:focus-within {
    border-color: var(--lochmara_color, #0082DE);
}

.mobile-menu__search-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    color: var(--eastern_blue_color, #004F94);
}

.mobile-menu__search-field input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 16px; /* evita o zoom automático do iOS ao focar */
    color: #585858;
}

/* ---- Lista de navegação (única área de scroll do drawer) ---- */
.mobile-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav__list,
.mobile-nav__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav__item {
    border-bottom: 1px solid #E6EDF4;
}

/* Linha de 1º nível: link direto ou botão de acordeão */
.mobile-nav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 14px 20px;
    border: 0;
    background: transparent;
    text-align: left;
    text-decoration: none !important;
    font-size: 1.125rem;
    line-height: 1.38rem;
    color: var(--eastern_blue_color, #004F94);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.mobile-nav__row:hover,
.mobile-nav__row:focus-visible {
    background: #F2F7FC;
}

.mobile-nav__label {
    display: block;
}

.mobile-nav__chevron,
.mobile-nav__arrow {
    flex-shrink: 0;
    color: var(--lochmara_color, #0082DE);
}

.mobile-nav__chevron {
    transition: transform .2s ease;
}

.mobile-nav__item.is-open > .mobile-nav__toggle .mobile-nav__chevron {
    transform: rotate(180deg);
}

.mobile-nav__item.is-open > .mobile-nav__toggle,
.mobile-nav__item.is-current > .mobile-nav__row {
    color: var(--lochmara_color, #0082DE);
}

/* Marcador da seção correspondente à página atual */
.mobile-nav__item.is-current > .mobile-nav__row {
    box-shadow: inset 3px 0 0 0 var(--lochmara_color, #0082DE);
}

/* ---- Painel do submenu ---- */
.mobile-nav__panel {
    background: #F7FAFD;
}

.mobile-nav__panel[hidden] {
    display: none;
}

.mobile-nav__sublist > li + li .mobile-nav__sublink {
    border-top: 1px solid #E1EAF3;
}

.mobile-nav__sublink,
.mobile-nav__all {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 12px 20px 12px 20px;
    text-decoration: none !important;
    font-size: 1rem;
    line-height: 1.35rem;
    color: var(--eastern_blue_color, #004F94);
}

.mobile-nav__sublink:hover,
.mobile-nav__all:hover {
    color: var(--lochmara_color, #0082DE);
    background: #EDF4FB;
}

.mobile-nav__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.mobile-nav__icon img {
    max-width: 28px;
    max-height: 28px;
    width: auto;
    height: auto;
}

/* Atalho para a própria página do item pai */
.mobile-nav__all {
    justify-content: space-between;
    min-height: 48px;
    color: var(--lochmara_color, #0082DE);
    border-bottom: 1px solid #E1EAF3;
}

/* ---- Rodapé fixo com CTAs ---- */
.mobile-menu__footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #E6EDF4;
    background: #fff;
}

.mobile-menu__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    text-decoration: none !important;
    cursor: pointer;
}

.mobile-menu__cta--solid {
    border: 0;
    color: #fff;
    background: var(--lochmara_color, #0082DE);
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav__chevron,
    .mobile-nav__row {
        transition: none;
    }
}