/* ==========================================================================
   CORINTH GAS & WATER — FOUNDATION
   Typography, fluid layout and motion. Loaded AFTER bootstrap.min.css and
   BEFORE style.css, so Bootstrap's defaults are replaced here and anything
   site-specific in style.css still wins.

   No brand colours live in this file. Every colour is a token defined in
   tokens.css, so the palette the customer picks drops in without touching
   a single rule below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — type, space, motion
   -------------------------------------------------------------------------- */
:root {
  /* Type families. Poppins carries headings, Inter carries reading text —
     Inter's tall x-height and unambiguous letterforms (1 / l / I stay
     distinct) are what make it hold up for older readers at small sizes. */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid type scale. Each step interpolates between a phone size and a
     desktop size across the viewport range instead of jumping at a
     breakpoint — that smooth growth is what stops text looking cramped at
     900px and oversized at 1600px. Ratio is ~1.22 (minor third), which
     keeps a clear hierarchy without the display sizes running away. */
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);  /* 14 → 15  fine print   */
  --step-0:  clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem); /* 17 → 19  body         */
  --step-1:  clamp(1.25rem, 1.18rem + 0.36vw, 1.5rem);      /* 20 → 24  h4 / lead    */
  --step-2:  clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem);      /* 24 → 30  h3           */
  --step-3:  clamp(1.75rem, 1.55rem + 1vw, 2.375rem);       /* 28 → 38  h2           */
  --step-4:  clamp(2.125rem, 1.8rem + 1.6vw, 3rem);         /* 34 → 48  h1           */

  /* Fluid spacing on the same principle, so rhythm scales with the type
     rather than staying fixed while the words grow. */
  --space-2xs: clamp(0.25rem, 0.24rem + 0.06vw, 0.3125rem);
  --space-xs:  clamp(0.5rem, 0.48rem + 0.12vw, 0.625rem);
  --space-s:   clamp(0.75rem, 0.71rem + 0.2vw, 0.9375rem);
  --space-m:   clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  --space-l:   clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
  --space-xl:  clamp(2rem, 1.8rem + 1vw, 3rem);
  --space-2xl: clamp(3rem, 2.6rem + 2vw, 5rem);

  /* Reading measure. Prose wider than roughly 70 characters makes the eye
     lose its place on the return sweep — the single biggest readability
     win available on pages like About Us and History, which currently run
     the full width of a col-lg-8. */
  --measure: 68ch;
  --measure-narrow: 54ch;

  /* Motion. One duration set, so hovers across the site feel like one
     system rather than each component inventing its own timing. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;
  --radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   2. BASE — sensible resets Bootstrap 4 predates
   -------------------------------------------------------------------------- */

/* Bootstrap 4 sets html{font-size:16px} and body in rem. Leaving the root
   alone keeps the user's own browser font-size setting working (an
   accessibility requirement people routinely break by setting html{font-size}
   in px); the fluid scale above does the sizing instead. */
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  letter-spacing: 0.001em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.018em;
  margin-top: 0;
  margin-bottom: var(--space-s);
}

h1, .h1 { font-size: var(--step-4); letter-spacing: -0.026em; }
h2, .h2 { font-size: var(--step-3); letter-spacing: -0.022em; }
h3, .h3 { font-size: var(--step-2); }
h4, .h4 { font-size: var(--step-1); }
h5, .h5 { font-size: var(--step-0); letter-spacing: -0.01em; }
h6, .h6 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; }

p, li, dd, blockquote { font-size: var(--step-0); }
p { margin-bottom: var(--space-m); }

small, .small, .font-smaller { font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   3. "PRETTY PRINT" — text that lays out properly at every window size
   --------------------------------------------------------------------------
   Four separate problems, four fixes:

   a) Ragged, uneven line endings and single-word last lines (orphans).
   b) Headings breaking at bad points — "Corinth Gas and\nWater".
   c) Lines running too long to track comfortably on wide screens.
   d) Long unbroken strings (URLs, e-mail addresses, ZIP+4, phone numbers)
      pushing the layout wider than the screen on phones.
   -------------------------------------------------------------------------- */

