/* ============================================================================
   Global — institutional. Deep ink, warm gold, steel blue, three languages.
   ----------------------------------------------------------------------------
   The only dark-by-default template of the six, and the only one where the
   language switcher sits in the top bar rather than the footer. That is the
   thing this template is sold on, so it is given the most prominent piece of
   furniture on the page.

   Palette matches the `global` row in `ministry_templates`. The steel value in
   that row (#4E6B7D) measures 2.61:1 on the dark ground, so it is used for
   rules and fills only; small text on dark uses the lightened --steel-text, and
   small text on the pale band uses --blue-deep. Both were measured, not guessed.
   ========================================================================== */

.demo-body--global {
  --ink: #1b2a33;
  --ink-2: #223540;
  --gold: #c59a4a;         /* 5.68:1 on --ink — safe for small text on dark */
  --pale: #f2efe8;
  --steel: #4e6b7d;        /* rules and fills only */
  --steel-text: #9ab3c1;   /* 6.73:1 on --ink */
  --blue-deep: #3f566b;    /* 6.64:1 on --pale */
  --bronze: #75561d;       /* 5.89:1 on --pale */
  --dark-text: #1c262d;
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-pale: rgba(28, 38, 45, 0.14);

  background: var(--pale);
  color: var(--dark-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16.5px;
  line-height: 1.68;
}

.gl-shell {
  width: 100%;
  max-width: 1150px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

h1, h2, h3 {
  font-family: "Lora", "Iowan Old Style", Georgia, "Songti SC", serif;
  font-weight: 600;
  line-height: 1.2;
}

.gl-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.2em);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.gl-eyebrow--dark { color: var(--bronze); }

.gl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.65rem 1.6rem;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: var(--gold);
  color: #221a09;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.02em);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.gl-button:hover { background: #d6ab5c; border-color: #d6ab5c; color: #221a09; }
.gl-button--sm { min-height: 40px; padding: 0.35rem 1.05rem; font-size: 0.82rem; }
.gl-button--outline { background: transparent; color: var(--gold); }
.gl-button--outline:hover { background: rgba(197, 154, 74, 0.16); color: var(--gold); }
.gl-button--gold { background: var(--gold); border-color: var(--gold); color: #221a09; }

/* ── Top bar and the language switcher ───────────────────────────────────── */

.gl-topbar { background: #14212a; color: var(--steel-text); }
.gl-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
}
.gl-topbar__note { font-size: 0.78rem; padding-block: 0.6rem; }

.gl-langs { display: flex; gap: 0.15rem; }
.gl-langs__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--steel-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.gl-langs__item:hover { color: #fff; }
.gl-langs__item.is-current { color: var(--gold); border-bottom-color: var(--gold); }

/* ── Header ──────────────────────────────────────────────────────────────── */

.gl-header { background: var(--ink); color: #eceae5; border-bottom: 1px solid var(--line-dark); }
.gl-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.gl-brand { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; text-decoration: none; color: inherit; }
.gl-brand__mark {
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 100% 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 2px 100% no-repeat;
}
.gl-brand__text {
  font-family: "Lora", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.1;
}
.gl-brand__text em {
  display: block;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.22em);
  text-transform: uppercase;
  color: var(--steel-text);
}
.gl-nav { display: flex; gap: 1.6rem; margin-inline-start: auto; }
.gl-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #c9cdc9;
  text-decoration: none;
}
.gl-nav a:hover { color: var(--gold); }

@media (max-width: 940px) {
  .gl-nav { display: none; }
  .gl-header__inner { justify-content: space-between; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.gl-hero { background: var(--ink); color: #eceae5; padding-block: clamp(3rem, 7vw, 5.5rem) 0; }
/* No max-width here. This element is also .gl-shell, which is what centres the
   page at 1150px — overriding its width made the hero span the full viewport
   and start 145px to the left of every other section. Constrain the children
   instead. */
.gl-hero__title { font-size: clamp(1.9rem, 4.6vw, 3.2rem); max-width: 42rem; margin-bottom: 1.2rem; color: #fdfbf6; }
.gl-hero__lede { max-width: 38rem; color: #b7c3ca; font-size: 1.03rem; }
.gl-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.9rem; }

.gl-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 11rem), 1fr));
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--line-dark);
}
.gl-figures > div { padding: 1.35rem 1rem 1.5rem 0; }
.gl-figures > div + div { border-inline-start: 1px solid var(--line-dark); padding-inline-start: 1.35rem; }
.gl-figures dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.16em);
  text-transform: uppercase;
  color: var(--steel-text);
  margin-bottom: 0.4rem;
}
.gl-figures dd {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.gl-section { padding-block: clamp(3rem, 7vw, 5rem); }
.gl-section--pale { background: #e7e3d9; }

.gl-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.gl-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.gl-head__lede { margin-top: 0.9rem; color: #4a545b; }

/* ── The fields table ────────────────────────────────────────────────────── */

.gl-table-wrap { overflow-x: auto; }
.gl-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  background: #f8f6f1;
}
.gl-table th, .gl-table td {
  padding: 0.95rem 1.1rem;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--line-pale);
}
.gl-table thead th {
  font-family: "Inter", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.14em);
  text-transform: uppercase;
  color: var(--blue-deep);
  border-bottom: 2px solid var(--steel);
}
.gl-table tbody th {
  font-family: "Lora", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
}
.gl-table tbody td { font-size: 0.94rem; color: #4a545b; }
.gl-table tbody tr:last-child th, .gl-table tbody tr:last-child td { border-bottom: 0; }

/* ── Projects ────────────────────────────────────────────────────────────── */

.gl-projects {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.85rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.gl-project {
  padding: 1.5rem;
  background: #f8f6f1;
  border-top: 3px solid var(--gold);
}
.gl-project__meta {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.12em);
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.55rem;
}
.gl-project h3 { font-size: 1.18rem; margin-bottom: 0.5rem; }
.gl-project p { font-size: 0.94rem; color: #4a545b; }

/* ── Reports ─────────────────────────────────────────────────────────────── */

.gl-reports {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
}
@media (max-width: 900px) { .gl-reports { grid-template-columns: 1fr; } }
.gl-reports__title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 1rem; }
.gl-reports__text { color: #4a545b; }

.gl-downloads { border-top: 1px solid var(--line-pale); }
.gl-downloads li { border-bottom: 1px solid var(--line-pale); }
.gl-downloads a {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-height: 56px;
  padding-block: 0.9rem;
  text-decoration: none;
  color: inherit;
}
.gl-downloads a:hover .gl-downloads__body { color: var(--bronze); text-decoration: underline; }
.gl-downloads__year { font-weight: 700; color: var(--blue-deep); }
.gl-downloads__body { font-size: 0.98rem; }
.gl-downloads__size { display: block; font-size: 0.8rem; color: #5c666d; margin-top: 0.15rem; }

/* ── Partner ─────────────────────────────────────────────────────────────── */

.gl-partner { background: var(--ink-2); color: #e7e4dd; padding-block: clamp(3rem, 6.5vw, 5rem); }
.gl-partner__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) { .gl-partner__inner { grid-template-columns: 1fr; } }
.gl-partner h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 1rem; color: #fdfbf6; }
.gl-partner p { color: #b7c3ca; max-width: 40rem; }
.gl-partner__panel { padding: 1.6rem; border: 1px solid var(--line-dark); }
.gl-partner__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.16em);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.gl-partner__panel ul { margin-bottom: 1.5rem; }
.gl-partner__panel li {
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line-dark);
  font-size: 0.94rem;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.gl-footer { background: #14212a; color: #b7c3ca; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.gl-footer__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  font-size: 0.9rem;
}
.gl-footer__name { font-family: "Lora", Georgia, serif; font-size: 1.1rem; color: #fdfbf6; margin-bottom: 0.4rem; }
.gl-footer h3 {
  font-family: "Inter", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.16em);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

/* The hero's inner column. It needs to sit above the photograph that is now
   behind it, and to hold its own measure rather than running edge to edge. */
.gl-hero__inner { position: relative; z-index: 1; max-width: 54rem; }

/* A readable text column for the inner pages. One measure, set once, so the
   about page and the giving page do not each invent their own. */
.gl-prose { max-width: 40rem; }
.gl-prose p + p { margin-top: 1.05rem; }
/* The inner pages set heading-and-paragraph pairs one after another. Without
   this they run together into one block of text with bold lines in it. */
.gl-prose p + h2 { margin-top: 2.2rem; }
.gl-prose h2 { margin-bottom: 0.5rem; }

/* ============================================================================
   Global — the blocks a multi-country agency's site needs.
   Dark, wide-gutter, data-forward: tables and figures rather than cards. An
   agency at this size is judged on whether it publishes numbers, so its extra
   components are numbers.
   ========================================================================== */

.gl-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 860px) { .gl-story { grid-template-columns: 1fr; } }
.gl-story__art { margin: 0; overflow: hidden; position: relative; }
.gl-story__art img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gl-story__flag {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  padding: 0.35rem 0.8rem; background: var(--gold); color: var(--dark-text);
  font-size: 0.66rem; font-weight: 700; letter-spacing: var(--track-label, 0.12em); text-transform: uppercase;
}
.gl-story h3 { font-size: clamp(1.45rem, 3vw, 2.05rem); margin-bottom: 0.5rem; }
.gl-story__meta { font-size: 0.8rem; color: var(--blue-deep); margin-bottom: 1rem; }
.gl-story__links { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 1.1rem; }

.gl-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 0; border-block: 1px solid rgba(27, 42, 51, 0.16); }
.gl-board > li { padding: 1.5rem 1.3rem; }
.gl-board > li + li { border-inline-start: 1px solid rgba(27, 42, 51, 0.12); }
.gl-board__code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; height: 30px; margin-bottom: 0.8rem;
  border: 1px solid var(--steel); font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--track-label, 0.1em); color: var(--blue-deep);
}
.gl-board h3 { font-size: 1.05rem; margin-bottom: 0.15rem; }
.gl-board__role { font-size: 0.7rem; font-weight: 700; letter-spacing: var(--track-label, 0.12em); text-transform: uppercase; color: var(--bronze); margin-bottom: 0.45rem; }
.gl-board p { font-size: 0.9rem; color: #4a5a66; }
@media (max-width: 760px) { .gl-board > li + li { border-inline-start: 0; border-top: 1px solid rgba(27, 42, 51, 0.12); } }

.gl-sums { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1.1rem; }
.gl-sum {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 4.6rem; padding: 0.4rem 1rem;
  border: 1px solid rgba(242, 239, 232, 0.4); color: var(--pale);
  font-size: 0.9rem; font-weight: 600; text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.gl-sum:hover, .gl-sum.is-on { background: var(--gold); border-color: var(--gold); color: var(--dark-text); }

.gl-signup {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 4vw, 3rem); align-items: center;
  padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-dark);
}
@media (max-width: 820px) { .gl-signup { grid-template-columns: 1fr; } }
.gl-signup h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-bottom: 0.4rem; }
.gl-signup p { font-size: 0.92rem; color: var(--steel-text); }
.gl-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gl-form input {
  flex: 1 1 13rem; min-height: 46px; padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.06);
  color: var(--pale); font-size: 0.94rem;
}
.gl-form input::placeholder { color: rgba(242, 239, 232, 0.45); }
.gl-form input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.gl-form__note { flex: 1 0 100%; font-size: 0.75rem; color: var(--steel-text); }
.gl-footer__inner { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 900px) { .gl-footer__inner { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } }
.gl-footer__brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.8rem; }
.gl-footer__brand svg { width: 32px; height: 32px; color: var(--gold); flex: none; }
.gl-footer ul { display: grid; gap: 0.4rem; }
.gl-footer li a { color: inherit; text-decoration: none; opacity: 0.85; }
.gl-footer li a:hover { opacity: 1; color: var(--gold); }
.gl-social { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.gl-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line-dark); color: inherit;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.gl-social a:hover { border-color: var(--gold); color: var(--gold); }
.gl-social svg { width: 17px; height: 17px; }
.gl-footer__base {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.2rem;
  border-top: 1px solid var(--line-dark); font-size: 0.75rem; color: var(--steel-text);
}
.gl-footer__base a { color: inherit; }
.gl-brand__mark { width: 32px; height: 32px; flex: none; color: var(--gold); }
.gl-brand__mark svg { width: 100%; height: 100%; }

