/* ==========================================================================
   Pipe Patrol — Base: element defaults + brand typography + container system.
   References tokens.css only. No component styles here.
   ========================================================================== */

/* Brand typography applied to the page (scoped under body to respect admin bar). */
body.pp,
.pp-root {
  font-family: var(--pp-font-body);
  font-size: var(--pp-body);
  line-height: var(--pp-lh-body);
  color: var(--pp-text);
  background: var(--pp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Barlow, sturdy, navy. */
.pp-root h1, .pp-root h2, .pp-root h3, .pp-root h4,
.pp-h1, .pp-h2, .pp-h3, .pp-h4 {
  font-family: var(--pp-font-display);
  color: var(--pp-heading);
  line-height: var(--pp-lh-tight);
  font-weight: var(--pp-fw-bold);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
.pp-root h1, .pp-h1 { font-size: var(--pp-h1); font-weight: var(--pp-fw-black); }
.pp-root h2, .pp-h2 { font-size: var(--pp-h2); font-weight: var(--pp-fw-bold); }
.pp-root h3, .pp-h3 { font-size: var(--pp-h3); font-weight: var(--pp-fw-bold); }
.pp-root h4, .pp-h4 { font-size: var(--pp-h4); font-weight: var(--pp-fw-semi); }

.pp-root p { margin: 0 0 1em; }
.pp-root a { color: var(--pp-link); text-decoration: none; transition: color var(--pp-dur) var(--pp-ease); }
.pp-root a:hover { color: var(--pp-navy); }
.pp-root strong, .pp-root b { font-weight: var(--pp-fw-semi); color: var(--pp-navy); }

.pp-root img, .pp-root picture, .pp-root svg { max-width: 100%; height: auto; display: block; }

/* Eyebrow / kicker */
.pp-eyebrow {
  font-family: var(--pp-font-display);
  font-size: var(--pp-eyebrow);
  font-weight: var(--pp-fw-semi);
  letter-spacing: var(--pp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pp-red);
  margin: 0 0 var(--pp-3);
  display: inline-block;
}

/* Container / width system */
.pp-container {
  width: 100%;
  max-width: var(--pp-container);
  margin-inline: auto;
  padding-inline: var(--pp-gutter);
}
.pp-container--text { max-width: var(--pp-container-text); margin-inline: auto; width: 100%; }

/* Section rhythm — every section gets balanced vertical padding. */
.pp-section { padding-block: var(--pp-section-y); }
.pp-section--navy { background: var(--pp-navy); color: var(--pp-on-navy); }
.pp-section--navy h1, .pp-section--navy h2, .pp-section--navy h3, .pp-section--navy h4 { color: #fff; }
.pp-section--off  { background: var(--pp-off); }

/* Accessible focus + reduced motion */
.pp-root :focus-visible { outline: 3px solid var(--pp-red); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .pp-root *, .pp-root *::before, .pp-root *::after { animation: none !important; transition: none !important; }
}