/* ============================================================================
   Template demonstrations — the shared shell only.
   ----------------------------------------------------------------------------
   This file owns the reset and the demonstration bar, and nothing else. Every
   design decision — colour, type, spacing, rhythm — belongs to the individual
   demo-<slug>.css, because the entire purpose of these pages is that they look
   like six different websites rather than six pages of one.

   That also means the tokens in styles.css are deliberately NOT reachable
   here. A demo that inherits this site's palette is a picture of this site.
   ========================================================================== */

/* The faces the shell provides. Each demo still picks its own voice — Grace and
   Heritage deliberately use system serifs so they cannot be mistaken for this
   site — but a face named in a `ministry_templates` row has to actually load, or
   the demo contradicts the specification printed beside it on the template card.
   Inter and Lora are named there, and both are already cached from the
   marketing site. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

/* Same trick as styles.css: the Inter Latin subset claims the Myanmar block and
   renders it blank, so a Burmese word inside an English demo becomes a row of
   boxes unless this same-family face wins for that range. The Global demo shows
   a language switcher, so this is the one place a broken glyph would undermine
   exactly the feature being demonstrated. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+1000-109F, U+A9E0-A9FF, U+AA60-AA7F;
  src: url("../fonts/noto-myanmar-400.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-latin.woff2") format("woff2");
}

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

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

body {
  margin: 0;
  /* Overridden by every demo. Present so an unstyled moment is not Times. */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

.demo-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── The demonstration bar ─────────────────────────────────────────────────
   Sticky, not fixed: a fixed bar overlaps content when a phone keyboard opens
   and cannot be scrolled away from. Never dismissible — it is the only thing
   on the page saying that the ministry below it is not real, and it is the
   only way back to the site. */

.demo-bar {
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 0.7rem clamp(1rem, 4vw, 2rem);
  background: #14181d;
  color: #f2efe8;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  line-height: 1.45;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.demo-bar__text { max-width: 62ch; }
.demo-bar__text strong { color: #e8c583; }
.demo-bar__sep { opacity: 0.5; margin-inline: 0.35rem; }

.demo-bar__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.demo-bar__button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #f2efe8;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.demo-bar__button:hover { background: rgba(255, 255, 255, 0.12); }
.demo-bar__button--primary {
  background: #e8c583;
  border-color: #e8c583;
  color: #1c1509;
}
.demo-bar__button--primary:hover { background: #f2d69c; border-color: #f2d69c; color: #1c1509; }

.demo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1rem, 4vw, 2rem);
  background: #14181d;
  color: #c3c8ce;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ── Photographs ────────────────────────────────────────────────────────────
   Shared by all the demonstrations, because the frame should be the same in
   every one — what differs between the six templates is the crop, the palette
   around it and how much of the page it takes, not the mechanics.

   The caption sits over the bottom of the picture rather than under it. Under
   it, the note about the photograph being a placeholder becomes part of the
   design and every demo carries a stray line of grey text; over it, it reads
   as an annotation on the demo, which is what it is.
   ------------------------------------------------------------------------ */

.demo-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(120, 120, 120, 0.08);
}
.demo-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--demo-photo-ratio, 4 / 3);
  object-fit: cover;
  object-position: center;
}
/* There is deliberately no figcaption rule. See _photo.php: a caption reading
   "your photograph goes here", printed across the artwork, is what made these
   pages look like mockups rather than websites. The bar at the top of every
   demo carries that disclosure instead. */

/* A photograph used as a full-bleed backdrop, with the text laid over it. */
.demo-cover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* A real background-colour, not just the scrim.
     Two reasons, and the second is why it is here rather than left to the
     ::after gradient. First: if the photograph fails to load, white text on a
     white section is invisible rather than merely ugly. Second: the contrast
     audit walks up the tree looking for an opaque background-color, and a
     scrim painted by a pseudo-element is not one — so it measured this text as
     white-on-white and reported 1.00:1 across twenty-four findings. The
     measurement was wrong, but "the text is readable because of what the
     photograph happens to look like" is not a guarantee, and this makes it
     one. */
  background-color: #14181f;
}
.demo-cover--soft { background-color: #fbf9f4; }
.demo-cover__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Every one of these carries text, and a photograph is not a background until
   something guarantees the contrast. The scrim is that guarantee — without it
   the heading passes on one photograph and fails on the next. */
.demo-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.58), rgba(10, 12, 16, 0.74));
}
.demo-cover--soft::after {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.82), rgba(255, 253, 248, 0.93));
}

@media (prefers-reduced-motion: reduce) {
  .demo-photo img { transition: none; }
}

/* ── Touch targets, for every demonstration ─────────────────────────────────
   One floor, set once, rather than nine stylesheets each remembering it. The
   visual check enforces 40px tall and 32px wide on anything tappable below
   820px, and the demos kept missing it by a pixel or two: Grace's nav came out
   at 39px, and short labels — "Give", "Pray" — were 28 to 30px wide because
   the word is short and there was no padding to make up the difference.

   A link you have to aim at is a link a thumb misses, and these are the pages
   a ministry browses on a phone before deciding to buy anything.
   ------------------------------------------------------------------------ */
.demo-body nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* 34px of box for a three-letter word. Not padding for looks — the width
     floor is 32px and "Give" is 28px of text. */
  min-width: 34px;
}

