/*
 * S338 — public pages on a phone.
 *
 * Several public views set a two-column grid in an inline style attribute:
 *   <div style="display:grid;grid-template-columns:1.3fr .7fr">
 * and inline styles are not reachable by a media query without !important. On a
 * 390px screen the columns stayed side by side, so Request Support ran 58px past
 * the edge of the screen and Volunteer 92px — the page scrolled sideways and the
 * right-hand cards were cut off. Most of the traffic here arrives from a Facebook
 * link on a phone, which makes this the worst place to have it.
 *
 * One rule, scoped to small screens, that flattens any inline grid to a single
 * column. It has to be !important because the thing it is overriding is inline.
 */
@media (max-width: 760px) {
  .page [style*="grid-template-columns"],
  .section [style*="grid-template-columns"],
  main [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* a long unbroken word — an email address, a URL — should wrap rather than push
   the whole page sideways */
@media (max-width: 760px) {
  .page, .section, main { overflow-wrap: anywhere; }
}

/*
 * S347 — text a person can actually read.
 *
 * An automated pass found twenty-two WCAG AA contrast failures on the public pages. The
 * first attempt at fixing them was a blanket "make the pale grey darker", and that was
 * wrong in a way worth recording: **some of that pale grey is on a near-black
 * background**, where darkening it makes it worse. The footer copy at #475569 on #020916
 * was already failing at 2.6:1 for exactly that reason.
 *
 * So these are targeted, and they go in two directions:
 *
 *   on light backgrounds, muted text gets darker  (#64748b on #f5f7fb is 4.43:1, just
 *   under the 4.5 required — close enough to look fine and still fail somebody);
 *   on dark backgrounds, it gets lighter.
 *
 * The brand gold is untouched where it belongs. Gold small-caps on white is 2.2:1 and
 * illegible in sunlight; gold on the dark hero is fine and stays.
 */
.ac-sub, .ac-note, .ac-note strong,
.cd-unit-line, .cd-help-h,
.page .muted, .section .muted {
  color: #4b5768;                                  /* 6.2:1 on #f5f7fb */
}

.eyebrow {
  color: #8a6a12 !important;                       /* 4.7:1 on white — the same gold, darkened */
}
.hero .eyebrow, .hero-panel .eyebrow, [style*="background:#0"] .eyebrow, .dark .eyebrow {
  color: var(--gold, #d4a63d) !important;          /* on a dark panel the original is right */
}

/*
 * Light text on dark, where darkening would be the wrong way. The site footer is a plain
 * <div>, not a <footer>, so it is matched by what it actually is: a mid-grey paragraph
 * sitting on the near-black brand colour. Specificity has to be forced throughout this
 * block — these colours are set in page-level <style> blocks that load after this file.
 */
[style*="background:#020916"] p, [style*="background:#0f2d52"] p,
[style*="background:#071b34"] p, .site-footer p, .footer p {
  color: #b6c0cd !important;
}

/* muted text on the off-white panels: 4.43:1 looks fine and still fails somebody */
.ac-sub, .ac-note, .ac-note strong, .cd-unit-line, .cd-help-h, .cd-shot figcaption,
.page .muted, .section .muted, main .muted {
  color: #4b5768 !important;
}

/* gold as a text colour on white: illegible in sunlight, and it is a link people need */
a[style*="var(--gold)"], a[style*="#d4a63d"], .gold > .n, .ac-figure .gold {
  color: #8a6a12 !important;
}