/* ===========================================================================
   Oruawharo Emergency Response Group — site stylesheet
   ===========================================================================

   This is the site's OWN design, not the platform skeleton. It is a faithful
   port of the hand-written styles that previously lived in <style> blocks
   inside index.php and emergency-plan.php: same palette, same type, same
   cards, gradients and rounded corners. Nothing here was redesigned.

   Two things did change, and both were forced rather than chosen:

   1. MOBILE FIRST. The originals were desktop rules undone by two
      `@media (max-width: 768px)` blocks. The platform forbids that shape, so
      those blocks were inverted: the narrow viewport is now the base and
      `min-width` queries widen it. The rendered result at each size matches
      what the originals produced.

   2. NO INLINE STYLES. The strict CSP in includes/security.php permits no
      `style="…"` attributes, so every inline declaration in those two pages
      became a class here. Each one is named after what it was doing.

   THERE IS NO SITE HEADER. SITE_HEADER is false in includes/site.php, so
   header.php renders no site-header, no nav-toggle, no site-nav and no
   skip-link, and the rules for them are deleted rather than left here dead.
   The site's navigation is the footer's Explore list and 404.php's quicklinks,
   both fed by nav_items(). Turning the header back on means restoring those
   rules from the platform skeleton as well as flipping the constant.

   Bump ASSET_VERSION in includes/site.php after editing this file — assets are
   cached for a year.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Tokens

   The left column is the platform's contract — the shared chrome, 404.php and
   privacy.php all read these names. The right column is OERG's own palette,
   carried over unchanged from the original pages.
   --------------------------------------------------------------------------- */

:root {
    /* OERG palette, as it was. */
    --primary:      #ff6b35;   /* signal orange — rules, badges, urgent links */
    --secondary:    #004e89;   /* deep blue — the other half of every gradient */
    --accent:       #f7931e;   /* amber — links, headings, calls to action */
    --dark:         #1a1a1a;
    --light:        #f5f5f5;

    /* Platform token contract, resolved against the palette above. */
    --ink:          #e0e0e0;   /* body text */
    --ink-soft:     #b4b4b4;   /* secondary text, captions */
    --paper:        var(--dark);
    --paper-alt:    #2d2d2d;
    --rule:         rgba(255, 255, 255, 0.1);
    --accent-ink:   var(--dark);

    /* Notices, darkened so they sit on this background rather than glaring. */
    --ok:           #7ddba4;
    --ok-bg:        rgba(30, 91, 52, 0.35);
    --error:        #ff9a9a;
    --error-bg:     rgba(138, 31, 31, 0.35);

    /* Type. The original stack, kept. No webfont links — the CSP forbids
       external origins, and a self-hosted face would go under /assets. */
    --font-display: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-body:    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Spacing — 4px scale. */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 1rem;
    --s4: 1.5rem;
    --s5: 2rem;
    --s6: 3rem;
    --s7: 4.5rem;

    --measure: 38rem;
    --gutter:  var(--s3);
    --max:     75rem;
    --radius:  10px;
}

/* ---------------------------------------------------------------------------
   Reset and base
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--dark);
    background: linear-gradient(135deg, var(--dark) 0%, #2d2d2d 100%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.2;
    margin: 0 0 var(--s3);
    font-weight: 700;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

p, ul, ol, dl { margin: 0 0 var(--s3); }

a { color: var(--accent); }

/* Visible focus, always. Never remove this without replacing it. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (min-width: 48em) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.3rem; }
}

/* ---------------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------------- */

.measure { max-width: var(--measure); }

.band { padding: var(--s6) 0; }
.band--lift { background: rgba(255, 255, 255, 0.04); }

.band__inner,
.site-footer__inner,
.page-head__inner,
.prose {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.prose { max-width: calc(var(--measure) + var(--gutter) * 2); padding-block: var(--s5); }

.eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 var(--s2);
}

/* The gradient-filled headings the original design used throughout. The
   background-clip trick needs a solid fallback first, or a browser that does
   not support it paints the text in whatever colour it inherited. */
