/* This is dwt/main-content.dwt's own copy of what was originally
   css2/ad-layout.css, kept as a separate file so future changes here never
   affect dwt/time-zones.dwt (frozen, left as historical reference).

   Scope: ONLY dwt/main-content.dwt's own shared structural chrome lives
   here — the content-column width mechanism and the ad-rail system below,
   plus the ShareThis/menu z-index fixes. An individual page's own content
   styling (e.g. a zone-comparison grid, an article's prose) does NOT belong
   in this file — give it its own CSS file instead, linked from that page's
   head-extra editable region, so a page-specific change here can never
   affect every other page attached to this DWT. */

/* Space the ShareThis row below the menu banner. Scoped to the direct-child
   usage in this template only — default.html nests the same class inside
   .hp-social-block in its sidebar, which this selector doesn't match. */
.app > .sharethis-inline-share-buttons {
  margin-top: 26px;
}

/* Same 26px rhythm below ShareThis, before fastlinks — matches the gap
   above ShareThis (menu banner -> ShareThis) so the vertical spacing reads
   consistently rather than fastlinks sitting flush against ShareThis. */
.hp-fastlinks {
  margin-top: 26px;
}

/* Hidden below 600px — on a narrow phone screen, 12 nav links pushes the
   actual page content (hero clock, comparison grid) an extra screen's
   worth down before a visitor sees any of it. Content is more valuable
   than navigation at this width; the full site nav (menu_banner) already
   covers the same links. Matches theme2.css's own .hp-fl-group breakpoint
   (600px) so the section disappears exactly where its own internal grid
   would otherwise still be collapsing to 2 columns. */
@media (max-width: 599px) {
  .hp-fastlinks {
    display: none;
  }
}

/* ShareThis's own script sets an inline z-index (~94034) on its root div.
   Normally z-index does nothing on a position:static element — but .app is
   display:flex, and this div is a DIRECT CHILD of it, making it a flex item.
   Per the flexbox spec, an explicit z-index on a flex item creates a stacking
   context even at position:static (a CSS2 rule exception that only applies
   to flex items). So the 94034 is genuinely active here. On default.html the
   same div is nested several levels deep inside a sidebar — never itself a
   direct flex item — so the exact same inline z-index stays fully inert
   there, which is why the bug never showed up on that page. Fix: go well
   above ShareThis's number, on both the menu and the actual popups. */
#menu_banner {
  z-index: 100000;
}
.menu_hidden,
#menuDropdown {
  z-index: 100001 !important;
}

/* Fastlinks (the #BeginEditable "fastlinks" region, between ShareThis and
   .content-grid) is a plain block element here — this DWT has no sidebar
   to naturally constrain it the way default.html's own sidebar+main
   layout does, so left alone it stretches to the viewport's full width.
   Width-matched instead to default.html's own .hp-fastlinks rendered
   width (938px, confirmed live) so the same component reads the same
   size in both places, even though the two pages reach that number by
   different layout mechanisms. */
.hp-fastlinks {
  /* calc(), not a bare 100% — leaves a 16px gap on each side once the
     viewport narrows below where max-width's own 938px cap is already
     binding, matching #zone-content's own 16px narrow-tier inset above
     (see the @media(max-width:819px) rule further down this file), so
     both elements keep the same "safe margin from the edge" feel. */
  width: calc(100% - 32px);
  max-width: 938px;
  margin-left: auto;
  margin-right: auto;
}

/* Content column: fluid width, not a fixed number. Floor/ceiling are
   per-page configurable via these custom properties — a page that wants a
   different column overrides them in its own head-extra region, e.g.:
     <style>:root{--content-min:700px;--content-max:800px}</style>
   Defaults below suit the zone-detail pages.

   Supported per-page range: --content-min down to 800px, --content-max up
   to ~1200px — both safe to override without touching this shared file or
   the ad system below. E.g. raise --content-max for a wide feature (the
   Call Planner's card tops out at 1060px), or set --content-min equal to
   --content-max for a fixed non-fluid column (an article page wanting a
   steady 800px width).
   ⚠ --content-min feeds TWO separate breakpoints below, not one:
   .content-grid's own activation point (820px = --content-min + the two
   8px edge insets) and the rails' visibility point (1176px =
   --content-min + 376px, the rails' own footprint). A page overriding
   --content-min away from 800px would need its own copy of BOTH
   breakpoints to stay fully correct. --content-max never affects
   either one. */
