/*
 * Author: Manoj Mathangadeera
 * Website: https://codemmhub.github.io/
 * Project: USRI Web Development V2027
 * File Name: base.css
 * File Description: Design tokens (colours, type, spacing), self hosted font faces, reset and base typography for the whole site.
 */

/* ---------------------------------------------------------------------------
   FONTS
   Self hosted so nothing loads from a third party (faster, private, and Dev/ stays
   self contained). Only the weights the design uses are included. font-display: swap
   shows text straight away in a fallback font and swaps when the real font arrives.
   Barlow Condensed = headings, numbers, buttons. Barlow = body text.
   --------------------------------------------------------------------------- */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }

/* Fallback faces that are shrunk to the same widths as Barlow. Why: until the real font arrives,
   text shows in a stand in font. If the stand in is wider or narrower than Barlow, headings wrap
   onto a different number of lines and the whole page jumps when the real font lands (Lighthouse
   measured a layout shift of 0.13 on article pages, over the 0.1 limit). size-adjust scales Arial
   so its text takes the same space as Barlow, so nothing moves. The percentages were measured in
   the browser by comparing the width of real headings and paragraphs:
     Barlow Condensed 600 to 800 is about 67 to 69 percent of Arial's width (bold headings)
     Barlow 400 to 500 is about 97 to 98 percent, Barlow 600 about 91 percent (Arial bold is wider)
   local() only uses fonts already on the visitor's device, so this costs no download. */
@font-face { font-family: "Barlow Condensed Fallback"; font-weight: 600 800; size-adjust: 68%;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); }
@font-face { font-family: "Barlow Fallback"; font-weight: 400 500; size-adjust: 97.5%;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); }
@font-face { font-family: "Barlow Fallback"; font-weight: 600 700; size-adjust: 91%;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); }

/* ---------------------------------------------------------------------------
   DESIGN TOKENS
   Every colour, size and spacing value used on the site is defined here once.
   Change a token and the whole site follows.
   --------------------------------------------------------------------------- */
:root {
  /* USRI brand colours (never change these) */
  --blue:   #1F4EA1; /* Usri Steel Azure Blue */
  --yellow: #FFF100; /* Usri Sunbeam Yellow, used sparingly for calls to action and highlights */
  --ink:    #231F20; /* Usri Shadow Grey */

  /* Support colours (the full colour list is kept with the design notes) */
  --platinum:   #F4F6F9; /* light section background */
  --alice:      #E2E8F0; /* dividers, light cards */
  --blue-deep:  #163A7A; /* hover and pressed state of the brand blue */
  --slate:      #5B6470; /* secondary text on light backgrounds, 6:1 contrast on white, 5.5:1 on platinum */
  --ink-soft:   #2E2A2B; /* raised surfaces on dark sections (menus, cards) */
  --steel-line: #C9D2DF; /* borders and rules on light backgrounds */
  --error:      #B3261E; /* form errors only, about 6.4:1 contrast on white */

  --white: #FFFFFF;

  /* Type. Barlow Condensed for headings, Barlow for reading. */
  --font-head: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", "Barlow Fallback", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale: grows smoothly with screen width, no breakpoints needed. */
  --fs-h1: clamp(2.5rem, 1.6rem + 4.6vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-h4: 1.25rem;
  --fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --fs-body: 1.0625rem; /* 17px, comfortable on phones */
  --fs-small: 0.9375rem;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;

  --section-pad: clamp(3.5rem, 2.5rem + 5vw, 6.5rem); /* vertical padding of page sections */
  --container: 75rem;   /* 1200px */
  --gutter: 1.25rem;    /* side padding on phones */

  --radius: 4px;        /* small radius keeps the industrial look */
  --shadow-1: 0 2px 10px rgba(35, 31, 32, 0.12);
  --shadow-2: 0 14px 34px rgba(35, 31, 32, 0.22);

  /* Fixed chrome heights. Other rules read these so nothing overlaps. */
  --header-h: 4.25rem;
  --bar-h: 4rem; /* mobile bottom bar, plus the iPhone safe area added in layout.css */

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 640px)  { :root { --gutter: 2rem; } }
@media (min-width: 1100px) { :root { --header-h: 5rem; } }

/* ---------------------------------------------------------------------------
   RESET
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   TYPOGRAPHY
   Headings are uppercase Barlow Condensed for a signage, spec sheet feel.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 700; }

p { text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

.lead { font-size: var(--fs-lead); line-height: 1.55; }

/* Small label above a heading. */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

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

/* Visually hidden but still read by screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Lets keyboard users jump past the menu. Appears only when focused. */
.skip-link {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 200;
  background: var(--yellow); color: var(--ink); padding: var(--s-3) var(--s-5);
  font-weight: 600; border-radius: var(--radius);
}
.skip-link:focus { top: var(--s-4); }

/* Clear focus ring for keyboard users on every interactive element. */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible,
.bottom-bar :focus-visible, .cookie-notice :focus-visible { outline-color: var(--yellow); }

#main:focus { outline: none; }

/* Respect people who ask their system for less motion. Animations and parallax are also
   switched off in main.js, this is the CSS safety net. */
@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; }
}