/* ==========================================================================
   Shahzad Textile — Socks Division
   style.css — design tokens, reset, base typography, layout primitives

   Design plan (kept here for reference, not just in README):
   - Palette: pulled from the real shahzadtex.com brand, not invented — Ink
     (navy #1a355e, from the logo wordmark), Paper (white, site background),
     Signal (#2c9942, the site's confirmed primary green — links/buttons/nav),
     Signal-dim (#006838, confirmed hover green), Cord (#11243d, a confirmed
     darker navy accent), Steel/Chalk (confirmed neutral grays from the
     site's own stylesheet). See README.md "Design plan" for the full
     source-of-truth breakdown.
   - Logo: the real Shahzad Textile group logo (assets/img/brand-logo-*.png),
     not a custom mark — see README.md "Real brand assets".
   - Type: Space Grotesk for display/headlines (confident, slightly
     industrial-geometric), Inter for body/UI (clean, highly legible). This
     is an original choice, not inherited from the main site.
   - Layout concept: "The Line" — a continuous vertical stitch/thread guide
     that runs down the page on desktop, tying section markers together like
     the yarn path through a knitting machine. Full-bleed alternating
     sections, asymmetric grid bias rather than perfectly centered columns.
   - Signature visual element: "The Loop Mark" — an animated SVG emblem of a
     rotating circular-knitting cylinder with a yarn feeder, recolored to the
     real brand green/navy, used as a decorative accent (hero, careers page)
     alongside the real logo in the header/footer.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Palette */
  --color-ink: #1a355e;
  --color-ink-soft: #24366f;
  --color-paper: #ffffff;
  --color-paper-dim: #f4f4f4;
  --color-signal: #2c9942;
  --color-signal-dim: #006838;
  --color-cord: #11243d;
  --color-cord-soft: #1a355e;
  --color-steel: #747474;
  --color-chalk: #f7f7f7;
  --color-white: #ffffff;

  /* Type */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --fs-900: clamp(2.75rem, 2rem + 3.2vw, 5.5rem);
  --fs-800: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem);
  --fs-700: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-600: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-500: 1.125rem;
  --fs-400: 1rem;
  --fs-300: 0.875rem;
  --fs-200: 0.75rem;

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

  /* Layout */
  --content-max: 78rem;
  --content-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --line-thread-x: clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;

  --header-h: 76px;
}

/* Reduced motion: flip a root flag JS also reads, and neutralize animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

body {
  font-family: var(--font-body);
  background: var(--color-paper);
  color: var(--color-ink);
  line-height: 1.5;
  font-size: var(--fs-400);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); }

p { max-width: 62ch; }
p.lead { font-size: var(--fs-500); color: var(--color-ink-soft); }

/* Visible keyboard focus states everywhere */
:focus-visible {
  outline: 3px solid var(--color-signal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -48px;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-sm); }

/* ---------- Layout primitives ---------- */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

.section {
  position: relative;
  padding-block: var(--space-2xl);
}

.section--tight { padding-block: var(--space-xl); }

.section--ink {
  background: var(--color-ink);
  color: var(--color-paper);
}

.section--cord {
  background: var(--color-cord);
  color: var(--color-paper);
}

.section--chalk { background: var(--color-chalk); }

.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-xl);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--fs-300);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-signal);
  margin-bottom: var(--space-sm);
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* "The Line" — the thread guide that runs down the page, desktop only */
.thread-line {
  position: absolute;
  left: var(--line-thread-x);
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, currentColor 12%, currentColor 88%, transparent);
  opacity: 0.18;
  pointer-events: none;
}

@media (max-width: 900px) {
  .thread-line { display: none; }
}

/* Scroll-reveal (progressive enhancement; JS toggles .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

::selection {
  background: var(--color-signal);
  color: var(--color-white);
}