/* ═══════════════════════════════════════════════════════════════════════════
   FAMILY — CIVIC
   Food banks · ESL · recovery · benevolence · bilingual congregations · schools

   Built from what these churches' websites actually are, not from what a
   church website is assumed to be. Church Community Services in Elkhart, the
   clearest real example, navigates like a social-services agency: Programs ·
   Hours · Resources · Volunteer · Donate · En español — with a complete parallel
   Spanish menu. Watermark runs "Care and Recovery" and "Watermark en Español"
   in its primary nav. Ethos runs a "Care Center / Centro de Cuidado". Capitol
   Hill Baptist puts Accessibility in the nav.

   The first version of this family took that research too far. It concluded
   that WORSHIP HAS A PAGE AND IS NOT THE FRONT PAGE, and shipped a homepage
   that opened on "Get help / Lend a hand", carried no photograph at all, and
   mentioned the church once, near the bottom, under the heading "There is a
   church here too". It was a well-built social-services website. It was not
   recognisably a church, which is fatal for a template that has to be picked
   off a page of thumbnails by someone searching for a church template.

   Corrected premise: this family serves churches whose front door is their
   outreach, so the homepage does BOTH, in this order —

       who we are and when we worship,   (the noticeboard)
       then what is open right now and how to get it,
       in both languages, above the fold.

   The two doorways and the live opening-hours board survive intact; they are
   still the best thing here. They now sit under a church instead of instead
   of one.

   The visual language is CIVIC WAYFINDING — municipal enamel signage, transit
   boards, library and public-health notices. Public Sans throughout (it is
   literally the US federal typeface), solid colour blocks rather than cards,
   status by colour AND by word, and the largest legible type this system has.
   Nothing here is decorative; every block is a sign.

   Explicitly not: the cathedral chrome, the broadside, the bound book, hero
   photographs with scrims, gradients, rounded cards, or the warm off-white
   ground that three of the four families accidentally shared.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* One face, the whole way down. A public notice is not the place to be
     showing off a second typeface. */
  --font-display: "Public Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Public Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

  /* A faintly green-grey ground — the colour of institutional paint and
     enamel signage. Measurably a different hue from the other three families
     (violet stone 264°, bleached paper ~60°, newsprint 40°); this sits at
     ~120°, so no two families read as the same surface. */
  --slate-050: #FFFFFF;
  --slate-100: #F4F6F4;
  --slate-200: #E7ECE8;
  --slate-300: #D3DBD5;
  --slate-700: #46504A;
  --slate-900: #171C19;

  /* Vitreous enamel green — the colour of old street signs and park boards.
     Deep enough to carry white type at any size. */
  --enamel:  #1B5140;
  --signal:  #A3261D;   /* closed, urgent, "do not"          */
  --caution: #7A5300;   /* closing soon, limited, waitlist    */

  --bg:          var(--slate-100);
  --bg-raised:   var(--slate-050);
  --bg-sunken:   var(--slate-200);
  --fg:          var(--slate-900);
  --fg-muted:    var(--slate-700);
  --line:        var(--slate-300);
  --line-strong: var(--slate-900);

  --bg-invert:    var(--slate-900);
  --fg-invert:    #EDF1EE;
  --line-invert:  #3A443E;
  --muted-invert: #A6B0A9;

  --accent:      var(--enamel);
  --accent-fg:   #FFFFFF;

  /* Bigger than the rest of the system, on purpose. This family is read by
     people in a hurry, in a car park, on a cracked phone screen, sometimes in
     their second language. */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.125rem;
  --t-md:   1.25rem;
  --t-lg:   clamp(1.4rem,  1.15rem + 1vw,   1.75rem);
  --t-xl:   clamp(1.7rem,  1.35rem + 1.6vw, 2.3rem);
  --t-2xl:  clamp(2.1rem,  1.6rem + 2.4vw, 3rem);
  --t-3xl:  clamp(2.5rem,  1.8rem + 3.4vw, 3.9rem);

  --leading-tight: 1.1;
  --leading-snug:  1.32;
  --leading-body:  1.6;
  --tracking-label: 0.08em;

  --measure:      34rem;
  --measure-wide: 48rem;
  --frame:        78rem;     /* wider than the others: this is a board, not a page */
  --gutter:       clamp(1.25rem, 4vw, 3rem);

  /* Signage has square corners and no shadows; it is painted metal. */
  --radius:      0;
  --radius-arch: 0;
  --shadow:      none;

  --hair:   1px solid var(--line);
  --rule:   3px solid var(--fg);
  --border:        var(--hair);
  --border-strong: var(--rule);

  --focus: 3px solid var(--enamel);
  --focus-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --slate-050: #1D231F;
    --slate-100: #141916;
    --slate-200: #101410;
    --slate-300: #333D36;
    --slate-700: #A3ADA6;
    --slate-900: #E9EFEA;

    --bg:          var(--slate-100);
    --bg-raised:   var(--slate-050);
    --bg-sunken:   var(--slate-200);
    --fg:          var(--slate-900);
    --fg-muted:    var(--slate-700);
    --line:        var(--slate-300);
    --line-strong: var(--slate-900);

    --enamel:  #6FBFA0;
    --signal:  #F0796C;
    --caution: #D9A93C;
    --accent-fg: #10150F;

    --bg-invert:    #EDF1EE;
    --fg-invert:    #141916;
    --line-invert:  #C4CEC7;
    --muted-invert: #4B554E;
  }
}