:root {
  --content-min: 800px;
  --content-max: 1100px;
}

/* A hard minimum never relaxes on its own — true of the grid's minmax()
   floor below (see .content-grid further down) just as it was of the
   old clamp()-based floor this rule originally guarded against
   (original bug: permanent horizontal scrollbar below ~800-830px).
   819px sits one pixel under the grid's own validated floor — 816px =
   --content-min (800) + the two 8px edge insets, confirmed empirically
   by summing computed grid-template-columns rather than assumed —
   handing off to genuinely fluid full-width before that floor would
   cause overflow. */
@media (max-width: 819px) {
  #zone-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    margin: 0;
  }
}

/* TEST ONLY — real ad creatives render invisibly here (placeholder slot ID,
   not a live domain), so this fills the boxes in to check position/size
   across breakpoints. Remove once real ads are serving. */
.ad-slot {
  max-width: 100%;
  overflow: hidden;
  background: var(--surface);
  border: 1px dashed var(--border);
}

/* Ad system: up to three 300x250 ads sit in a row above content by default;
   two 160x600 rails take over beside content once there's room for both.
   The rails are position:sticky inside a CSS Grid (.content-grid, defined
   in the >=820px media query below — content-grid activates there, but
   the rails themselves stay hidden until their own >=1176px visibility
   rule further down) — see those blocks for the full column layout and
   sticky-offset reasoning; not repeated here so the explanations can't
   drift apart again. */
.ad-top-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 16px auto;
  max-width: var(--content-max);
}
.ad-top-row .ad-slot {
  width: 300px;
  height: 250px;
}

/* Extra top-row ads HIDE (display:none) rather than wrap/stack below when
   they don't fit — deliberately not using flex-wrap for this. Stacking two
   250px-tall ads doubles the vertical space they take on a short mobile
   page, which is exactly what the original ad-pair system's "single ad
   only below 650px" rule was built to avoid (Coalition for Better Ads
   30%-of-content density guideline). Numbers: 3 ads need 940px
   (3*300 + 2*20 gaps), 2 need 620px; +32px assumed outer page padding. */
.ad-top-2,
.ad-top-3 {
  display: none;
}
@media (min-width: 652px) {
  .ad-top-2 {
    display: block;
  }
}
@media (min-width: 972px) {
  .ad-top-3 {
    display: block;
  }
}

.ad-side-left,
.ad-side-right {
  display: none;
}

/* >=820px: .content-grid becomes a real CSS Grid, and #zone-content's
   width comes from the grid's own minmax() column instead of a
   separate clamp() rule (deleted — that job is fully absorbed here
   now). 820px sits one pixel above the grid's own validated floor
   (816px = --content-min 800 + the two 8px edge insets, confirmed
   empirically — see the @media(max-width:819px) rule above for the
   handoff below this point).
   Note this is a LOWER threshold than the rails' own visibility
   (1176px, in the separate block below): between 820-1176px, content
   is already grid-sized and fluid, but rails still aren't shown —
   there isn't room for them beside content yet specifically. */
