/* ==========================================================================
   COMPONENT: footer
   --------------------------------------------------------------------------
   Site-wide footer. Dark surface. Brand + nav columns + social + languages
   + bottom legal line.

   Markup contract: see _EFooter.cshtml partial.
   ========================================================================== */

.e-footer {
    position: relative;
    z-index: var(--e-z-base);
    background: var(--e-surface-dark);
    color: var(--e-text-on-dark-muted);
    padding: var(--e-space-md) 0;
}

.e-footer a {
    color: var(--e-text-on-dark-muted);
    text-decoration: none;
    transition: color var(--e-transition-fast);
}

.e-footer a:hover {
    color: var(--e-text-on-dark);
}


/* MAIN STACK */

.e-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--e-space-md);
}


/* TOP ROW — brand + social */

.e-footer__top {
    display: flex;
    flex-direction: column;
    gap: var(--e-space-md);
}


/* BRAND BLOCK */

.e-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--e-space-xs);
}

.e-footer__brand-logo img {
    height: 24px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.e-footer__tagline {
    line-height: var(--e-leading-relaxed);
}


/* NAV ROW — column groups */

.e-footer__nav-row {
    display: flex;
    flex-direction: column;
    gap: var(--e-space-md);
}

.e-footer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--e-space-xs);
    width: 100%;
}

.e-footer__nav-title {
    color: var(--e-text-on-dark);
    font-weight: var(--e-font-weight-bold);
    margin-bottom: var(--e-space-xs);
}

.e-footer__nav a {
    display: inline-block;
}


/* SOCIAL */

.e-footer__social {
    display: flex;
    flex-direction: column;
    gap: var(--e-space-xs);
}

.e-footer__social-title {
    color: var(--e-text-on-dark);
    font-weight: var(--e-font-weight-bold);
}

.e-footer__social-links {
    display: flex;
    gap: var(--e-space-xs);
}

.e-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--e-border-on-dark);
    transition: background var(--e-transition-fast), transform var(--e-transition-fast);
}

.e-footer__social-link:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.e-footer__social-link svg {
    width: 18px;
    height: 18px;
    fill: var(--e-text-on-dark-muted);
    transition: fill var(--e-transition-fast);
}

.e-footer__social-link:hover svg {
    fill: var(--e-text-on-dark);
}


/* LANGUAGES ROW */

.e-footer__languages {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: var(--e-space-md);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--e-space-xs);
    color: var(--e-text-on-dark-faint);
    font-size: var(--e-font-size-sm);
}

.e-footer__languages a {
    color: var(--e-text-on-dark-faint);
}

.e-footer__languages a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.e-footer__language-separator {
    color: var(--e-text-on-dark-ghost);
}


/* BOTTOM LEGAL LINE */

.e-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: var(--e-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--e-space-xs);
    align-items: center;
    text-align: center;
    color: var(--e-text-on-dark-faint);
}


/* CONTACT EMAIL */

.e-footer__contact-email {
    display: inline-flex;
    align-items: center;
    gap: var(--e-space-xs);
}

.e-footer__contact-email svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* RESPONSIVE */

@media (min-width: 768px) {

    .e-footer__top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .e-footer__brand {
        flex-direction: row;
        gap: var(--e-space-sm);
    }

    .e-footer__nav-row {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--e-space-md);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding-top: var(--e-space-md);
    }

    .e-footer__tagline {
        white-space: nowrap;
    }

    .e-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }

}