/* ==========================================================================
   Assistive Engineering Solutions — Base Styles
   Uses only the tokens defined in variables.css. Restored to the
   originally approved design system, with only one addition: the
   .band component, which was referenced in the HTML but had never
   actually been defined anywhere — that omission is the only real fix
   in this file.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body-regular);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
}

img { max-width: 100%; height: auto; display: block; }

/* --- Headings ------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-brand-blue);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-md);
}

h1 { font-size: var(--text-h1); font-weight: var(--weight-heading-bold); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-heading-bold); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-heading-semibold); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-heading-semibold); }

p { margin: 0 0 var(--space-md); max-width: 70ch; }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  /* Brand Gold on white background fails WCAG contrast (1.84:1,
     needs 4.5:1) — Brand Blue is used here instead, which passes at
     9.84:1. Gold is still used for the eyebrow inside .band, where the
     dark background gives it enough contrast (5.34:1). */
  color: var(--color-brand-blue);
  font-weight: 700;
}

/* --- Links ------------------------------------------------------------ */

a { color: var(--color-brand-blue); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-brand-gold); }

/* --- Focus state -------------------------------------------------------- */

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

/* --- Skip link --------------------------------------------------------- */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-header);
  background: var(--color-brand-blue); color: #ffffff;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body); text-decoration: none;
}
.skip-link:focus { left: var(--space-md); top: var(--space-md); }

/* --- Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-body); font-weight: var(--weight-heading-semibold);
  font-size: var(--text-body);
  padding: 0.85em 1.6em;
  border-radius: var(--radius-standard);
  text-decoration: none; cursor: pointer;
  min-height: 44px;
}

.btn-primary {
  background-color: var(--color-brand-blue);
  color: #ffffff; border: none;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-color: var(--color-brand-gold);
  color: var(--color-ink);
}

.btn-secondary {
  background-color: transparent; color: var(--color-brand-blue);
  border: var(--border-width-standard) solid var(--color-brand-blue);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background-color: var(--color-gold-tint);
  color: var(--color-brand-blue);
  border-color: var(--color-brand-gold);
}

/* --- Images / cards ---------------------------------------------------- */

img { border-radius: var(--radius-standard); }

.card {
  background-color: var(--color-bg);
  border-radius: var(--radius-standard);
  padding: var(--space-lg);
  border: var(--border-width-hairline) solid var(--color-border);
  border-left: 4px solid var(--color-brand-blue);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(11, 60, 155, 0.16);
}

.card img { box-shadow: var(--shadow-card); }

/* Placeholder cards (e.g. Services preview, before real content is
   written) — visually distinct from real cards, so an unfinished
   section reads as "content pending," not as a bug. */
.card--placeholder {
  border-style: dashed;
  border-color: var(--color-border);
  box-shadow: none;
}

.card--placeholder .placeholder-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background-color: var(--color-bg-alt);
  border: var(--border-width-hairline) dashed var(--color-border);
  margin-bottom: var(--space-md);
}

.card--placeholder .placeholder-text {
  color: #8a8f9c;
  font-style: italic;
  font-size: 0.9rem;
}

/* --- Icons -------------------------------------------------------------- */

.icon {
  width: 1.5em; height: 1.5em;
  stroke: var(--color-brand-blue); fill: none;
  stroke-width: 1.75; flex-shrink: 0;
}

/* --- Sections & dividers -------------------------------------------------- */

section { padding: var(--space-xl) var(--space-lg); }

section:nth-of-type(even) { background-color: var(--color-bg-alt); }

.section-inner { max-width: 1120px; margin: 0 auto; }

/* --- Statement band -------------------------------------------------------
   This class was used in the HTML from early on but never actually
   defined — that gap is the real bug being fixed here, not a new
   design decision. A plain, solid Brand Blue background with white
   text, consistent with the rest of the locked palette. */

.band {
  background-color: var(--color-brand-blue);
  color: #ffffff;
}

