/*
V7-HEADER
Title:    Buktika – Footer Styles
File:     footer.css
Path:     /assets/css/partials/footer.css
Version:  v4.9.0
Issued:   2026-06-30
Author:   Buktika Command Team
Owner:    Buktika – Binka
Purpose:  Dark Earth footer redesign. Amber crown line, Living Tower dark base
          in dark mode, amber column headers, two-brand social strip in the
          base bar. Mobile: stacked <details>/<summary> accordions per
          DOC-03 §8.12. Compliant with Colour Map v3.0.0 / Design System v4.0.0.

Tokens used (all from global.css :root or themes.css [data-theme]):
  --sdx-color-mama-amber          Universal amber — crown, col headers, hover
  --sdx-color-mama-cyan           MamaDEX cyan — MamaDEX icon hover
  --sdx-color-livingtower-dark-base  Dark mode footer background
  --sdx-color-livingtower-dark-surface  Dark mode column rule surface
  --fg, --muted, --border, --card     Theme alias layer (themes.css)
  --social-bg, --social-bg-h, --social-border, --social-bdr-h   Icon surfaces
  --headline-font, --text-font, --small, --body                  Typography

ISO Reference: ISO/IEC 15897, ISO 27001
Source Naming Standard: Buktika v7.1 (ISO Aligned)
License:  © Buktika, 2026. All rights reserved.

ChangeLog:
  v4.9.0 (2026-06-30): Resources Specifications and Standards are now
             separate hover/focus/touch flyout menus. Destination links stay
             Tippy-enabled; disclosure triggers reserve hover for the flyout.
  v4.8.0 (2026-06-30): Added nested Resources taxonomy for Specifications
             and Standards, each with ISO and BKT child links.
  v4.7.0 (2026-03-26): BRAND HOME LINK.
    ADDED    .footer-brand-home-link — wraps brand identity (<img> or <span>)
             in an <a> element when navigation.json brand.homeUrl is set.
             Inherits label colour, opacity 0.75 default, 1.0 on hover.
             Focus-visible ring uses var(--green). No underline.
    v4.6.0 (2026-03-19): BASE BAR RESTRUCTURE + ICON SIZE + SOLID RULES.
    CHANGED  .footer-col-desktop-heading border-bottom: dashed → solid.
    CHANGED  .footer-brand-icon-link: 1.875rem → 2.4375rem (30% increase).
    CHANGED  .footer-brand-icon-link svg: 16px → 21px (30% increase).
    CHANGED  Base bar layout: social brands now in left zone only.
             Copyright moved to right zone, below "Built in South Africa".
             Both right-zone lines left-aligned inside the column.
             New .footer-origin-copy class carries the copyright line.
             .footer-bottom-copy set display:none (HTML preserved for
             potential reuse; id="y" now lives in .footer-origin-copy).
    ADDED    .footer-origin-copy: copyright text style in right zone.
  v4.5.0 (2026-03-19): HALATION + LAYOUT FIXES.
    CHANGED  .footer-divider: 3px solid amber → 2px linear-gradient fading
             to transparent at edges. Prevents the hot painted-stripe effect.
             rgba(245,176,20,0.5) produces vacuum-tube glow rather than
             a hard band. Permanent exception: no token at this opacity.
    CHANGED  .footer-col-desktop-heading border-bottom: opacity 0.22 → 0.40,
             solid → dashed. Visible "blueprint" feel without being heavy.
    CHANGED  .footer-tagline: font-weight 600 → 500, line-height 1.4 → 1.6.
             Halation fix: 600 weight fills counter spaces on dark surfaces.
             Increased line-height stops lines crushing each other visually.
    CHANGED  .footer-links a: font-weight 400 added, letter-spacing 0.03em.
             Colour: warm-sand → light-text (#f0ebe3). Links were secondary
             in contrast weight — on a dark surface they are primary content.
    CHANGED  .copy, .footer-origin-label: font-weight 400, letter-spacing
             0.03em added. Dark surfaces require breathing room in body text.
    CHANGED  .footer-bottom: 1fr/auto/1fr → 1.5fr/1fr two-zone grid.
             Three-zone grid created a dead hole in centre-right. Social
             brands now live in the left zone under copyright, aligned with
             the Buktika logo column above. Origin text is right zone.
    ADDED    .footer-bottom-left flex column wrapper for copyright + social.
  v4.4.0 (2026-03-19): BRAND LABEL READABILITY.
    CHANGED  .footer-brand-label font-size: 0.8125rem → 0.9375rem (15px).
             13px uppercase on a dark surface is below comfortable reading
             threshold — letters blur together.
    CHANGED  letter-spacing: 0.02em → 0.12em. Wide tracking is mandatory
             for uppercase legibility — tight-tracked uppercase on dark
             backgrounds is the canonical readability failure pattern.
    CHANGED  font-weight: 700 → 600. Lighter weight opens up the
             letterforms at small sizes, reducing fill-blur on dark surfaces.
  v4.3.0 (2026-03-19): LEFT-ALIGN + LABEL TYPOGRAPHY FIX.
    CHANGED  .footer-social-brands, .footer-brand-row, .footer-brand-identity:
             justify-content: center → flex-start. Social brands block is
             now left-aligned in all viewports to match the three-zone base
             bar grid behaviour.
    CHANGED  .footer-brand-label: 0.6875rem → 0.8125rem (var(--small)).
             colour: warm-sand → light-text (#f0ebe3). The uppercase label
             at 11px warm-sand was below readable contrast threshold at this
             size. Light text at 13px is legible without straining.
    FIXED    Mobile: .footer-brand-identity min-width corrected for
             left-start alignment.
  v4.2.0 (2026-03-19): FONT SIZE + COLOUR FIXES.
    FIXED    footer .muted override: global .muted class resolves to
             --sdx-color-slate (#374151 near-black) on light-theme pages.
             On the always-dark footer surface this produced near-invisible
             description text. Explicit footer .muted and footer .small
             overrides now enforce Living Tower tokens inside the footer
             regardless of page theme.
    FIXED    footer .small override: description paragraph was rendering
             at var(--small) = 0.8125rem (13px). Overridden to var(--body)
             = 1rem inside the footer context.
    FIXED    Nav links: 0.875rem → 0.9375rem (15px).
    FIXED    .copy, .footer-origin-label: var(--small) → var(--body).
             opacity: 0.7 removed — double-muting warm sand (#c4b89a)
             drops contrast below 4.5:1. Full colour value used directly.
    FIXED    .footer-brand-label, .footer-brand-icon-link: opacity: 0.65
             removed for same reason. Warm sand at full opacity is
             already appropriately muted at 9.2:1 on dark-base.
  v4.1.0 (2026-03-19): FOOTER IS ALWAYS DARK — theme-independent.
    CHANGED  footer background: var(--footer-tint) → var(--sdx-color-livingtower-dark-base).
             The footer is bedrock. It does not follow the page theme.
             [data-theme="light"] and [data-theme="dark"] pages both get the
             same dark earth footer.
    CHANGED  All internal colour references migrated from theme aliases
             (var(--fg), var(--muted), var(--border)) to Living Tower dark-mode
             text tokens which are confirmed WCAG-compliant on this surface:
               --sdx-color-livingtower-light-text  (#f0ebe3, 14.6:1 on dark-base)
               --sdx-color-livingtower-warm-sand   (#c4b89a, 9.2:1 on dark-base)
             Amber (--sdx-color-mama-amber) used for borders and dividers.
    REMOVED  [data-theme="dark"] footer override — no longer needed.
             The footer is always the same surface regardless of theme.
    REMOVED  [data-theme="dark"] .footer-brand-logo override — filter: brightness(1.1)
             applied unconditionally as the dark surface is always present.
  v4.0.0 (2026-03-19): DARK EARTH REDESIGN. Amber crown. Three-zone base bar.
    CHANGED  .footer-divider: coral/purple gradient → 3px solid
             var(--sdx-color-mama-amber). Amber crown is the universal
             action/accent signal on dark surfaces (DOC-01 §4 universal
             amber rule). Consistent with nav pip, tagline, CTA band.
    ADDED    [data-theme="dark"] footer: background overridden to
             var(--sdx-color-livingtower-dark-base) — near-black warm earth.
             The Living Tower dark base is the universal dark surface for the
             site-wide footer per DOC-01 §3.3 dark fallback architecture.
    CHANGED  .footer-col-desktop-heading: colour changed from var(--fg)
             to var(--sdx-color-mama-amber). Amber column labels read clearly
             on both the light footer tint (4.5:1 passes large text) and the
             dark earth base (>7:1). Border-bottom uses amber wash consistent
             with DOC-03 §16.4 dark mode callout border pattern.
    CHANGED  .footer-bottom: redesigned to three-zone grid layout.
             Added .footer-bottom-copy (left), [.footer-social-brands] (centre),
             .footer-bottom-origin (right). Removed justify-content: center.
    CHANGED  .footer-social-brands: moved from above .foot to inside
             .footer-bottom centre zone. Width no longer constrained to 48rem.
             Compact two-row layout.
    CHANGED  .footer-brand-icon-link: boxes (background, border) removed at
             rest state. Raw icon links — colour only. Boxes were visually
             heavy and inconsistent with the stripped dark surface. DOC-03 §8
             HARD RULE: non-interactive elements must not carry box-shadow;
             social icons carry none. Hover shows background wash only.
    CHANGED  Buktika icon hover: var(--sdx-color-mama-amber).
    CHANGED  MamaDEX icon hover: var(--sdx-color-mama-cyan) — pillar token.
    ADDED    .footer-bottom-origin: right zone, "Built in South Africa".
    ADDED    Mobile: three-zone base bar stacks to column. All zones centred.
  v3.1.0 (2026-03-19): Social brands CSS block. Dark mode social brands.
  v3.0.0 (2026-03-07): Mobile accordions + HARD RULE compliance (DOC-03 §8.12).
  v2.2.0 (2026-02-27): Unit standard compliance. px → rem throughout.
  v2.1.1 (2026-02-24): Path correction.
  v2.1.0 (2026-02-23): Colour Map v2.7.0 pass.
  v2.0.1 (2025-12-11): Expanded multi-column footer.
*/

