/* ==========================================================================
   LK Risk — Utilities
   Small, single-purpose helpers shared across sections and components.
   ========================================================================== */

/* --- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-space);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.section--darker {
  background-color: var(--color-bg-darker);
  color: var(--color-text-inverse);
}

/* Theme hooks read by shared blocks (titles, accents, hairlines).
   Light is the default; dark sections flip them here, once. */
.section--dark,
.section--darker,
.showcase__band,
.site-footer {
  --title-color: var(--white);
  --accent-text: var(--gold-300);
  --pull-color: var(--navy-200);
  --line-color: var(--color-line-dark);
}

/* Extra bottom room for a panel that straddles into the next section */
.section--overlap {
  padding-bottom: calc(var(--space-10) + var(--space-9));
}

/* Continues the previous section's band, separated by a hairline.
   Use on a plain (non-grid) .container. */
.section--joined {
  padding-top: 0;
}

.section--joined > .container::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: var(--section-space);
  background-color: var(--line-color, var(--color-line));
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-6);
}

.stack > * + * {
  margin-top: var(--stack-space, var(--space-5));
}

/* --- Typography ---------------------------------------------------------- */
.lead {
  font-size: var(--text-md);
  line-height: 1.6;
}

.text-muted {
  color: var(--color-text-muted);
}

.section--dark .text-muted,
.section--darker .text-muted,
.text-inverse-muted {
  color: var(--color-text-inverse-muted);
}

/* Softer second half of a headline — hierarchy through tone, not colour */
.text-soft {
  color: var(--navy-400); /* 3:1+ on white/ivory for display sizes */
  font-style: italic;
}

.section--dark .text-soft,
.section--darker .text-soft {
  color: var(--navy-300);
}

/* Small tracked label — breadcrumbs and editorial section labels */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text, var(--gold-700));
}

.measure {
  max-width: 34rem;
}

.measure-wide {
  max-width: 50rem;
}

/* --- Accent rule: a short gold hairline used above headings -------------- */
.rule {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-accent);
  border: 0;
}

/* --- Accessibility ------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--gold-500);
  color: var(--navy-950);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}