:root[data-theme="dark"] {
  --slate-050: #1D231F;
  --slate-100: #141916;
  --slate-200: #101410;
  --slate-300: #333D36;
  --slate-700: #A3ADA6;
  --slate-900: #E9EFEA;

  --bg:          var(--slate-100);
  --bg-raised:   var(--slate-050);
  --bg-sunken:   var(--slate-200);
  --fg:          var(--slate-900);
  --fg-muted:    var(--slate-700);
  --line:        var(--slate-300);
  --line-strong: var(--slate-900);

  --enamel:  #6FBFA0;
  --signal:  #F0796C;
  --caution: #D9A93C;
  --accent-fg: #10150F;

  --bg-invert:    #EDF1EE;
  --fg-invert:    #141916;
  --line-invert:  #C4CEC7;
  --muted-invert: #4B554E;
}

/* tokens.css declares :root[data-theme="light"] and outranks this file's plain
   :root, so an explicit switch to light has to restate the whole palette. */
:root[data-theme="light"] {
  --slate-050: #FFFFFF;
  --slate-100: #F4F6F4;
  --slate-200: #E7ECE8;
  --slate-300: #D3DBD5;
  --slate-700: #46504A;
  --slate-900: #171C19;

  --bg:          var(--slate-100);
  --bg-raised:   var(--slate-050);
  --bg-sunken:   var(--slate-200);
  --fg:          var(--slate-900);
  --fg-muted:    var(--slate-700);
  --line:        var(--slate-300);
  --line-strong: var(--slate-900);

  --enamel:  #1B5140;
  --signal:  #A3261D;
  --caution: #7A5300;
  --accent-fg: #FFFFFF;

  --bg-invert:    #171C19;
  --fg-invert:    #EDF1EE;
  --line-invert:  #3A443E;
  --muted-invert: #A6B0A9;
}

body { font-variant-numeric: tabular-nums; }

/* ───────────────────────────────────────────────────────────────────────────
   THE FRAME and THE BAND — this family's page skeleton.
   base.css loads after this file, so section rules must be class-qualified.
   ─────────────────────────────────────────────────────────────────────────── */
