/* tz-map-shared.css — shared mechanism for the time-zone map-overlay
   pages (times/time-zones/.../*-time-zone-map*.php - currently the
   NZ/Australia page, with Mexico/Australia/Canada/USA to follow).

   This file is deliberately narrow: it holds only what's genuinely the
   SAME across every one of these pages, not everything that LOOKS the
   same on the one page this was split out of. Each page keeps its own
   CSS file for what's actually page-specific:
     - pin positions and colors (a different city set per map)
     - .tz-map-wrap's own margin-top/margin-bottom (how far THAT map's
       pins extend above/below its own image - not the same for every
       map)
     - the text-sizing cqw ratios and clamp() bounds for the label/time/
       date lines - these are calibrated against that page's own worst-
       case content, and worst case is NOT the same shape everywhere:
       Mexico's pins carry city names, not just a short "UTC+7"-style
       offset code, so its label needs its own ratio, not this one's
     - both responsive breakpoint tiers' own fixed box widths and pin
       position nudges - tuned against that page's own pin layout and
       collision geometry (which pins sit close together), not reusable
       across maps with a different city set

   See nz-australia-tz-map.css for a concrete example of everything a
   page built on this still has to add for itself. */

.tz-map-wrap {
	position: relative;
	width: 100%;
	/* 965px is the shared native width of all 5 map images - confirmed
	   by checking each page's own <img> tag (only their heights
	   differ), not assumed. A page's own margin-top/margin-bottom stay
	   page-local - see the file header above for why. */
	max-width: 965px;
}
/* Dark-theme backdrop for the map's own transparent PNG background and
   near-black baked-in labels (state/city/country names, the legend) -
   confirmed by sampling actual pixels: alpha=0 outside the landmasses,
   legend text literal rgb(0,0,0). Readable in light theme, where the
   transparent areas show the light page background through; nearly
   invisible in dark theme, where the same areas show the near-black
   page background instead.

   A full-bleed ::before rather than a background directly on
   .tz-map-wrap, for two reasons: (1) .tz-map-wrap's own width is the
   965px coordinate system every pin's left:% is calibrated against -
   changing IT to go full-width would silently move every pin; (2) the
   pins that overflow above/below the image (Jakarta, UTC) sit in
   .tz-map-wrap's margin-top/margin-bottom space, which is outside its
   own painted background by definition - a background on the wrap
   itself could never reach them anyway. A separate absolutely-
   positioned layer sidesteps both: it can be sized and moved
   independently of .tz-map-wrap's own box.

   Mechanism only - width/left/margin-left is the full-bleed trick
   (confirmed safe: .content-grid's two content-flanking gap columns
   share one var(--rail-gap,1fr), and the ad rails are equal width on
   both sides, so #zone-content is genuinely viewport-centered at every
   width, ad rails or not). top/bottom/background (how far the glow
   reaches, and its actual gradient) stay page-local, same split as the
   cqw text-sizing and pin positions above - both depend on that page's
   own image aspect ratio and pin layout, not something every map
   shares. */
.tz-map-wrap::before {
	content: "";
	position: absolute;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	pointer-events: none;
	/* Negative, not 0 - found live 2026-09-17: nothing between this and
	   the page root creates a stacking context (.tz-map-wrap, #zone-
	   content and .content-grid all leave z-index at auto), so with
	   z-index:0 this fell back to plain DOM order against the ad rails
	   (position:sticky, also z-index:auto) it now visually reaches over
	   thanks to the 100vw breakout - and rail-block markup comes BEFORE
	   main-content in the page, so this later-in-DOM layer painted over
	   them. -1 sorts it below any z-index:auto positioned content
	   sitewide (the rails included) while staying above the plain page
	   background behind it - the only things it needs to stay above are
	   #map_pos and the pins, both z-index:auto too, i.e. still ranked
	   higher than -1. */
	z-index: -1;
}
#map_pos {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	/* Static elements always paint BELOW positioned ones, regardless of
	   z-index or DOM order (CSS2.1 stacking order: in-flow non-
	   positioned content is its own layer, under any positioned
	   descendant). Without this, the glow ::before above - despite
	   being first in DOM order - would paint OVER this still-static
	   img, hiding the map entirely. relative with no offset lifts it
	   into the positioned layer (so DOM order decides paint order
	   again: glow, then img, then the pins) without moving it at all. */
	position: relative;
}
.time_location {
	border: 1px solid #8C8A68;
	padding: 7px;
	position: absolute;
	/* Pastel pin backgrounds (page-local) need a fixed dark text color
	   here, not the inherited body color - in dark theme that inherited
	   color is near-white, unreadable against a light pastel fill. */
	color: #000000;
	/* Makes this box a query container, so a page's own cqw-based text
	   sizing (in that page's own CSS file) is a % of ITS width
	   specifically - not the viewport - with padding/border already
	   excluded (cqw is based on the content box). Same technique
	   already used for this reason in css2/us8zone-comparison-grid.css.
	   A page sets its own width (a % of the map at full size, plus
	   fixed px at its own narrow-viewport tiers) - there's no single
	   width every map's pin content fits, since longer labels need
	   more room than short ones. */
	container-type: inline-size;
	/* The page's base line-height (1.5, inherited from theme2.css's
	   body text) is tuned for reading prose, not a tight 3-line label
	   stack - it adds ~0.25 x font-size of empty leading above AND
	   below every line, most visible as a gap before the date line.
	   Inherits to every child below. */
	line-height: 1.15;
}
/* Label, time, and date are always the 1st/2nd/3rd children of every
   pin, in that fixed order - see a page's own markup - so nth-child
   reaches all of them without needing its own class on each one. Only
   `display` is set here: font-size/cqw values are content-dependent (a
   short offset code and a label carrying a city name need different
   ratios) and belong in each page's own file. */
.time_location > *:nth-child(1) {
	/* The label is a <span> (or an <a>, e.g. a UTC pin) - inline by
	   default, so without this it keeps its line-box height from the
	   AMBIENT inherited font size (the page's base ~16px/1.5 line-height
	   "strut"), not its own much smaller size, leaving a gap above the
	   text that grows as the box shrinks. Block removes that strut -
	   true for any page using this label pattern, not just one page. */
	display: block;
}
.map_date {
	color: #000000;
}
.white_text {
	color: #FFFFFF;
}