/*
Gazette extra stylesheet
Footer contract styles plus late cascade hardening. Loaded after Astra
with a dependency on the child style handle, so these declarations win
without !important and without touching style.css.
Sections: 1 footer, 2 header reinforcement, 3 late hardening,
4 sheet, figure and calculator bridge.
*/

/* 1. Footer ------------------------------------------------------ */

/* The child footer: navy ground, copper top rule, three column
   grid of links and the legal line. */
.gz-site-footer {
  background-color: var(--gz-navy);
  border-top: 2px solid var(--gz-copper);
  color: rgba(250, 246, 238, 0.85);
  padding-block: 2.5rem 1.5rem;
}

.gz-footer-inner {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.gz-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .gz-footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 3rem;
  }
}

.gz-footer-col-brand {
  min-width: 0;
}

.gz-footer-brand {
  margin: 0 0 .35rem;
}

.gz-footer-brand-name {
  color: var(--gz-ivory);
  font-family: var(--gz-font-head);
  font-size: 1.45rem;
  line-height: 1.15;
  text-decoration: none;
}

.gz-footer-brand-name:hover,
.gz-footer-brand-name:focus-visible {
  color: var(--gz-copper);
}

.gz-footer-tag {
  color: rgba(250, 246, 238, 0.75);
  font-size: .8125rem;
  margin: 0;
}

.gz-footer-heading {
  color: var(--gz-ivory);
  font-family: var(--gz-font-head);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 .75rem;
  border-bottom: 1px solid rgba(250, 246, 238, 0.25);
}

.gz-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}

.gz-footer-list li {
  margin: 0;
}

.gz-footer-list a {
  color: rgba(250, 246, 238, 0.85);
  display: inline-block;
  padding: .3rem 0;
  text-decoration: none;
}

.gz-footer-list a:hover,
.gz-footer-list a:focus-visible {
  color: var(--gz-copper);
}

.gz-footer-legal {
  border-top: 1px solid rgba(250, 246, 238, 0.25);
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(250, 246, 238, 0.75);
}

.gz-footer-legal p {
  margin: 0 0 .5rem;
}

.gz-footer-age {
  display: inline-block;
  border: 1px solid rgba(250, 246, 238, 0.4);
  padding: .1rem .4rem;
  margin-right: .5rem;
  font-weight: 700;
}

.gz-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem 1.5rem;
}

.gz-footer-bottom p {
  margin: 0;
}

/* 2. Header reinforcement --------------------------------------- */

/* Reinforces the navy header bar against late Astra overrides and
   sets the two row masthead: the brand line on top, the category
   decks on their own centered lines beneath. The ten categories run
   about 1600px, wider than the 72rem measure on every screen, so a
   single centered line would overflow both edges at once and body
   overflow-x clip would cut the first items off with no scroll to
   reach them. The newspaper answer is the deck: the category list
   wraps and each line centers, so nothing ever leaves the measure.
   Below 768px the list keeps the single line horizontal scroll from
   the base stylesheet. Dropdown panels still hang from their items
   from 1100px: the wrap changes line membership, not positioning. */
.gz-site-header {
  background-color: var(--gz-navy);
  border-bottom: 2px solid var(--gz-copper);
  position: relative;
  z-index: 20;
}

.gz-header-inner {
  display: flex;
  flex-wrap: wrap;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: .5rem;
  justify-content: flex-start;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: .25rem;
}

/* The base stylesheet re-tightens the header to one line from 768px
   for the old side by side layout; the masthead keeps the wrap so the
   category decks drop to their own lines. */
@media (min-width: 768px) {
  .gz-header-inner {
    flex-wrap: wrap;
  }
}

.gz-brand,
.gz-nav {
  min-width: 0;
}

.gz-brand {
  flex: 0 0 auto;
}

/* The category run owns its own line at every width. */
.gz-nav {
  flex: 0 0 100%;
}

.gz-nav-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  padding: 0;
}

.gz-nav-list > li {
  flex: 0 0 auto;
}