/* ======================================================================================================
   FOOTER SHELL — Always dark. Theme-independent.
   The footer is bedrock. The page theme (light/dark) does not affect it.
   Background: --sdx-color-livingtower-dark-base always (#0c0a07 warm near-black).
   Text: Living Tower dark-mode text tokens for WCAG compliance on this surface.
     --sdx-color-livingtower-light-text  = #f0ebe3 (14.6:1 on dark-base)
     --sdx-color-livingtower-warm-sand   = #c4b89a  (9.2:1 on dark-base)
   These ratios are confirmed in global.css :root comments.
   No [data-theme] branching needed — the surface is constant.
   ====================================================================================================== */

footer {
  background: var(--sdx-color-livingtower-dark-base);
  color: var(--sdx-color-livingtower-warm-sand);
  position: relative;
  padding: 3rem 0 1.25rem;
}

#site-footer > footer {
  border-top: 0;
  padding: 3rem 0 1.25rem;
}

/* ======================================================================================================
   AMBER CROWN
   v4.0.0: replaces coral/purple gradient. 3px solid amber line.
   DOC-01 §4: --sdx-color-mama-amber is the universal accent on dark/photo surfaces.
   ====================================================================================================== */

.footer-divider {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(245, 176, 20, 0.5) 15%,
    rgba(245, 176, 20, 0.5) 85%,
    transparent 100%
  );
}