.section h2,
.page-head h1,
.prose h2,
.container h2 {
    color: var(--accent);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------------------
   Page head — used by 404.php, privacy.php and emergency-plan.php, and styled
   to match the banner the emergency plan used to carry at the top of its own
   markup: the blue-to-orange gradient with an amber rule under it.
   --------------------------------------------------------------------------- */

.page-head {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    border-bottom: 3px solid var(--accent);
    padding-block: var(--s6);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* The soft disc the original header carried in its top-right corner. */
.page-head::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    top: -50px;
    right: 50px;
}

.page-head__inner { position: relative; z-index: 2; }

/* The banner is a filled gradient, so the heading is plain white on it rather
   than the gradient fill used over the dark ground elsewhere. */
.page-head h1 {
    color: #fff;
    background: none;
    -webkit-text-fill-color: #fff;
    margin-bottom: var(--s2);
}

.page-head__lede {
    max-width: var(--measure);
    margin-inline: auto;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.9);
}

.page-head .eyebrow { color: rgba(255, 255, 255, 0.85); }

/* ---------------------------------------------------------------------------
   Hero — the home page's opening screen, unchanged in substance.
   --------------------------------------------------------------------------- */

.hero {
    /* The original design's full screen, restored. Phase 1 had briefly made
       this calc(100svh - 3.75rem) to leave room for the platform's header bar;
       SITE_HEADER is false now, so there is nothing above it again.

       svh rather than vh: on a phone, vh includes the browser chrome that
       retracts on scroll, so 100vh overshoots the screen on first paint. */
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    position: relative;
    overflow: hidden;
    padding: var(--s6) var(--gutter);
}

.hero::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    top: -100px;
    right: -100px;
    animation: float 8s ease-in-out infinite;
}

.hero::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    bottom: -50px;
    left: 50px;
    animation: float 10s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(30px); }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 50rem;
}

.hero h1 {
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: 900;
    margin-bottom: var(--s4);
    color: #fff;
    background: none;
    -webkit-text-fill-color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    letter-spacing: -1px;
}

.hero p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--s6);
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Buttons

   These were <button onclick="…"> in the original. The CSP permits no inline
   handlers, and both of them only navigated, so they are anchors now — which
   is also what they always should have been: they work with JavaScript off,
   they can be opened in a new tab, and a screen reader announces them as the
   links they are. The look is unchanged.
   --------------------------------------------------------------------------- */

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    justify-content: center;
    align-items: stretch;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 14px 32px;
    border: none;
    border-radius: 50px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--accent);
    color: var(--dark);
    box-shadow: 0 10px 30px rgba(247, 147, 30, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(247, 147, 30, 0.6);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 2px solid #fff;
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}

@media (min-width: 40em) {
    .cta-buttons { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .btn { width: auto; }
}

/* ---------------------------------------------------------------------------
   Sections — the home page's content rhythm.
   --------------------------------------------------------------------------- */

.section {
    padding: var(--s6) var(--gutter);
    max-width: var(--max);
    margin-inline: auto;
}

.section h2 { margin-bottom: var(--s5); }
.section h2:first-of-type { margin-top: 0; }

/* Was style="text-align:center; margin-bottom:50px". */
.section-intro {
    text-align: center;
    margin-bottom: var(--s6);
}

.section-intro h2 { margin-bottom: var(--s2); }

/* Was style="font-size:1.15rem; line-height:1.8; max-width:900px; margin:0 auto". */
.lede {
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 56rem;
    margin-inline: auto;
    color: rgba(255, 255, 255, 0.9);
}

/* Was style="font-size:1.1rem; line-height:1.8; margin-bottom:30px" on the
   paragraph that opens a section. */
.section-lede {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: var(--s5);
}

/* Was style="display:flex; align-items:center; gap:20px; margin-bottom:30px". */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s4);
    margin-bottom: var(--s5);
}

.section-head h2 { margin: 0; }

@media (min-width: 48em) {
    .section { padding-block: 80px; }
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s5);
    margin-top: var(--s5);
}

@media (min-width: 40em) {
    .grid { grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); }
}

.card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid var(--rule);
    padding: var(--s5);
    border-radius: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* The sheen that sweeps across a card on hover. */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.card:hover::before { left: 100%; }

.card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    background: rgba(255, 107, 53, 0.1);
}

