/* base.css · Team Workforce
   Reset, type scale, bands, buttons, states. Every value comes from tokens.css.
   No colour literal appears in this file; AGENTS 4 requires the token file to be the only source. */

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:where(a) { color: inherit; }

/* ---------------------------------------------------------------- document */
html { scroll-behavior: smooth; }
body {
  background: var(--twf-paper);
  color: var(--twf-ink);
  font-family: var(--twf-font-body);
  font-size: var(--twf-size-body);
  font-weight: var(--twf-weight-body);
  line-height: var(--twf-line-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- type */
h1, h2, h3 { font-family: var(--twf-font-display); color: var(--twf-blue); text-wrap: balance; }
h1 {
  font-size: var(--twf-size-display-2);
  line-height: var(--twf-line-display-2);
  letter-spacing: var(--twf-track-display-2);
  font-weight: var(--twf-weight-display-2);
  max-width: var(--twf-measure-heading);
}
h2 {
  font-size: var(--twf-size-h2);
  line-height: var(--twf-line-h2);
  letter-spacing: var(--twf-track-h2);
  font-weight: var(--twf-weight-h2);
  max-width: var(--twf-measure-heading);
}
h3 {
  font-size: var(--twf-size-h3);
  line-height: var(--twf-line-h3);
  font-weight: var(--twf-weight-h3);
}
p { max-width: var(--twf-measure-body); }

/* The 48px orange rule under every h2. DESIGN-INTENT 2: this is the device that makes
   the pages read as one family, and it is the only place orange touches a heading. */
.twf-rule { position: relative; padding-bottom: calc(12px + 3px); }
.twf-rule::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: var(--twf-orange);
}
/* h1 takes the same rule in its program's section colour. */
.twf-rule--section::after { background: var(--twf-section, var(--twf-orange)); }

.twf-eyebrow {
  font-family: var(--twf-font-body);
  font-size: var(--twf-size-eyebrow);
  font-weight: var(--twf-weight-eyebrow);
  line-height: var(--twf-line-eyebrow);
  color: var(--twf-blue);
  margin-bottom: var(--twf-space-3);
  max-width: var(--twf-measure-lead);
}
.twf-lead {
  font-size: var(--twf-size-lead);
  line-height: var(--twf-line-lead);
  max-width: var(--twf-measure-lead);
  color: var(--twf-ink-soft);
}
.twf-small { font-size: var(--twf-size-small); line-height: var(--twf-line-small); color: var(--twf-ink-soft); }

/* ---------------------------------------------------------------- layout */
/* The three containers. Each is used as a standalone class, so every one carries its own
   gutter and centring; a modifier that only overrode width would sit flush to the viewport. */
.twf-container,
.twf-container--wide,
.twf-container--narrow {
  --twf-gutter: var(--twf-space-gutter-mobile);
  width: min(100% - (var(--twf-gutter) * 2), var(--twf-container-content));
  margin-inline: auto;
}
.twf-container--wide { width: min(100% - (var(--twf-gutter) * 2), var(--twf-container-wide)); }

/* DESIGN-INTENT 2: left aligned everywhere. The narrow measure is therefore a 44rem column
   pinned to the left edge of the content container, not a centred block: a narrow band has to
   line up with the band above and below it. The cta band opts back into centring. */
.twf-container--narrow > * { max-width: var(--twf-container-narrow); }

@media (min-width: 768px) {
  .twf-container,
  .twf-container--wide,
  .twf-container--narrow { --twf-gutter: var(--twf-space-gutter-desktop); }
}

/* Bands. Padding comes only from space.band.* per AGENTS 6.2.
   Adjacent bands each contributed a full band's padding, so every boundary opened a 192px gap
   on desktop where the intent was one band of breathing room. `band-tight` is the default and
   full `band` is reserved for the hero and the closing cta, which is a 64px saving at every
   boundary without introducing a value outside the token file. */
.twf-band { padding-block: var(--twf-space-band-tight-mobile); }
.twf-band--tight { padding-block: var(--twf-space-band-tight-mobile); }
.twf-band--cta, .twf-hero { padding-block: var(--twf-space-band-mobile); }
@media (min-width: 768px) {
  .twf-band { padding-block: var(--twf-space-band-tight-tablet); }
  .twf-band--tight { padding-block: var(--twf-space-band-tight-tablet); }
  .twf-band--cta, .twf-hero { padding-block: var(--twf-space-band-tablet); }
}
@media (min-width: 1024px) {
  .twf-band { padding-block: var(--twf-space-band-tight-desktop); }
  .twf-band--tight { padding-block: var(--twf-space-band-tight-desktop); }
  .twf-band--cta, .twf-hero { padding-block: var(--twf-space-band-desktop); }
}

/* Grounds. */
.twf-ground-paper { background: var(--twf-paper); color: var(--twf-ink); }
.twf-ground-mist { background: var(--twf-mist); color: var(--twf-ink); }
/* Section tints, used on the four program page heroes so each programme announces itself.
   All three are existing token tints; every one carries Ink body text above 15:1. */
.twf-ground-blue-tint { background: var(--twf-blue-tint); color: var(--twf-ink); }
.twf-ground-green-tint { background: var(--twf-green-tint); color: var(--twf-ink); }
.twf-ground-orange-tint { background: var(--twf-orange-tint); color: var(--twf-ink); }
.twf-ground-ink { background: var(--twf-ink); color: var(--twf-on-dark-soft); }
.twf-ground-ink h1, .twf-ground-ink h2, .twf-ground-ink h3 { color: var(--twf-on-dark); }
.twf-ground-ink .twf-eyebrow { color: var(--twf-on-dark-soft); }
.twf-ground-ink .twf-lead, .twf-ground-ink .twf-small { color: var(--twf-on-dark-soft); }
.twf-ground-gradient { background: var(--twf-gradient-hero); color: var(--twf-on-dark); }
.twf-ground-gradient h1, .twf-ground-gradient h2 { color: var(--twf-on-dark); }
.twf-ground-gradient .twf-lead { color: var(--twf-on-dark); }
.twf-ground-gradient .twf-eyebrow { color: var(--twf-on-dark); }

.twf-band__head { margin-bottom: var(--twf-space-6); }
/* The h2 carries the 48px orange rule in its own padding, so a sub needs its own clearance
   or the rule sits on top of the first line of the lead. */
.twf-band__head > .twf-band__sub { margin-top: var(--twf-space-4); }

/* 12 column grid, left aligned. DESIGN-INTENT 2: nothing is centred except cta bands and stat values. */
.twf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--twf-space-grid-gap-mobile); }
@media (min-width: 768px) { .twf-grid { gap: var(--twf-space-grid-gap-desktop); } }

