/* ===========================================================================
   DRHP 2026 footer — matched to the Figma footer states.
   Same 7 sampled tokens as the header (defined in header-2026.css :root).
     band bg #f7f3fa · body #3f124d · bottom bar #5a246c
   =========================================================================== */

/* Neutralise the parent's lavender footer + width constraints for our block. */
.drhp-header-2026-active #colophon.site-footer {
  background: var(--d26-ink);
  padding: 0;
}
.drhp-header-2026-active #colophon > .inner-wrap {
  max-width: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* ------------------------------------------------------------- safety band */
.drhp26f-band {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px 24px;
  background: var(--d26-band);
  padding: 28px max(48px, calc((100% - 1344px) / 2));              /* band = 112px */
}
.drhp26f-band__title { margin: 0; font: 700 20px/28px Montserrat, sans-serif; color: var(--d26-text); }   /* frame: 20px #241a29 · 15.5:1 */
.drhp26f-band__sub { margin: 4px 0 0; font: 400 16px/24px Inter, sans-serif; color: var(--d26-text); }    /* frame: #241a29 */
.drhp26f-band__sub-short { display: none; }     /* phones-only copy, see the mobile block */
/* Decision Q1: the 24/7 crisis line, tappable, on every page. A 24px visual
   line with a 44px target hung around it; purple on the band is 9.7:1. */
.drhp26f-band__tel {
  display: flex; width: fit-content; align-items: center; gap: 8px;   /* block-level: no line-box strut, so the margins are exact */
  margin: -2px 0 -10px; padding: 10px 0;          /* 8px gap + a 24px line; the 44px box hangs 10px either side */
  font: 600 16px/24px Inter, sans-serif;
  color: var(--d26-purple);
  text-decoration: underline; text-underline-offset: 3px;
}
.drhp26f-band__tel:hover { color: var(--d26-ink); }
.drhp26f-band__tel svg { flex: 0 0 auto; }
.drhp26f-band__actions { display: flex; align-items: center; gap: 20px; }
/* Chips per the state sheet (132:312/320): ring ON the chip — Donate primary,
   Quick Exit accent — adjacent to the chip's own fill wherever it sits. */
.drhp26f-band .drhp26-donate:focus-visible { outline-color: var(--d26-purple) !important; outline-offset: -4px !important; }
.drhp26f-band .drhp26-qe:focus-visible { outline-color: var(--d26-gold) !important; outline-offset: -4px !important; }  /* 3.55:1 on red */

/* ------------------------------------------------------------- footer body */
.drhp26f-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 3fr);
  gap: 40px;
  background: var(--d26-ink);
  padding: 48px max(48px, calc((100% - 1344px) / 2)) 44px;
}
/* logo box handled by the brand crop in header-2026.css (194×64) */
.drhp26f-tagline {
  margin: 14px 0 8px;              /* frame ink: tagline 244, social row 300 */
  font: 400 16px/24px Inter, sans-serif;
  color: var(--d26-white);                        /* 14.95:1 */
  max-width: 280px;
}
/* Frame glyph ink is ~20px; our 24-viewBox SVGs need a 26px box for that.
   Negative margins pull the inked row to the frame position while every
   anchor stays a 44×44 target. */
/* Frame component 40:952: four glyphs at their natural widths (10 / 20.71 / 20
   / 20) on a 20px row with 30px gaps — lefts 0 / 40 / 90.71 / 140.71. The link
   box is the glyph; an invisible pseudo-element extends the hit area to
   44×44 (handoff acceptance §6) and carries the hover fill and focus ring. */
.drhp26f-social { display: flex; gap: 30px; list-style: none; margin: 14px 0 0; padding: 0; }   /* 131:700: row at y140 of the brand column, 14px under the tagline (collapses with its 8px) */
.drhp26f-social li { display: flex; }
.drhp26f-social svg { display: block; height: 20px; }
.drhp26f-social a {
  position: relative; display: block; height: 20px;
  color: var(--d26-band);                         /* #f7f3fa as the asset fills */
}
.drhp26f-social a::before { content: ""; position: absolute; width: 44px; height: 44px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 8px; }   /* handoff §6: targets ≥44×44; centred on the glyph, 50px pitch keeps them apart */
.drhp26f-social a:hover::before { background: var(--d26-purple); }
.drhp26f-social a svg { position: relative; }

