@layer dx-component-base {
/* ==========================================================================
   Component: Site Footer

   Three-column layout (brand | contact | links) + bottom copyright bar.
   Reads mode-aware semantic tokens; padding modifiers mirror Hero/Feature.

   Visual rhythm: each column aligns toward its own position — brand left,
   contact centered, links right. Headings sit above the contact and links
   blocks in the site heading font so they read as section labels rather
   than another body line.
   ========================================================================== */

.dx-footer {
    /* Footer is rendered with `class="dx-footer dx-section"` on the outer
       <footer>, so `width: 100%` + `padding-inline: var(--dx-spacing-gutter)`
       come from .dx-section — same primitive every regular section uses,
       no parallel layout-utility rules to keep in sync.
       Padding (block + inline), container width and min-height all come
       from the shared .dx-section--padding-block-* / --padding-inline-* /
       --container-* / --min-height-* modifiers via dx_render_section_classes()
       — see footer.php and inc/component-registry.php. */
    background: hsl(var(--dx-bg));
    color: hsl(var(--dx-text));
}

/* Footer's outer `.dx-container` stacks the 3-col grid above the bottom
   bar — use a context-specific selector (not the shared `.dx-container`
   utility) so adding flow gap here doesn't bleed onto every container
   site-wide. CLAUDE.md "Spacing — use gap, not margin". */
.dx-footer .dx-container {
    display: flex;
    flex-direction: column;
    gap: var(--dx-space-xl);
}

.dx-footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--dx-space-l);
    align-items: start;
}

/* Each column stacks its children (logo/site-name + tagline; heading +
   rich-text; heading + nav). One `gap` here replaces per-child
   margin-bottom on .dx-footer__site-name / __logo / __heading and the
   margin-top on the contained .dx-core__text. */
.dx-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--dx-space-s);
}

/* ── Per-column alignment ─────────────────────────────────────────────────── */

.dx-footer__col--brand   { text-align: left; }
.dx-footer__col--contact { text-align: center; }
.dx-footer__col--links   { text-align: right; }

/* Rich-text body content exception (CLAUDE.md): paragraphs inside the
   footer's columns keep `margin-bottom` for inter-paragraph rhythm
   because the broad `p` selector matches user-authored rich-text. */
.dx-footer__col p {
    margin: 0 0 var(--dx-space-xs) 0;
}

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

.dx-footer__site-name {
    font-family: var(--dx-font-heading, inherit);
    font-weight: 700;
    font-size: 1.5rem;
    color: hsl(var(--dx-heading));
}

.dx-footer__logo {
    /* Inter-element spacing comes from `.dx-footer__col`'s flex gap. */
}

/* Logo can render as inline <svg> (vector uploads — gets currentColor
   theming) or <img> (raster uploads). Same sizing rules apply to both
   so PNG/JPG/WebP logos sit at the same scale as an SVG logo. */
.dx-footer__logo svg,
.dx-footer__logo img {
    max-width: 200px;
    height: auto;
    display: block;
}

.dx-footer__logo svg {
    color: hsl(var(--dx-heading));
}

.dx-footer__tagline {
    color: hsl(var(--dx-text));
    opacity: 0.85;
    max-width: 28ch;
    line-height: 1.5;
}

/* Rich-text block — used in both the brand and contact columns. The
   footer is template-only (no front-end editor), so this is the sole
   authoring surface for the long-form copy in those columns. */
/* Rich-text columns reuse the canonical `.dx-core__text` class so the
   typography, list spacing, and link colour rules from core.css apply
   everywhere rich text appears (Rich Text component, Core block, footer
   columns). Do NOT redefine link colour or list spacing here — change
   it in core.css and every instance updates together. The rules below
   are *structural only*: layout-context fixes that the core's
   typography defaults don't know about (footer column = no max-width,
   tighter spacing). */
.dx-footer__col .dx-core__text {
    /* Core sets max-width: 640px for prose readability inside a wide
       container; footer columns are already narrow grid cells, so let
       the text fill the column. */
    max-width: none;
    /* Core sets margin-bottom: 2rem to space text from the next core
       element; in a footer column the text usually IS the column, so
       the trailing margin would create dead space at the column floor.
       Inter-element rhythm above the text (heading → text) comes from
       `.dx-footer__col`'s flex gap. */
    margin-bottom: 0;
}

/* ── Section headings (Contact, Links) ────────────────────────────────────── */
/* Use the site heading font + colour so they read as a single design system
   with the rest of the page, not as a footer-specific label style.        */

.dx-footer__heading {
    font-family: var(--dx-font-heading, inherit);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    color: hsl(var(--dx-heading));
    margin: 0;
}

/* ── Contact column ───────────────────────────────────────────────────────── */

.dx-footer__col--contact a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dx-effect-transition-duration) ease;
}

.dx-footer__col--contact a:hover {
    color: hsl(var(--dx-color-primary));
}

/* ── Links column ─────────────────────────────────────────────────────────── */

/* The menu itself is styled by `.dx-nav-menu` + `.dx-nav-menu--vertical`
   in `components/nav-menu.css` — vertical stack, hover underline, caret
   indicator, and accordion sub-menus. Only the column-level alignment
   nudge lives here: per-column right alignment is set on
   `.dx-footer__col--links` above; we just need the nav list itself to
   right-align its items so they hug the column edge. */
.dx-footer__col--links .dx-nav-menu__list {
    align-items: flex-end;
}

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

.dx-footer__bottom {
    /* Spacing above comes from `.dx-footer .dx-container`'s flex gap. */
    padding-top: var(--dx-space-m);
    border-top: 1px solid hsl(var(--dx-border));
    text-align: center;
}

.dx-footer__copyright {
    margin: 0;
    opacity: 0.7;
    font-size: 0.875rem;
}

/* Padding modifiers come from the shared .dx-section--padding-* utilities
   in dx-defaults.css — footer.php emits the matching class onto the
   <footer> element. No parallel .dx-footer--padding-* rules here:
   editing the section padding scale once flows through to footer too. */

/* ── Mobile — single column, all left-aligned for natural reading flow ──── */

@media (max-width: 768px) {
    .dx-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--dx-space-xl);
    }
    .dx-footer__col--brand,
    .dx-footer__col--contact,
    .dx-footer__col--links {
        text-align: left;
    }
    .dx-footer__tagline {
        max-width: none;
    }
}
}