/* ===================================================================
   Zinga design system layer (13 October 2026).

   A site-wide audit found 26 different section-heading sizes (30-135px)
   in two display faces: the site's own sections used Barlow Condensed
   700/800 while every approved section package uses Anton. This layer
   gives the site's own sections one headline face and one heading scale,
   from the tokens in core.css (--headline, --h1, --h2, --section-y).

   Loaded after every shared and page stylesheet and before the section
   packages (public/zinga-*), which are excluded here: they are approved,
   calibrated designs that already use Anton. The !important is
   deliberate: page sheets set heading sizes through id selectors, and
   this layer exists to override all of them.
   =================================================================== */

/* Package sections, illustrative device screens and dialogs keep their own type. */

/* 1. One headline face, at its real weight. Anton has a single weight;
      without font-synthesis:none, headings asking for 700/800 would be
      smeared into a fake bold. */
main :is(h1, h2, h3):not(:is(.eco-section, .standard-hero, .zx-section, .zc-section, .zgo, .zs-section, .zt-section, .zpv3, .zh-hero, .znh-hero, .z4, .znf, .device-art, [class*="device-"], dialog) *) {
  font-family: var(--headline) !important;
  font-weight: 400 !important;
  font-synthesis: none;
}
main :is(h1, h2):not(:is(.eco-section, .standard-hero, .zx-section, .zc-section, .zgo, .zs-section, .zt-section, .zpv3, .zh-hero, .znh-hero, .z4, .znf, .device-art, [class*="device-"], dialog) *) {
  letter-spacing: 0 !important;
}

/* 2. One heading scale for marketing pages. Reading pages (legal, guide
      articles) keep their document sizes; the guides book keeps its
      cover typography; form cards keep their compact title. */
body:not(.reading-page) main h1:not(:is(.eco-section, .standard-hero, .zx-section, .zc-section, .zgo, .zs-section, .zt-section, .zpv3, .zh-hero, .znh-hero, .z4, .znf, #book, dialog) *) {
  font-size: var(--h1) !important;
  line-height: 1.1 !important;
}
body:not(.reading-page) main h2:not(:is(.eco-section, .standard-hero, .zx-section, .zc-section, .zgo, .zs-section, .zt-section, .zpv3, .zh-hero, .znh-hero, .z4, .znf, #book, dialog, .form-card, .device-art, [class*="device-"]) *) {
  font-size: var(--h2) !important;
  line-height: 1.1 !important;
}

/* Card titles: one size band (19-24px). Illustrative device screens and
   dialogs keep their own. */
body:not(.reading-page) main h3:not(:is(.eco-section, .standard-hero, .zx-section, .zc-section, .zgo, .zs-section, .zt-section, .zpv3, .zh-hero, .znh-hero, .z4, .znf, #book, dialog, .form-card, .device-art, [class*="device-"]) *) {
  font-size: var(--h3) !important;
  line-height: 1.15 !important;
}

/* 3. Enquiry form sections: on wide screens the heading sits beside the
      form instead of above it. Stacked, these sections ran 730-1,160px
      tall at 1440px; side by side they lose the heading block's height.
      Phones and tablets keep the stacked layout. */
@media (min-width: 1100px) {
  .approved-form-scene {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2.3fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
  }
  .approved-form-scene .approved-form-heading { text-align: left; margin: 0; max-width: none; }
  .approved-form-scene .approved-form-heading p { margin: 14px 0 0; max-width: 36ch; }
  .approved-form-scene .form-card { width: 100%; margin: 0; }
  /* The heading now sits over the scene artwork, so it gets a light
     panel to stay readable, like the site's light cards. */
  .approved-form-scene .approved-form-heading {
    padding: clamp(24px, 2.2vw, 36px);
    border-radius: 8px;
    background: #f7fbffe6;
    box-shadow: 0 12px 32px #001c4a26;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
/* Radio groups (e.g. availability) lay their options out in a row instead
   of a tall single-column stack. */
.approved-form-scene .field-radio { grid-column: span 2; display: block; min-inline-size: 0; }
.approved-form-scene .field-radio > label { display: inline-flex; margin: 0 10px 10px 0; }
@media (max-width: 700px) { .approved-form-scene .field-radio { grid-column: 1 / -1; } }

/* 4. Phones: card groups become one swipeable row (as "Find your way in"
      already is) instead of a full-width stack. Stacked, the homepage
      steps ran 2,061px and the format and club-type grids 1,600-1,700px
      at 390px wide. Each card keeps all of its content; the next card
      peeks in from the right as the cue to swipe. */
@media (max-width: 700px) {
  .v-four-steps, .v5-formats, .v-community-cards {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x, 5%);
    margin-inline: calc(-1 * var(--pad-x, 5%));
    padding: 4px var(--pad-x, 5%) 12px;
    scrollbar-width: none;
  }
  .v-four-steps::-webkit-scrollbar, .v5-formats::-webkit-scrollbar, .v-community-cards::-webkit-scrollbar { display: none; }
  .v-four-steps > *, .v5-formats > *, .v-community-cards > * {
    flex: 0 0 84%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .v-four-steps > .v-live-wire { display: none; }
}

/* 5. Full-menu dialog (below the desktop header): the same three menus
      as the header dropdowns. Side by side where they fit; on phones one
      list, read top to bottom, so no link wraps onto two lines. */
.menu-dialog nav.menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
@media (max-width: 640px) {
  .menu-dialog nav.menu-grid { grid-template-columns: 1fr; gap: 22px; padding: 22px 6px 28px; }
  .menu-dialog nav.menu-grid a { font-size: 22px; padding: 9px 0; }
}