/* (a) Body copy: the browser evaluates the whole paragraph and evens out the
   ragged edge, and never leaves a lone word on the last line. */
p, li, dd, dt, blockquote, figcaption, td, th, label,
.carousel-caption p, #announcements-list li, .lead {
  text-wrap: pretty;
}

/* (b) Headings: lines are balanced to near-equal length, so a two-line
   heading splits sensibly instead of dumping one word onto line two. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.carousel-caption h1, .carousel-caption h2, .carousel-caption h3,
.carousel-caption h5, .breadcrumb, .tile-cap {
  text-wrap: balance;
}

/* (c) Cap the reading measure. Applied to prose inside page content only, so
   it never constrains grids, cards, navs or tables. The margin rules keep
   left-aligned text left-aligned — the column simply stops growing. */
#page-content p,
#page-content li,
#page-content dd,
#page-content blockquote {
  max-width: var(--measure);
}

/* Inside a narrow column the cap is already met by the column itself; this
   just stops a stray wide element fighting it. */
#page-content .col-lg-4 p,
#page-content .col-md-4 p,
.sidebar p, .sidebar li {
  max-width: var(--measure-narrow);
}

/* (d) Overflow safety. Long words and URLs wrap instead of forcing a
   horizontal scrollbar; min-width:0 undoes the flex/grid default that lets
   children refuse to shrink below their content width — the single most
   common cause of "the page scrolls sideways on my phone". */
body { overflow-wrap: break-word; }

/* The navbar, footer and sidebars are injected by js/script.js after DOM-ready,
   so for a fraction of a second during load the page can measure wider than the
   viewport before those pieces settle. The settled layout is clean at every
   width from 320 up (verified), so this is a guard against the flicker, not a
   patch over a real overflow — if a genuine overflow is ever introduced it will
   still show up in the settled measurement rather than being silently hidden.
   overflow-x: clip rather than hidden: clip does not create a scroll container,
   so it cannot break position: sticky on the header. */
html { overflow-x: clip; }

.row > [class*="col"],
.d-flex > *,
.card,
.quick-card,
.info-panel-card {
  min-width: 0;
}

img, video, svg, iframe, table { max-width: 100%; }
img, video { height: auto; }

/* Tables can't wrap below a certain width, so they scroll inside their own
   box rather than dragging the page sideways with them. */
.table-responsive, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Numbers that sit in columns line up when the digits are the same width —
   rates, dates, meter readings, phone numbers. */
table td, table th, .tabular { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. CONTAINER QUERIES — components size to their container, not the window
   --------------------------------------------------------------------------
   A card in the narrow sidebar and the same card in the wide main column are
   at identical viewport widths, so a media query can't tell them apart and
   both get the same treatment — which is why sidebar cards look cramped on
   this kind of layout. A container query asks how much room THIS card
   actually has. Same component, correct at every placement, including the
   half-desktop window width that media queries handle worst.
   -------------------------------------------------------------------------- */
#page-content .col-12,
#page-content [class*="col-lg"],
#page-content [class*="col-md"],
.sidebar {
  container-type: inline-size;
}

/* --------------------------------------------------------------------------
   5. MOTION
   -------------------------------------------------------------------------- */

/* Cross-document view transitions: navigating between pages cross-fades
   instead of flashing white. Two declarations, no JavaScript, and it works
   precisely because this is a plain multi-page site. Browsers without
   support ignore it and navigate exactly as they do today. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation-duration: var(--dur); }
::view-transition-new(root) { animation-duration: var(--dur); }

/* Focus: one visible, high-contrast ring everywhere, including for keyboard
   users on elements Bootstrap 4 styles inconsistently. Uses currentColor so
   it stays legible against whatever surface it lands on. */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

@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;
  }
  @view-transition { navigation: none; }
}