/* The outline button is gold-on-dark by design and measured 2.26:1 when the
   field story put it on the pale section. Given a dark variant rather than
   changing the token: the gold is correct where it belongs. */
.gl-section .gl-button--outline,
.gl-section--pale .gl-button--outline { border-color: var(--bronze); color: var(--bronze); }
.gl-section .gl-button--outline:hover,
.gl-section--pale .gl-button--outline:hover { background: rgba(117, 86, 29, 0.12); color: var(--bronze); }
.gl-hero .gl-button--outline { border-color: var(--gold); color: var(--gold); }
.gl-hero .gl-button--outline:hover { background: rgba(197, 154, 74, 0.16); color: var(--gold); }

/* ── Sermons ──────────────────────────────────────────────────────────────
   Global is sold on handling several languages at once, so its list is the
   most tabular of the set: a head row, a reference line, a meta line, each in
   the same place on every entry. That regularity is the feature. */
.gl-sermons { display: grid; gap: 0; }
.gl-sermon {
  padding: 1.4rem 0;
  border-top: 1px solid rgba(232, 226, 214, 0.14);
}
.gl-sermon:last-child { border-bottom: 1px solid rgba(232, 226, 214, 0.14); }
/* `align-items: baseline` misaligned this row by 4px on a phone the moment the
   title wrapped — two items of different font sizes have different baseline
   offsets, so their centres never coincide. Third time tonight: the breadcrumb,
   the workflow panel head, and now this. ui-audit caught all three.

   The fix each time is the one recorded in CLAUDE.md — align the row, do not
   give each element its own height — and `wrap` is what lets the series drop
   to its own line rather than squeezing the title. */
.gl-sermon__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; }
.gl-sermon__head h3 { margin: 0; font-size: 1.22rem; line-height: 1.35; }
.gl-sermon__series {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: 0.66;
}
.gl-sermon__ref { margin: 0.25rem 0 0; font-size: 0.92rem; opacity: 0.82; }
.gl-sermon__meta { margin: 0.1rem 0 0; font-size: 0.83rem; opacity: 0.6; }