.card h3 {
    color: var(--accent);
    margin-bottom: var(--s3);
    font-size: 1.4rem;
}

.card p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 0;
}

/* Was style="text-align:center" on the six threat cards. */
.card--centred { text-align: center; }

/* Was <h3 style="color: var(--accent)"> holding a single emoji. It is
   decorative, not a heading, so the markup now uses <p> and this sets the
   size the h3 was giving it. */
.threat-icon {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 0 0 var(--s2);
}

/* ---------------------------------------------------------------------------
   Info boxes, contact cards and callouts
   --------------------------------------------------------------------------- */

.info-box {
    background: rgba(255, 107, 53, 0.15);
    border-left: 4px solid var(--primary);
    padding: var(--s4);
    border-radius: 8px;
    margin: var(--s4) 0;
}

.info-box p {
    color: rgba(255, 255, 255, 0.9);
}

.info-box p:last-child { margin-bottom: 0; }

/* Was style="background: rgba(0,78,137,0.2); border-left-color: var(--secondary)"
   on the "tie something brightly coloured to your gate" box. */
.info-box--blue {
    background: rgba(0, 78, 137, 0.2);
    border-left-color: var(--secondary);
}

.contact-card {
    background: linear-gradient(135deg, rgba(247, 147, 30, 0.2), rgba(0, 78, 137, 0.2));
    padding: var(--s4);
    border-radius: 15px;
    border: 1px solid var(--rule);
    margin: var(--s3) 0;
}

.contact-card strong { color: var(--accent); }

.contact-card p {
    margin: var(--s2) 0;
    color: rgba(255, 255, 255, 0.85);
}

/* An urgent link — was style="color: var(--primary); font-weight:600" on the
   111 link. Signal orange rather than amber, deliberately. */
.link-urgent {
    color: var(--primary);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   CPR block
   --------------------------------------------------------------------------- */

.cpr-steps {
    background: rgba(255, 107, 53, 0.1);
    padding: var(--s5);
    border-radius: 15px;
    margin: var(--s4) 0;
}

.cpr-steps ol {
    margin-left: var(--s4);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.9;
}

.cpr-steps li { margin-bottom: 12px; }

/* Was <strong style="font-size:1.1rem; display:block; margin-bottom:15px;
   color: var(--accent)"> above each list. */
.cpr-steps__heading {
    display: block;
    font-size: 1.1rem;
    color: var(--accent);
    margin-bottom: var(--s3);
}

/* The second heading carried an extra margin-top:25px in the original. */
.cpr-steps__heading + ol + .cpr-steps__heading,
.cpr-steps ol + .cpr-steps__heading { margin-top: var(--s4); }

/* Was style="margin-top:20px; color: rgba(255,255,255,0.9)". */
.cpr-steps__note {
    margin-top: var(--s4);
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.9);
}

.emergency-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Emergency plan page
   --------------------------------------------------------------------------- */

.container {
    max-width: 62.5rem;
    margin-inline: auto;
    padding: var(--s4) var(--gutter);
}

@media (min-width: 48em) {
    .container { padding: var(--s6) var(--gutter); }
}

/* Was <div style="text-align:center"> around the back link. */
.back-row { text-align: center; padding-top: var(--s4); }

.back-button {
    display: inline-block;
    min-height: 44px;
    margin: var(--s4);
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.back-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.warning-box {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 107, 53, 0.1));
    border-left: 5px solid var(--primary);
    padding: var(--s4);
    border-radius: var(--radius);
    margin: var(--s5) 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
}

/* Was style="color:#fff; font-weight:600; text-decoration:none" on the 111
   link inside the warning box — white, because the box is already orange. */
.warning-box a {
    color: #fff;
    font-weight: 600;
}

.container section { margin: var(--s6) 0; }

.container h2 {
    margin-bottom: var(--s4);
    padding-bottom: var(--s3);
    border-bottom: 2px solid var(--rule);
}

.container h3 {
    color: var(--accent);
    background: none;
    -webkit-text-fill-color: currentColor;
    margin-top: var(--s4);
    margin-bottom: var(--s3);
}

.container p {
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--s3);
}

.container ul {
    margin-left: var(--s4);
    margin-bottom: var(--s4);
}

.container li {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--s2);
    line-height: 1.7;
}