.drhp26f-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 28px 40px;
  /* Frame 131:688: the columns area is 202px (Resources carries five links) and
     the legal bar lands at 406. Held at that height so the footer measures the
     frame now, and nothing moves when the fifth link ("News & stories") exists. */
  min-height: 202px;
}
.drhp26f-col__head { display: flex; align-items: center; justify-content: space-between; }
.drhp26f-col__label {
  margin: 0 0 12px;
  font: 700 14px/22px Montserrat, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--d26-white);                        /* 14.95:1 */
}
.drhp26f-toggle { display: none; }
.drhp26f-col__list { list-style: none; margin: 0; padding: 0; }
/* Client direction (4 Sept 2026, handoff §6): every link target ≥44×44. The
   frame's 36px pitch cannot hold non-overlapping 44px targets, so rows are 44
   tall on a 44px pitch; the first line of text stays at the frame's position
   (label margin 2px + 10px of the row above the 24px text = the frame's 12). */
.drhp26f-col__list { display: flex; flex-direction: column; gap: 0; margin-top: -12px; }   /* first text line lands at label + 12 like the frame */
.drhp26f-col__list a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  color: var(--d26-white);                        /* 14.95:1 */
  font: 400 16px/24px Inter, sans-serif;
  text-decoration: none;
}
.drhp26f-col__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.drhp26f-col__list a[aria-current="page"] { text-decoration: underline; font-weight: 600; }
.drhp26f-col__list .drhp26-arrow { display: none; }
/* The header's priority-row chip must not leak into the footer columns: the
   desktop mockup renders every column link identically. The mobile accordion
   keeps its own highlight (defined in the mobile block below). */
.drhp26f-col__list .drhp26-row--priority a {
  background: none;
  color: var(--d26-white);
  font-weight: 400;
}
/* The frame's desktop columns carry no View-all rows; the mobile accordion does. */
.drhp26f-col__list .drhp26-row--viewall { display: none; }

/* --------------------------------------------------------------- bottom bar */
.drhp26f-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 24px;
  background: var(--d26-purple);
  padding: 14px max(48px, calc((100% - 1344px) / 2));              /* bar = 72px with 44px link boxes */
}
.drhp26f-bar__copy { margin: 0; font: 400 13px/20px Inter, sans-serif; color: var(--d26-white); }  /* frame 13px · 11.03:1 */
.drhp26f-bar__links { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
.drhp26f-bar__links a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--d26-white);                        /* 11.03:1 */
  font: 400 13px/20px Inter, sans-serif;
  text-decoration: none;
}
.drhp26f-bar__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Focus on the dark footer: gold rings (8.09:1 on ink, 4.6:1 on the bar). */
.drhp26f a:focus-visible,
.drhp26f button:focus-visible,
.drhp26f-bar a:focus-visible {
  outline: 4px solid var(--d26-gold) !important;   /* state sheet: 4px rings */
  outline-offset: 2px;                                /* outside on the 24px text lines; boxed controls go inside below */
  box-shadow: none !important;
  border-radius: 6px;
}
.drhp26f-band .drhp26-donate:focus-visible { outline-color: var(--d26-purple) !important; outline-offset: -4px !important; }
.drhp26f-band .drhp26-qe:focus-visible { outline-color: var(--d26-gold) !important; outline-offset: -4px !important; }
.drhp26f-toggle:focus-visible, .drhp26f-band__tel:focus-visible { outline-offset: -4px !important; }
.drhp26f-social a:focus-visible { outline-offset: 8px !important; }   /* ring around the extended hit area, not inside the 20px glyph */   /* boxed controls: ring inside */

