/**
 * Logo Styles
 * Estilos para el logotipo en header y footer
 */

/* ==========================================================================
   Logo en Header
   ========================================================================== */
.site-logo-link {
    display: inline-block;
    transition: var(--transition);
}

.site-logo-link:hover {
    opacity: 0.8;
}

.site-logo-svg {
    display: block;
    height: auto;
    max-height: 60px;
    max-width: 200px;
}

/* Logo de texto como fallback */
.site-logo-text {
    font-family: var(--font-primary);
    font-size: 2rem;
    color: var(--dark);
    font-weight: 400;
    letter-spacing: 1px;
}

/* Logo personalizado de WordPress */
.custom-logo-link {
    display: inline-block;
    transition: var(--transition);
}

.custom-logo-link:hover {
    opacity: 0.8;
}

.custom-logo {
    display: block;
    height: auto;
    max-height: 60px;
    width: auto;
}

/* ==========================================================================
   Logo en Footer
   ========================================================================== */
.footer-logo {
    display: block;
    height: auto;
    max-height: 54px;
    width: auto;
    max-width: 180px;
    margin-bottom: var(--spacing-sm);
}

.footer-widget--branding {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-description {
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* ==========================================================================
   Header Scrolled State
   ========================================================================== */
.site-header.is-scrolled .site-logo-svg {
    max-height: 50px;
}

.site-header.is-scrolled .custom-logo {
    max-height: 50px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .site-logo-svg {
        max-height: 50px;
        max-width: 160px;
    }

    .site-logo-text {
        font-size: 1.5rem;
    }

    .footer-logo {
        max-height: 45px;
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .site-logo-svg {
        max-height: 40px;
        max-width: 140px;
    }

    .footer-logo {
        max-height: 40px;
        max-width: 130px;
    }
}