/* Core ships preset classes for font size/family. Weight does not have
  equivalent preset classes, so these utilities map to theme custom tokens. */

.has-pad-font-weight-light {
  font-weight: var(--wp--custom--font-weight--light, 300);
}

.has-pad-font-weight-regular {
  font-weight: var(--wp--custom--font-weight--regular, 400);
}

.has-pad-font-weight-medium {
  font-weight: var(--wp--custom--font-weight--medium, 500);
}

.has-pad-font-weight-semibold {
  /* theme.json keys this token "semi-bold", so that's the emitted var name. */
  font-weight: var(--wp--custom--font-weight--semi-bold, 600);
}

.has-pad-font-weight-bold {
  font-weight: var(--wp--custom--font-weight--bold, 700);
}

/* Core does not ship vertical padding preset classes. These map to
  theme spacing tokens so editors can apply consistent section rhythm. */

.has-pad-padding-y-xxs {
  padding-top: var(--wp--preset--spacing--xxs, 0.95rem);
  padding-bottom: var(--wp--preset--spacing--xxs, 0.95rem);
}

.has-pad-padding-top-xxs {
  padding-top: var(--wp--preset--spacing--xxs, 0.95rem);
}

.has-pad-padding-bottom-xxs {
  padding-bottom: var(--wp--preset--spacing--xxs, 0.95rem);
}

.has-pad-padding-y-xs {
  padding-top: var(--wp--preset--spacing--xs, 1.5rem);
  padding-bottom: var(--wp--preset--spacing--xs, 1.5rem);
}

.has-pad-padding-top-xs {
  padding-top: var(--wp--preset--spacing--xs, 1.5rem);
}

.has-pad-padding-bottom-xs {
  padding-bottom: var(--wp--preset--spacing--xs, 1.5rem);
}

.has-pad-padding-y-s {
  padding-top: var(--wp--preset--spacing--s, 2.5rem);
  padding-bottom: var(--wp--preset--spacing--s, 2.5rem);
}

.has-pad-padding-top-s {
  padding-top: var(--wp--preset--spacing--s, 2.5rem);
}

.has-pad-padding-bottom-s {
  padding-bottom: var(--wp--preset--spacing--s, 2.5rem);
}

.has-pad-padding-y-m {
  padding-top: var(--wp--preset--spacing--m, 4rem);
  padding-bottom: var(--wp--preset--spacing--m, 4rem);
}

.has-pad-padding-top-m {
  padding-top: var(--wp--preset--spacing--m, 4rem);
}

.has-pad-padding-bottom-m {
  padding-bottom: var(--wp--preset--spacing--m, 4rem);
}

.has-pad-padding-y-l {
  padding-top: var(--wp--preset--spacing--l, 6.5rem);
  padding-bottom: var(--wp--preset--spacing--l, 6.5rem);
}

.has-pad-padding-top-l {
  padding-top: var(--wp--preset--spacing--l, 6.5rem);
}

.has-pad-padding-bottom-l {
  padding-bottom: var(--wp--preset--spacing--l, 6.5rem);
}

.has-pad-padding-y-xl {
  padding-top: var(--wp--preset--spacing--xl, 8rem);
  padding-bottom: var(--wp--preset--spacing--xl, 8rem);
}

.has-pad-padding-top-xl {
  padding-top: var(--wp--preset--spacing--xl, 8rem);
}

.has-pad-padding-bottom-xl {
  padding-bottom: var(--wp--preset--spacing--xl, 8rem);
}

.has-pad-padding-y-xxl {
  padding-top: var(--wp--preset--spacing--xxl, 10rem);
  padding-bottom: var(--wp--preset--spacing--xxl, 10rem);
}

.has-pad-padding-top-xxl {
  padding-top: var(--wp--preset--spacing--xxl, 10rem);
}

.has-pad-padding-bottom-xxl {
  padding-bottom: var(--wp--preset--spacing--xxl, 10rem);
}

/* Color utilities mirror theme palette slugs for explicit class-based styling
   in blocks where relying on block supports is not practical. */

