/* =========================================================================
   ProGrade — Base layer
   Foundational typography, layout, and utility classes. References tokens.css
   only — no raw values here. Matches the cross-reference/fitment mockup.
   ========================================================================= */

html {
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating text on rotate */
  text-size-adjust: 100%;
}

body {
  font-family: var(--pg-font-body);
  font-size: var(--pg-fs-body);
  line-height: var(--pg-lh-body);
  color: var(--pg-graphite);
  background-color: var(--pg-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;         /* long part numbers/URLs never force sideways scroll */
}

/* Media never overflows its column */
img, svg, video { max-width: 100%; height: auto; }

/* --- Headings (Archivo, tight) ------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pg-font-head);
  line-height: var(--pg-lh-tight);
  letter-spacing: -0.025em;
  color: var(--pg-graphite);
  font-weight: 800;
}
h1 { font-size: var(--pg-fs-h1); }
h3 { font-size: var(--pg-fs-h3); font-weight: 700; letter-spacing: -0.02em; }

/* --- Links -------------------------------------------------------------- */
a { color: var(--pg-navy); text-underline-offset: 0.15em; }
a:hover { color: var(--pg-navy-2); }

/* --- Part numbers & spec values: ALWAYS mono ---------------------------- */
.pg-partno,
.pg-spec-value {
  font-family: var(--pg-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Small monospaced uppercase label */
.pg-mono-label {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-fs-mono-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pg-navy);
  font-weight: 500;
}

/* --- Layout container --------------------------------------------------- */
.pg-container {
  width: 100%;
  max-width: var(--pg-maxw);
  margin-inline: auto;
  padding-inline: var(--pg-space-3);
}

/* --- Accessibility: visible focus --------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pg-navy);
  outline-offset: 2px;
  border-radius: var(--pg-radius);
}

/* --- Touch devices: comfortable tap targets (WCAG 2.5.5 ~44px) ---------- */
@media (hover: none) and (pointer: coarse) {
  .pg-btn, .pg-find, .pg-btn-w { min-height: 44px; }
  .pg-nav a { padding-block: 10px; }
  .pg-faq summary { padding-block: 16px; }
  .pg-breadcrumb a { padding: 4px 0; }
}

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