/* =============================================================================
   Footer
   -----------------------------------------------------------------------------
   Its own file, loaded last.

   The footer layout kept reverting to an unstyled bullet list. The markup was
   always correct — footer__grid was in the HTML every time it was checked —
   but the rules lived in polish.css alongside chart sizing and table fixes,
   and each rewrite of that file lost them. A component whose styling keeps
   disappearing needs to stop sharing a file with unrelated things.

   Everything here is self-contained: it does not depend on a base list reset
   or on anything polish.css defines, so it renders correctly even if those
   change again.
   ========================================================================== */

.footer {
    margin-top: var(--sp-8, 4rem);
    padding-block: var(--sp-7, 3rem) var(--sp-5, 2rem);
    border-top: 1px solid var(--border, rgba(255,255,255,.09));
    background: var(--surface-1, rgba(255,255,255,.02));
}

.footer .wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--sp-4, 1.25rem); }

/* -------------------------------------------------- the four columns */

.footer__grid {
    display: grid;
    /* Identity carries prose and gets roughly twice a link column; the three
       link columns are near-equal so their headings line up across the row. */
    grid-template-columns: 2fr 1.15fr 1fr 1.15fr;
    gap: var(--sp-6, 2.5rem) var(--sp-5, 2rem);
    align-items: start;
}

@media (max-width: 1040px) {
    .footer__grid { grid-template-columns: repeat(3, 1fr); }
    .footer__brand-col { grid-column: 1 / -1; }
}

@media (max-width: 700px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__col, .footer__brand-col { min-width: 0; }

/* -------------------------------------------------- identity column */

.footer__blurb {
    font-size: var(--step--1, .9rem);
    line-height: 1.7;
    color: var(--text-muted, rgba(255,255,255,.62));
    max-width: 34ch;
    margin: var(--sp-3, 1rem) 0 0;
}

.footer__install { margin-top: var(--sp-4, 1.25rem); }

/* -------------------------------------------------- headings and links */

.footer__heading {
    font-size: var(--step--2, .78rem);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255,255,255,.62));
    margin: 0 0 var(--sp-3, 1rem);
    /* Shared baseline across all four columns, so the row reads as a row. */
    min-height: 1.2em;
}

/* Devanagari has no uppercase and tracking damages its matras. */
[lang="hi"] .footer__heading, :lang(hi) .footer__heading {
    text-transform: none;
    letter-spacing: normal;
}

.footer__list {
    list-style: none;      /* this is what the bullets were missing */
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
}

.footer__list li { margin: 0; padding: 0; }

.footer__list a {
    color: var(--text, rgba(255,255,255,.86));
    text-decoration: none;
    font-size: var(--step--1, .9rem);
    line-height: 1.5;
    /* Comfortably tappable without stretching the visual rhythm. */
    display: inline-block;
    padding-block: .15rem;
    transition: color .15s ease;
}

.footer__list a:hover,
.footer__list a:focus-visible { color: var(--accent, #FF8A3D); }

.footer__more { color: var(--accent, #FF8A3D) !important; font-weight: 600; }

/* -------------------------------------------------- note and bottom bar */

.footer__note {
    margin-top: var(--sp-7, 3rem);
    padding-top: var(--sp-4, 1.25rem);
    border-top: 1px solid var(--border, rgba(255,255,255,.09));
}

.footer__note p {
    font-size: var(--step--2, .78rem);
    line-height: 1.7;
    color: var(--text-faint, rgba(255,255,255,.45));
    max-width: 78ch;
    margin: 0;
}

.footer__bar {
    margin-top: var(--sp-4, 1.25rem);
    padding-top: var(--sp-4, 1.25rem);
    border-top: 1px solid var(--border, rgba(255,255,255,.09));
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2, .75rem) var(--sp-5, 2rem);
    justify-content: space-between;
    align-items: center;
}

.footer__bar p {
    font-size: var(--step--2, .78rem);
    line-height: 1.7;
    color: var(--text-faint, rgba(255,255,255,.45));
    margin: 0;
}

.footer__bar a { color: var(--accent, #FF8A3D); text-decoration: none; }
.footer__bar a:hover { text-decoration: underline; }

@media (max-width: 560px) { .footer__bar { justify-content: flex-start; } }