/* Block layout overrides — container widths, full-bleed bands, columns/media-text
   stacking. Mobile-first: unprefixed base rules describe the phone layout, and
   min-width queries add back what wider screens need.

   Design tokens (--c-*, --font-*, --fs-*, etc.) live in style.css's :root block
   only — both files are enqueued together on every page load, and CSS custom
   properties cascade globally once any loaded stylesheet declares them, so the
   tokens are already available here. Edit values in style.css and they apply
   here too.

   Breakpoints
     48em  (768px)     container padding steps up
     49em  (784px)     columns gap steps up — just past WordPress's 782px point,
                       where core stops stacking .wp-block-columns
     max-width queries are used in exactly two places, both flagged below: they
     neutralise a core rule inside a band rather than describe a mobile layout,
     so inverting them would mean re-declaring core's desktop values. */

.wp-block-cover:not(.alignfull) {
  background-color: var(--c-black);
}

/* Default content width — matches WordPress's native "Inner blocks use content
   width" group option: the CONTAINER itself is constrained to max-width and
   centered; nested blocks just fill 100% of it (no per-child override).
   Alignfull covers are excluded so their background/image still bleeds
   edge-to-edge — their .wp-block-cover__inner-container is what gets
   constrained instead. */
.wp-block-group,
.wp-block-group__inner-container,
.wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--c-max);
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 1rem;
}

/* Colour flood = full-bleed band, content stays at container width.
   The base rule above caps EVERY .wp-block-group at --c-max, which stops a
   section's background at 1300px and leaves bars of page background either
   side on wider screens. These are the groups that act as page-level bands
   and must escape that cap:
     - .alignfull, wherever it sits — that is what the class means in WP
     - a background-carrying group directly inside .entry-content (posts and
       pages), .site-main (the front page, which has no .entry-content at all)
       or the footer widget
   Content geometry is unchanged: children are re-capped at --c-max minus the
   gutters, which is the width they already had inside the capped container. */
.wp-block-group.alignfull,
.entry-content > .wp-block-group.has-background,
.site-main > .wp-block-group.has-background,
.footer__widget > .wp-block-group.has-background {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: 1rem;
}
.wp-block-group.alignfull > *,
.entry-content > .wp-block-group.has-background > *,
.site-main > .wp-block-group.has-background > *,
.footer__widget > .wp-block-group.has-background > * {
  max-width: calc(var(--band-measure, var(--c-max, 1300px)) - 2rem);
  margin-inline: auto;
}

/* AWB hero: the block is deliberately full-bleed so the video background spans
   the viewport, and it carries its own gutters. But its content wrapper is
   unconstrained, so hero text ran the full padded width (1536px at a 1600px
   viewport) while every other section's content stops at --c-max. Cap it to
   the same measure so the hero lines up with the rest of the page. Below 48em
   the available width is already narrower than the cap, so this is inert. */
.wp-block-nk-awb > .nk-awb-wrap-content {
  max-width: calc(var(--c-max, 1300px) - 2rem);
  margin-inline: auto;
}

/* Bare flow content in a post. the_content() emits loose paragraphs, headings
   and lists that no block container wraps, so on single.php they ran the full
   viewport — 0..1600 at a 1600px window, text hard against both edges. Cap them
   to the container measure, gutters included via min() so no padding is needed
   on .entry-content itself (padding there would inset full-bleed children too).

   Scoped to a DIRECT child of <article>: that is posts and pages, not events,
   whose .entry-content sits one level deeper inside .event-detail and takes its
   width from there. Covers, groups and align* children are excluded — they are
   already handled above and by their own block rules, and capping them here
   would pull page sections 32px narrower. */
article > .entry-content > *:not(.alignfull):not(.alignwide):not(.wp-block-cover):not(.wp-block-group) {
  max-width: min(calc(var(--c-max, 1300px) - 2rem), calc(100% - 2rem));
  margin-inline: auto;
}

