/* =========================================
   ESTRUTURA PRINCIPAL (Slide-in Panel)
   ========================================= */

/* O ID #mobile-menu geralmente está no elemento pai que injeta este HTML
   Se este CSS for global, certifique-se que o container pai tenha este ID */
#mobile-menu { 
    position: fixed; 
    top: 0; 
    right: 0; 
    height: 100vh; 
    height: 100dvh; /* Altura dinâmica para mobile */
    z-index: 3000; 
    background: #fcfcfc; 
    width: 85%; /* Um pouco mais largo para mobile */
    max-width: 320px; 
    transform: translateX(100%); 
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

#mobile-menu.open { 
    transform: translateX(0); 
}

/* Container Interno */
#mobile-menu-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 2.5rem; /* p-10 equivalent */
    background-color: #fcfcfc;
}

/* =========================================
   CABEÇALHO DO MENU
   ========================================= */
.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #66422b;
    margin-bottom: 3rem; /* mb-12 */
}

.menu-title {
    color: #66422b;
    font-size: 1.5rem;
    font-weight: 900; /* font-black */
    text-transform: uppercase;
    letter-spacing: 0.1em; /* tracking-widest */
}

.menu-close-btn {
    background: none;
    border: none;
    color: #66422b;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 0;
}

.menu-close-btn:hover {
    transform: scale(1.1);
}

/* =========================================
   NAVEGAÇÃO (Links)
   ========================================= */
.menu-nav {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* space-y-8 */
}

.menu-link {
    color: #66422b;
    font-size: 1.5rem;
    font-weight: 800; /* font-bold */
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Efeito Jump no Hover */
.menu-link:hover {
    transform: translateX(10px);
}

/* =========================================
   RODAPÉ DO MENU (Social)
   ========================================= */
.menu-footer {
    margin-top: auto; /* Empurra para o fundo */
    padding-top: 1.5rem;
    border-top: 1px solid #66422b;
}

.menu-social-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #66422b;
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.menu-social-link:hover {
    transform: translateX(10px);
}

/* Ícone com filtro para ficar marrom (#66422b) */
.menu-icon {
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    object-fit: contain;
    /* Filtro para converter preto em #66422b 
    filter: invert(24%) sepia(47%) saturate(579%) hue-rotate(339deg) brightness(96%) contrast(89%);*/
}

.menu-link.active {
    color: #064e3b; /* Verde destaque */
    /* Adiciona uma barrinha lateral e um recuo para destacar */
    border-left: 4px solid #064e3b;
    padding-left: 1rem; 
}

/* =========================================
   OVERLAY DE FUNDO
   ========================================= */
#menu-overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(0, 0, 0, 0.4); 
    z-index: 2500; 
    display: none; 
    backdrop-filter: blur(2px);
}

#menu-overlay.active { 
    display: block; 
}