.band .eyebrow { color: var(--color-brand-gold); }
.band h1, .band h2, .band h3 { color: #ffffff; }
.band a { color: #ffffff; }
.band .lang-switch-label { color: #ffffff; }

/* --- Header & navigation --------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background-color: var(--color-bg);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}

.header-inner {
  max-width: 1120px; margin: 0 auto;
  padding: var(--space-sm) var(--space-lg);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: var(--space-lg);
}

.header-inner .logo-link {
  grid-column: 2;
  justify-self: center;
}

.header-left-group {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
}

.header-right-group {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.main-nav ul { list-style: none; display: flex; gap: var(--space-lg); margin: 0; padding: 0; }

.main-nav a {
  text-decoration: none; color: var(--color-ink);
  font-weight: var(--weight-heading-semibold);
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  color: var(--color-brand-blue);
  text-decoration: underline;
}

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-sm); }
.menu-toggle .icon { width: 1.75em; height: 1.75em; }

/* --- Global language switcher (header) -----------------------------------
   A single compact dropdown in the header that sets the site-wide
   default language. Persists across page navigation via localStorage,
   handled in script.js. A dropdown only ever shows its ONE current
   value in the header itself (the full list only appears once opened,
   using the browser/OS's native picker), which is why this fits
   comfortably even on narrow phone screens without needing abbreviated
   labels — full language names are used everywhere. */

.global-lang-switch {
  display: flex;
  align-items: center;
}

.global-lang-select {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: var(--weight-heading-semibold);
  padding: 0.3em 0.3em;
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-standard);
  background-color: var(--color-bg);
  color: var(--color-brand-blue);
  cursor: pointer;
  max-width: 78px;
}

.global-lang-select:hover,
.global-lang-select:focus-visible {
  border-color: var(--color-brand-blue);
}

/* Explanatory note beside the global switcher: kept in the accessibility
   tree at every screen size (so screen reader users always get it via
   aria-describedby), but only shown visually from tablet width up,
   where the header has room for it without crowding the mobile header. */

.global-lang-note {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Section-level language toggle ----------------------------------------
   One button per translatable section, placed right after its heading.
   The button always displays the section's ALTERNATIVE language (the
   one it will switch to), never the language currently shown. */

.lang-switch {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-md); flex-wrap: wrap;
}
.lang-switch-label { font-size: 0.85rem; font-weight: var(--weight-heading-semibold); }

/* One consistent dropdown control style, used for both the section-level
   language selector and (via .global-lang-select) the header switcher —
   same visual language throughout the site. */
.lang-select {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: var(--weight-heading-semibold);
  padding: 0.4em 0.9em;
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-standard);
  background-color: var(--color-bg); color: var(--color-brand-blue);
  cursor: pointer;
}
.lang-select:hover, .lang-select:focus-visible { border-color: var(--color-brand-blue); }

.band .lang-select {
  background-color: #ffffff;
  color: var(--color-ink);
}

[data-lang-version][hidden] { display: none; }

/* --- Grid layout for cards ------------------------------------------------ */

.grid-auto { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }

/* --- Forms ----------------------------------------------------------------- */

.form-field { margin-bottom: var(--space-lg); }
.form-field label { display: block; font-weight: var(--weight-heading-semibold); margin-bottom: var(--space-sm); }
.form-field .required-note { font-weight: var(--weight-body-regular); font-size: 0.85rem; color: var(--color-ink); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--text-body);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width-standard) solid var(--color-border);
  border-radius: var(--radius-standard);
  color: var(--color-ink); background-color: var(--color-bg);
}
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
  border-color: var(--color-brand-blue);
}
.form-error { display: block; color: #9b1c1c; font-size: 0.9rem; margin-top: var(--space-sm); }
.form-error::before { content: "⚠ "; }
.form-success {
  background-color: var(--color-gold-tint);
  border: var(--border-width-hairline) solid var(--color-brand-gold);
  border-radius: var(--radius-standard); padding: var(--space-md); color: var(--color-ink);
}

/* --- Footer ------------------------------------------------------------------ */

.site-footer {
  border-top: var(--border-width-hairline) solid var(--color-border);
  padding: var(--space-xl) var(--space-lg);
}
.site-footer .section-inner {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-lg);
}

/* --- Hero focus-area pillars --------------------------------------------- */

.hero-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

.pillar-tag {
  display: inline-block;
  background-color: var(--color-brand-blue);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: var(--weight-heading-semibold);
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
}

/* Subtle background tint on the hero section itself, using the existing
   alternating-background token, so it doesn't sit on flat white like the
   rest of the page before the alternation begins. */
section:first-of-type {
  background-color: var(--color-bg-alt);
}

.hero-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.hero-visual {
  display: flex;
  justify-content: center;
}

.hero-illustration {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  border-radius: 0;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  color: var(--color-ink);
}

.logo-img {
  width: 180px;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: 0;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-brand-blue);
}

.hero-cta-row {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

.statement-line {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3);
  margin-bottom: var(--space-lg);
}

.statement-line--last {
  margin-bottom: 0;
}

.services-cta {
  margin-top: var(--space-lg);
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-brand-blue);
}

.footer-legal {
  font-size: 0.85rem;
  color: var(--color-ink);
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-credit {
  text-align: center;
  margin-top: var(--space-lg);
}

.footer-copyright {
  text-align: center;
  margin-top: var(--space-sm);
}