/* Spokane Complex Wildfire Response Resources
   Stylesheet for index.html. Translation is handled client-side by the Google
   Translate widget, so there is only one page. */

:root {
    --navy: #0f2f4f;
    --navy-light: #1d4a75;
    --ink: #1a1a1a;
    --muted: #5a5a5a;
    --rule: #d6dbe1;
    --surface: #f4f6f8;
    --urgent: #8a1b1b;
    --focus: #b45309;
    --maxw: 62rem;
}

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

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: #fff;
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.25rem;
}

a { color: var(--navy-light); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }
a:focus-visible,
button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* Skip link for keyboard and screen-reader users */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #fff;
    color: var(--navy);
    padding: 0.75rem 1rem;
    font-weight: 700;
    z-index: 10;
}
.skip:focus { left: 0; }

/* ---------- Emergency strip ---------- */
.emergency {
    background: var(--urgent);
    color: #fff;
    font-weight: 600;
}
.emergency .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}
.emergency a { color: #fff; text-decoration: underline; }

/* ---------- Google Translate widget ----------
   Replaces the hand-built language bar. Same placement: directly under the
   emergency strip, so a non-English speaker finds it without scrolling.

   The widget injects its own markup, so the selectors below are Google's, not
   ours, they may break if Google changes the widget. The layout does not
   depend on them; they only tidy it up. */
.translatebar {
    background: #e8edf2;
    border-bottom: 1px solid var(--rule);
}
.translatebar .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    min-height: 2.75rem;
}
.translatebar .label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Shown only until the widget's script replaces it; if scripts are blocked or
   Google is unreachable, this stays visible instead of an empty grey bar. */
.translatebar .fallback {
    font-size: 0.9375rem;
    color: var(--muted);
}

/* Google injects a top banner iframe that pushes the whole page down and
   overlaps the emergency strip. Neutralise it. */
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }

/* font-size:0 on the wrapper suppresses the trailing "Powered by Google
   Translate" text; the control itself sets its own size below. */
.goog-te-gadget { font-size: 0 !important; color: transparent !important; }

/* InlineLayout.SIMPLE renders an anchor (.goog-te-gadget-simple), NOT a
   <select>.goog-te-combo. Styling the latter does nothing here. */
.goog-te-gadget-simple {
    background: #fff !important;
    border: 1px solid #b9c2cc !important;
    border-radius: 4px !important;
    padding: 0.45rem 0.6rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.3 !important;
}
.goog-te-gadget-simple:hover { border-color: var(--navy-light) !important; }

/* ---------- Header ---------- */
header.masthead {
    background: var(--navy);
    color: #fff;
    padding: 2.25rem 0 2rem;
}
header.masthead h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.6rem, 5vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
header.masthead p {
    margin: 0;
    max-width: 48rem;
    color: #dce6f0;
    font-size: 1.0625rem;
}
.updated {
    margin-top: 1.25rem !important;
    font-size: 0.875rem;
    color: #a9c1d8 !important;
}

/* Compact masthead: the page's job is to get someone to a resource fast, so the
   banner does not take a screenful. */
.masthead-sub { padding: 1.5rem 0 1.375rem; }
.masthead-sub h1 { font-size: clamp(1.375rem, 3.5vw, 1.75rem); }
.masthead-sub p { font-size: 0.9375rem; }

/* ---------- Two-column shell ----------
   The sidebar is the category navigation and stays visible while the resource
   column scrolls.

   The sidebar is FIRST in the DOM deliberately. When this stacks on a phone the
   category list lands above the "offer support" cards. Someone who needs food
   or shelter should not scroll past an organisation form. Do not reorder it. */
.layout {
    display: grid;
    gap: 2rem;
    grid-template-columns: 17rem 1fr;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
    align-items: start;
}
@media (max-width: 56rem) {
    .layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

.sidenav { position: sticky; top: 1rem; }
@media (max-width: 56rem) { .sidenav { position: static; } }

.sidenav h2 {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin: 0 0 0.5rem;
}
.sidenav ul { list-style: none; margin: 0; padding: 0; }
.sidenav li { border-bottom: 1px solid var(--rule); }
.sidenav a {
    display: block;
    padding: 0.65rem 0.5rem;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--navy);
    min-height: 44px;
}
.sidenav a:hover { background: var(--surface); }

