/* ═══════════════════════════════════════════════════════════════
   St Paul's Project 200 — styles.css
   Style Guide v1.0 implemented as CSS custom properties
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Nunito:wght@400;700;800&family=Pacifico&family=Caveat:wght@500;700&display=swap');

/* ─── TOKENS ─── */
:root {
  /* Brand colours */
  --crimson: #9B1B30;
  --gold: #C9A646;
  --cream: #F8F4E9;
  --charcoal: #333333;
  --olive: #6B7A4B;
  --olive-light: #E8EAE1;

  /* Dark tones */
  --deep-crimson: #1a0008;
  --dark-red: #3C0512;
  --near-black: #1a1a1a;
  --dark-surface: #2a2a2a;

  /* Status colours (admin) */
  --status-pending-bg: #fff8e1;
  --status-pending-text: #b07a00;
  --status-confirmed-bg: rgba(42,108,42,0.3);
  --status-confirmed-text: #7ecb7e;
  --status-overdue-bg: rgba(155,27,48,0.3);
  --status-overdue-text: #ff8a8a;
  --status-anon-bg: #E8EAE1;
  --status-anon-text: #6B7A4B;

  /* Brick palette */
  --brick-crimson: #9B1B30;
  --brick-dark-burgundy: #6B0F2A;
  --brick-aubergine: #4A1A4A;
  --brick-royal-purple: #5B3A8A;
  --brick-soft-purple: #8B5BAA;
  --brick-burnt-orange: #C4501A;
  --brick-gold: #C9A646;
  --brick-sage-green: #6B7A4B;
  --brick-slate-blue: #4A5568;

  /* Typography */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Nunito', sans-serif;
  --font-brick-pacifico: 'Pacifico', cursive;
  --font-brick-caveat: 'Caveat', cursive;

  /* W-T-CSS v4 (Lindsay feedback 23 Apr): any element that uses the Caveat handwritten
     brick font should render at weight 700 (bold) not the default 500. This makes the
     message strokes thicker and considerably more legible against dark brick colours. */
  --font-mono: 'Courier New', monospace;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;

  /* Border radius */
  --radius-brick: 3px;
  --radius-btn-sm: 6px;
  --radius-btn-lg: 8px;
  --radius-card: 12px;
  --radius-pill: 24px;

  /* Layout */
  --max-page: 1100px;
  --max-hero-text: 840px;
  --max-form: 640px;

  /* Hero gradient */
  --hero-gradient: linear-gradient(160deg, rgba(60,5,18,.92) 0%, rgba(155,27,48,.88) 55%, rgba(50,4,16,.95) 100%);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--charcoal);
  background: #fdfcf8; /* W-T-CSS v3: was var(--cream) #F8F4E9 — all pages/sections now share the lighter Make-a-Difference background for visual consistency */
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ─── CONTAINER ─── */
.container { max-width: var(--max-page); margin: 0 auto; padding: 0 40px; }

/* ─── NAV ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgb(51,51,51); /* W-T-CSS v2: was rgba(51,51,51,0.96) — the 4% translucency let content bleed through above the nav, creating an appearance of letter-tops being clipped. Fully opaque now. */
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 0 40px; display: flex; align-items: center; height: 56px; /* W-T-CSS: 48 -> 56 */
}
.nav-brand {
  font-family: var(--font-display); color: var(--gold);
  font-size: 0.92rem; font-weight: 700; white-space: nowrap; text-decoration: none;
}
/* W32: short brand label for narrow viewports. Prevents brand text from
   crashing into the first nav link on iPhone-width screens. */
.nav-brand .brand-full { display: inline; }
.nav-brand .brand-short { display: none; }
.nav-links { display: flex; gap: 32px; margin-left: auto; }
.nav-link {
  color: rgba(255,255,255,0.8); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  transition: color 0.2s; padding: 4px 0;
  line-height: 1.5; /* W-T-CSS v2: explicit line-height — earlier screenshots showed letter-tops (ABP ascenders) being clipped, possibly from tighter line-height inherited elsewhere */
}
/* BL-01 v2: short link labels for narrow viewports — prevents nav link text from wrapping
   to two lines on iPhone width, which overflowed the nav bar height. */
