/* =========================================================
   ALPHA STRIKE — FOOTER COMPONENT
   Version: 1.0
   Status: Locked
   ========================================================= */


/* =========================================================
   1. DEMO FOUNDATION
   ========================================================= */

.alpha-footer-demo {
    max-width: var(--alpha-container-max);
    margin: 0 auto;
    padding: var(--alpha-spacing-6);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-body);
    font-size: var(--alpha-font-size-body);
    line-height: var(--alpha-line-height-body);
}

.alpha-footer-demo__header {
    margin-bottom: var(--alpha-spacing-8);
}

.alpha-footer-demo__eyebrow {
    margin: 0 0 var(--alpha-spacing-2);

    color: var(--alpha-text-accent);

    font-size: var(--alpha-font-size-caption);
    letter-spacing: var(--alpha-letter-spacing-label);
}

.alpha-footer-demo__title {
    margin: 0 0 var(--alpha-spacing-3);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-h1);
    line-height: var(--alpha-line-height-heading);
}

.alpha-footer-demo__description {
    max-width: 720px;
    margin: 0;

    color: var(--alpha-text-secondary);
}


/* =========================================================
   2. FOOTER FOUNDATION
   ========================================================= */

.alpha-footer {
    width: 100%;
    box-sizing: border-box;

    background: var(--alpha-surface-primary);

    border-top:
        var(--alpha-border-medium)
        solid
        var(--alpha-border-default);

    color: var(--alpha-text-primary);
}


/* =========================================================
   3. FOOTER MAIN
   ========================================================= */

.alpha-footer__main {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.5fr)
        minmax(260px, 1fr)
        minmax(180px, 0.8fr);

    gap: var(--alpha-spacing-8);

    padding:
        var(--alpha-spacing-8)
        var(--alpha-spacing-6);
}


/* =========================================================
   4. BRAND
   ========================================================= */

.alpha-footer__brand-lockup {
    display: flex;
    align-items: center;

    gap: var(--alpha-spacing-4);

    margin: 0 0 var(--alpha-spacing-2);
}

/* v1.1 (2026-08-15): was Emblem Only (5.06) + a live-text
   .alpha-footer__brand-name paragraph standing in for the wordmark -
   violated logo.md §3. Replaced with the single Short Lockup (5.05)
   asset (see navbar.css for the full note). Height held at the
   previous emblem height (34px) so the footer's smaller, "quieter
   closing mention" scale relative to the navbar is unchanged. */
.alpha-footer__brand-mark {
    display: block;
    flex-shrink: 0;
    width: 160px;
    height: 34px;
}

.alpha-footer__brand-description {
    max-width: 320px;
    margin: 0;

    color: var(--alpha-text-secondary);

    /* Footer copy is supplementary, not primary reading content, so
       it isn't held to the 16px body-text accessibility floor the
       way in-page paragraphs are - sized down along with the rest
       of the footer. */
    font-size: 13px;
    line-height: var(--alpha-line-height-compact);
}


/* =========================================================
   5. NAVIGATION
   ========================================================= */

.alpha-footer__navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));

    gap: var(--alpha-spacing-6);
}

.alpha-footer__group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--alpha-spacing-2);
}


/* =========================================================
   6. FOOTER HEADINGS
   ========================================================= */

.alpha-footer__heading {
    margin: 0 0 var(--alpha-spacing-2);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-label);
    font-weight: var(--alpha-font-weight-bold);
    line-height: var(--alpha-line-height-heading);
}


/* =========================================================
   7. FOOTER LINKS
   ========================================================= */

.alpha-footer a {
    color: var(--alpha-text-secondary);

    font-size: var(--alpha-font-size-label);

    text-decoration: none;

    transition:
        color var(--alpha-motion-duration-fast)
        var(--alpha-motion-ease-standard);
}

.alpha-footer a:hover {
    color: var(--alpha-text-accent);
}

.alpha-footer a:focus-visible {
    outline:
        var(--alpha-border-medium)
        solid
        var(--alpha-interactive-focus);

    outline-offset: var(--alpha-spacing-1);

    border-radius: var(--alpha-radius-sm);
}


/* =========================================================
   8. SYSTEM STATUS
   ========================================================= */

.alpha-footer__system {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.alpha-footer__status {
    display: inline-flex;
    align-items: center;
    gap: var(--alpha-spacing-2);

    margin: 0 0 var(--alpha-spacing-2);

    color: var(--alpha-text-secondary);

    font-size: var(--alpha-font-size-label);
}

.alpha-footer__status-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--alpha-interactive-default);
}

.alpha-footer__version {
    margin: 0;

    color: var(--alpha-text-muted);

    font-family: var(--alpha-font-mono);
    font-size: var(--alpha-font-size-data);
}


/* =========================================================
   9. BOTTOM BAR
   ========================================================= */

.alpha-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--alpha-spacing-4);

    padding:
        var(--alpha-spacing-4)
        var(--alpha-spacing-6);

    border-top:
        var(--alpha-border-thin)
        solid
        var(--alpha-border-subtle);

    background: var(--alpha-surface-secondary);
}

.alpha-footer__copyright,
.alpha-footer__meta {
    margin: 0;

    color: var(--alpha-text-muted);

    font-size: var(--alpha-font-size-caption);
}

.alpha-footer__meta {
    font-family: var(--alpha-font-mono);
}


/* =========================================================
   10. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .alpha-footer a {
        transition: none;
    }
}


/* =========================================================
   11. RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

    .alpha-footer__main {
        grid-template-columns: 1fr;
        gap: var(--alpha-spacing-6);
    }

    .alpha-footer__navigation {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}


@media (max-width: 480px) {

    .alpha-footer-demo {
        padding: var(--alpha-spacing-4);
    }

    .alpha-footer__main {
        padding:
            var(--alpha-spacing-6)
            var(--alpha-spacing-4);
    }

    .alpha-footer__navigation {
        grid-template-columns: 1fr;
    }

    .alpha-footer__bottom {
        align-items: flex-start;
        flex-direction: column;

        padding:
            var(--alpha-spacing-4);
    }
}