/* us8zone-article.css — styling for the article-style content below the
   comparison grid on each USA/Canada zone page: the zone's own heading/
   image/prose, plus the shared-look-but-page-local reference tables (DST
   dates, offset chart, GMT/UTC note — see current-newfoundland-time-nst-
   NEW2.php's own comments for why those are duplicated per page rather
   than included from a shared file).

   Built from these tokens: --font-sans (headings, matching zone-hero.css's
   h1), --font-ui (body text and table cells, matching zone-hero.css's
   clock/date), --text / --dim / --accent / --border (see theme2.css). */

.us8zone-article,
.us8zone-ref {
  max-width: 720px;
  margin: 40px auto 0;
}

/* h2 and h3 share font-family/weight/color/clear — only size and margin
   actually vary by heading level, so those are the only properties split
   out below. */
.us8zone-article h2,
.us8zone-ref h2,
.us8zone-article h3 {
  font-family: var(--font-sans);
  color: var(--text);
  clear: both;
}
.us8zone-article h2,
.us8zone-ref h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 14px;
}
.us8zone-article h3 {
  font-size: 17px;
  font-weight: 500;
  margin: 24px 0 10px;
}

.us8zone-article p,
.us8zone-ref p {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.65;
  color: var(--dim);
  margin: 0 0 14px;
}

/* ---- Reference tables (DST dates, offset chart) --------------------------
   Shared look via these class names even though the markup generating them
   is duplicated per page — see the header note above. */
/* Wraps ONLY the heading + table as one tight unit — matches the legacy
   page's own "us_table_line" grouping (heading div sitting directly on the
   table, zero gap). Deliberately does NOT include the intro sentence before
   or the caption after — those stay as plain flowing text outside this box,
   same as the legacy page keeps its real h3/intro outside its own table
   grouping. Only sections that actually have a table get this box (GMT/UTC
   has none, so it stays unboxed). */
.us8zone-ref-box {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
}
/* The small in-box label — legacy's equivalent is a solid blue banner with
   centered white text; kept the same compact spirit (small, zero margin,
   sits directly on the table) but using NEW2's own muted tokens instead of
   introducing a new hardcoded color, and left-aligned to match the rest of
   this page's flow rather than the banner-style centering. Not a real <h2>
   on purpose — it's a label for the table, not a document heading; the
   actual section heading is the one before the intro sentence, outside
   this box. Sized/weighted to match the table's own header row (14px,
   var(--text), 600) rather than the lighter 13px/dim/400 it started at —
   that made the label read as LESS prominent than the data it's labeling. */
.us8zone-ref-box .us8zone-ref-table-label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  text-align: center;
}
.us8zone-ref-table-wrap {
  overflow-x: auto;
  margin: 2px 0 0;
}
/* Caption below the table shares its base look (font/size/color) with
   .us8zone-article-img figcaption below — merged into one rule since they
   were previously two copies of the same three properties; only the
   margin differs per context (see the figcaption rule for its own).
   ⚠ .us8zone-ref-caption alone (0,1,0) loses font-size to the general
   ".us8zone-ref p" rule (0,1,1) since the caption IS a <p> — found live
   while doing this consolidation: it had been silently rendering at 15px
   instead of the intended 13px since it was first built. Scoped under
   .us8zone-ref (0,2,0) here specifically to win that fight, same fix
   already used for .us8zone-ref-table-label. */
.us8zone-article-img figcaption,
.us8zone-ref .us8zone-ref-caption {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--dim);
}
.us8zone-ref-caption {
  margin: 0 0 14px;
}
/* Full width with equal (table-layout:fixed) columns and centered cell
   text — matches the legacy page's own technique for using the available
   width harmoniously (checked live: its columns land within a few px of
   each other, not sized to content) rather than shrinking the table down
   and centering the whole block.

   min-width is load-bearing, not decorative: table-layout:fixed does NOT
   grow cells to fit overflowing nowrap content the way normal elements do
   — without a floor, a narrow .us8zone-ref-table-wrap forces column 2/3
   below their content's real width and the text overlaps instead of the
   table overflowing (which is what would trigger the wrap's own
   overflow-x:auto scroll cleanly). 520px = column 1's fixed 100px + 2x
   210px, the longest date string measured ("Sunday, 4 November, 02:00" at
   185px + 16px padding, with a small safety margin). */
.us8zone-ref-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  table-layout: fixed;
  font-family: var(--font-ui);
  font-size: 14px;
}
.us8zone-ref-table th,
.us8zone-ref-table td {
  text-align: center;
  padding: 1px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--dim);
  white-space: nowrap;
}
.us8zone-ref-table th {
  color: var(--text);
  font-weight: 600;
}
/* First column only ever holds a 4-digit year or a short "UTC-X" offset —
   measured: the widest content across both tables is the "UTC Offset"
   header itself at 75px, so 100px is a safe fixed floor. Fixed (not a
   percentage) on purpose: this column's content never needs more room as
   the table narrows, so every px saved here goes to the two date/zone-name
   columns instead — table-layout:fixed auto-splits their width evenly
   since they have no explicit width of their own. Delays the point where
   nowrap forces a horizontal scrollbar on narrower viewports. */
.us8zone-ref-table th:first-child,
.us8zone-ref-table td:first-child {
  width: 100px;
}
.us8zone-ref-table a {
  color: var(--text);
  text-decoration: none;
}
.us8zone-ref-table a:hover {
  color: var(--accent);
}
/* Current year's DST row — a visual anchor so a reader can spot "today"
   before checking the past/future rows around it. */
.us8zone-ref-current td {
  color: var(--text);
}
.us8zone-ref-current td:first-child {
  border-left: 3px solid var(--accent);
}

/* ---- Article images -------------------------------------------------------
   One base class for what must stay identical everywhere (spacing, caption
   style) + small composable layout modifiers, so future zone articles pick
   a layout without writing new CSS. All five verified against a real image
   while building this, not left untested. */
.us8zone-article-img {
  margin: 20px 0;
}
.us8zone-article-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.us8zone-article-img figcaption {
  margin-top: 6px;
}

.us8zone-article-img--full {
  clear: both;
}

.us8zone-article-img--left-50,
.us8zone-article-img--left-25 {
  float: left;
  margin-right: 24px;
}
.us8zone-article-img--right-50,
.us8zone-article-img--right-25 {
  float: right;
  margin-left: 24px;
}
.us8zone-article-img--left-50,
.us8zone-article-img--right-50 {
  width: 48%;
}
.us8zone-article-img--left-25,
.us8zone-article-img--right-25 {
  width: 23%;
}

@media (max-width: 559px) {
  /* Floated images fight with narrow columns — a 25%-width image is under
     100px wide below this point, too small to read. Full-width below the
     breakpoint, same as how zone-hero.css and us8zone-comparison-grid.css
     both simplify to a single column at this width. */
  .us8zone-article-img--left-50,
  .us8zone-article-img--right-50,
  .us8zone-article-img--left-25,
  .us8zone-article-img--right-25 {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}