@media (min-width: 820px) {
  .content-grid {
    display: grid;
    /* 7 columns: fixed 8px edge inset | rail | FLEXIBLE gap | clamped
       content | FLEXIBLE gap | rail | fixed 8px edge inset. The
       flexible space belongs BETWEEN rail and content, not between the
       edge and the rail — that's what actually keeps rails pinned near
       the true edge (constant 8px, like the old position:fixed left/
       right) while pushing them away from content as the screen widens.
       (First attempt had this backwards: a flexible outer spacer next
       to a fixed inner margin, which pinned rails near CONTENT instead
       of near the edge on wide screens — caught live at a real 1904px
       window via resize_window.) The gap itself is var(--rail-gap,
       1fr) — a bare 1fr by default, upgraded to a real 20px floor by
       the :has(.ad-side-left) rule further down, once a rail is both
       wide enough to show AND actually present (see that rule's own
       comment for why a bare 1fr alone wasn't enough there). */
    grid-template-columns: 8px auto var(--rail-gap, 1fr) minmax(var(--content-min), var(--content-max)) var(--rail-gap, 1fr) auto 8px;
    grid-template-areas:
      ".  .    .  top   .  .     ."
      ".  left .  main  .  right .";
    /* align-items:start — without this, the grid's default stretch
       would make the rail and #zone-content match each other's height
       instead of each sitting at its own natural size. */
    align-items: start;
  }
  .ad-top-row {
    grid-area: top;
  }
  .ad-side-left {
    grid-area: left;
  }
  .ad-side-right {
    grid-area: right;
  }
  #zone-content {
    grid-area: main;
    /* This tier used to have its own width:clamp(...)+margin:0 auto —
       deleted once the grid column's own minmax() started doing that
       clamping, so this just fills the cell instead of sizing itself
       independently. */
    width: 100%;
    margin: 0;
  }
}

/* Split off from the grid-structure block above (they used to be one
   rule) — this one governs rail VISIBILITY specifically, and needs to
   stay at 1176px even once the grid structure itself moves to a lower
   breakpoint, since rails should only appear once there's actually room
   for them beside content, not as soon as content itself goes fluid.
   Comes after the 652px/972px rules in source order so it correctly
   re-hides ad-top-2/3 here even though both are already "revealed" by
   those individually. */
@media (min-width: 1176px) {
  .ad-top-2,
  .ad-top-3 {
    display: none;
  }

  .ad-side-left,
  .ad-side-right {
    display: block;
    width: 160px;
    height: 600px;
    /* position:sticky, not fixed — the actual fix for "the top margin
       stays even when scrolled." A sticky element sticks relative to its
       own normal in-flow position, which (as a grid item right after the
       header/nav in the document) already starts below the header — so
       top:20px only takes effect once scrolling has carried the rail's
       natural position above that line, i.e. after the header has
       already scrolled out of view. Unscrolled: rail sits at its natural
       position, clearing the header for free — no more hardcoded 200px
       needed. Scrolled: catches and holds at 20px from the viewport top
       instead of 200px, freeing the space this redesign was about.
       Bonus: it also releases at .content-grid's own bottom edge
       (roughly content's end) instead of floating past the footer the
       way position:fixed always did. */
    position: sticky;
    top: 20px;
  }

  /* ⚠ Bug found live 2026-07-08: the rail-to-content gap column (a bare
     1fr in the grid above) could render at 0px even with rails visible.
     CSS Grid gives finite-max tracks (content's minmax(800,1100))
     priority over flexible 1fr tracks when handing out leftover space —
     so content claims everything up to its own 1100px cap FIRST, and
     the gap only gets what's left AFTER that. Content doesn't actually
     reach 1100px until ~1436px wide (8+160+gap+1100+gap+160+8 with both
     gaps at 0) — below that, the whole 1176-1436px range (which
     includes very common widths like 1366px) had rails sitting flush
     against content with zero breathing room. Fix: give the gap a real
     20px floor, matching what the 1176px threshold's own math already
     assumed (376 = 2 x (8 + 160 + 20)) but the bare 1fr silently didn't
     enforce. :has(.ad-side-left) keeps this scoped to pages that
     actually have a rail — a no-ads page has nothing to keep distance
     from, so it stays a cost-free bare 1fr there instead of wasting
     40px it doesn't need. Relies on :has() — a newer CSS feature than
     anything else in this file, but supported in all major browsers
     since ~2023, so not a practical compatibility concern by 2026. */
  .content-grid:has(.ad-side-left) {
    --rail-gap: minmax(20px, 1fr);
  }
}