.contact-info {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--rule);
    padding: var(--s4);
    border-radius: var(--radius);
    margin: var(--s3) 0;
    backdrop-filter: blur(10px);
}

.contact-info strong {
    color: var(--accent);
    display: block;
    margin-bottom: var(--s3);
    font-size: 1.05rem;
}

.contact-info p {
    margin: var(--s1) 0;
    padding-left: var(--s4);
}

.list-section {
    background: rgba(0, 78, 137, 0.1);
    border-left: 4px solid var(--secondary);
    padding: var(--s4);
    border-radius: 8px;
    margin: var(--s4) 0;
}

.list-section h4 {
    color: var(--accent);
    margin-bottom: 12px;
    font-size: 1rem;
}

.list-section ul { margin-left: var(--s4); margin-bottom: 0; }

.highlight {
    background: rgba(247, 147, 30, 0.15);
    padding: var(--s4);
    border-radius: 8px;
    margin: var(--s3) 0;
}

.highlight strong { color: var(--accent); }
.highlight p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   404 quicklinks
   --------------------------------------------------------------------------- */

.quicklinks {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s3);
    list-style: none;
    margin: var(--s5) 0 0;
    padding: 0;
}

@media (min-width: 40em) {
    .quicklinks { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}

.quicklinks__link {
    display: block;
    min-height: 44px;
    padding: var(--s3) var(--s4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all 0.3s ease;
}

.quicklinks__link:hover {
    border-color: var(--primary);
    background: rgba(255, 107, 53, 0.1);
}

.quicklinks__title {
    display: block;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: var(--s1);
}

/* ---------------------------------------------------------------------------
   Definition lists (privacy page), notices and form furniture

   No public page carries a form in this phase — the staff area has its own
   stylesheet — but these rules are part of the platform's class contract and
   a page added later will need them.
   --------------------------------------------------------------------------- */

.detail-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.detail-list dt { font-weight: 600; color: var(--accent); margin-top: var(--s3); }
.detail-list dd { margin: 0; }

/* The honeypot field — off-screen, never focusable by a person. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

label { display: block; margin-bottom: var(--s1); font-weight: 600; }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    /* 16px minimum, or iOS zooms the page on focus. */
    font-size: 1rem;
    font-family: inherit;
    padding: var(--s3);
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 8px;
    margin-bottom: var(--s3);
}

textarea { min-height: 9rem; resize: vertical; }

.hint, .privacy { font-size: 0.875rem; color: var(--ink-soft); }

.notice {
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s4);
}

.notice--ok    { border-color: var(--ok);    background: var(--ok-bg);    color: var(--ok); }
.notice--error { border-color: var(--error); background: var(--error-bg); color: var(--error); }
.notice ul { margin: 0; padding-left: var(--s4); }

/* ---------------------------------------------------------------------------
   Footer

   The original pages each ended with a centred footer of their own. This is the
   platform's structural footer wearing that treatment: same dark band, same
   amber links, same centred text.

   The last three elements are deliberately ranked. site-footer__legal is what
   the public is owed, site-footer__credit says who built it, and
   site-footer__staff is a door for the people who work here — NOT a public
   feature. It must stay the quietest thing on the page while remaining a 44px
   touch target. Do not let a redesign bring it up to the weight of the privacy
   link.
   --------------------------------------------------------------------------- */

.site-footer {
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid var(--rule);
    color: rgba(255, 255, 255, 0.7);
    padding-block: var(--s6) var(--s5);
    margin-top: var(--s6);
    text-align: center;
}

.site-footer a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer a:hover { color: var(--primary); text-decoration: underline; }

.site-footer__inner {
    display: grid;
    gap: var(--s5);
    text-align: left;
}

/* Explicit column counts rather than auto-fit, because two of the blocks need
   to span the whole row and `repeat(auto-fit, …)` gives no stable number of
   columns to span. Mobile-first: one column here, two from 40em, three from
   62em, each query overriding the one before it. */
