/* ============================================================================
   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", Roboto, 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: 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: 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: 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: 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: 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: 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: 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: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}