/* Header bar: edge-to-edge row, no vertical padding at any width. */
.site-top .wp-block-group {
  padding: 0;
  display: flex;
  justify-content: space-between;
}

/* Footer bar: the footer widget's block is a .wp-block-group, so it would
   otherwise take a full section's vertical padding and stack it against the
   padding of the section above — ~160px of dead space at that seam. Gutters
   still come from the base rule. (style.css's .footer rule never matches:
   the block is authored with tagName "footer" but no `footer` className.) */
.footer__widget > .wp-block-group {
  padding-block: 2rem 1.75rem;
}

/* Post navigation bar (single.php — posts and events alike). A full-bleed brown
   band that closes the article off above the footer. --band-measure narrows the
   nav to the same 800px measure the event detail page uses, without re-stating
   the band selector list above. Vertical padding is trimmed from the section
   default: this is a bar, not a section. */
.post-nav-bar {
  --band-measure: 800px;
  background-color: var(--c-rule);
  padding-block: 1.5rem;
}

/* Opt-in: keep nested groups at mobile gutters inside a .narrow group. */
.wp-block-group.narrow .wp-block-group {
  padding-left: 1rem;
  padding-right: 1rem;
}

.wp-block-columns {
  margin-bottom: 1rem;
  gap: 1rem !important;
}
.wp-block-columns.no-gap-mobile {
  gap: 0 !important;
}

@media only screen and (min-width: 48em) {
  .wp-block-group,
  .wp-block-group__inner-container,
  .wp-block-cover__inner-container {
    padding: 4rem 2rem;
  }
  .wp-block-group.alignfull,
  .entry-content > .wp-block-group.has-background,
  .site-main > .wp-block-group.has-background,
  .footer__widget > .wp-block-group.has-background {
    padding-inline: 2rem;
  }
  .wp-block-group.alignfull > *,
  .entry-content > .wp-block-group.has-background > *,
  .site-main > .wp-block-group.has-background > *,
  .footer__widget > .wp-block-group.has-background > * {
    max-width: calc(var(--band-measure, var(--c-max, 1300px)) - 4rem);
  }
  .wp-block-nk-awb > .nk-awb-wrap-content {
    max-width: calc(var(--c-max, 1300px) - 4rem);
  }
  .footer__widget > .wp-block-group {
    padding-block: 2.5rem 2.125rem;
  }
  .post-nav-bar {
    padding-block: 2rem;
  }
  article > .entry-content > *:not(.alignfull):not(.alignwide):not(.wp-block-cover):not(.wp-block-group) {
    max-width: min(calc(var(--c-max, 1300px) - 4rem), calc(100% - 4rem));
  }
}

/* Once columns sit side by side (core unstacks at 782px), open the gap up. */
@media only screen and (min-width: 49em) {
  .wp-block-columns,
  .wp-block-columns.no-gap-mobile {
    gap: 2rem !important;
  }
  .wp-block-columns.no-gap-mobile {
    margin-bottom: 0;
  }
}

/* --- max-width exceptions ------------------------------------------------ */

/* Core stacks .is-stacked-on-mobile only up to 600px; extend that to 48em.
   Above 48em core's own grid rules apply untouched, including custom media
   widths and has-media-on-the-right, so this cannot be inverted into a
   min-width rule without re-declaring those values. */
@media only screen and (max-width: 48em) {
  .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
  }
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Core gives .wp-block-column a 2-up flex-basis between 600px and its 782px
   unstacking point. Force 1-up across that band instead. Bounded to match
   core's own range — a min-width inversion would have to restore core's
   flex-basis, which is inline-styled per column. */
@media only screen and (min-width: 600px) and (max-width: 781px) {
  .wp-block-column:not(:only-child) {
    flex-basis: 100% !important;
    flex-grow: 0;
  }
  .wp-block-column:nth-child(2n) {
    margin-left: 0;
  }
}