/* ==========================================================================
   Tech4TIME — base.css
   Self-hosted fonts, non-colour design tokens, the modern reset, base element
   styles and the fluid type scale. Loaded first; theme.css supplies colour.

   Load order:  base.css -> theme.css -> layout.css -> components.css -> animations.css

   BREAKPOINT LADDER (mobile-first; min-width unless stated)
     480px    large phones
     768px    tablets, portrait
     1024px   tablets landscape / small laptops
     1280px   laptops
     1440px   desktop
     1920px   large and ultra-wide displays
   Layout is fluid between these via clamp()/grid rather than snapping at each
   step, so nothing jumps between bands.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, matching the NextJS source's Inter)
   -------------------------------------------------------------------------- */

/* Variable font: one file covers weights 400-700. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design tokens (non-colour — colour lives in theme.css)
   -------------------------------------------------------------------------- */

:root {
  /* Typography ---------------------------------------------------------- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  /* Fluid scale, sized for a 320px -> 1440px viewport range. */
  --text-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.857rem + 0.089vw, 0.9375rem);
  --text-base: clamp(1rem, 0.982rem + 0.089vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1.027rem + 0.178vw, 1.1875rem);
  --text-lg: clamp(1.25rem, 1.179rem + 0.357vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.393rem + 0.536vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.696rem + 0.893vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.964rem + 1.429vw, 3.25rem);
  --text-4xl: clamp(2.5rem, 2.143rem + 1.786vw, 3.75rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* Spacing ------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Vertical rhythm for full-bleed sections, fluid across the ladder. */
  --section-padding: clamp(3.5rem, 8vw, 7rem);

  /* Layout -------------------------------------------------------------- */
  --container-max: 75rem;   /* 1200px, matching the NextJS .container */
  --container-wide: 90rem;  /* 1440px, for full-bleed feature bands */
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-height: 4.5rem;

  /* Shape --------------------------------------------------------------- */
  --radius-sm: 0.375rem;
  --radius: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-full: 62.5rem;

  --border-width: 1px;

  /* Motion -------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration: 250ms;
  --duration-slow: 400ms;

  /* Stacking ------------------------------------------------------------ */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-skip-link: 500;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
}

/* Below 64em the dock is fixed to the bottom of the viewport, and the browser
   will scroll a focused element to exactly where the dock covers it. Tabbing
   the footer links or the last of a form on a phone put the focus ring
   underneath the bar — WCAG 2.2 SC 2.4.11 Focus Not Obscured.

   scroll-padding-top above keeps the sticky header off the top of a scroll;
   this is the same thing for the bottom. --dock-height is declared on .dock
   in components.css and is not visible from here, so the fallback is what
   applies — the same arrangement .page already uses in layout.css. */
@media (max-width: 63.999em) {
  html {
    scroll-padding-bottom: calc(
      var(--dock-height, 4rem) + var(--space-md) + env(safe-area-inset-bottom, 0px)
    );
  }
}

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Media defaults: never overflow, never shift layout. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* --------------------------------------------------------------------------
   4. Base typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
}
h2 {
  font-size: var(--text-2xl);
}
h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
h4 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
h5 {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}
h6 {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

p {
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Flow spacing: siblings get a gap, so no bare margins to reset later. */
.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-sm));
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration) var(--ease-out);
}

a:hover {
  color: var(--text-primary);
}

strong,
b {
  font-weight: 650;
  color: var(--text-primary);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

hr {
  height: var(--border-width);
  border: 0;
  background-color: var(--border-subtle);
}

::selection {
  background-color: var(--silver-accent-mid);
  color: var(--bg-base);
}

/* --------------------------------------------------------------------------
   5. Focus states
   The silver accent doubles as the focus ring, per the project's design rules.
   --focus-ring is a contrast-checked token (>=3:1 on every surface), not the
   raw gradient stop, so the ring stays visible in both modes.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Only suppress the default ring where :focus-visible is supported. */
:focus:not(:focus-visible) {
  outline: none;
}

/* <summary> will not take an outline in Firefox, and says so only if you
   look at the pixels: the computed style reports outline-color as the token
   above — so the rule did match — while outline-style stays `none` and the
   offset stays -3px, which nothing here sets. An explicit
   `summary:focus-visible { outline: … }` changes neither.

   Screenshotting a focused summary settles it: zero pixels differ from the
   unfocused one, against 307 for an ordinary link. So the accordions on the
   certifications page and the job posts on the careers page had no focus
   indicator at all — SC 2.4.7 Focus Visible.

   A shadow is drawn where an outline is not. Same colour, same 2px, so it
   reads as the same ring as everything else. */
summary:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   6. Utilities
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

/* Visible to screen readers only. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard shortcut past the nav; revealed on focus. */
.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: var(--z-skip-link);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--duration) var(--ease-out);
}

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

/* --------------------------------------------------------------------------
   7. Reduced motion
   Honoured globally; individual components do not need to repeat it.
   -------------------------------------------------------------------------- */

@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;
    /* The delays have to go too, and this was missing. Shortening a duration
       to nothing while leaving its delay in place does not remove the motion,
       it removes the part that explains it: the terminal's last line would
       still sit blank for a second and a half before snapping in, and a
       staggered row would still arrive in dribs. Negative rather than zero so
       an animation that has one starts already past its first frame. */
    animation-delay: -1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}