/* ======================================================================================================
   MAIN CONTENT GRID
   ====================================================================================================== */

.foot {
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 0 2rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(280px, 1.5fr) repeat(auto-fit, minmax(160px, 1fr));
  align-items: start;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Column headings ─────────────────────────────────────────────────────────
   Desktop heading (.footer-col-desktop-heading): amber text + amber-wash rule.
   Amber on footer surfaces reads clearly in both light (footer-tint bg) and
   dark (livingtower-dark-base bg). Consistent with crown and nav pip.
   Mobile heading (<summary>): handled in accordion section below.
   ─────────────────────────────────────────────────────────────────────────── */

.footer-col-desktop-heading {
  display: block;
  margin: 0 0 0.625rem;
  padding-bottom: 0.5rem;
  font-family: var(--headline-font, system-ui);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--sdx-color-mama-amber);
  border-bottom: 1px solid rgba(245, 176, 20, 0.40);
}

/* Standard h4 inside brand col (logo row label) */
.footer-col h4 {
  margin: 0 0 0.5rem;
  color: var(--sdx-color-livingtower-light-text);
  font-family: var(--headline-font, system-ui);
  font-weight: 700;
  font-size: 1rem;
}

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

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.25rem;
  text-decoration: none;        /* <a> element — suppress underline */
  color: inherit;               /* inherit footer text colour */
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.footer-brand:hover {
  opacity: 1;
}

