/**
 * Site Footer — assets/css/footer.css
 *
 * Dark editorial footer matching the Figma design (node 211-886).
 * Background: #1D1D1B (--eln-color-black-900).
 *
 * Token architecture:
 *   --eln-ftr-* tokens override base.css values for the dark surface.
 *   Raw values only appear once in the token block; all rules use tokens.
 *
 * Layout — 3-column grid inside .eln-container (1200px):
 *   Col 1 — Brand: logo + about tagline + contact + social icon squares
 *   Col 2 — footer_quick_links nav   (e.g. INSTITUCIONAL)
 *   Col 3 — footer_legal_links nav   (e.g. POLÍTICAS)
 *
 * Social icons: 26×26px squares, --eln-ftr-social-bg fill, white SVG stroke.
 * Nav headings: Oswald Bold 16px, border-bottom separator.
 * Nav links: Inter Regular 11px, --eln-ftr-text-link color, → prefix via CSS.
 * Bottom bar: border-top --eln-ftr-border-bottom, centered copyright.
 */

/* ── Footer-context design tokens ───────────────────────────────────────────── */

:root {
    /* Surfaces */
    --eln-ftr-bg:              var(--eln-color-black-900);   /* #1D1D1B */

    /* Text */
    --eln-ftr-text:            var(--eln-color-text-inverse);   /* #ffffff — chains to base.css primitive */
    --eln-ftr-text-link:       #b3b3b3;
    --eln-ftr-text-link-hover: var(--eln-color-text-inverse);   /* #ffffff — chains to base.css primitive */

    /* Borders */
    --eln-ftr-border:          #595959;   /* column heading separator */
    --eln-ftr-border-bottom:   #4d4d4d;  /* bottom-bar top border */

    /* Social icon squares */
    --eln-ftr-social-bg:       #595959;
    --eln-ftr-social-hover:    var(--eln-color-accent);  /* red on hover */
}

/* ── Footer shell ───────────────────────────────────────────────────────────── */

.site-footer {
    background: var(--eln-ftr-bg);
    color: var(--eln-ftr-text);
    font-family: var(--eln-font-ui);
    border-top: none;
    margin: 0;
}

/* ── Main area ──────────────────────────────────────────────────────────────── */

.site-footer__main {
    padding: var(--eln-space-8) 0 var(--eln-space-6);  /* 32px top, 24px bottom */
}

/* 3-column grid: brand (wider) | nav | nav */
.site-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--eln-space-12);   /* 48px — matches Figma column gap */
    align-items: start;
}

/* ── Brand column ───────────────────────────────────────────────────────────── */

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--eln-space-2);
}

.site-footer__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    align-self: flex-start;
    margin-bottom: var(--eln-space-1);
}

.site-footer__logo-link:hover {
    text-decoration: none;
    opacity: .80;
}

.site-footer__logo-link img {
    height: 36px;
    width: auto;
    display: block;
}

/* Text fallback when no logo image is set */
.site-footer__logo-text {
    display: inline-block;
    font-family: var(--eln-font-heading);
    font-size: var(--eln-font-size-base);
    font-weight: var(--eln-font-weight-bold);
    color: var(--eln-ftr-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Tagline — "El portal de noticias para la comunidad latina en New Jersey." */
.site-footer__about {
    font-size: var(--eln-font-size-xs);   /* 11px */
    line-height: 1.6;
    color: var(--eln-ftr-text);
    margin: 0;
}

/* ── Contact info ───────────────────────────────────────────────────────────── */

.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--eln-space-1);
}

.site-footer__contact-item {
    font-size: var(--eln-font-size-xs);
    color: var(--eln-ftr-text);
    line-height: 1.6;
    text-decoration: none;
}

a.site-footer__contact-item:hover {
    color: var(--eln-color-accent);
    text-decoration: none;
}

