/* zone-hero.css — styling for each zone page's own "hero" block: the H1,
   live Standard/DST label, live clock, and live date for that page's own
   zone. Shared across all 8 zone pages (linked from each page's own
   head-extra) since the pattern is identical, only the data differs.
   Distinct from us8zone-comparison-grid.css, which styles the OTHER
   section on the page — the 8-zone comparison grid below this hero.

   Sizes/proportions loosely follow current-newfoundland-time-nst.php's own
   hero treatment (a light, airy, large time with a muted label above and
   date below) — checked live via computed styles, not guessed — but
   rebuilt on this page's own font system (Outfit/Inter, not the old
   page's Arial/Verdana stack) and design tokens, not its hardcoded values.
   Its --text/--dim colors happened to already match this page's tokens
   exactly, which is a nice coincidence, not something this file depends on. */

.zone-hero {
  text-align: center;
}

/* The status/clock/date group centers as ONE block (inline-block respects
   .zone-hero's text-align:center on the parent), but its own lines share a
   single left edge instead of each self-centering — matches the live site's
   own hero layout, checked via computed styles, just without its fixed
   345px margins (which only centered a hardcoded 275px box in a 965px
   column — this instead sizes to its own content at any width). */
.zone-hero-data {
  display: inline-block;
  text-align: left;
}

#zone-content h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 28px;
  color: var(--text);
  margin: 0 0 20px;
}

.zone-status-name,
.zone-status-abbr {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 15px;
  color: var(--dim);
  margin: 0;
}

.zone-clock {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 52px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 4px 0 0;
  /* Lowercases the am/pm suffix Intl renders in uppercase (e.g. "2:48 PM"
     -> "2:48 pm"), matching the legacy page's look. Digits/colons have no
     case so this only affects the am/pm letters — no JS/span needed. */
  text-transform: lowercase;
  /* Intl's own output has exactly one space, right before am/pm — the
     only word-break in this whole string — so word-spacing (not
     letter-spacing, which would also gap every digit) pulls just that
     one gap in without needing a span. em, not a fixed px, so it stays
     proportional at this element's own 40px narrow-viewport size too
     (see the media query below). Measured the natural space at ~14px
     (0.27em) at this font-size; -0.15em leaves ~6px — closer, not
     touching. */
  word-spacing: -0.15em;
}

.zone-date {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 15px;
  color: var(--dim);
  margin: 6px 0 12px;
}

@media (max-width: 559px) {
  .zone-clock { font-size: 40px; }
}

/* Full screen link — goes to the existing live "pink/" page (not a new
   in-page fullscreen mode) so its established search presence and
   backlinks keep pointing at one URL instead of splitting. Icon-only,
   matches the site's existing sitewide convention for full-screen
   triggers (see CLAUDE.md's "Full screen modes" section) rather than
   inventing a new visual idiom. */
.zone-fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--dim);
  text-decoration: none;
}
.zone-fs-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}