.footer-brand:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 0.375rem;
}

.footer-logo {
  display: block;
  border-radius: 0.5rem;
  filter: brightness(1.1);
}

.footer-tagline {
  margin: 0 0 0.5rem;
  color: var(--sdx-color-livingtower-light-text);
  font-weight: 500;
  line-height: 1.6;
}

/* ── Nav link lists ────────────────────────────────────────────────────────── */

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links li {
  margin: 0;
}

.footer-resource-flyout {
  position: relative;
  width: max-content;
  max-width: 100%;
}

.footer-resource-flyout-trigger {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--sdx-color-livingtower-light-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-align: left;
  transition: color 0.2s ease;
}

.footer-resource-flyout-trigger:hover,
.footer-resource-flyout-trigger:focus-visible,
.footer-resource-flyout.is-open > .footer-resource-flyout-trigger {
  color: var(--sdx-color-mama-amber);
  text-decoration: underline;
}

.footer-resource-flyout-trigger:focus-visible {
  outline: 2px solid var(--sdx-color-mama-amber);
  outline-offset: 4px;
  border-radius: 0.125rem;
}

.footer-resource-flyout-chevron {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-0.1rem);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.footer-resource-flyout.is-open .footer-resource-flyout-chevron {
  transform: rotate(225deg) translate(-0.05rem, -0.05rem);
}

.footer-resource-flyout-menu {
  position: absolute;
  z-index: 30;
  top: -0.625rem;
  left: calc(100% + 0.25rem);
  min-width: 8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0.625rem 0.75rem;
  list-style: none;
  border: 1px solid rgba(245, 176, 20, 0.35);
  border-radius: 0.375rem;
  background: var(--sdx-color-livingtower-dark-surface, #18130e);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.25rem);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0s linear 0.15s;
}

.footer-resource-flyout::after {
  content: "";
  position: absolute;
  top: -0.625rem;
  left: 100%;
  width: 0.25rem;
  height: calc(100% + 1.25rem);
}

.footer-resource-flyout.is-open > .footer-resource-flyout-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.footer-resource-flyout-menu a {
  display: block;
  white-space: nowrap;
  padding: 0.2rem 0;
}

.footer-links a {
  color: var(--sdx-color-livingtower-light-text);
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  display: inline-block;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--sdx-color-mama-amber);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .footer-resource-flyout {
    width: 100%;
  }

  .footer-resource-flyout-menu {
    position: static;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    padding: 0 0 0 1rem;
    border: 0;
    box-shadow: none;
    background: transparent;
    transform: none;
  }

  .footer-resource-flyout::after {
    display: none;
  }

  .footer-resource-flyout.is-open > .footer-resource-flyout-menu {
    max-height: 8rem;
    margin-top: 0.375rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}

/* ======================================================================================================
   BASE BAR — two-zone layout
   Left:  .footer-bottom-left — social brands block only.
          Aligned flush with Buktika logo column above.
   Right: .footer-bottom-origin — "Built in South Africa" above copyright.
          Both lines left-aligned inside the right zone.
          Zone is right-positioned by the grid — longest line sets the column width.
   ====================================================================================================== */

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 2rem 1.25rem;
  border-top: 1px solid rgba(245, 176, 20, 0.18);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: end;   /* copyright aligns to bottom of social block, not top */
  gap: 1.5rem;
}