/* ---------------------------------------------------------------- mobile -- */
@media (max-width: 767px) {
  /* Frame 131:733 stacks the band: title, one-line subtitle, then the two
     buttons LEFT-ALIGNED beneath (QE at x20, Donate at x158). The desktop
     row layout was wrapping only when it ran out of room, so between ~430px
     and 767px the buttons sat beside the text instead. Stack unconditionally. */
  .drhp26f-band { padding: 24px 20px; gap: 12px 24px; flex-direction: column; align-items: flex-start; }
  .drhp26f-band__copy { width: 100%; }
  .drhp26f-band__actions { align-self: flex-start; }
  .drhp26f-band__actions { gap: 8px; }
  .drhp26f-band__sub-full { display: none; }
  .drhp26f-band__sub-short { display: inline; }
  .drhp26f-body { display: flex; flex-direction: column; gap: 8px; padding: 24px 20px 0; }
  /* Mobile region order, per the frame: logo → accordions → social icons.
     The brand block splits: logo first, social last, tagline hidden (the
     frame's mobile footer carries no tagline). */
  .drhp26f-brand { display: contents; }
  .drhp26f-brand > * { order: 0; }
  .drhp26f-cols { order: 1; }
  .drhp26f-brand nav { order: 2; }
  .drhp26f-tagline { display: none; }
  .drhp26f-cols { grid-template-columns: 1fr; gap: 8px; }
  /* Frame 131:733 rows 319/379/439: the #d9ccde separator is the last pixel of
     each 52px row, painted inside it — a border beneath made rows 53px and
     drifted the whole accordion 1px per group. */
  .drhp26f-col { border-bottom: 0; }
  .drhp26f-col__head { min-height: 52px; box-shadow: inset 0 -1px 0 var(--d26-border); }
  .drhp26f-col__label { margin: 0; font: 600 16px/22px Inter, system-ui, sans-serif; letter-spacing: normal; text-transform: none; }   /* Label/L per 131:772 (was Montserrat 15) */
  /* Frame 131:761: the open group's head becomes a purple card header. */
  .drhp26f-col.is-open .drhp26f-col__head,
  .drhp26f-col__head:has(.drhp26f-toggle[aria-expanded="true"]) {
    background: var(--d26-purple);
    border-radius: 8px 8px 0 0;
    padding: 0 12px;                              /* 131:771: px-12 both sides, so the − ends at 358 like the frame */
    box-shadow: none;                             /* open head is a plain purple card */
  }

  /* Accordion toggle — mobile only, a separate control so the heading stays a
     heading. 44×44 target; the 10px glyph sits flush right per the frame. */
  .drhp26f-toggle,
  .drhp26f-toggle:hover,
  .drhp26f-toggle[aria-expanded="true"] {
    display: inline-flex; align-items: center; justify-content: flex-end;
    width: 44px; height: 44px; padding: 0;   /* glyph flush right: + at 358–370, − at 346–358 (131:798 / 131:774) */
    background: transparent; border: 0; border-radius: 8px;
    color: var(--d26-white); cursor: pointer;   /* pinned — the parent teals button states */
  }
  /* Frame 131:745 / 131:774: the toggle glyph is a text "+" / "−" in
     Heading/S (Montserrat 700 20/28), 12×28, flush right (audit, 4 Sept 2026). */
  .drhp26f-glyph { display: block; font: 700 20px/28px Montserrat, Inter, sans-serif; color: currentColor; }
  /* The glyph is text now, so a11y.css's generic button:hover underline would
     reach it (client, 4 Sept 2026): no decoration on the toggle in any state. */
  .drhp26f-toggle, .drhp26f-toggle:hover, .drhp26f-toggle:focus-visible, .drhp26f-toggle:active,
  .drhp26f-toggle .drhp26f-glyph { text-decoration: none !important; }
  /* The hover underline must stop at the words (client, 4 Sept 2026). A flex
     item is a block box, so the link's decoration propagates into the arrow;
     only an out-of-flow box escapes it — the arrow is pinned to the row's
     right padding edge instead, where the frame's spacer put it anyway. */
  .drhp26f-col__list a { position: relative; }
  .drhp26f-col__list .drhp26-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
  .drhp26f-glyph::before { content: "+"; }
  .drhp26f-toggle[aria-expanded="true"] .drhp26f-glyph::before { content: "\2212"; }

  .drhp26f-col__list[hidden] { display: none; }
  .drhp26f-col__list { padding-bottom: 0; gap: 0; }
  /* Frame 131:761: flat card — transparent rows on ink, square interiors,
     1px #d9ccde dividers, purple fills only on priority/View-all. */
  .drhp26f-col__list a {
    display: flex; justify-content: space-between; width: 100%;
    min-height: 44px; padding: 2px 12px 2px 24px; border-radius: 0;   /* frame 42; 44 per handoff §6 (client, 4 Sept 2026) */
    border-top: 1px solid var(--d26-border);
  }
  .drhp26f-col__list li:last-child a { border-radius: 0 0 8px 8px; }   /* 131:770 rounded 8 */
  .drhp26f-col__list a:hover { background: var(--d26-purple); }
  .drhp26f-col__list .drhp26-arrow { display: inline; color: var(--d26-white); font: 600 14px/20px Inter, system-ui, sans-serif; }   /* Label/M (131:778) */
  .drhp26f-col__list .drhp26-row--priority a,
  .drhp26f-col__list li.drhp26-row--priority a,
  .drhp26f-col__list .drhp26-row--viewall a {
    background: var(--d26-purple) !important;
    color: var(--d26-white) !important;          /* 11.03:1 */
    font: 600 14px/20px Inter, system-ui, sans-serif;   /* Label/M (131:780 / 131:792) */
  }
  .drhp26f-col__list .drhp26-row--viewall { display: list-item; }

  /* Frame 131:733: mobile legal sits directly on the ink footer at x20,
     links line above the © line, 13px type. */
  .drhp26f-bar {
    background: transparent;
    flex-direction: column-reverse; align-items: flex-start;
    gap: 8px; padding: 0 20px 24px;               /* frame: legal line 364, © 392, bottom 436 */
    margin-top: 0;                                /* follows the social row directly (frame: glyph 336, legal 364) */
  }
  .drhp26f-bar__links { display: flex; flex-wrap: wrap; gap: 0; font: 400 13px/20px Inter, sans-serif; }
  .drhp26f-bar__links li { display: inline-flex; align-items: center; }
  /* A drawn 2px dot, not a "·" character: generated text is read by screen readers (audit, 4 Sept 2026). Spacing keeps the line at the frame's 273px. */
  .drhp26f-bar__links li + li::before { content: ""; display: inline-block; width: 2px; height: 2px; border-radius: 50%; background: var(--d26-white); margin: 0 8px; vertical-align: middle; }   /* explicit white: the li inherits the parent's purple, not the links' white */
  /* A 20px visual line with a 44px target hung BELOW it (over the © text, which
     is not interactive) so it cannot overlap the social icons' targets above. */
  .drhp26f-bar__links a { display: inline-block; min-height: 0; line-height: 20px; padding: 0 0 24px; margin: 0 0 -24px; }
  .drhp26f-bar__links li.drhp26f-bar__item--desktop { display: none; }  /* "mobile-hide" class in Appearance → Menus; outranks the li rule above */
  /* Frames 733/761: the footer logo keeps the 194px box like the header. */
  /* logo box handled by the brand crop (194×64) */
  /* Frames 733/761 use the same 130×48 Quick Exit component as the rail (20px icon). */
  .drhp26f-band .drhp26-qe svg { width: 20px; height: 20px; }
  /* Frame 131:733: social glyphs at main+336 (8px under the last accordion
     row). 36px-tall targets keep the 20px glyph centred on the frame's rows
     without overlapping the legal links' targets beneath. */
  .drhp26f-social { margin: 0 0 8px; }              /* 131:759 / 131:807: x20, 20 tall, legal line 8px below */
  .drhp26f-band__sub { margin-top: 12px; }        /* frame rhythm: 22px ink gap */
}
@media (min-width: 768px) {
  /* Desktop columns are always open; the accordion state is mobile-only. */
  .drhp26f-col__list[hidden] { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
  .drhp26f *, .drhp26f *::before, .drhp26f *::after { transition: none !important; }
}
@media (forced-colors: active) {
  .drhp26f-toggle, .drhp26f .drhp26-qe, .drhp26f .drhp26-donate { border: 1px solid ButtonText; }
  .drhp26f :focus-visible { outline: 4px solid Highlight; }
}