/* ==================================================
   BASE TYPOGRAPHY & DOCUMENT
   Purpose:
   Sets the reading experience: body defaults, heading
   rhythm, link behaviour, focus visibility, selection
   colour and the long-form .prose scope used by service,
   technology, industry and location pages.
================================================== */

/* ----------------------------------------------------------------------
   OPTIONAL WEBFONT UPGRADE
   The site ships on a system font stack so it costs zero network requests
   and never shifts layout. To adopt a self-hosted brand face instead, drop
   the .woff2 files into assets/fonts/, uncomment the @font-face blocks
   below and repoint --font-display / --font-sans in css/variables.css.

   @font-face {
     font-family: "Codes Atlas Display";
     src: url("../assets/fonts/display-variable.woff2") format("woff2-variations");
     font-weight: 400 700;
     font-display: swap;
   }
---------------------------------------------------------------------- */

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-snug);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Locks background scrolling while the mobile menu or search overlay is open. */
body.is-scroll-locked {
  overflow: hidden;
}

/* ==================================================
   HEADINGS
================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--tracking-snug); font-weight: var(--fw-semibold); }
h5, h6 { font-size: var(--fs-body); font-weight: var(--fw-semibold); letter-spacing: 0; }

/* ==================================================
   LINKS
================================================== */

a {
  color: var(--brand-600);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--brand-500);
}

/* Inline links inside running copy stay underlined for scannability. */
.prose a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--brand-200);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
}

.prose a:not([class]):hover {
  text-decoration-color: var(--brand-500);
}

/* ==================================================
   FOCUS VISIBILITY
   A single, high-contrast focus ring used by every
   interactive element on the site.
================================================== */

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.section--dark :focus-visible,
.site-footer :focus-visible,
.hero-section :focus-visible {
  outline-color: var(--brand-300);
}

::selection {
  background-color: var(--brand-500);
  color: #FFFFFF;
}

/* ==================================================
   SKIP LINK
   First focusable element on every page; lets keyboard
   and screen-reader users jump past the navigation.
================================================== */

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: var(--z-float);
  padding: var(--s-3) var(--s-6);
  background-color: var(--ink-900);
  color: #FFFFFF;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: transform var(--transition-normal);
}

.skip-link:focus {
  transform: translate(-50%, 0);
  color: #FFFFFF;
}

/* ==================================================
   SCREEN-READER UTILITIES
================================================== */

.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;
}

/* ==================================================
   LONG-FORM PROSE
   Scope applied to the editorial body of inner pages so
   running copy gets comfortable measure and rhythm
   without leaking those rules into card components.
================================================== */

.prose {
  color: var(--ink-600);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.prose > * + * {
  margin-top: var(--s-5);
}

.prose h2 {
  margin-top: var(--s-12);
  margin-bottom: var(--s-4);
}

.prose h3 {
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose p {
  max-width: 68ch;
}

.prose strong {
  color: var(--ink-800);
  font-weight: var(--fw-semibold);
}

.prose ul,
.prose ol {
  padding-left: var(--s-6);
  max-width: 68ch;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li + li {
  margin-top: var(--s-2);
}

.prose li::marker {
  color: var(--brand-400);
}

.prose blockquote {
  margin: var(--s-8) 0;
  padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--brand-500);
  background-color: var(--surface-muted);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--ink-700);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background-color: var(--surface-sunken);
  border-radius: var(--radius-xs);
  color: var(--ink-700);
}

/* ==================================================
   TEXT HELPERS
================================================== */

.text-lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-500);
}

.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }