/* ==========================================================================
   Logo System — Estilos para os 3 modos de logo (SaaS-ready)
   Incluir em TODAS as páginas públicas: <link rel="stylesheet" href="css/logo.css">
   ========================================================================== */

/* ── Base ─────────────────────────────────────────────────────────────── */

[data-site-logo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[data-site-logo] .logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODO DUAL — Duas logos (clara e escura)
   A visibilidade é controlada pelo atributo data-active-context.
   ══════════════════════════════════════════════════════════════════════ */

.logo--dual .logo-variant-light,
.logo--dual .logo-variant-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

.logo--dual {
    position: relative;
}

/* Fundo escuro: mostra logo clara (light), esconde escura (dark) */
.logo--dual[data-active-context="dark"] .logo-variant-light {
    opacity: 1;
    visibility: visible;
}
.logo--dual[data-active-context="dark"] .logo-variant-dark {
    opacity: 0;
    visibility: hidden;
}

/* Fundo claro: mostra logo escura (dark), esconde clara (light) */
.logo--dual[data-active-context="light"] .logo-variant-dark {
    opacity: 1;
    visibility: visible;
}
.logo--dual[data-active-context="light"] .logo-variant-light {
    opacity: 0;
    visibility: hidden;
}


/* ══════════════════════════════════════════════════════════════════════════
   MODO SINGLE — Uma logo, adaptação por CSS filter
   ══════════════════════════════════════════════════════════════════════ */

.logo--single .logo-variant-single {
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Fundo escuro + arquivo com transparência: inverte para ficar claro */
.logo--single[data-active-context="dark"]:not(.logo--opaque-file) .logo-variant-single {
    filter: brightness(0) invert(1);
}

/* Fundo claro: mantém original */
.logo--single[data-active-context="light"] .logo-variant-single {
    filter: none;
}

/* Fundo escuro + arquivo OPACO (JPG): adiciona backdrop branco sutil */
.logo--single.logo--opaque-file[data-active-context="dark"] {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 4px 6px;
}


/* ══════════════════════════════════════════════════════════════════════════
   MODO INITIALS — Texto estilizado com as iniciais do casal
   ══════════════════════════════════════════════════════════════════════ */

.logo-initials {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo--initials {
    position: relative;
}

.logo-initials__letter {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.logo-initials__amp {
    font-family: var(--font-script, 'Great Vibes', cursive);
    font-size: 1.1rem;
    margin: 0 2px;
    color: var(--color-primary, #8A9A7B);
}

/* Variante clara (para fundo escuro) */
.logo-initials--light .logo-initials__letter {
    color: var(--color-white, #FFFFFF);
}
.logo-initials--light .logo-initials__amp {
    color: var(--color-gold-light, #B5C4A5);
}

/* Variante escura (para fundo claro) */
.logo-initials--dark .logo-initials__letter {
    color: var(--color-dark, #2C2C2C);
}
.logo-initials--dark .logo-initials__amp {
    color: var(--color-primary, #8A9A7B);
}

/* Visibilidade por contexto */
.logo--initials[data-active-context="dark"] .logo-initials--light {
    opacity: 1;
    visibility: visible;
}
.logo--initials[data-active-context="dark"] .logo-initials--dark {
    opacity: 0;
    visibility: hidden;
}

.logo--initials[data-active-context="light"] .logo-initials--dark {
    opacity: 1;
    visibility: visible;
}
.logo--initials[data-active-context="light"] .logo-initials--light {
    opacity: 0;
    visibility: hidden;
}


/* ══════════════════════════════════════════════════════════════════════════
   ADAPTAÇÕES POR CONTEXTO — Navbar, Footer, Floating
   ══════════════════════════════════════════════════════════════════════ */

/* Navbar logo: tamanho padrão */
.navbar [data-site-logo],
.navbar-light [data-site-logo],
.top-nav [data-site-logo] {
    width: 42px;
    height: 42px;
}

/* Floating logo */
.floating-logo[data-site-logo] {
    width: 36px;
    height: 36px;
}

/* Footer logo: um pouco maior */
.footer [data-site-logo],
.footer-dark [data-site-logo] {
    width: 80px;
    height: 80px;
}

/* Footer initials: texto maior */
.footer [data-site-logo] .logo-initials__letter,
.footer-dark [data-site-logo] .logo-initials__letter {
    font-size: 2rem;
}

.footer [data-site-logo] .logo-initials__amp,
.footer-dark [data-site-logo] .logo-initials__amp {
    font-size: 1.5rem;
}