/*
   page-hero-override.css

   Padroniza .page-hero (compacto e refinado) nas páginas internas escuras:
     - ceremony, story, gallery, dresscode, recommendations

   Páginas EXCLUÍDAS (mantêm o layout original):
     - home, gifts, rsvp

   Filosofia:
   Espelha a fórmula visual da página /presentes (que está com bom polimento)
   mas adaptada para hero escuro: tipografia, escala e espaçamento idênticos,
   apenas com cores invertidas para boa legibilidade sobre fundo dark.

   Valores baseados em public/css/presentes.css:
     - padding: 140px topo / 4xl base
     - label: text-sm, letterspacing 0.3em, dourado claro (em vez de cinza)
     - título: clamp(2.5rem, 7vw, 4rem), letterspacing 0.15em, branco quente
     - linha: 80px dourada
     - versículo: cormorant garamond itálico (estilo refinado)
*/

/* ─── Container do hero (escuro, padrão presentes) ─── */
body.hero-compact .page-hero {
    min-height: 0 !important;
    padding: 140px 48px var(--space-4xl) !important;
    text-align: center !important;
    background-color: var(--color-dark) !important;
}

/* ─── Label superior ─── */
body.hero-compact .page-hero-label {
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    font-weight: 300 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    color: var(--color-gold-light) !important;
    display: block !important;
    margin-bottom: var(--space-lg) !important;
}

/* ─── Título principal ─── */
body.hero-compact .page-hero-title {
    font-family: var(--font-display) !important;
    font-size: clamp(2.5rem, 7vw, 4rem) !important;
    font-weight: 300 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--color-cream) !important;
    margin: 0 0 var(--space-lg) 0 !important;
    line-height: 1.1 !important;
}

/* ─── Linha decorativa dourada ─── */
body.hero-compact .page-hero-line {
    width: 80px !important;
    height: 1px !important;
    background-color: var(--color-gold) !important;
    margin: 0 auto var(--space-lg) !important;
    border: none !important;
}

/* ─── Versículo (abaixo da linha — o "ancorador" do título) ─── */
body.hero-compact .page-hero-verse {
    font-family: var(--font-display) !important;
    font-style: italic !important;
    font-size: var(--text-lg) !important;
    font-weight: 300 !important;
    color: var(--color-cream) !important;
    opacity: 0.85 !important;
    max-width: 540px !important;
    margin: 0 auto var(--space-sm) !important;
    line-height: 1.5 !important;
}

/* ─── Referência do versículo (autor/citação) ─── */
body.hero-compact .page-hero-ref {
    font-family: var(--font-body) !important;
    font-size: var(--text-xs) !important;
    font-weight: 300 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--color-gold-light) !important;
    opacity: 0.75 !important;
    display: block !important;
    margin-top: var(--space-sm) !important;
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
    body.hero-compact .page-hero {
        padding: 110px 24px var(--space-3xl) !important;
    }
    body.hero-compact .page-hero-verse {
        font-size: var(--text-base) !important;
        max-width: 90% !important;
    }
}

/* ==========================================================================
   TOP-NAV SCROLLED — opção B (29/04/2026)
   Quando o usuário começa a rolar mas o hero ainda está visível, o nav
   ganha fundo escuro + blur para não ser sobreposto visualmente pelos
   títulos das seções de baixo (que passam por trás do nav fixed).
   Quando o hero sai da tela, a classe .hidden assume e a sidebar/floating
   logo aparecem (comportamento original preservado).

   Aplica-se apenas ao nav-advanced (.top-nav). O nav-simple do dresscode
   não casa com este seletor.
   ========================================================================== */

/* Estende a transition já existente em .top-nav (opacity + transform)
   para incluir background, blur, sombra e padding. */
body.hero-compact .top-nav {
    transition: background-color 0.3s ease,
                backdrop-filter 0.3s ease,
                box-shadow 0.3s ease,
                padding 0.3s ease,
                opacity 0.5s ease,
                transform 0.5s ease !important;
}

body.hero-compact .top-nav.scrolled {
    background-color: rgba(44, 44, 44, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18) !important;
}