/* ============================================================
   Brick by Brick — shared stylesheet (brickbybrickquilt.com)
   The shared shell for every page: design tokens, base type,
   site nav/header, form primitives, cards, buttons, footer.
   Page-specific CSS (the SVG map, search, result card) stays
   inline in index.php so the homepage remains self-contained
   for the one thing unique to it.
   ============================================================ */

/* ---------- Self-hosted Montserrat (SIL Open Font License) ----------
   Served from this site's own /fonts, same files as bigwes.com.
   Weights 400/500/600/700; headings use 700 (no 800 face shipped). */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/montserrat-400.woff2') format('woff2')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/montserrat-500.woff2') format('woff2')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/montserrat-600.woff2') format('woff2')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/montserrat-700.woff2') format('woff2')}

:root{
  --paper:#f4ece0;
  --paper-2:#efe4d4;
  --ink:#241d18;
  --ink-soft:#5c5046;
  --line:#d8cbb8;
  --clay:#9c3b23;
  --clay-deep:#7c2c19;
  --clay-2:#b0472b;
  --mortar:#c9bda9;
  --mortar-dark:#b7a992;
  /* Border colour for anything whose OUTLINE is the control — text fields, the
     ghost button, the search chooser. Split out from --mortar-dark (which stays
     the wall's empty-slot fill) because WCAG 1.4.11 wants a UI component's
     boundary at 3:1 and --mortar-dark only managed 2.31:1 against a white field
     and 1.84:1 against a card. Nothing else identified those controls either:
     the white fill is just 1.26:1 against --paper-2, so the border carried it
     alone. #8a7a63 measures 4.16:1 on white, 3.31:1 on --paper-2, 3.55:1 on
     --paper. Re-check all three if this is ever lightened. */
  --field-line:#8a7a63;
  --half:#cdbfa8;
  --amber:#ffb64d;
  --amber-soft:#ffd591;
  --ok:#2f7d4f;
  --focus:#1f6feb;
  --radius:14px;
  --shadow:0 6px 24px rgba(45,32,20,.16);
  --maxw:560px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Montserrat","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:20px 18px 48px}

/* ---------- Brand row (small, secondary; the map is the feature) ---------- */
.brand{display:flex;align-items:center;padding-top:12px;margin-bottom:16px}
.brand a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.brand .mark{width:30px;height:30px;display:block;border-radius:8px;flex:0 0 auto}
.brand .name{font-weight:700;font-size:.98rem;letter-spacing:-.01em}
.brand a:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* ---------- Page header / hero ---------- */
header.intro{padding-top:0}
.eyebrow{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay);font-weight:700;margin:0 0 6px;
}
h1{font-size:1.85rem;line-height:1.12;margin:0 0 8px;font-weight:700;letter-spacing:-.01em}
h2{font-size:1.25rem;line-height:1.2;margin:1.6em 0 .5em;font-weight:700;letter-spacing:-.01em}
.lede{color:var(--ink-soft);margin:0 0 22px;font-size:1rem;max-width:46ch}
p{margin:0 0 1em}

/* ---------- Cards ---------- */
.card{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.card + .card{margin-top:16px}

/* ---------- Form primitives (shared) ---------- */
label.field-label{display:block;font-weight:700;font-size:.95rem;margin-bottom:8px}
input[type="text"],input[type="email"],input[type="search"],textarea{
  width:100%;min-width:0;font:inherit;font-size:1.05rem;
  padding:13px 14px;
  border:1.5px solid var(--field-line);border-radius:10px;
  background:#fff;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
textarea{min-height:130px;resize:vertical;line-height:1.5}
/* `a` belongs in this list. Anchors used to be picked up one selector at a time
   (.brand a, .footer-nav a, .thanks .site), so the footer's Terms/Privacy links
   and the <a class="btn"> pair on the feedback success page fell back to the
   browser's own ring — adequate on its own, but a different indicator halfway
   down the page. The more specific rules below still override offset/radius. */
a:focus-visible,input:focus-visible,button:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;
}
/* An invalid field carries the error colour on its boundary as well as the text
   message above the form, so the field in error is never marked by colour alone. */
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--clay-deep)}
.hint{font-size:.82rem;color:var(--ink-soft);margin:10px 2px 0}