/* Left zone: social brands only */
.footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Copyright hidden from left zone — rendered in right zone instead */
.footer-bottom-copy {
  display: none;
}

/* Kept for JS year injection — hidden visually but id="y" must exist in DOM */
.copy {
  display: none;
}

/* Right zone: copyright only, right-aligned */
.footer-bottom-origin {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

/* Copyright line */
.footer-origin-copy {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--sdx-color-livingtower-warm-sand);
}

/* ── Utility class overrides inside footer ────────────────────────────────────
   .muted and .small are global utility classes defined in global.css.
   On a light-theme page: .muted resolves to var(--muted) = --sdx-color-slate
   (#374151 near-black) — invisible on the dark footer surface.
   These overrides ensure the footer's own text tokens are never displaced
   by the global theme-sensitive utility classes.
   ─────────────────────────────────────────────────────────────────────────── */
footer .muted {
  color: var(--sdx-color-livingtower-warm-sand);
}

footer .small {
  font-size: var(--body);   /* 1rem — minimum readable size on dark surface */
}

/* Safety placeholder */
#site-footer {
  min-height: 3.5rem;
}

/* ======================================================================================================
   SOCIAL BRANDS STRIP — two-brand base bar centre zone
   Rendered by footer.js v2.5.0 renderSocialBrands() from navigation.json.
   Visual spec: compact rows, no icon boxes at rest, brand accent on hover.
   Buktika hover: --sdx-color-mama-amber
   MamaDEX hover:     --sdx-color-mama-cyan (pillar token)

   DOC-03 §8 compliance:
   - No box-shadow on icon links (signals lift/interactive affordance)
   - No gradient background on icon links (reserved for buttons)
   - No padding ≥ 0.5rem vertical on icon links
   ====================================================================================================== */

.footer-social-brands {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}

/* Brand row: identity label left, icons immediately right */
.footer-brand-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;      /* was 0.875rem — more breathing room between label and icons */
  padding: 0.375rem 0; /* was 0.3125rem — slightly more vertical padding per row */
}

/* Thin amber-wash rule between brand rows */
.footer-brand-rule {
  width: 100%;
  height: 1px;
  background: rgba(245, 176, 20, 0.15);
  margin: 0.125rem 0;
}

/* Brand identity: logo img or text label */
.footer-brand-identity {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 6rem;
  justify-content: flex-start;
}

.footer-brand-home-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;               /* inherits .footer-brand-label colour */
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.footer-brand-home-link:hover {
  opacity: 1;
}