.nav-link .link-full { display: inline; }
.nav-link .link-short { display: none; }
.nav-link:hover, .nav-link.active { color: var(--gold); }
.nav-gold-line {
  position: fixed; top: 56px; left: 0; right: 0; /* W-T-CSS: follow .nav height 48 -> 56 */
  height: 3px; background: var(--gold); z-index: 100;
}

/* W-T-CSS: every in-page anchor should land clear of the fixed nav + gold line.
   Nav is 56px high + 3px gold line = 59px. +1px just to clear the seam. 
   Previously 69px which left a cream gap visible above dark sections. */
[id] { scroll-margin-top: 60px; }

/* ─── SIDE ICONS ─── */
.side-icons {
  position: fixed; right: 12px; top: 55%; transform: translateY(-50%);
  z-index: 99; display: flex; flex-direction: column; gap: 8px;
}
.side-icon {
  width: 48px; height: 48px; min-width: 48px; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; font-size: 18px; font-weight: 700;
  transition: all 0.2s; border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.side-icon.info  { background: var(--olive); color: #fff; }
.side-icon.email { background: var(--charcoal); color: #fff; }
.side-icon.help  { background: var(--gold); color: #3a2800; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-block; border: none; cursor: pointer;
  font-family: var(--font-body); letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 800; text-decoration: none;
  transition: all 0.25s; line-height: 1.2;
}
.btn-primary {
  background: #111; color: #fff; border-radius: var(--radius-btn-lg);
  padding: 18px 56px; font-size: 0.85rem;
}
.btn-primary:hover { background: #333; transform: translateY(-2px); }
.btn-gold {
  background: var(--gold); color: #3a2800; border-radius: var(--radius-btn-lg);
  padding: 18px 48px; font-size: 0.85rem;
}
.btn-gold:hover { background: #b8922a; transform: translateY(-2px); }
.btn-secondary {
  background: var(--olive); color: #fff; border-radius: var(--radius-btn-sm);
  padding: 14px 36px; font-size: 0.82rem;
}
/* W-T-CSS v5 (Lindsay, 23 Apr evening): hover on Pledge was flipping the button from olive green
   to bright gold with a 2px lift — colour flip was jarring. Now: keeps the 2px lift (matches
   Donate button next to it for visual parity) and subtly darkens the olive, no colour flip. */
.btn-secondary:hover { background: #5b6a3f; color: #fff; transform: translateY(-2px); }
.btn-ghost {
  background: transparent; color: var(--crimson);
  border: 1.5px solid var(--crimson); border-radius: var(--radius-btn-sm);
  padding: 13px 36px; font-size: 0.82rem;
}
.btn-ghost:hover { background: var(--crimson); color: #fff; }

/* ─── FORMS ─── */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--olive); margin-bottom: 7px;
}
.form-input {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid #D3D1C7; border-radius: var(--radius-btn-lg);
  font-family: var(--font-body); font-size: 0.9rem;
  color: var(--charcoal); background: #fff; outline: none;
  transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--gold); }
.form-input::placeholder { color: #aaa; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ─── HERO ─── */
.hero {
  min-height: 100vh; position: relative; background: var(--deep-crimson);
  overflow: hidden; display: flex; flex-direction: column; padding-top: 51px;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: var(--hero-gradient); z-index: 1;
}
.hero-title-bar {
  position: relative; z-index: 2; text-align: center; padding: 52px 40px 0;
}
.hero-title-bar h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.4rem); color: #fff; line-height: 1.15;
}
.hero-title-bar .gold { color: var(--gold); }
.hero-title-bar .dash { color: rgba(255,255,255,0.35); margin: 0 10px; }
.hero-body {  position: relative; z-index: 2; flex: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center; max-width: 1200px; margin: 0 auto; /* W-T-CSS: start -> center, text now centers vertically against the church image */
  padding: 32px 56px 56px; width: 100%;
}
.hero-left { text-align: center; padding-top: 8px; }
.hero-tagline {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(0.92rem, 1.6vw, 1.15rem); color: var(--gold);
  margin-bottom: 28px; line-height: 1.5;
}
.hero-text {
  font-size: 0.9rem; color: rgba(255,255,255,0.78);
  line-height: 1.95; margin-bottom: 16px; text-align: center;
}
.hero-thanks {
  font-family: var(--font-display); font-style: italic;
  color: var(--gold); font-size: 0.92rem;
  margin-top: 20px; margin-bottom: 32px;
}
/* W47: "digital wall" accent inside hero para 2 — gold italic highlight draws the eye. */
.hero-text .wall-accent {
  color: var(--gold);
  font-weight: 700;
  font-style: italic;
}
/* W47: scroll-hint replaces the old "Thank you for your support" line. Pulls visitor down
   to the home-wall section with a gold label + bouncing chevron. Universal scroll grammar. */
.scroll-hint {
  text-align: center;
  margin-top: 32px;
  margin-bottom: 16px;
}
.scroll-hint-text {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 12px;
}
.chevron {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  animation: chevron-bounce 1.8s ease-in-out infinite;
}
@keyframes chevron-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.75; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chevron { animation: none; opacity: 1; }
}
.hero-cta-wrap { text-align: center; }
.hero-right { display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
.hero-image-frame {
  width: 100%; max-width: 520px; border-radius: 10px; overflow: hidden;
  border: 3px solid rgba(201,166,70,0.35);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.hero-image-frame img { width: 100%; height: auto; display: block; object-fit: cover; }
.hero-image-caption {
  margin-top: 10px; font-size: 0.64rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
  font-weight: 700; text-align: center;
}

/* ─── SECTIONS ─── */
section { padding: 72px 0; }
.section-eyebrow {
  font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--olive); font-weight: 700; margin-bottom: 12px;
}
.section-heading {
  font-family: var(--font-display); font-size: 1.65rem;
  color: var(--deep-crimson); margin-bottom: 6px; line-height: 1.25;
}
.section-sub {
  font-family: var(--font-display); font-style: italic;
  color: var(--gold); font-size: 1rem; margin-bottom: 32px;
}

/* ─── ABOUT SECTION ─── */
.about-section { background: #fdfcf8; padding: 16px 0 24px; } /* W-T-CSS v3: cream -> #fdfcf8 to match .home-wall-section — visual consistency across sections. */
.about-heading {
  font-family: var(--font-display);
  font-size: 2rem; /* W-T-CSS v3: was clamp(1.8rem, 3.5vw, 2.6rem) — fixed at 2rem so all section headings match in size */
  color: #1a1a1a; /* W-T-CSS v3: deep-crimson -> near-black, per request to make all page headers black and consistent */
  text-align: center;
  margin-bottom: 10px; font-weight: 700;
}
.about-intro {
  font-size: 0.92rem; color: #555; line-height: 1.7;
  text-align: center; max-width: 780px; margin: 0 auto 14px; /* W-T-CSS: line-height 1.88 -> 1.7, margin-bottom 48 -> 14 */
}
/* W-T-CSS: new — 'Key principles' bulleted list, centered with narrow max-width so it visually centers */
.about-principles {
  max-width: 440px; margin: 0 auto 18px; padding-left: 20px;
  line-height: 1.55; font-size: 0.92rem; color: #555;
}
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 0; } /* W-T-CSS: 48 -> 0, about-cta provides its own spacing */
.about-card { position: relative; }
.about-card-img {
  width: 100%; height: 320px; border-radius: 10px; overflow: hidden; /* W48: bumped 260 → 320 for more visual weight */
  position: relative;
  background: var(--cream);  /* W48: visible around contained images on the foyer card */
}
.about-card-img img { width: 100%; height: 100%; object-fit: cover; }
/* W48: the Proposed foyer image is a wide landscape composite — use `contain` so the
   full scene (including the framed donation wall on the right) is visible, not cropped. */
.about-card-img img[src*="new-foyer"] { object-fit: contain; }
.about-card-label {
  position: absolute; top: 12px; left: 12px;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 4px; z-index: 2;
}
.label-current { background: var(--charcoal); color: #fff; }
.label-proposed { background: var(--crimson); color: #fff; }
.about-card-text { font-size: 0.85rem; color: #555; line-height: 1.7; margin-top: 14px; }
.about-cta { text-align: center; margin-top: 24px; } /* W-T-CSS: 8 -> 24, now that about-grid has no bottom margin this provides the visual gap */
.about-cta-text {
  font-family: var(--font-display); font-style: italic;
  color: var(--gold); font-size: 1rem; margin-bottom: 20px;
}

/* ─── CONTENT GRID (why now, etc.) ─── */
.content-section { background: #fff; }
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.content-text p { font-size: 0.95rem; color: #555; line-height: 1.88; margin-bottom: 16px; }
.content-text strong { color: var(--gold); }
.content-image { border-radius: var(--radius-card); overflow: hidden; }
.content-image img { width: 100%; height: 100%; object-fit: cover; }

/* ─── PLAN CARDS ─── */
.plan-section { background: var(--cream); }
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.plan-card {
  background: #fff; border-radius: var(--radius-card);
  padding: 36px 40px; border-left: 4px solid var(--gold);
}
.plan-card h4 {
  font-family: var(--font-display); font-size: 1.2rem;
  color: var(--crimson); margin-bottom: 12px;
}
.plan-card p { font-size: 0.9rem; color: #555; line-height: 1.85; }

/* ─── THREE WAYS CARDS ─── */
.ways-section { background: #fff; }
.ways-heading {
  font-family: var(--font-display); font-size: 1.55rem;
  color: var(--deep-crimson); text-align: center; margin-bottom: 8px;
}
.ways-sub {
  font-family: var(--font-display); font-style: italic;
  color: var(--gold); font-size: 0.95rem;
  text-align: center; margin-bottom: 36px;
}
.ways-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.way-card {
  background: var(--cream); border-radius: var(--radius-card);
  padding: 32px 28px; text-align: center; transition: transform 0.2s;
}
.way-card:hover { transform: translateY(-4px); }
.way-card .icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-size: 1.4rem;
}
.way-card h4 {
  font-family: var(--font-display); font-size: 1.02rem;
  color: var(--deep-crimson); margin-bottom: 10px;
}
.way-card p { font-size: 0.84rem; color: #666; line-height: 1.75; }

/* ─── PROGRESS BAR ─── */
.progress-wrap { margin-bottom: 40px; }
.progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.progress-label { font-size: 0.82rem; font-weight: 700; color: var(--charcoal); }
.progress-pct { font-size: 0.88rem; font-weight: 800; color: var(--gold); }
.progress-track {
  height: 28px; background: #e5e5e5; border-radius: 14px;
  overflow: hidden; margin-bottom: 14px;
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, #b8922a, var(--gold));
  border-radius: 14px; transition: width 1.5s ease-out;
}
.progress-bottom { display: flex; justify-content: space-between; align-items: baseline; }
.progress-raised { font-size: 1.15rem; font-weight: 700; color: var(--charcoal); }
.progress-raised em { color: var(--gold); font-style: normal; }
.progress-remain { font-size: 0.78rem; color: #999; }

/* ─── PROGRESS STATS BAND ─── */
.progress-band { background: var(--charcoal); padding: 44px 40px; } /* W-T-CSS: 64 -> 44 vertical */
/* W43 v2: inline variant — progress-band sits inside home-wall-section. Olive-light background
   picks up the warm sage palette already on site; crimson text for numbers and heading; olive
   accents for the stat-line separators. Scoped overrides so the standalone charcoal progress-band
   on /wall isn't affected. */
.progress-band.progress-inline {
  background: var(--olive-light);
  padding: 40px 24px;
  margin: 32px 0 0;
  border-radius: 8px;
}
.progress-band.progress-inline .progress-band-heading { color: var(--crimson); }
.progress-band.progress-inline .stat-num { color: var(--crimson); }
.progress-band.progress-inline .stat-num.gold { color: var(--gold); }  /* 2028 stays gold */
.progress-band.progress-inline .stat-label { color: rgba(51,51,51,0.55); }
.progress-band.progress-inline .stat-line { background: var(--olive); }
@media (max-width: 480px) {
  .progress-band.progress-inline { padding: 28px 16px; margin-top: 24px; }
}
.progress-band-heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #fff; text-align: center; margin-bottom: 48px; font-weight: 700;
}
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; max-width: var(--max-page); margin: 0 auto;
}
.stat-item { text-align: center; }
.stat-line { width: 36px; height: 3px; background: var(--gold); margin: 0 auto 14px; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: #fff; font-weight: 700; margin-bottom: 6px;
}
.stat-num.gold { color: var(--gold); }
.stat-label {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); font-weight: 700;
}

/* ─── GOLD DIVIDER ─── */
.gold-divider { height: 4px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ─── CTA BAND ─── */
.cta-band {
  background: var(--hero-gradient);
  text-align: center; padding: 40px 40px; /* W-T-CSS: 64 -> 40 */
}
.cta-band h3 {
  font-family: var(--font-display); font-size: 1.6rem;
  color: #fff; margin-bottom: 8px;
}
.cta-band p {
  font-family: var(--font-display); font-style: italic;
  font-size: 1rem; color: var(--gold); margin-bottom: 32px;
}

/* ─── HOME WALL SECTION (W42) ─── */
.home-wall-section {
  background: #fdfcf8;
  padding: 16px 0 48px; /* W-T-CSS v2: 56 -> 16 top (too much cream above heading). Bottom unchanged. */
  /* W-T-CSS v3: olive border-top removed — with sections now sharing one background, an olive seam is jarring */
}

/* W-T-CSS v3: unify the Donate page h1 with the About / Make-a-Difference section headings.
   Donate h1 inline styles were removed from donate.html (see W-T-25), so this rule now
   handles all of its styling cleanly. */
.donate-compact h1 {
  font-size: 2rem;
  color: #1a1a1a;
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}
.home-wall-heading {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a; /* W-T-CSS v3: crimson -> black for consistency across section headings */
  text-align: center;
  margin: 0 0 12px;
}
.home-wall-intro {
  max-width: 880px; /* W-T-CSS v2: 640 -> 880 so the 'Hover on/tap a brick to see who has already supported Project 200 and what it means to them.' sentence fits on one line */
  margin: 0 auto 28px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #555;
}
/* W-T-CSS v3: when two .home-wall-intro paragraphs sit back-to-back, close the gap between them —
   they're meant to read as a single thought split across two lines, not two distinct paragraphs. */
.home-wall-intro + .home-wall-intro { margin-top: -20px; }
@media (max-width: 480px) {
  .home-wall-section { padding: 40px 0 32px; }
  .home-wall-heading { font-size: 1.5rem; }
  .home-wall-intro { font-size: 0.88rem; padding: 0 8px; }
}
/* ─── WALL ─── */
.wall {
  background: #fff; border-radius: var(--radius-card);
  padding: 20px; min-height: 320px; border: 1px solid var(--olive-light);
}
.wall-row { display: flex; gap: 5px; margin-bottom: 5px; flex-wrap: wrap; }
.brick {
  height: 44px; border-radius: var(--radius-brick);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.15s; position: relative;
  /* NOTE: no overflow:hidden here — the tooltip (.brick-tooltip) is a child
     positioned absolutely above the tile and needs to escape these bounds.
     Text clipping is enforced at the span level below (W31). */
}
.brick:hover { transform: scale(1.05); z-index: 2; }
.brick span {
  display: -webkit-box; max-width: 100%;
  font-size: 0.62rem; color: rgba(255,255,255,0.92); font-weight: 600;
  letter-spacing: 0.01em; text-align: center; padding: 2px 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  line-height: 1.25;
  white-space: normal; word-break: break-word; overflow-wrap: break-word;
  /* W31: clip long dedications at 3 lines. Full text remains in .brick-tooltip.
     -webkit-line-clamp works on iOS Safari, Android Chrome, and desktop Chrome/Firefox. */
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.brick.donated { box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }
/* W45: empty bricks now cream with faint olive-light border — recede into the cream paper
   background so donated bricks visually dominate. Border preserves grid structure and
   click-affordance (empty bricks are <a href="/donate"> links). */
.brick.empty {
  background: var(--cream);
  box-shadow: none;
  border: 1px solid var(--olive-light);
}
.brick.empty:hover {
  background: var(--olive-light);
  border-color: var(--olive);
}

/* Brick widths */
.bw1 { width: 90px; } .bw2 { width: 130px; } .bw3 { width: 80px; }
.bw4 { width: 110px; } .bw5 { width: 100px; } .bw6 { width: 120px; }

/* ─── WALL LEGEND ─── */
.legend { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.legend-colours { display: flex; gap: 4px; }
.legend-swatch { width: 16px; height: 16px; border-radius: 2px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); }
.legend-label { font-size: 0.76rem; color: #555; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.legend-empty { width: 16px; height: 16px; border-radius: 2px; background: var(--cream); border: 1px solid var(--olive-light); } /* W45: match new empty-brick style */

/* ─── BRICK DETAIL TOOLTIP ─── */
.brick-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); background: #fff; color: var(--charcoal);
  min-width: 160px; max-width: 220px;
  padding: 10px 14px; border-radius: var(--radius-btn-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  font-size: 0.8rem; z-index: 10; pointer-events: none; opacity: 0;
  transition: opacity 0.15s;
}
.brick-tooltip .tooltip-name { font-size: 0.82rem; font-weight: 700; margin-bottom: 4px; }
.brick-tooltip .tooltip-msg { font-size: 0.88rem; line-height: 1.4; color: #666; font-style: italic; word-break: break-word; }
.brick:hover .brick-tooltip { opacity: 1; }

/* Column-aware positioning — keeps tooltips inside the viewport on narrow screens.
   Assumes 7-column wall; update nth-child rules if COLS changes in core.js. */
.wall-row > .brick:nth-child(1) .brick-tooltip,
.wall-row > .brick:nth-child(2) .brick-tooltip {
  left: 0; transform: translateX(0);
}
.wall-row > .brick:nth-child(6) .brick-tooltip,
.wall-row > .brick:nth-child(7) .brick-tooltip {
  left: auto; right: 0; transform: translateX(0);
}

/* ─── THANK-YOU MODAL (Dex) ─── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 200; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content {
  background: #fff; border-radius: var(--radius-card);
  padding: 48px; max-width: 480px; width: 90%; text-align: center;
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-content h2 {
  font-family: var(--font-display); color: var(--crimson);
  font-size: 1.6rem; margin-bottom: 12px;
}
.modal-content p { font-size: 0.92rem; color: #555; line-height: 1.8; margin-bottom: 20px; }
.modal-close {
  background: var(--gold); color: #3a2800; border: none;
  padding: 12px 36px; border-radius: var(--radius-btn-lg);
  font-family: var(--font-body); font-weight: 800;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: background 0.2s;
}
.modal-close:hover { background: #b8922a; }

/* ─── POPUPS (help, charity, address) ─── */
.popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 200; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.popup-overlay.active { opacity: 1; pointer-events: auto; }
.popup {
  background: #fff; border-radius: var(--radius-card);
  padding: 36px; max-width: 440px; width: 90%;
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}
.popup h3 {
  font-family: var(--font-display); color: var(--crimson);
  font-size: 1.2rem; margin-bottom: 12px;
}
.popup p { font-size: 0.88rem; color: #555; line-height: 1.8; margin-bottom: 12px; }
.popup a { color: var(--gold); text-decoration: underline; }
.popup-close {
  display: inline-block; margin-top: 12px;
  background: var(--olive); color: #fff; border: none;
  padding: 10px 28px; border-radius: var(--radius-btn-sm);
  font-family: var(--font-body); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: background 0.2s;
}
.popup-close:hover { background: var(--gold); color: #3a2800; }

/* ─── FOOTER ─── */
footer {
  background: var(--near-black); color: rgba(255,255,255,0.85); /* W-T-CSS: 0.5 -> 0.85 — footer was too faint */
  padding: 52px 40px 8px; font-size: 0.82rem; line-height: 1.85; /* W-T-CSS: bottom padding 0 -> 8 so copyright row and social icon have breathing room */
}
.footer-inner {
  max-width: var(--max-page); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px; padding-bottom: 24px; /* W-T-CSS: 36 -> 24 */
}
.footer-col .brand-text {
  font-family: var(--font-display); color: var(--gold);
  font-size: 1.1rem; font-weight: 700; margin-bottom: 10px;
}
.footer-col p { color: rgba(255,255,255,0.8); line-height: 1.85; } /* W-T-CSS: 0.45 -> 0.8 */
.footer-col a {
  color: rgba(255,255,255,0.8); text-decoration: none; /* W-T-CSS: 0.45 -> 0.8 */
  display: block; line-height: 2.2; transition: color 0.15s;
}
.footer-col a:hover { color: var(--gold); }
.footer-heading {
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.9); font-weight: 700; margin-bottom: 14px; /* W-T-CSS: 0.6 -> 0.9 */
}
.footer-bottom {
  max-width: var(--max-page); margin: 0 auto; padding: 18px 0; /* W-T-CSS: 20 -> 18 (was 12, but 44px social icon needs more room) */
  border-top: 1px solid rgba(255,255,255,0.12); /* W-T-CSS: 0.08 -> 0.12 — divider slightly more visible alongside brighter text */
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; color: rgba(255,255,255,0.7); /* W-T-CSS: 0.25 -> 0.7 */
}
.footer-bottom a { color: rgba(255,255,255,0.7); text-decoration: underline; cursor: pointer; } /* W-T-CSS: 0.25 -> 0.7 */
.footer-bottom a:hover { color: var(--gold); }
.social-icons { display: flex; gap: 8px; }
.social-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 800; color: #fff;
  text-decoration: none; transition: opacity 0.2s;
}
.social-icon:hover { opacity: 0.8; }

/* ─── DONATION FORM SPECIFIC ─── */
/* W-T-CSS v4 (Lindsay, 23 Apr): force Caveat handwritten brick font to weight 700.
   Covers three application styles: inline style attribute, dedicated class, and 
   elements whose computed font happens to be Caveat (via CSS variable). The !important
   is necessary because JS often sets font-weight via inline style too. */
[style*="Caveat"],
.font-caveat,
.font-handwritten,
.brick[data-font="caveat"],
.brick[data-font="handwritten"],
.brick-preview[data-font="caveat"],
.brick-preview[data-font="handwritten"] {
  font-weight: 700 !important;
}

.brick-preview {
  border-radius: var(--radius-brick); padding: 16px 20px;
  min-height: 80px; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); transition: all 0.3s;
}
.brick-preview span {
  color: rgba(255,255,255,0.92); font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4); text-align: center;
}

/* W30 — Brick designer layout. Desktop: 2-col form+preview. Mobile (<=768px): stack with preview ON TOP
   so donor sees the live preview update immediately as they type the dedication (which is field #1). */
.designer-grid {
  display: flex; gap: 32px; align-items: flex-start;
}
.designer-form {
  flex: 1;
  min-width: 0; /* allow flex item to shrink below content width — prevents inner scrollers forcing width */
}
.designer-preview {
  width: 180px; flex-shrink: 0;
  position: sticky; top: 90px; padding-top: 28px;
}
@media (max-width: 768px) {
  .designer-grid { flex-direction: column; gap: 16px; }
  .designer-preview {
    width: 100%; position: static; padding-top: 0;
    order: -1;  /* preview above form on mobile */
  }
}
.colour-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.colour-swatch {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border-radius: var(--radius-brick); cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
  border: 3px solid transparent; transition: border-color 0.15s;
}
.colour-swatch.selected { border-color: var(--gold); }
.font-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.font-option {
  padding: 10px 16px; border-radius: var(--radius-btn-sm);
  border: 1.5px solid #D3D1C7; cursor: pointer; font-size: 0.85rem;
  transition: all 0.15s; background: #fff; min-height: 44px;
  display: flex; align-items: center;
}
.font-option.selected { border-color: var(--gold); background: rgba(201,166,70,0.08); }
.char-counter {
  font-size: 0.72rem; color: #999; text-align: right; margin-top: 4px;
  padding-right: 4px; /* keep '/30' from clipping off the right edge on narrow viewports */
}
.char-counter.warn { color: var(--crimson); font-weight: 700; }
.privacy-notice {
  background: var(--olive-light); border-radius: var(--radius-btn-lg);
  padding: 16px 20px; font-size: 0.78rem; color: #666; line-height: 1.7;
  margin-bottom: 24px;
}

/* ─── RETURNING DONOR SECTION ─── */
.returning-donor {
  background: var(--olive-light); border-radius: var(--radius-card);
  padding: 24px 28px; margin-bottom: 24px;
}
.returning-donor h3 {
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--deep-crimson); margin-bottom: 12px;
}
.returning-brick {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.returning-brick:last-child { border-bottom: none; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .nav { padding: 0 16px; }
  .nav-links { gap: 14px; }
  .nav-link { font-size: 0.6rem; letter-spacing: 0.08em; }
  .hero-body { grid-template-columns: 1fr; padding: 24px 24px 40px; }
  .hero-right { order: -1; }
  .about-grid { grid-template-columns: 1fr; }
  .content-grid { grid-template-columns: 1fr; }
  .plan-cards { grid-template-columns: 1fr; }
  .ways-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer-inner { grid-template-columns: 1fr; }
  .container { padding: 0 20px; }
  section { padding: 48px 0; }
  .side-icons { display: none; }
}
@media (max-width: 480px) {
  .nav-brand { font-size: 0.78rem; }
  .nav-brand .brand-full { display: none; }         /* W32 */
  .nav-brand .brand-short { display: inline; }      /* W32 */
  .nav-link .link-full { display: none; }           /* BL-01 v2 */
  .nav-link .link-short { display: inline; }        /* BL-01 v2 */
  .nav-links { gap: 10px; }
  .nav-link { font-size: 0.55rem; }
  .hero-title-bar h1 { font-size: 1.6rem; }
  .hero-body { padding: 20px 16px 32px; }
  .btn-primary { padding: 16px 32px; font-size: 0.78rem; }
  .about-card-img { height: 200px; }
  .brick { height: 44px; } /* maintain 44px touch target */
  .form-input { font-size: 16px; } /* prevent iOS auto-zoom on input focus */
  .stats-row { grid-template-columns: 1fr; gap: 24px; }
}