/* ---------- Buttons (shared) ---------- */
button{font-family:inherit;cursor:pointer;font-weight:700;border-radius:10px;border:0}
.btn{background:var(--clay);color:#fff;font-size:1.02rem;padding:13px 20px}
.btn:hover{background:var(--clay-deep)}
.btn.big{width:100%}
.btn-ghost{
  background:transparent;border:1.5px solid var(--field-line);color:var(--ink);
  padding:9px 14px;font-size:.9rem;
}
.btn-ghost:hover{border-color:var(--clay);color:var(--clay)}

/* ---------- Flash / status messages ---------- */
.flash{padding:11px 15px;border-radius:10px;margin-bottom:16px;font-weight:600;font-size:.95rem}
.flash.ok{background:#e4f0e8;color:#1f5b39;border:1px solid #b9d9c5}
.flash.warn{background:#f4e3dd;color:#7c2c19;border:1px solid #e0b9a9}

/* ---------- Footer (shared) ---------- */
footer{margin-top:30px;font-size:.8rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:16px}
footer a{color:var(--clay)}
/* Centred to line up with the nav pills above it (and the home page's
   #data-note, the only other thing that renders inside the footer). */
footer p{margin:0 0 .5em;text-align:center}

/* Credit line sits well clear of the nav pills above it, so the footer reads
   as two distinct blocks (navigation, then credit) rather than one stack. */
footer p.credit{margin-top:34px;font-size:0.9em;}

/* Legal links: last line of the footer, quieter than the nav pills above. */
footer p.legal-links{margin:12px 0 0;font-size:.75rem;color:var(--ink-soft)}
footer p.legal-links a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
footer p.legal-links a:hover{color:var(--clay)}
footer p.legal-links a[aria-current="page"]{color:var(--clay);font-weight:700}
footer p.legal-links span{margin:0 6px;opacity:.6}

/* ---------- Footer navigation (secondary; the site's primary nav lives here) ---------- */
.footer-nav{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 16px;padding:0}
/* Zero-height flex item: forces "Find your brick" onto a line of its own. */
.footer-nav .nav-break{flex-basis:100%;height:0;margin:0;padding:0;border:0}
.footer-nav a{
  display:inline-block;text-decoration:none;color:var(--clay);
  font-weight:700;font-size:.85rem;padding:6px 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper-2);
}
/* The three pills on the second line share ONE width. Sized to their labels
   they run 113/105/99px, and centring three unequal pills as a group leaves the
   MIDDLE pill ~7px right of true centre. That reads as the "Find a brick"
   button above being off-centre, even though it is exactly centred: the eye
   lines the lone button up with the pill directly beneath it. Equal widths put
   the middle pill on centre and the illusion goes.

   The tighter side padding is what makes this safe, and it is NOT cosmetic.
   The row has only ~5px of slack at 375px (iPhone SE), so equalising UPWARD to
   the widest label would push the nav to three lines on real phones — which is
   the primary case here, since visitors arrive by QR code. Trimming the padding
   first lets all three settle at 105.6px, total 332.8px, marginally NARROWER
   than the 333.5px they occupied before. Line-breaking is therefore unchanged
   at every width. If you ever relabel these, re-check the total against 333.5px
   before trusting it. */
.footer-nav .nav-break ~ a{min-width:6.6rem;padding-left:8px;padding-right:8px;text-align:center}

.footer-nav a:hover{border-color:var(--clay)}
.footer-nav a[aria-current="page"]{background:var(--clay);color:#fff;border-color:var(--clay)}
.footer-nav a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- Utility ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (min-width:600px){ h1{font-size:2.1rem} }