/* ── Social icon squares ────────────────────────────────────────────────────── */
/*
 * 26×26px squares — exact Figma spec (node 211-886).
 * Icons: inline SVGs from eln_social_icon(), stroke style, 14×14.
 * Background #595959, hover → red accent.
 *
 * Size note: nav-panel social icons are 36×36 (larger touch target inside
 * a full-height overlay panel). The 26px footer size is intentional and
 * dictated by the Figma design — both components share the same hover token.
 */

.site-footer__social-icons {
    display: flex;
    align-items: center;
    gap: var(--eln-space-3);      /* 12px — Figma gap-[12px] */
    flex-wrap: wrap;
    margin-top: var(--eln-space-4);
    list-style: none;
    padding: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}

.site-footer__social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    background: var(--eln-ftr-social-bg);
    border-radius: var(--eln-radius-sm);   /* 4px — Figma rounded-[4px] */
    color: var(--eln-ftr-text);
    text-decoration: none;
    transition: background-color var(--eln-transition), color var(--eln-transition);
}

.site-footer__social-icon:hover {
    background: var(--eln-ftr-social-hover);
    color: var(--eln-color-text-inverse);
    text-decoration: none;
}

.site-footer__social-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    flex-shrink: 0;
}

/* ── Navigation columns ─────────────────────────────────────────────────────── */

.site-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Column heading — Oswald Bold 16px with red accent separator below */
.site-footer__nav-title {
    font-family: var(--eln-font-heading);           /* Oswald */
    font-size: var(--eln-font-size-base);           /* 16px — exact Figma spec */
    font-weight: var(--eln-font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--eln-ftr-text);
    margin: 0 0 var(--eln-space-3);
    padding-bottom: var(--eln-space-3);
    border-bottom: 1px solid var(--eln-color-accent); /* brand red — matches reference design */
}

/* wp_nav_menu <ul> */
.site-footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--eln-space-3);  /* 12px — Figma gap-[12px] */
}

/* → prefix; shifts right on hover */
.site-footer__menu a {
    display: inline-flex;
    align-items: center;
    gap: var(--eln-space-1);
    font-family: var(--eln-font-ui);
    font-size: var(--eln-font-size-xs);    /* 11px — Figma 9px, nearest accessible size */
    font-weight: var(--eln-font-weight-normal);
    color: var(--eln-ftr-text-link);       /* #b3b3b3 */
    text-decoration: none;
    line-height: 1.5;
    transition: color var(--eln-transition);
}

.site-footer__menu a::before {
    content: "→";
    flex-shrink: 0;
    font-size: var(--eln-font-size-xs);
    color: var(--eln-ftr-text-link);
    transition: transform var(--eln-transition), color var(--eln-transition);
}

.site-footer__menu a:hover {
    color: var(--eln-ftr-text-link-hover);
    text-decoration: none;
}

.site-footer__menu a:hover::before {
    transform: translateX(3px);
    color: var(--eln-color-accent);
}

/* ── Bottom bar ─────────────────────────────────────────────────────────────── */

.site-footer__bottom {
    border-top: 1px solid var(--eln-ftr-border-bottom);  /* #4d4d4d */
    padding: var(--eln-space-4) 0;
}

.site-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-footer__copyright {
    font-family: var(--eln-font-ui);
    font-size: var(--eln-font-size-xs);
    color: var(--eln-ftr-text);
    margin: 0;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* Static agency credit — appended inline after the copyright text.
   Inherits font/color from .site-footer__copyright; white-space:nowrap
   keeps "|| Powered by Nitro Geek" from breaking across lines. */
.site-footer__powered {
    white-space: nowrap;
}

/* ── Mobile ─────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    .site-footer__main {
        padding: var(--eln-space-6) 0;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--eln-space-8);
    }

    .site-footer__bottom-inner {
        flex-direction: column;
        gap: var(--eln-space-2);
    }
}

/* ── Tablet ─────────────────────────────────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 1024px) {

    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--eln-space-8);
    }
}