/* ---------------------------------------------------------------- buttons */
.twf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--twf-font-body);
  font-size: var(--twf-size-button);
  font-weight: var(--twf-weight-button);
  line-height: var(--twf-line-button);
  padding: 0.875rem 1.5rem;
  border-radius: var(--twf-radius-pill);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color var(--twf-duration-fast) var(--twf-ease),
              color var(--twf-duration-fast) var(--twf-ease),
              transform var(--twf-duration-fast) var(--twf-ease);
}
.twf-btn:hover { transform: translateY(-1px); }
.twf-btn--primary { background: var(--twf-blue); color: var(--twf-on-dark); }
.twf-btn--primary:hover { background: var(--twf-blue-deep); }
/* DECISIONS #17: white on TWF Green measures 3.42:1 and fails at 16px/600.
   Green-deep measures 5.46:1, ink hover 17.13:1. Both are token values. */
.twf-btn--secondary { background: var(--twf-green-deep); color: var(--twf-on-dark); }
.twf-btn--secondary:hover { background: var(--twf-ink); }
.twf-btn--ghost { background: transparent; color: var(--twf-blue); border-color: var(--twf-blue); }
.twf-btn--ghost:hover { background: var(--twf-blue-tint); }
.twf-btn--on-dark { background: var(--twf-paper); color: var(--twf-blue); }
.twf-btn--on-dark:hover { background: var(--twf-blue-tint); }
.twf-btn--ghost-on-dark { background: transparent; color: var(--twf-on-dark); border-color: var(--twf-on-dark); }
.twf-btn--ghost-on-dark:hover { background: var(--twf-paper); color: var(--twf-blue); }

.twf-btns { display: flex; flex-wrap: wrap; gap: var(--twf-space-4); }

/* Ghost text link, used at the foot of cards. AGENTS 4: no arrow appended to link text. */
.twf-link {
  display: inline-block;
  font-weight: 600;
  color: var(--twf-blue);
  text-decoration: none;
  border-bottom: 2px solid var(--twf-orange);
  padding-bottom: 2px;
  transition: color var(--twf-duration-fast) var(--twf-ease), border-color var(--twf-duration-fast) var(--twf-ease);
}
.twf-link:hover { color: var(--twf-blue-deep); border-bottom-color: var(--twf-blue-deep); }
.twf-ground-ink .twf-link { color: var(--twf-on-dark); }
.twf-ground-ink .twf-link:hover { border-bottom-color: var(--twf-on-dark); }

/* ---------------------------------------------------------------- states */
/* DECISIONS #18: the specified orange ring alone measures 2.31:1 on Paper, under the 3:1
   WCAG 2.2 SC 1.4.11 asks of a focus indicator. The ink ring outside it carries the contrast. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--twf-orange);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--twf-ink);
  border-radius: var(--twf-radius-sm);
}
.twf-ground-ink :where(a, button, summary):focus-visible,
.twf-ground-gradient :where(a, button, summary):focus-visible {
  box-shadow: 0 0 0 4px var(--twf-paper);
}

.twf-skip {
  position: absolute;
  left: var(--twf-space-4);
  top: var(--twf-space-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--twf-blue);
  color: var(--twf-on-dark);
  padding: var(--twf-space-3) var(--twf-space-5);
  border-radius: var(--twf-radius-pill);
  text-decoration: none;
  font-weight: 600;
}
.twf-skip:focus { transform: translateY(0); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- motion */
/* No load or scroll animation anywhere on the site. Hover transitions only, and those go too
   under prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}