/* ==========================================================================
   Overrides do nav-advanced (cerimônia, história, galeria, dresscode,
   indicações).

   Os estilos originais estão duplicados em 5 CSSs (cerimonia.css,
   historia.css, galeria.css, dresscode.css, indicacoes.css). Em vez de
   editar os 5, este arquivo é carregado pelo layout DEPOIS dos CSSs
   específicos de página, então vence a cascata pelos breakpoints.

   Refactor desses 5 CSSs duplicados pra um único nav-advanced.css fica
   pra uma rodada futura.
   ========================================================================== */

/* ────────────────────────────────────────────────────────────────────────
   B19 — Hambúrguer antecipado pra evitar quebra dos 8 links em larguras
   intermediárias (769-1144px). nav-home já usa este mesmo breakpoint.

   B25 — Mesmo problema também na nav-simple (página /presentes, /confirmar),
   que usa as classes .navbar-light .nav-links + .menu-toggle. Os CSSs
   específicos (presentes.css, confirmar.css) tinham breakpoint 768.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1144px) {
    /* nav-advanced (cerimônia, história, galeria, dresscode, indicações) */
    .top-nav-links { display: none; }
    .top-nav-toggle { display: flex; }

    /* nav-simple (presentes, confirmar) */
    .navbar-light .nav-links { display: none; }
    .navbar-light .menu-toggle { display: flex; }
}

/* ────────────────────────────────────────────────────────────────────────
   B20 — Em larguras médias/estreitas a floating-logo (canto esquerdo,
   position:fixed) fica "perdida" sobre o conteúdo das seções — cobre
   fotos da galeria, títulos, etc, sem agregar referência clara. Em
   desktop wide sobra espaço e fica elegante. Esconde no mesmo
   breakpoint do hambúrguer; o sidebar-trigger sozinho continua dando
   referência de navegação.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1144px) {
    .floating-logo {
        display: none !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────
   B21 — Em mobile o sidebar-panel cobre 100% da tela. O sidebar-trigger
   continua sendo o "X" de fechar, mas a regra original .sidebar-trigger
   .active { background: transparent } deixa o botão visualmente
   invisível sobre o fundo dark do sidebar — usuário não percebe que
   pode clicar nele.

   Restaura um fundo sutil quando active e adiciona rótulo "FECHAR"
   abaixo do X (mesmo padrão da U1 da home).
   ──────────────────────────────────────────────────────────────────────── */
.sidebar-trigger.active {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

.sidebar-trigger::after {
    content: 'FECHAR';
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    white-space: nowrap;
}

.sidebar-trigger.active::after {
    opacity: 1;
}

/* ────────────────────────────────────────────────────────────────────────
   B23 — Mobile-menu-overlay (acionado pelo top-nav-toggle) usa fundo
   cream. Mas as spans do top-nav-toggle são brancas (background:
   rgba(255,255,255,0.85)) — invisíveis sobre cream quando o menu abre.
   Resultado: o X de fechar fica praticamente imperceptível.

   - Spans escuras quando active (contraste com fundo cream).
   - Position relative pra ancorar o ::after.
   - Rótulo "FECHAR" abaixo do X quando active.
   ──────────────────────────────────────────────────────────────────────── */
.top-nav-toggle {
    position: relative;
}

.top-nav-toggle.active span {
    background: var(--color-dark) !important;
}

.top-nav-toggle::after {
    content: 'FECHAR';
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--color-dark);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.top-nav-toggle.active::after {
    opacity: 1;
}