.btn {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    min-height: 44px;
}
.btn:hover { background: var(--navy-light); color: #fff; }

/* ---------- "Offer support" cards ----------
   Two side-by-side calls to action. They address different audiences and must not
   be merged: one is for ORGANISATIONS offering services, the other for
   INDIVIDUALS offering time. */
.actions {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.actioncard {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.25rem;
}
.actioncard h2 { margin: 0 0 0.5rem; font-size: 1.0625rem; color: var(--navy); }
.actioncard p { margin: 0 0 0.875rem; font-size: 0.9375rem; }
.actioncard p:last-child { margin-bottom: 0; }
.actioncard .fineprint { font-size: 0.8125rem; color: var(--muted); }

/* ---------- The four-card row above the layout ----------
   Four routes into the site, full width, above .layout.

   The auto-fit rule on .actions is wrong for four cards: minmax(19rem, 1fr)
   wraps them to 2x2 even on a wide screen. These are explicit column counts
   instead, so the row is 4 across, then 2x2, then stacked.

   The 56rem breakpoint is deliberately NOT reused here. .layout stacks at
   56rem; if the cards went single-column at the same width they would stack
   at the exact moment the page gets longest. They hold 2x2 down to 38rem so
   the phone reaches the category list sooner. */
.actions-top {
    margin: 1.5rem 0 0.5rem;
    grid-template-columns: repeat(4, 1fr);
}

/* The cards still end at the same height, because stretch is the grid default
   and nothing here overrides it. The buttons are deliberately NOT pushed to a
   common baseline: each one sits directly under its own copy, so it reads as
   belonging to the text above it rather than floating away from it in the
   shorter cards. Do not add margin-top:auto here. */
@media (max-width: 68rem) { .actions-top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 38rem) {
    .actions-top { grid-template-columns: 1fr; gap: 0.75rem; }
    /* Every pixel here is a pixel between someone and the category list. */
    .actions-top .actioncard { padding: 0.875rem 1rem; }
    .actions-top .actioncard h2 { font-size: 1rem; margin-bottom: 0.25rem; }
    .actions-top .actioncard p { margin-bottom: 0.625rem; }
}

/* Outline variant: a real action, but secondary to the primary card button, and
   it sends people off-site. */
.btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--navy);
    border-radius: 4px;
    min-height: 44px;
}
.btn-outline:hover {
    background: var(--navy);
    color: #fff;
}

/* Marks a link that leaves this site, so nobody is surprised by the jump.
   Sized to match .fineprint rather than inventing a number: both are muted
   supporting notes, and there is only one "small" step left before the text
   stops being comfortably readable.

   The size has to be set on `.actioncard p.external-note`, not on
   `.external-note` alone. Every one of these notes lives inside a card, and
   `.actioncard p` (0,1,1) outranks a bare `.external-note` (0,1,0), so an
   unscoped font-size here loses silently and the note keeps the card's 15px.
   That is what the old `margin-top: ... !important` was working around. With
   the specificity right, the !important is not needed. */
.external-note { color: var(--muted); }
.actioncard p.external-note {
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

/* ---------- Category sections ----------
   Live in the right-hand column; the sidebar links jump to them. */
section.category {
    padding-top: 2rem;
    scroll-margin-top: 1rem;
}
section.category h2 {
    font-size: 1.3125rem;
    color: var(--navy);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--rule);
}

ul.resources {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.resources > li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
}
ul.resources > li:last-child { border-bottom: 0; }

.resource-name {
    font-weight: 700;
    font-size: 1.0625rem;
    display: block;
}
.resource-detail {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
}
.resource-contact {
    margin: 0.4rem 0 0;
    font-size: 0.9375rem;
}
.resource-contact a { font-weight: 600; }
.resource-contact span + span::before {
    content: "\00b7";
    margin: 0 0.5rem;
    color: var(--rule);
}

/* Placeholder shown until verified resources are added to a category */
p.pending {
    margin: 0;
    padding: 1rem 1.125rem;
    background: var(--surface);
    border: 1px dashed #b9c2cc;
    border-radius: 4px;
    color: var(--muted);
    font-size: 0.9375rem;
}

/* ---------- One category at a time, WITHOUT JavaScript ----------

   Only the category named in the URL fragment is shown. The mechanism is the
   :target pseudo-class, so clicking a sidebar link is what selects a category;
   no script runs, the back button works, and a link to #food shares that
   category directly.

   The prompt sits LAST inside #all so the sibling combinator below can hide it
   once a category is targeted. Its DOM position never matters visually, because
   in the un-targeted state it is the only visible thing in the region.

   #all:target is the escape hatch: linking to #all targets the wrapper and the
   descendant rule reveals every category again. That is what keeps Ctrl+F
   usable, since find-in-page cannot see display:none content.

   :target is supported everywhere back to IE9, no progressive enhancement
   needed, and nothing here depends on :has(). */
.category { display: none; }
.category:target { display: block; }

#all:target .category { display: block; }
#all:target .category-prompt { display: none; }

.category:target ~ .category-prompt { display: none; }

.category-prompt {
    margin: 0;
    padding: 1.25rem 1.375rem;
    background: var(--surface);
    border-left: 4px solid var(--navy-light);
    border-radius: 4px;
    color: var(--ink);
}
.category-prompt .hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    color: var(--muted);
}

/* Sits under the sidebar list. Styled as a distinct action rather than inheriting
   the list-item look, flush against the last <li>, with the same weight and
   colour, it read as a sixteenth category and was easy to miss. That matters more
   than usual here: this link is the find-in-page mitigation, so it has to be
   noticed to do its job. */
.sidenav .showall {
    display: block;
    margin-top: 0.875rem;
    padding: 0.7rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--navy);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    min-height: 44px;
}
.sidenav .showall:hover {
    background: #e8edf2;
    border-color: var(--navy-light);
}