.frame {
  inline-size: 100%;
  max-inline-size: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.frame--narrow { max-inline-size: var(--measure-wide); }

.band { padding-block: var(--s-8); }

/* The same rule Plain arrived at the hard way: only two UNPAINTED bands in a
   row share a gap. Anything with its own ground has a visible edge and keeps
   its padding at both ends. */
.band:not(.band--solid):not(.band--ink):not(.band--tint)
  + .band:not(.band--solid):not(.band--ink):not(.band--tint) {
  padding-block-start: 0;
}

.band--tint  { background: var(--bg-sunken); }
.band--solid { background: var(--enamel); color: var(--accent-fg); }
.band--ink   { background: var(--bg-invert); color: var(--fg-invert); }

.band--solid a, .band--ink a { color: inherit; }
.band--solid .band__label { color: inherit; opacity: 0.82; }
.band--ink   .band__label { color: var(--fg-invert); opacity: 0.75; }

.band__label {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--enamel);
}
.band__title {
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-block: var(--s-2) var(--s-5);
  max-inline-size: 20ch;
}
.band__lede {
  font-size: var(--t-md);
  color: var(--fg-muted);
  max-inline-size: var(--measure-wide);
  margin-block-end: var(--s-6);
}
.band--solid .band__lede, .band--ink .band__lede { color: inherit; opacity: 0.9; }

/* ───────────────────────────────────────────────────────────────────────────
   THE NOTICEBOARD — the board at the gate.

   Added after the first version of this family was rejected, and the verdict
   was right: it read as a county social-services website. It carried no
   photograph anywhere, its front page opened on "Get help / Lend a hand", and
   the only church on it was a band near the bottom headed "There is a church
   here too". Nobody searching for a free CHURCH template would download that.

   The diagnosis was in the research, not the craft. Church Community Services
   in Elkhart genuinely does navigate like an agency — but it is one outlier,
   and building it as the archetype rather than as one section of a normal
   church site is what produced a template with no church in it.

   So the board goes first: the name, where it is, and when it worships, set at
   the size of an actual painted sign. It is deliberately NOT the split
   panel-and-photograph hero — that belongs to Hospitality, and repeating it
   here would make two families one design. A sign is full width, and the
   building goes underneath it as a strip, the way you see the board before you
   see the door.
   ─────────────────────────────────────────────────────────────────────────── */
.noticeboard {
  background: var(--enamel);
  color: var(--accent-fg);
  padding-block: clamp(var(--s-7), 7vw, var(--s-9));
}
.noticeboard__kicker {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  opacity: 0.82;
}
.noticeboard__name {
  font-size: var(--t-3xl);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-block: var(--s-3) 0;
  max-inline-size: 16ch;
}
/* The second language is the same size as the first, not a subtitle under it.
   A parallel Spanish name set at 70% is a statement about whose church it is. */
.noticeboard__also {
  display: block;
  font-weight: 400;
  opacity: 0.85;
}
.noticeboard__where {
  font-size: var(--t-md);
  margin-block-start: var(--s-4);
  max-inline-size: 44ch;
  opacity: 0.92;
}

/* Service times set as sign rows — rules above and below, tabular figures,
   nothing between them. This is the part of a church noticeboard that people
   actually stop and read. */
/* Wide enough for a board, the hours move alongside the name rather than
   under it. Stacked, this band ran to two full screens before a visitor
   reached the doorways, and most of the second one was empty paint. */
@media (min-width: 62rem) {
  .noticeboard .frame {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: clamp(var(--s-7), 5vw, var(--s-9));
    align-items: start;
  }
  .noticeboard__hours { margin-block-start: 0; }
}

.noticeboard__hours {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  max-inline-size: 46rem;
  border-block-start: 2px solid currentColor;
}
.noticeboard__hours li {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr;
  gap: var(--s-1) var(--s-5);
  align-items: baseline;
  padding-block: var(--s-4);
  border-block-end: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}