@media (min-width: 40em) {
    .site-footer__inner { grid-template-columns: repeat(2, 1fr); }

    /* The centres block takes the full row. THE BLOCK IS NOT THE GRID —
       .footer-centres inside it is. When the block itself was the grid, its
       heading was a grid item and both the heading's margin and the grid's
       row-gap applied to it, so this column's heading sat three times further
       from its content than the other two columns' did. */
    .site-footer__block--wide { grid-column: 1 / -1; }

    .site-footer__signoff { grid-column: 1 / -1; }

    /* The two centres side by side. ONE GUTTER: --s5, the same value the outer
       grid uses between columns, so the footer reads as one set of columns
       rather than a 2rem grid with a 1.5rem grid nested inside it. */
    .footer-centres {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--s5);
    }
}

@media (min-width: 62em) {
    /* Three columns, the centres given the widest. */
    .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; }

    .site-footer__block--wide { grid-column: auto; }

    /* Stacked again: two centres side by side in a third of the footer would be
       cramped. */
    .footer-centres { grid-template-columns: 1fr; }
}

.site-footer__block address { font-style: normal; }

.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__social a + a { margin-left: var(--s3); }

.site-footer__legal {
    max-width: var(--max);
    margin: var(--s6) auto 0;
    padding-inline: var(--gutter);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.site-footer__credit {
    max-width: var(--max);
    margin: var(--s2) auto 0;
    padding-inline: var(--gutter);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Quieter than the privacy link above it: smaller, dimmer, no underline until
   it is hovered or focused. Still a full 44px target — discreet is not the
   same as hard to tap. */
.site-footer__staff {
    margin: var(--s5) auto 0;
    padding-inline: var(--gutter);
    font-size: 0.75rem;
}

.site-footer__staff a {
    display: inline-block;
    min-height: 44px;
    padding-block: 12px;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
}

.site-footer__staff a:hover,
.site-footer__staff a:focus-visible { color: rgba(255, 255, 255, 0.6); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   The footer's own blocks — see includes/site-footer.php

   This site replaces the platform's default contact grid, so these classes are
   OERG's rather than the platform's. The site-footer__legal, __credit and
   __staff rules above are still the platform's and are rendered either way.
   --------------------------------------------------------------------------- */

/* ONE VERTICAL RHYTHM ACROSS ALL THREE COLUMNS.

   They previously ran on three different steps — the centres on --s1, "Get in
   touch" on the base <p> margin of --s3, and Explore on 44px tap targets — so
   side by side they read as three unrelated lists. Now:

     a heading sits --s2 above its content, in every column;
     every tappable link is a 44px row, in every column;
     a paragraph holding one adds no margin, because the row's own padding is
       the rhythm.

   AND MARGINS AND GRID GAPS ARE NEVER BOTH USED ON THE SAME AXIS. That was the
   other half of it: .footer-centre carried a bottom margin AND sat in a grid
   with a row-gap, so the space between two centres was the sum of the two and
   matched nothing else on the page. The gap alone does it now. */

/* 44px is the platform's minimum touch target. Applying it to every footer
   link rather than only the nav list is what puts the columns on one rhythm,
   and it matters most on a phone number somebody is tapping in an emergency. */
.site-footer__block p > a,
.site-footer__list a {
    display: inline-block;
    min-height: 44px;
    padding-block: var(--s2);
    vertical-align: middle;
}

.site-footer__block p { margin-bottom: 0; }

.site-footer__block .eyebrow,
.site-footer__block address { margin-bottom: var(--s2); }

/* The two centres, and the only thing separating them. */
.footer-centres {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s4);
    margin-bottom: var(--s3);
}

.footer-centre__name {
    display: block;
    color: var(--accent);
    margin-bottom: var(--s2);
}

/* A sentence, not a row — so the 111 link inside it stays inline. A 44px box
   in the middle of a line of prose would push the line apart. */
.footer-centre__note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.footer-centre__note a {
    display: inline;
    min-height: 0;
    padding-block: 0;
}

/* The sign-off the original page footers carried under everything else. It
   spans the grid rather than sitting in a column — it is addressed to
   everybody reading, not one more category of detail. */
.site-footer__signoff {
    text-align: center;
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
    color: rgba(255, 255, 255, 0.7);
}

.site-footer__coordinators { margin-bottom: var(--s2); }

.site-footer__tagline {
    margin-bottom: 0;
    font-size: 0.9rem;
}