.footer-brand-home-link:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.footer-brand-logo {
  height: 1.25rem;
  width: auto;
  display: block;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.footer-brand-row:hover .footer-brand-logo {
  opacity: 1;
}

[data-theme="dark"] .footer-brand-logo {
  filter: brightness(1.2);
}

.footer-brand-label {
  font-size: 0.9375rem;          /* 15px — was 0.8125rem (13px), too small for uppercase */
  font-weight: 600;              /* was 700 — slightly lighter reads crisper at small uppercase */
  letter-spacing: 0.12em;       /* wide tracking essential for uppercase legibility */
  text-transform: uppercase;
  color: var(--sdx-color-livingtower-light-text);
}

/* Icon row */
.footer-brand-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

/* Individual icon link — no boxes at rest.
   Raw icon on the footer surface. Hover shows minimal background wash only.
   DOC-03 §8: no box-shadow, no gradient, no padding ≥ 0.5rem vertical.
   RULE: cursor:pointer is correct here — these ARE interactive links. */
.footer-brand-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4375rem;      /* was 1.875rem — 30% increase */
  height: 2.4375rem;
  border-radius: 0.375rem;
  background: transparent;
  border: none;
  color: var(--sdx-color-livingtower-warm-sand);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.footer-brand-icon-link svg {
  width: 21px;           /* was 16px — 30% increase */
  height: 21px;
  flex-shrink: 0;
}

.footer-brand-icon-link:focus-visible {
  outline: 2px solid var(--sdx-color-mama-amber);
  outline-offset: 2px;
}

/* Buktika row — amber icon hover */
.footer-brand-row[data-brand="sentraledex"] .footer-brand-icon-link:hover {
  color: var(--sdx-color-mama-amber);
  background: rgba(245, 176, 20, 0.08);
}

/* MamaDEX row — cyan icon hover (pillar token) */
.footer-brand-row[data-brand="mamadex"] .footer-brand-icon-link:hover {
  color: var(--sdx-color-mama-cyan);
  background: rgba(52, 198, 208, 0.08);
}

/* ======================================================================================================
   MOBILE ACCORDION — <details>/<summary> per DOC-03 §8.12
   Native HTML disclosure widget. No JS required for WCAG 2.2 SC 4.1.2.
   Breakpoint: 768px (matches .foot grid collapse to 1-column).

   HARD RULE (DOC-03 §8.12): The desktop counterpart block
   (@media (min-width: 769px)) is MANDATORY. <details> is collapsed by
   default in ALL browsers at ALL viewports. Without it, content is
   hidden on desktop.
   ====================================================================================================== */

/* ── Mobile: accordion chrome ──────────────────────────────────── */

@media (max-width: 768px) {

  .footer-accordion {
    border-top: 1px solid rgba(245, 176, 20, 0.18);
    padding-top: 0.75rem;
  }

  .footer-col-heading {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.25rem;
    user-select: none;
  }

  .footer-col-heading::-webkit-details-marker { display: none; }
  .footer-col-heading::marker               { display: none; }

  .footer-col-heading span {
    margin: 0;
    color: var(--sdx-color-mama-amber);
    font-size: 0.9375rem;
    font-weight: 700;
  }

  /* Chevron — amber */
  .footer-col-heading::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--sdx-color-mama-amber);
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }

  .footer-accordion[open] > .footer-col-heading::after {
    transform: rotate(180deg);
  }

  .footer-accordion .footer-links {
    margin-top: 0.75rem;
    padding-bottom: 0.5rem;
  }

  .footer-col--brand .footer-accordion {
    border-top: none;
    padding-top: 0;
  }
}

/* ── Desktop counterpart — MANDATORY per DOC-03 §8.12 ──────────── */

@media (min-width: 769px) {

  .footer-col-desktop-heading {
    display: block;
  }

  /* Hide summary trigger on desktop — desktop heading h4 used instead */
  .footer-col-heading {
    display: none !important;
  }

  /* Remove mobile accordion chrome */
  .footer-accordion {
    border-top: none !important;
    padding-top: 0 !important;
  }
}

/* Mobile: hide the desktop-only heading */
@media (max-width: 768px) {
  .footer-col-desktop-heading {
    display: none;
  }
}

/* ======================================================================================================
   RESPONSIVE ADJUSTMENTS
   ====================================================================================================== */

@media (max-width: 768px) {
  footer {
    padding: 2.5rem 0 1.25rem;
  }

  .foot {
    gap: 1.75rem;
    grid-template-columns: 1fr;
    padding: 0 1.5rem;
  }

  /* Base bar: single column on mobile, left-aligned throughout */
  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem 0;
  }

  .footer-bottom-left {
    gap: 0;
  }

  .footer-bottom-origin {
    justify-content: flex-start;
    text-align: left;
  }

  /* Social brands: full-width, left-aligned rows on mobile */
  .footer-social-brands {
    width: 100%;
    align-items: flex-start;
  }

  .footer-brand-row {
    justify-content: flex-start;
  }

  .footer-brand-identity {
    justify-content: flex-start;
    min-width: 5rem;
  }
}

@media (max-width: 560px) {
  .footer-links a,
  .copy,
  .footer-origin-label {
    font-size: 0.8125rem;
  }
}