/* ============================================================
 * user_ui — Footer chrome (Phase 7 Package F).
 * ============================================================
 *
 * Styles extracted VERBATIM from the landing-page mockup per
 * architecture rule §4 (mockup-verbatim canonical classes —
 * `footer.site`, `.foot-grid`, `.foot-tag`, `.foot-bottom`,
 * `.copyright`, `.discord-icon`).
 *
 * Section-local class additions only — never replaces or
 * shadows canonical classes that other packages also use:
 *   - `.foot-grid a[aria-disabled="true"]` section-local
 *     (dims inert placeholder links — same pattern as the
 *     header nav placeholders, see header.css)
 *
 * Canonical surface this file consumes (shipped in Package B,
 * not re-defined here):
 *   - .wrap            base.css   (max-width container)
 *   - .brand           header.css (brand lockup layout)
 *   - .brand-mark      header.css (image sizing default)
 *
 * Background images:
 *   Dark theme: ../../../img/user_ui/footer-bg-dark.webp
 *   Light theme: ../../../img/user_ui/footer-bg-light.webp
 *   Relative paths so ManifestStaticFilesStorage's CSS
 *   post-processor rewrites them to hashed URLs. The 3-level
 *   `../` climb is from this file
 *   (user_ui/static/user_ui/css/footer/footer.css) up to the
 *   /static/ root, then down into img/user_ui/.
 *
 *   WebP since the asset-weight pass — the ~600-800KB PNG pair
 *   this replaced is retained, unreferenced, under
 *   img/design-originals/user_ui/ (see documentation/img/USAGE.md).
 *   base.html prefetches the INACTIVE theme's variant at idle
 *   priority, so a theme flip does not start the download cold.
 *
 * Loaded by user_ui/templates/user_ui/shared/base.html as part
 * of the global cascade (after header/header.css, before
 * {% block extra_css %}). Every page has the footer, so its
 * CSS is global.
 *
 * !important chain: the mockup applies !important to many
 * foot-grid color rules to short-circuit theme.css's brand-mark
 * swap specificity. Preserved verbatim per rule §4 (mockup
 * wins); minor redundancy will be reviewed in Package NN
 * (7.40) UI polish pass.
 * ============================================================ */

/* ---- Footer surface (theme-aware background image) ---- */
footer.site {
    --foot-bg: #0E141D;
    --foot-text: #FFFFFF;
    --foot-muted: #9AA3B4;
    margin-top: 120px;
    padding: 90px 0 36px;
    position: relative;
    background:
        url("../../../img/user_ui/footer-bg-dark.9fff487865b0.webp") center top / cover no-repeat,
        var(--foot-bg);
    color: var(--foot-text);
    overflow: hidden;
    isolation: isolate;
}
html[data-theme="light"] footer.site {
    --foot-bg: #EEF1F4;
    --foot-text: #1B2230;
    --foot-muted: #5B6577;
    background:
        url("../../../img/user_ui/footer-bg-light.102116bf397e.webp") center top / cover no-repeat,
        var(--foot-bg);
    color: var(--foot-text);
}

/* ---- Light-theme color overrides on the link grid ---- */
html[data-theme="light"] .foot-grid h5 { color: #1B2230 !important; }
html[data-theme="light"] .foot-grid a  { color: #1B2230 !important; }
html[data-theme="light"] .foot-grid a:hover { color: var(--orange) !important; }
html[data-theme="light"] .foot-tag { color: #5B6577 !important; }
html[data-theme="light"] .copyright { color: #5B6577; }

/* ---- Footer brand-mark display (theme-flipped) ---- */
html[data-theme="light"] footer .brand .mark-dark  { display: none !important; }
html[data-theme="light"] footer .brand .mark-light { display: block !important; }

footer.site .wrap { position: relative; z-index: 1; }

/* ---- 4-column link grid ---- */
.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.foot-grid h5 {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: #fff !important;
}
.foot-grid a {
    display: block;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.9;
    font-weight: 400;
    color: #fff !important;
}
.foot-grid a:hover { color: var(--orange) !important; }
.foot-grid a .discord-icon {
    display: inline-block;
    vertical-align: -3px;
    width: 18px;
    height: 18px;
    margin-left: 6px;
}

/* Section-local: dim aria-disabled placeholder links so the
   "coming soon" state reads visually without losing the
   mockup-verbatim style. Same pattern as nav.primary in
   header.css. Removed when each target page ships and the
   href stops being inert. */
.foot-grid a[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Tagline under brand ---- */
.foot-tag {
    color: var(--foot-muted) !important;
    font-family: var(--font-head);
    font-size: 20px;
    line-height: 1.45;
    margin: 18px 0 0;
    font-weight: 600;
    max-width: 380px;
}

/* ---- Footer brand-mark sizing ----
   Footer brand is larger than header brand (48px vs 38px).
   Dark theme is the default so mark-dark shows by default;
   the theme-flipped override above swaps to mark-light when
   the html[data-theme="light"] selector applies. */
footer .brand img.brand-mark { height: 48px; }
footer .brand .mark-light { display: none !important; }
footer .brand .mark-dark  { display: block !important; }

/* ---- Bottom row (copyright) ---- */
.foot-bottom {
    margin-top: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.copyright {
    font-size: 13px;
    color: var(--foot-muted);
    letter-spacing: .01em;
}

/* ============================================================
 * Responsive — values mirror the mockup verbatim.
 * ============================================================ */

/* ---- iPad / tablet (≤ 1100px) ---- */
@media (max-width: 1100px) {
    .foot-grid {
        grid-template-columns: 1.3fr 1fr 1fr 1fr;
        gap: 32px;
    }
    .foot-grid h5 { font-size: 20px; }
    .foot-grid a  { font-size: 17px; }
    .foot-tag     { font-size: 17px; }
}

/* ---- Mobile / phone (≤ 760px) ---- */
@media (max-width: 760px) {
    footer.site { padding: 60px 0 28px; margin-top: 80px; }
    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .foot-grid h5 { font-size: 17px; margin-bottom: 10px; }
    .foot-grid a  { font-size: 15px; line-height: 1.8; }
    .foot-tag     { font-size: 15px; margin-top: 14px; }
    footer .brand img.brand-mark { height: 38px; }
    .foot-bottom { margin-top: 36px; }
    .copyright   { font-size: 12px; }
}

/* ---- Small / narrow phone (≤ 420px) ---- */
@media (max-width: 420px) {
    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
}