.has-pad-color-primary {
  color: var(--wp--preset--color--primary, #79addb);
}

.has-pad-color-secondary {
  color: var(--wp--preset--color--secondary, #101e33);
}

.has-pad-color-background {
  color: var(--wp--preset--color--background, #ffffff);
}

.has-pad-color-white {
  color: var(--wp--preset--color--white, #ffffff);
}

.has-pad-color-mid-grey {
  color: var(--wp--preset--color--mid-grey, #ffffff99);
}

.has-pad-background-primary {
  background-color: var(--wp--preset--color--primary, #79addb);
}

.has-pad-background-secondary {
  background-color: var(--wp--preset--color--secondary, #101e33);
}

.has-pad-background-background {
  background-color: var(--wp--preset--color--background, #ffffff);
}

.has-pad-background-white {
  background-color: var(--wp--preset--color--white, #ffffff);
}

.has-pad-background-mid-grey {
  background-color: var(--wp--preset--color--mid-grey, #ffffff99);
}

.has-pad-border-primary {
  border-color: var(--wp--preset--color--primary, #79addb);
}

.has-pad-border-secondary {
  border-color: var(--wp--preset--color--secondary, #101e33);
}

.has-pad-border-background {
  border-color: var(--wp--preset--color--background, #ffffff);
}

.has-pad-border-white {
  border-color: var(--wp--preset--color--white, #ffffff);
}

.has-pad-border-mid-grey {
  border-color: var(--wp--preset--color--mid-grey, #ffffff99);
}

.has-pad-divider-bottom-primary {
  position: relative;
}

.has-pad-divider-bottom-primary:after {
  content: "";
  width: calc(100% - var(--wp--style--root--padding-left, 0px) * 2);
  background-color: var(--wp--preset--color--primary, #79addb);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.has-pad-divider-bottom-secondary {
  position: relative;
}

.has-pad-divider-bottom-secondary:after {
  content: "";
  width: calc(100% - var(--wp--style--root--padding-left, 0px) * 2);
  background-color: var(--wp--preset--color--secondary, #101e33);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

/* Pins a flow child to the end of a flex column (e.g. Stack), consuming
   whatever space its later siblings don't need. Doubled class for the same
   reason as .stack.stack in primitives.css — needs to outrank WP's own
   `.is-layout-flex > :is(*, div){margin:0}` global-styles reset. */
.push-end.push-end {
  margin-block-start: auto;
}

/* Splits a flex column at THIS child: it swallows the column's leftover space,
   pushing every later sibling to the end. Every Layout calls this "splitting
   the stack", but its recipe also needs `.stack:only-child { block-size: 100% }`
   threaded up through each ancestor so the stack has a height to distribute.
   None of that is needed when the stack is already a stretched flex item (the
   columns block's Switcher stretches its columns by default) — it has the height
   already, so the split is the only piece required.

   Prefer this over putting `.push-end` on the last child whenever the column
   might run out of free space: `.push-end` REPLACES that child's rhythm gap with
   `auto`, which resolves to 0 when there's nothing spare, collapsing the gap
   entirely. Anchoring the auto to the earlier sibling instead leaves the later
   one's own `margin-block-start` rhythm intact as a minimum. Doubled class for
   the same specificity reason as above. */
.split-after.split-after {
  margin-block-end: auto;
}

/* Keeps a phrase together on one line wherever it fits. Line breaking treats
   every space as an equally good opportunity, so a phrase like an address's
   "Unit 14 Kempton Gate Business Centre" splits at whatever point the width
   happens to run out — `text-wrap: balance`/`pretty` only tune line LENGTHS and
   orphans, they have no idea which words belong together.

   `display: inline-block` makes the span a single unbreakable unit for line
   breaking, so it moves to the next line whole instead of splitting. Preferred
   over `white-space: nowrap`, which would force it to overflow the container
   when the phrase alone is wider than the available space; an inline-block just
   wraps internally at that point, so it degrades instead of breaking out. */
.hold-together {
  display: inline-block;
}

/* Per-instance gap between composed columns — sets the Switcher/Grid gap knob to
   a spacing token (the columns block renders as Switcher for two columns, Grid
   for other counts, so both vars are set). */
.has-pad-column-gap-xs {
  --switcher-space: var(--wp--preset--spacing--xs, 2.5rem);
  --grid-gap: var(--wp--preset--spacing--xs, 2.5rem);
}

.has-pad-column-gap-s {
  --switcher-space: var(--wp--preset--spacing--s, 2.5rem);
  --grid-gap: var(--wp--preset--spacing--s, 2.5rem);
}

.has-pad-column-gap-m {
  --switcher-space: var(--wp--preset--spacing--m, 4rem);
  --grid-gap: var(--wp--preset--spacing--m, 4rem);
}

.has-pad-column-gap-l {
  --switcher-space: var(--wp--preset--spacing--l, 6.5rem);
  --grid-gap: var(--wp--preset--spacing--l, 6.5rem);
}

/* Caps a Grid-rendered columns block (4+ children, where pad/columns-block
   switches from Switcher to Grid) at three tracks. The Grid primitive's default
   16rem minimum fits FOUR tracks at the 1280px content width, which is only
   ~272px each — too narrow a measure for columns carrying body copy.

   Two bounds on the track minimum, so this stays intrinsic rather than a fixed
   count: `max(…, a third of the row)` guarantees no more than three tracks at
   ANY width (not just the current content width, so a wide-aligned instance
   can't sneak to four), while the 18rem floor lets it still step down to 2 and
   then 1 as space runs out. `min(100%, …)` keeps it from overflowing when the
   container is narrower than 18rem. */
.has-pad-columns-3 {
  --grid-columns: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(18rem, calc((100% - 2 * var(--grid-gap, 4rem)) / 3))
      ),
      1fr
    )
  );
}

/* Full-bleed breakout: spans an element the full viewport width from inside a
   width-constrained ancestor — the inverse of the `.center` primitive (which caps
   width and adds the gutter). Reusable anywhere an element (a section band, a
   slider) must reach edge-to-edge without relying on a WP `align:full` parent.
   NOTE: 100vw includes the scrollbar, so on a page with a vertical scrollbar this
   adds ~scrollbar-width of horizontal overflow — clip it on an ancestor
   (`.wp-site-blocks { overflow-x: clip }`) wherever `.breakout` is used. */
.breakout {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Two-column list: flow a single list into two columns (a long works / feature
   list beside an image). Items never split across the column break. Applied to a
   pad/text-block wrapping one list. */
/* Applied directly to a list (ul/ol). Up to two columns, but each at least ~11rem —
   so it collapses to one column when too narrow (mobile) without a media query. */
.list-2col {
  columns: 2 11rem;
  column-gap: var(--wp--preset--spacing--m, 4rem);
}

.list-2col li {
  break-inside: avoid;
  margin-block-end: 0.5em;
}