/* ---------- Highlight whichever category is open ----------
   Keyed off :target, the same state the one-at-a-time display already uses, so
   there is still no JavaScript: the back button, the forward button and a
   shared #link all land with the right item highlighted, because the URL is
   the only source of truth.

   It has to be written out one selector per category. :has() cannot correlate
   "the section that is :target" with "the sidebar link pointing at it", so
   there is no way to express this generically. Adding a category means adding
   a line here, which is easy to forget: the symptom is a category that shows
   its listings but never highlights in the sidebar.

   Unsupported in browsers older than Chrome/Edge 105, Safari 15.4, Firefox
   121. There the highlight is simply absent and nothing else changes, which is
   why this is safe to ship without a fallback. */
body:has(#childcare:target)      .sidenav a[href="#childcare"],
body:has(#cleanup:target)        .sidenav a[href="#cleanup"],
body:has(#clothing:target)       .sidenav a[href="#clothing"],
body:has(#housing:target)        .sidenav a[href="#housing"],
body:has(#evacuation:target)     .sidenav a[href="#evacuation"],
body:has(#financial:target)      .sidenav a[href="#financial"],
body:has(#food:target)           .sidenav a[href="#food"],
body:has(#legal:target)          .sidenav a[href="#legal"],
body:has(#medical:target)        .sidenav a[href="#medical"],
body:has(#mental-health:target)  .sidenav a[href="#mental-health"],
body:has(#pets:target)           .sidenav a[href="#pets"],
body:has(#prescriptions:target)  .sidenav a[href="#prescriptions"],
body:has(#transportation:target) .sidenav a[href="#transportation"],
body:has(#water:target)          .sidenav a[href="#water"],
body:has(#recovery:target)       .sidenav a[href="#recovery"],
body:has(#all:target)            .sidenav .showall {
    background: var(--navy);
    color: #fff;
}
/* The hover rule above is a plain .sidenav a:hover, so without this the
   highlight is lost the moment the pointer crosses the selected item. */
body:has(#childcare:target)      .sidenav a[href="#childcare"]:hover,
body:has(#cleanup:target)        .sidenav a[href="#cleanup"]:hover,
body:has(#clothing:target)       .sidenav a[href="#clothing"]:hover,
body:has(#housing:target)        .sidenav a[href="#housing"]:hover,
body:has(#evacuation:target)     .sidenav a[href="#evacuation"]:hover,
body:has(#financial:target)      .sidenav a[href="#financial"]:hover,
body:has(#food:target)           .sidenav a[href="#food"]:hover,
body:has(#legal:target)          .sidenav a[href="#legal"]:hover,
body:has(#medical:target)        .sidenav a[href="#medical"]:hover,
body:has(#mental-health:target)  .sidenav a[href="#mental-health"]:hover,
body:has(#pets:target)           .sidenav a[href="#pets"]:hover,
body:has(#prescriptions:target)  .sidenav a[href="#prescriptions"]:hover,
body:has(#transportation:target) .sidenav a[href="#transportation"]:hover,
body:has(#water:target)          .sidenav a[href="#water"]:hover,
body:has(#recovery:target)       .sidenav a[href="#recovery"]:hover,
body:has(#all:target)            .sidenav .showall:hover {
    background: var(--navy-light);
    color: #fff;
}

/* ---------- Footer ---------- */
footer {
    background: var(--navy);
    color: #dce6f0;
    padding: 2.5rem 0;
    font-size: 0.9375rem;
}
footer .orgs {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
footer h2 {
    font-size: 1rem;
    color: #fff;
    margin: 0 0 0.5rem;
}
footer p { margin: 0 0 0.25rem; }
footer a { color: #fff; }
/* Two logo treatments, because the two marks differ:
   .logo:       a REVERSED (white) logo, sits directly on the navy footer.
   .logo-boxed: a DARK logo, needs a white plate or it disappears into the navy.
   Using the wrong one makes a logo invisible rather than merely ugly. */
footer .logo,
footer .logo-boxed {
    display: block;
    max-width: 200px;
    height: auto;
    margin-bottom: 0.875rem;
}
footer .logo-boxed {
    background: #fff;
    padding: 0.5rem;
    border-radius: 3px;
}

/* ---------- Print (shelters and libraries print these pages) ---------- */
@media print {
    body { font-size: 11pt; color: #000; }
    .emergency, header.masthead, footer { background: #fff !important; color: #000 !important; }
    .emergency a, header.masthead p, footer a, footer, footer p { color: #000 !important; }
    .skip, .btn, .btn-outline, .translatebar { display: none !important; }
    /* Print as one flow: category list, then the resources. */
    .layout { display: block !important; }
    .sidenav { position: static !important; margin-bottom: 1.5rem; }
    section.category { padding-top: 1rem; page-break-inside: avoid; }
    /* MUST override the one-at-a-time rules. Without this, printing gives a
       single category instead of all fifteen, and these pages get printed and
       pinned up at shelters and libraries. */
    .category { display: block !important; }
    .category-prompt, .sidenav .showall { display: none !important; }
    a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
    a[href^="#"]::after { content: ""; }
}