.noticeboard__time {
  font-size: var(--t-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.noticeboard__what { font-size: var(--t-md); font-weight: 700; }
.noticeboard__note { grid-column: 2; font-size: var(--t-sm); opacity: 0.85; }
@media (max-width: 30rem) {
  .noticeboard__hours li { grid-template-columns: 1fr; }
  .noticeboard__note { grid-column: 1; }
}

.noticeboard__acts { margin-block-start: var(--s-7); }
/* On the enamel ground the primary button inverts: white sign, green letters. */
.noticeboard .btn {
  background: var(--accent-fg);
  border-color: var(--accent-fg);
  color: var(--enamel);
}
.noticeboard .btn:hover { background: #E7EDE9; border-color: #E7EDE9; }
.noticeboard .btn--ghost {
  background: transparent;
  color: var(--accent-fg);
  border-color: var(--accent-fg);
}
.noticeboard .btn--ghost:hover { background: color-mix(in srgb, #fff 14%, transparent); }

/* THE FRIEZE — the building, full width, letterbox. No text over it and no
   scrim under it, because nothing is written on it: it is the photograph you
   would take standing across the road, and its whole job is to prove there is
   a real building with real people in it. */
.frieze {
  display: block;
  background: var(--bg-sunken);
}
.frieze img {
  inline-size: 100%;
  block-size: clamp(9rem, 24vw, 17rem);
  object-fit: cover;
  display: block;
}

/* ───────────────────────────────────────────────────────────────────────────
   THE MASTHEAD — a painted sign, two tiers.
   Tier one is the building: name, phone, language. Tier two is the wayfinder.
   ─────────────────────────────────────────────────────────────────────────── */
.masthead { position: sticky; inset-block-start: 0; z-index: 50; }

.masthead__bar {
  background: var(--enamel);
  color: var(--accent-fg);
}
.masthead__bar .frame {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-block-size: 3rem;
}
.masthead__name {
  font-weight: 800;
  font-size: var(--t-md);
  letter-spacing: -0.015em;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-inline-size: 0;
}
.masthead__tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: auto;
  flex: none;
}
.masthead__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: var(--t-sm);
  color: inherit;
  text-decoration: none;
  padding-inline: var(--s-2);
}
.masthead__phone:hover { text-decoration: underline; }
@media (max-width: 40rem) { .masthead__phone span { display: none; } }

/* The language switch. Real, not decorative — see assets/commons.js. */
.lang-toggle {
  display: inline-flex;
  border: 2px solid currentColor;
  background: transparent;
  padding: 0;
}
.lang-toggle button {
  min-block-size: 2.25rem;
  padding-inline: var(--s-3);
  background: transparent;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] {
  background: var(--accent-fg);
  color: var(--enamel);
}

.masthead .theme-toggle {
  border-color: currentColor;
  color: inherit;
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

/* ── The wayfinder ──────────────────────────────────────────────────────── */
.wayfinder {
  background: var(--bg-raised);
  border-block-end: var(--hair);
}
.wayfinder .frame { display: flex; align-items: stretch; gap: 0; }
.wayfinder ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wayfinder a {
  display: flex;
  align-items: center;
  min-block-size: 3rem;
  padding-inline: var(--s-4);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
  border-block-end: 4px solid transparent;
}
.wayfinder a:hover { background: var(--bg-sunken); }
.wayfinder a[aria-current="page"] {
  border-block-end-color: var(--enamel);
  color: var(--enamel);
}
.wayfinder a:first-child { padding-inline-start: 0; }

.wayfinder-toggle {
  display: none;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 3rem;
  padding-inline: 0;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  color: var(--fg);
}

@media (max-width: 60rem) {
  .wayfinder-toggle { display: inline-flex; }
  .wayfinder ul {
    display: none;
    flex-direction: column;
    inline-size: 100%;
    padding-block-end: var(--s-3);
  }
  .wayfinder[data-open] ul { display: flex; }
  .wayfinder .frame { flex-wrap: wrap; }
  .wayfinder a {
    inline-size: 100%;
    border-block-end: var(--hair);
    border-inline-start: 4px solid transparent;
    padding-inline-start: var(--s-3);
  }
  .wayfinder a:first-child { padding-inline-start: var(--s-3); }
  .wayfinder a[aria-current="page"] { border-inline-start-color: var(--enamel); }
}

/* ───────────────────────────────────────────────────────────────────────────
   THE STATUS STRIP — what is open, right now.

   The single most useful thing this kind of church can put on a website, and
   the one thing no church template has. Computed from the opening hours in
   church.config.json, in the church's own timezone. Colour is never the only
   signal: the word "Open" or "Closed" is always present.
   ─────────────────────────────────────────────────────────────────────────── */
.status {
  background: var(--bg-invert);
  color: var(--fg-invert);
  font-size: var(--t-sm);
}
.status .frame {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-3);
}
.status__item { display: flex; align-items: center; gap: var(--s-2); }
.status__dot {
  inline-size: 0.7rem;
  block-size: 0.7rem;
  flex: none;
  background: var(--muted-invert);
}
.status__item[data-state="open"]    .status__dot { background: #5FD3A6; }
.status__item[data-state="soon"]    .status__dot { background: #E7B84B; }
.status__item[data-state="closed"]  .status__dot { background: #F0796C; }
.status__what { font-weight: 700; }
.status__when { color: var(--muted-invert); }

/* ───────────────────────────────────────────────────────────────────────────
   THE DOORWAYS — the two questions somebody arrives with.
   Not a hero. Two painted doors, side by side, each one a list of what is
   behind it. This is the whole opening screen.
   ─────────────────────────────────────────────────────────────────────────── */
.doorways {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1);
}
@media (min-width: 48rem) { .doorways { grid-template-columns: 1fr 1fr; } }

.door {
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-6) var(--s-6);
  text-decoration: none;
  min-block-size: 100%;
}
.door--help { background: var(--enamel); color: var(--accent-fg); }
.door--give { background: var(--bg-invert); color: var(--fg-invert); }
.door:hover .door__title { text-decoration: underline; text-underline-offset: 0.2em; }

.door__eyebrow {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  opacity: 0.8;
}
.door__title {
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin-block: var(--s-3) var(--s-4);
}
.door__list {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.door__list li {
  font-size: var(--t-sm);
  font-weight: 600;
  padding: var(--s-1) var(--s-3);
  border: 1px solid currentColor;
}
.door__go {
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: var(--t-md);
}

/* ───────────────────────────────────────────────────────────────────────────
   PAGE HEADS
   ─────────────────────────────────────────────────────────────────────────── */
.pagehead {
  background: var(--bg-raised);
  border-block-end: var(--rule);
  padding-block: var(--s-7) var(--s-6);
}
.pagehead h1 {
  font-size: var(--t-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-block-start: var(--s-2);
  max-inline-size: 18ch;
}
.pagehead__lede {
  font-size: var(--t-md);
  color: var(--fg-muted);
  max-inline-size: var(--measure-wide);
  margin-block-start: var(--s-4);
}

/* ── Buttons: painted, square, and large enough to hit ──────────────────── */
.btn {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: 0;
  min-block-size: 3rem;
  padding: var(--s-3) var(--s-5);
}
.btn--ghost { border: 2px solid var(--fg); background: transparent; }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }
.band--solid .btn, .door .btn {
  background: var(--accent-fg);
  color: var(--enamel);
  border-color: var(--accent-fg);
}

/* ───────────────────────────────────────────────────────────────────────────
   THE SIGNOFF — the foot of a public notice: who, where, when, and in what
   languages. No newsletter box, no social wall.
   ─────────────────────────────────────────────────────────────────────────── */
.signoff {
  background: var(--bg-invert);
  color: var(--fg-invert);
  padding-block: var(--s-8) var(--s-6);
}
.signoff__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s-6);
}
.signoff h2 {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--muted-invert);
  margin-block-end: var(--s-3);
}
.signoff ul { list-style: none; margin: 0; padding: 0; }
.signoff li + li { margin-block-start: var(--s-2); }
.signoff a { color: inherit; }
.signoff p, .signoff li, .signoff a { font-size: var(--t-sm); }
.signoff__note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line-invert);
  font-size: var(--t-xs);
  color: var(--muted-invert);
}

@media print {
  .masthead, .wayfinder, .lang-toggle, .theme-toggle, .doorways { display: none !important; }
  .band--solid, .band--ink, .status { background: none !important; color: #000 !important; }
  .signoff { background: none; color: #000; border-block-start: 2px solid #000; }
}