/* ============================================================
   MENU MOBILE — A+ Boutique Imobiliária
   Arquivo: menu-mobile.css
   Descrição: Estilos do menu lateral mobile e botão hamburguer
   ============================================================ */

/* ── Variáveis locais ─────────────────────────────────────── */
:root {
    --menu-bg-start   : #0d475e;
    --menu-bg-end     : #191F39;
    --menu-creme      : #EFE3C9;
    --menu-creme-dim  : rgba(239, 227, 201, 0.55);
    --menu-active-clr : #EFE3C9;
    --menu-hover-clr  : rgba(239, 227, 201, 0.75);
    --menu-overlay-bg : rgba(10, 18, 35, 0.72);
    --menu-width      : min(82vw, 360px);
    --menu-transition : 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ============================================================
   BOTÃO HAMBURGUER
   ============================================================ */
.btn-menu-mobile {
    display        : none; /* exibido apenas via media query abaixo */
    background     : transparent;
    border         : none;
    cursor         : pointer;
    padding        : 8px;
    border-radius  : 8px;
    transition     : background 0.2s ease;
    position       : relative;
    width          : 40px;
    height         : 40px;
    align-items    : center;
    justify-content: center;
}

.btn-menu-mobile:hover {
    background: rgba(239, 227, 201, 0.1);
}

/* Três barras do hamburguer via spans */
.btn-menu-mobile .hamburger {
    display        : flex;
    flex-direction : column;
    gap            : 5px;
    align-items    : center;
    justify-content: center;
    width          : 24px;
    height         : 24px;
}

.btn-menu-mobile .hamburger span {
    display         : block;
    width           : 22px;
    height          : 2px;
    background-color: #EFE3C9;
    border-radius   : 2px;
    transition      : transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                      opacity   0.3s ease,
                      width     0.3s ease;
    transform-origin: center;
}

/* Animação hamburguer → X quando menu está aberto */
.btn-menu-mobile.is-open .hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.btn-menu-mobile.is-open .hamburger span:nth-child(2) {
    opacity  : 0;
    transform: scaleX(0);
}
.btn-menu-mobile.is-open .hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Exibe o botão em mobile */
@media (max-width: 768px) {
    .btn-menu-mobile {
        display: flex;
    }
}


/* ============================================================
   OVERLAY (fundo escurecido)
   ============================================================ */
.mobile-menu-overlay {
    position        : fixed;
    inset           : 0;
    z-index         : 9998;
    background-color: var(--menu-overlay-bg);
    opacity         : 0;
    visibility      : hidden;
    pointer-events  : none;
    transition      : opacity 0.4s ease, visibility 0.4s ease;
    backdrop-filter : blur(2px);
}

.mobile-menu-overlay.is-active {
    opacity       : 1;
    visibility    : visible;
    pointer-events: auto;
}


/* ============================================================
   PAINEL DO MENU (desliza da esquerda)
   ============================================================ */
.mobile-menu-panel {
    position  : fixed;
    top       : 0;
    left      : 0;
    z-index   : 9999;
    width     : var(--menu-width);
    height    : 100dvh; /* dynamic viewport height — evita bug iOS */
    background: linear-gradient(160deg, var(--menu-bg-start) 0%, var(--menu-bg-end) 100%);
    display   : flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Estado inicial: fora da tela */
    transform     : translateX(-100%);
    opacity       : 0;
    visibility    : hidden;
    pointer-events: none;
    transition    : transform var(--menu-transition),
                    opacity   0.45s ease,
                    visibility 0.45s ease;

    /* Borda sutil na direita */
    border-right: 1px solid rgba(239, 227, 201, 0.12);
    box-shadow  : 4px 0 32px rgba(0, 0, 0, 0.45);
}

/* Estado aberto */
.mobile-menu-panel.is-active {
    transform     : translateX(0);
    opacity       : 1;
    visibility    : visible;
    pointer-events: auto;
}


/* ── Topo do painel: logo + fechar ────────────────────────── */
.mobile-menu__top {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 20px 24px 16px;
    border-bottom  : 1px solid rgba(239, 227, 201, 0.1);
}

.mobile-menu__logo img {
    width     : 110px;
    height    : auto;
    display   : block;
    opacity   : 0;
    transform : translateX(-16px);
    transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s;
}

.mobile-menu-panel.is-active .mobile-menu__logo img {
    opacity  : 1;
    transform: translateX(0);
}

/* Botão fechar (X) dentro do painel */
.mobile-menu__close {
    background     : transparent;
    border         : 1px solid rgba(239, 227, 201, 0.2);
    color          : var(--menu-creme);
    width          : 36px;
    height         : 36px;
    border-radius  : 50%;
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 18px;
    transition     : background 0.2s ease, border-color 0.2s ease;
    opacity        : 0;
    transform      : rotate(-90deg) scale(0.8);
    transition     : opacity 0.4s ease 0.3s,
                     transform 0.4s ease 0.3s,
                     background 0.2s ease,
                     border-color 0.2s ease;
}

.mobile-menu-panel.is-active .mobile-menu__close {
    opacity  : 1;
    transform: rotate(0deg) scale(1);
}

.mobile-menu__close:hover {
    background  : rgba(239, 227, 201, 0.15);
    border-color: rgba(239, 227, 201, 0.5);
}


/* ── Navegação principal ──────────────────────────────────── */
.mobile-menu__nav {
    flex   : 1;
    padding: 28px 24px 20px;
}

.mobile-menu__nav ul {
    list-style: none;
    padding   : 0;
    margin    : 0;
    display   : flex;
    flex-direction: column;
    gap       : 4px;
}

.mobile-menu__nav ul li {
    opacity  : 0;
    transform: translateX(-24px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Atraso escalonado para cada item */
.mobile-menu-panel.is-active .mobile-menu__nav ul li:nth-child(1) { transition-delay: 0.20s; }
.mobile-menu-panel.is-active .mobile-menu__nav ul li:nth-child(2) { transition-delay: 0.26s; }
.mobile-menu-panel.is-active .mobile-menu__nav ul li:nth-child(3) { transition-delay: 0.32s; }
.mobile-menu-panel.is-active .mobile-menu__nav ul li:nth-child(4) { transition-delay: 0.38s; }
.mobile-menu-panel.is-active .mobile-menu__nav ul li:nth-child(5) { transition-delay: 0.44s; }
.mobile-menu-panel.is-active .mobile-menu__nav ul li:nth-child(6) { transition-delay: 0.50s; }

.mobile-menu-panel.is-active .mobile-menu__nav ul li {
    opacity  : 1;
    transform: translateX(0);
}

.mobile-menu__nav ul li a {
    display        : flex;
    align-items    : center;
    gap            : 14px;
    padding        : 13px 16px;
    border-radius  : 10px;
    text-decoration: none;
    color          : var(--menu-creme-dim);
    font-family    : 'Lato', sans-serif;
    font-size      : 15px;
    font-weight    : 400;
    letter-spacing : 0.3px;
    transition     : background 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}

.mobile-menu__nav ul li a i {
    width     : 20px;
    text-align: center;
    font-size : 15px;
    color     : var(--menu-creme-dim);
    transition: color 0.25s ease;
    flex-shrink: 0;
}

.mobile-menu__nav ul li a:hover {
    background  : rgba(239, 227, 201, 0.08);
    color       : var(--menu-creme);
    padding-left: 22px;
}

.mobile-menu__nav ul li a:hover i {
    color: var(--menu-creme);
}

/* Link da página atual */
.mobile-menu__nav ul li a.is-current {
    background  : rgba(239, 227, 201, 0.12);
    color       : var(--menu-creme);
    font-weight : 600;
    padding-left: 22px;
    border-left : 3px solid var(--menu-creme);
}

.mobile-menu__nav ul li a.is-current i {
    color: var(--menu-creme);
}

/* Divisor visual */
.mobile-menu__divider {
    margin    : 8px 24px;
    height    : 1px;
    background: rgba(239, 227, 201, 0.1);
    opacity   : 0;
    transition: opacity 0.4s ease 0.5s;
}

.mobile-menu-panel.is-active .mobile-menu__divider {
    opacity: 1;
}

/* Botão CTA dentro do menu */
.mobile-menu__cta {
    margin : 16px 24px 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.52s, transform 0.4s ease 0.52s;
}

.mobile-menu-panel.is-active .mobile-menu__cta {
    opacity  : 1;
    transform: translateY(0);
}

.mobile-menu__cta a {
    display        : block;
    text-align     : center;
    padding        : 13px 20px;
    border-radius  : 10px;
    background     : rgba(239, 227, 201, 0.12);
    border         : 1px solid rgba(239, 227, 201, 0.25);
    color          : var(--menu-creme);
    font-family    : 'Lato', sans-serif;
    font-size      : 14px;
    font-weight    : 600;
    letter-spacing : 0.5px;
    text-decoration: none;
    transition     : background 0.25s ease, border-color 0.25s ease;
}

.mobile-menu__cta a:hover {
    background  : rgba(239, 227, 201, 0.2);
    border-color: rgba(239, 227, 201, 0.5);
}


/* ── Rodapé do painel: redes sociais ─────────────────────── */
.mobile-menu__footer {
    padding      : 20px 24px 28px;
    border-top   : 1px solid rgba(239, 227, 201, 0.1);
}

.mobile-menu__social-label {
    font-family   : 'Lato', sans-serif;
    font-size     : 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color         : var(--menu-creme-dim);
    margin-bottom : 14px;
    opacity       : 0;
    transition    : opacity 0.4s ease 0.6s;
}

.mobile-menu-panel.is-active .mobile-menu__social-label {
    opacity: 1;
}

.mobile-menu__social {
    display        : flex;
    align-items    : center;
    gap            : 16px;
}

.mobile-menu__social a {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 38px;
    height         : 38px;
    border-radius  : 50%;
    border         : 1px solid rgba(239, 227, 201, 0.2);
    color          : var(--menu-creme-dim);
    font-size      : 15px;
    text-decoration: none;
    transition     : background 0.25s ease,
                     color 0.25s ease,
                     border-color 0.25s ease,
                     transform 0.25s ease;

    opacity        : 0;
    transform      : translateY(12px);
}

/* Atraso escalonado nos ícones sociais */
.mobile-menu-panel.is-active .mobile-menu__social a:nth-child(1) { transition-delay: 0.62s; }
.mobile-menu-panel.is-active .mobile-menu__social a:nth-child(2) { transition-delay: 0.67s; }
.mobile-menu-panel.is-active .mobile-menu__social a:nth-child(3) { transition-delay: 0.72s; }
.mobile-menu-panel.is-active .mobile-menu__social a:nth-child(4) { transition-delay: 0.77s; }
.mobile-menu-panel.is-active .mobile-menu__social a:nth-child(5) { transition-delay: 0.82s; }

.mobile-menu-panel.is-active .mobile-menu__social a {
    opacity  : 1;
    transform: translateY(0);
}

.mobile-menu__social a:hover {
    background  : rgba(239, 227, 201, 0.15);
    border-color: rgba(239, 227, 201, 0.5);
    color       : var(--menu-creme);
    transform   : translateY(-2px);
}