/*
   Brand links are NOT included above, and that is the point of a second rule
   rather than a wider selector. Several templates set their wordmark as two
   stacked lines — a name and a strapline, the strapline in a block-level
   span. Turning that <a> into a flex row laid the two side by side and
   "Saint Brendan" printed over "BY THE HARBOUR". They get the touch height
   without the layout.
*/
.demo-body header a:not(nav a) { min-height: 44px; }

/* ---------------------------------------------------------------------------
   Chinese, in the demonstrations.

   The nine demo stylesheets share nothing with styles.css by design, so the
   --track-label fix documented there did not reach them: the moment the sample
   copy was translated, every small-caps label in every template set 主 日 and
   改 革 宗 with a gap after each character — the same failure Ray saw on the
   main site, reappearing in the one place a pastor looks hardest.

   Every literal tracking value in demo-*.css now routes through this token
   with its own Latin value as the fallback, so zeroing it here changes nothing
   in English. The negative values are included on purpose: tightening is as
   wrong for CJK as loosening, because the glyphs already fill their em box.

   No webfont here either, for the reason given in styles.css.
   ------------------------------------------------------------------------ */
html[lang="zh-CN"] { --track-label: 0; }
html[lang="zh-CN"] .demo-body { line-height: 1.85; }
html[lang="zh-CN"] .demo-body h1,
html[lang="zh-CN"] .demo-body h2,
html[lang="zh-CN"] .demo-body h3 { line-height: 1.35; }

/* Burmese is tall and dense: it collides with its own diacritics at the
   leading a Latin face is set at. The demos' prose is still English pending a
   reviewer, but their navigation and bar are Burmese already. */
html[lang="my"] { --track-label: 0; }
html[lang="my"] .demo-body { line-height: 1.95; }
html[lang="my"] .demo-body h1,
html[lang="my"] .demo-body h2,
html[lang="my"] .demo-body h3 { line-height: 1.6; }

/* ── Footer links ───────────────────────────────────────────────────────────
   The nine footers gained a real column of page links and a legal bar, and
   every one of them came out about 20px tall — the same failure the nav rule
   above exists for, one element down. Set once here rather than nine times,
   for the same reason: a rule each is nine chances to forget.

   The width floor matters as much as the height: "Give" and "Pray" are short
   enough to come out at 30px wide, which is a link you have to aim at.

   The bottom bar is matched on the class ending rather than by listing twelve
   selectors, so a thirteenth template gets the floor on the day it is written
   rather than the day somebody notices. Both spellings are listed because the
   first nine named it `<prefix>-footer__base` and the three added afterwards
   named it `<prefix>-foot__base` — which visual-check caught immediately, and
   is the argument for the rule living here rather than in twelve stylesheets. Links inside a sentence are deliberately not touched:
   WCAG 2.5.8 exempts them, and forcing inline-flex on one would break the
   line it sits in. */
.demo-body footer li a,
.demo-body [class$="-footer__base"] a,
.demo-body [class$="-foot__base"] a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 34px;
}

/* ── Controls ───────────────────────────────────────────────────────────────
   The players are real <button>s now rather than `<a href="#">`, because an
   anchor to "#" is not a control: clicking one jumps the page to the top,
   which is exactly what Ray hit on the Light demo. Buttons carry the user
   agent's own font and padding, so those are reset here once rather than in
   twelve stylesheets — everything else about how each play button looks stays
   in its own template's sheet, where it belongs. */
.demo-body button {
  font: inherit;
  color: inherit;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.demo-body [data-demo-play] { cursor: pointer; }
.demo-body [data-demo-play] svg[hidden] { display: none; }

/* The line under every player's rail. It says what the sample audio actually
   is — a public-domain reading, not a recording of the sermon named above it
   — because the alternative is a visitor pressing play on "转向十字架的那一刻"
   and hearing something else with no explanation. Small, quiet, and present
   before the press rather than after it. */
.demo-audio-note {
  margin-top: 0.55rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  line-height: 1.45;
  opacity: 0.62;
}

/* ── The sermon-list player ───────────────────────────────────────────────
   Twelve demo sermon pages listed sermons and none of them could play one.
   Grace had `<a href="#">Listen` on every row — the fault Ray already found
   once on the home pages — and the other eleven had no control at all. A
   service that sells a sermon system was demonstrating it with a page that
   makes no sound.

   Only the bones are here, which is the rule for this file: the layout, the
   tap target and the rail's mechanics. **Colour and shape belong to each
   template's own stylesheet** — nine demos sharing one visual player is nine
   pages with the same bones in different paint, which is the exact impression
   these demos exist to dispel. Each sets `.<prefix>-play` itself.
   ─────────────────────────────────────────────────────────────────────── */
.demo-play {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.6rem 0 0;
}
.demo-play__btn {
  flex: none;
  width: 44px;
  height: 44px;          /* the floor, in px — a fingertip is not a rem */
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.demo-play__btn svg { width: 12px; height: 13px; margin-left: 2px; }
.demo-play__btn .is-pause { margin-left: 0; }
.demo-play__rail { flex: 1 1 auto; min-width: 0; }
.demo-play__bar {
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.22;
  overflow: hidden;
}
.demo-play__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: currentColor;
  opacity: 1;
}
.demo-play__time {
  display: flex;
  justify-content: space-between;
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}