/* ============================================================================
   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; }
}