/* ==========================================================================
   Integrated Septic Solutions — base
   Reset, typography, and the full-bleed section primitive.
   Requires tokens.css.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

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

img, picture, svg { max-width: 100%; display: block; }

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

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


/* --- Document ------------------------------------------------------------- */

body {
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* --- Headings ------------------------------------------------------------- */
/* Georgia throughout. Numerals inside headings get swapped to the sans —
   see .num below — because Georgia's old-style figures sit unevenly. */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  font-weight: var(--weight-normal);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

h1 { font-size: var(--size-h1); line-height: var(--leading-tight);
     letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); font-family: var(--font-text);
     font-weight: var(--weight-bold); }

.display {
  font-family: var(--font-display);
  font-size: var(--size-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}

/* Wrap numerals appearing inside Georgia headings.
   <h2>The <span class="num">CEN5</span> system</h2> */
.num {
  font-family: var(--font-text);
  font-weight: var(--weight-medium);
  font-variant-numeric: lining-nums tabular-nums;
}


/* --- Body copy ------------------------------------------------------------ */

p { max-width: var(--measure); }
p + p { margin-top: var(--space-sm); }

.lead {
  font-size: var(--size-lead);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  max-width: 54ch;
}

small, .caption {
  font-size: var(--size-caption);
  color: var(--color-text-muted);
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--color-link-hover); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Numeric content must never inherit Georgia. */
table, .stat, .spec { font-variant-numeric: lining-nums tabular-nums; }


/* --- Full-bleed section primitive ------------------------------------------ */
/* .section spans the viewport. .section__inner holds the readable column.
   No negative margins, no 100vw (which overflows when a scrollbar is present).

   <section class="section section--alt">
     <div class="section__inner"> ... </div>
   </section>
*/

.section {
  width: 100%;
  padding-block: var(--section-pad);
}

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

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

.section--alt     { background: var(--color-bg-alt); }
.section--inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.section--flush   { padding-block: 0; }

.section--inverse h1,
.section--inverse h2,
.section--inverse h3 { color: var(--color-text-inverse); }
.section--inverse p,
.section--inverse .lead { color: var(--color-text-inverse-mut); }
/* Buttons carry their own color; excluding them here avoids a specificity
   collision that would paint .btn--on-dark white-on-white. */
.section--inverse a:not(.btn) { color: #FFFFFF; }

/* Hairline between two sections sharing a background. */
.section--ruled + .section--ruled { border-top: var(--border-hair); }


/* --- Layout helpers -------------------------------------------------------- */

.stack > * + * { margin-top: var(--space-sm); }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }

.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-lg); }
}

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


/* --- Motion ---------------------------------------------------------------- */

@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;
  }
}


/* --- Print ----------------------------------------------------------------- */
/* Designers print spec pages. Worth getting right cheaply. */

@media print {
  .section { padding-block: var(--space-md); }
  .section--inverse { background: none; color: #000; }
  .section--inverse h1, .section--inverse h2, .section--inverse h3 { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}