/* From 768px the category list becomes the centered deck: the list
   wraps between items, never inside a label, and every line centers.
   The base overflow-x auto rule from the sub 1100px media stays in
   place but never fires, because a wrapped list does not overflow. */
@media (min-width: 768px) {
  .gz-nav-list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0;
  }
}

.gz-nav-link {
  color: var(--gz-ivory);
  text-decoration: none;
  padding: .6rem .9rem;
  font-size: .9rem;
  letter-spacing: .02em;
  display: inline-block;
}

.gz-nav-link:hover,
.gz-nav-link:focus-visible {
  color: var(--gz-copper);
}

/* 3. Late hardening ---------------------------------------------- */

/* Frames: every table, figure, panel and board column keeps its
   1px hairline and panel ground against Astra's own chrome rules,
   which land earlier by queue order. No !important anywhere: the
   later queue position wins a tied specificity fight, and where
   Astra outguns the tie the increased specificity here settles it. */
.gz-table,
.gz-calc,
.gz-care,
.gz-figure {
  border: 1px solid var(--gz-rule);
}

.gz-table thead th {
  background-color: var(--gz-navy);
  color: var(--gz-ivory);
}

.gz-table tbody tr:nth-child(even) {
  background-color: var(--gz-panel);
}

.gz-figure {
  background-color: var(--gz-panel);
  padding: 1rem;
}

.gz-calc {
  border-top: 2px solid var(--gz-navy);
  background-color: var(--gz-panel);
  padding: clamp(1.1rem, 3vw, 1.75rem);
}

.gz-care {
  border-left: 3px solid var(--gz-copper);
  background-color: var(--gz-panel);
  padding: 1.25rem 1.5rem;
  margin: 2.25rem 0;
}

.gz-board__col,
.gz-board-col {
  border: 1px solid var(--gz-rule);
  background-color: var(--gz-panel);
}

.gz-board__head,
.gz-board-head {
  background-color: var(--gz-navy);
  color: var(--gz-ivory);
}

/* The sheet keeps its measure and its horizontal padding, which
   Astra's container chrome would otherwise clamp. */
.gz-sheet {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Prevents double margins from Astra's last element rules and gives
   the bottom of the page a clean end above the footer. */
.gz-sheet > :last-child {
  margin-bottom: 0;
}

/* 4. Sheet, figure and calculator bridge ------------------------- */

/* The .gz-sheet wrapper that switches the whole frame system on is
   added at render time by the theme's content filter, so the stored
   pages stay bare and a re-sync changes nothing. This section closes
   the three class gaps the sheet fragments themselves carry.

   a) Figures: the sheets mark their chart plates with gz-fig, the
      base stylesheet frames gz-figure. The bridge gives gz-fig the
      same frame, panel ground, padding and copper small caps
      caption, so every chart plate reads as a framed print. */
.gz-fig {
  margin: 2.25rem 0;
  border: 1px solid var(--gz-rule);
  background-color: var(--gz-panel);
  padding: 1rem;
}

.gz-fig figcaption {
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 1px solid var(--gz-rule);
  color: var(--gz-copper);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-caps: all-small-caps;
}

/* b) Nested calculator: the sheet wraps its calculator placeholder in
   a gz-calc box of its own, and the shortcode renders a second
   gz-calc box inside it. The inner box drops its frame, ground and
   padding, so the inputs and results print inside the sheet's one
   panel. A page whose shortcode sits bare keeps its own box, because
   the two class selectors never match a single one. */
.gz-calc .gz-calc {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}

/* c) Contents and directory titles: the sheets print the On this
   page and Guides under this page titles as paragraphs, while the
   base rules only cover those titles when they are headings. The
   bridge gives the paragraph titles the same small serif heading
   treatment the rest of the sheet carries. */
.gz-toc .gz-toc-title,
.gz-dir .gz-dir-title {
  font-family: var(--gz-font-head);
  font-weight: 700;
  color: var(--gz-navy);
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 1rem;
}