@charset "UTF-8";@layer theme-base {
  :root {
    /* breakpoints & rails are aliases; values defined in settings.custom */
    --bp-sm: var(--wp--custom--layout--breakpoints--sm);
    --bp-md: var(--wp--custom--layout--breakpoints--md);
    --bp-lg: var(--wp--custom--layout--breakpoints--lg);
    --bp-xl: var(--wp--custom--layout--breakpoints--xl);
    --rail-content-md: var(--wp--custom--layout--rail--content-md);
    --rail-content-lg: var(--wp--custom--layout--rail--content-lg);
    --rail-wide-md: var(--wp--custom--layout--rail--wide-md);
    --rail-wide-lg: var(--wp--custom--layout--rail--wide-lg);
  }
  /* Site chrome: borders belong to the template parts, so no inset shadows here. */
  .wp-site-blocks > header,
  .wp-site-blocks > footer {
    box-shadow: none !important;
  }
}
/* WordPress pins a constrained Group's Left justification with physical margins, while its flex layouts use
   flex-start, which follows the writing direction. In a right-to-left language, make both follow it. */
.is-layout-constrained.is-content-justification-left:dir(rtl) > :where(:not(.alignleft, .alignright, .alignfull)) {
  margin-left: auto !important;
  margin-right: 0 !important;
}

.is-layout-constrained.is-content-justification-right:dir(rtl) > :where(:not(.alignleft, .alignright, .alignfull)) {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* The line between a sidebar and the content: at the sidebar's start, on either side of the page, and above the
   sidebar once the columns stack. */
.bw-sidebar-column {
  border-inline-start: var(--wp--custom--border--width--thin) solid var(--wp--preset--color--border-subtle);
}
@media not all and (min-width: 48em) {
  .bw-sidebar-column {
    border-inline-start: 0;
    border-block-start: var(--wp--custom--border--width--thin) solid var(--wp--preset--color--border-subtle);
  }
}

/* Text at the end of the line in either writing direction. */
.bw-text-end {
  text-align: end;
}

/* === Header/Footer edge-to-edge override ===
   WordPress Core applies `margin-left: auto !important; margin-right: auto !important`
   to children of .is-layout-constrained that aren't .alignfull/.alignleft/.alignright.

   This override ensures alignfull outer groups in headers/footers stay edge-to-edge,
   whether their layout is flow (is-layout-flow) or constrained (is-layout-constrained) -
   e.g. a header or footer with a constrained alignfull outer group, and a
   builder can switch any part's inner group to Full width.

   Both need the override because the page's own constrained layout applies margins.
*/
.wp-site-blocks > header > .wp-block-group.alignfull.is-layout-flow,
.wp-site-blocks > footer > .wp-block-group.alignfull.is-layout-flow,
.wp-site-blocks > header > .wp-block-group.alignfull.is-layout-constrained,
.wp-site-blocks > footer > .wp-block-group.alignfull.is-layout-constrained {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  max-width: none !important;
}

/* Inner alignfull children of full-width headers/footers also need the override */
.wp-site-blocks > header > .wp-block-group.alignfull.is-layout-flow .wp-block-group.alignfull,
.wp-site-blocks > footer > .wp-block-group.alignfull.is-layout-flow .wp-block-group.alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  max-width: none !important;
}

/* === Sticky header enablement ===
   WordPress's Position: Sticky control lands on the GROUP inside the header
   template part, not on the <header> wrapper. That group's containing block is
   then the <header>, which is the same height as the group - so the sticky has
   zero room to travel and unsticks the instant the page scrolls (it looks like
   sticky "isn't working"). Collapsing the wrapper's box with display:contents
   re-homes the sticky group's containing block to the page (.wp-site-blocks),
   so it stays pinned through the full scroll. Scoped with :has() so it only
   applies when a sticky child is actually present; ordinary headers are
   untouched. The <header> wrapper carries no box of its own (background and
   padding live on the inner group), so removing its box is visually inert, and
   display:contents does not change selector matching, so the header rules below
   and the edge-to-edge overrides above still apply. */
.wp-site-blocks > header:has(> .is-position-sticky) {
  display: contents;
}

/* === Header layout row (token-driven) ===
   Structural only: give the header row a token-driven nav-bar min-height.
   Do NOT set justify-content / gap / flex-wrap here - each header pattern
   declares its own (Header + Header: Contact use space-between; Header:
   Centered uses a vertical, centered stack), and WordPress emits it natively.
   A blanket space-between + global block-gap here would override those, e.g.
   forcing Header: Centered off-center. Scoped narrowly to the header
   structure Gutenberg emits. */
.wp-site-blocks > header > .wp-block-group.alignfull.is-layout-constrained > .wp-block-group.is-layout-flex,
.wp-site-blocks > header > .wp-block-group.alignfull > .wp-block-group.is-layout-flex {
  min-height: var(--wp--custom--nav--bar-height, calc(var(--wp--custom--button--py, 0.75rem) * 2 + 1rem));
}

/* alignwide header rows: constrain to wideSize, centered (WP's constrained
   layout does this, but restate it so it wins against the flex-row rule). */
.wp-site-blocks > header > .wp-block-group.alignfull.is-layout-constrained > .wp-block-group.alignwide.is-layout-flex {
  max-inline-size: var(--wp--style--global--wide-size);
  margin-inline: auto;
}

.wp-site-blocks > header > .wp-block-group.alignfull.is-layout-constrained > .wp-block-group.is-layout-flex > .wp-block-group,
.wp-site-blocks > header > .wp-block-group.alignfull > .wp-block-group.is-layout-flex > .wp-block-group {
  flex: 0 0 auto;
}

/* The group that holds the menu (the contact header's phone + button + menu) may
   shrink, so its own wrapping row moves items to a further line instead of running
   off the screen: a long menu, the page-list fallback when no menu is assigned, or
   enlarged browser text. The plain header's menu is a direct child of the row and
   already wraps this way. The site-title group keeps flex: 0 0 auto above. */
.wp-site-blocks > header > .wp-block-group.alignfull > .wp-block-group.is-layout-flex > .wp-block-group:has(.wp-block-navigation) {
  flex: 0 1 auto;
  min-width: 0;
}

/* Header menu links: the padding goes on the link only, so it is also the hover/focus
   target. The list item (li.wp-block-navigation-link) carries none. */
.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
  padding-inline: var(--wp--custom--nav--link--pad-inline, 0.75rem);
  padding-block: var(--wp--custom--nav--link--pad-block, 0.125rem);
}

/* Primary content wrappers take the token-driven root padding (the site gutter).
   Applies to main, constrained groups, and template parts. */
.wp-site-blocks > main,
.wp-site-blocks main,
.wp-site-blocks .wp-block-group.is-layout-constrained,
.wp-site-blocks div.wp-block-template-part {
  padding-inline-start: var(--wp--style--root--padding-left);
  padding-inline-end: var(--wp--style--root--padding-right);
}

div.wp-block-template-part,
.wp-site-blocks div.wp-block-template-part {
  box-sizing: border-box;
}

/* === Block overrides (production-facing blocks) ===
   Token-driven styling for code blocks and pullquotes, so site-wide instances
   match the style-guide specimens. Separators are governed entirely by
   theme.json + WP's auto-generated
   color classes - no override needed here. */
/* Code blocks: lateral spacing. */
.wp-site-blocks pre.wp-block-code {
  margin-inline: var(--wp--preset--spacing--medium);
}

/* Pullquotes: block padding. */
figure.wp-block-pullquote {
  padding-top: var(--wp--preset--spacing--x-large);
  padding-bottom: var(--wp--preset--spacing--x-large);
}

/* Flex space-between groups in content: constrain to the reading width and
   center (core otherwise leaves them at their alignment width). Scoped to main
   so header/footer rows keep their own full-width layout. */
.wp-site-blocks main .wp-block-group.is-content-justification-space-between.is-layout-flex {
  max-inline-size: var(--wp--style--global--content-size);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Header/footer wide inner groups (layout:default outer, not constrained) use
   wideSize. !important overrides core's higher-specificity layout rule. */
.wp-site-blocks > header > .wp-block-group.alignfull.is-layout-flow .wp-block-group.alignwide,
.wp-site-blocks > footer > .wp-block-group.alignfull.is-layout-flow .wp-block-group.alignwide {
  max-inline-size: var(--wp--style--global--wide-size) !important;
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
}

/* tidy the title block inside the row */
.wp-site-blocks > header .wp-block-site-title {
  margin: 0;
  line-height: 1.2;
}

/* Opt-in "Brand color" site title (is-style-brand, registered by the
   styles/site-title-brand.json partial). Default stays the neutral wordmark; this
   paints the title link in the exact brand color. The brand color is held to 3:1
   only, which is enough for WCAG large text, so the partial makes the style bold 700
   at the Lead size (19.6px or more at every width). A partial cannot color the inner
   <a>, so the color is here: `.is-style-brand` is (0,2,1), above the global theme.json
   site-title link color (`:root :where(...)`, 0,1,0). */
.wp-block-site-title.is-style-brand a {
  color: var(--wp--preset--color--primary);
}

.wp-block-site-title.is-style-brand a:hover {
  color: var(--wp--preset--color--primary-600);
}

/* Header, page content, and footer sit flush. WordPress puts its root block-gap (medium)
   between the three top-level blocks via `:where(.wp-site-blocks) > *`; our full-bleed
   section bands carry their own top/bottom padding, so that gap only ever shows a strip of
   page background between colored bands (most visibly a dark CTA above the footer). Zero it
   at the two root seams only - block spacing INSIDE <main> is untouched. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
  margin-block-start: 0;
}

/* Compact mobile header: below the sm breakpoint the phone NUMBER (.bw-call, a tel: link)
   becomes a handset icon - the same tap-to-call link, with the number collapsed and the icon
   drawn in the link's color via ::before - so the logo, site title, phone and menu button fit
   on one row. The full number stays on desktop. Hiding whole blocks per screen size (the contact header's button) uses
   core's block visibility setting in the pattern, not CSS here. */
/* The header phone link (number on desktop, handset on mobile) is an action, not body
   copy - no underline, matching the theme's nav links (textDecoration:none). */
.wp-site-blocks > header .bw-call a {
  text-decoration: none;
}

@media not all and (min-width: 30em) {
  /* A contact header whose button directly follows the phone and is not set to hide on mobile
     (a copy saved in the Site Editor before the button carried that setting) has no room for the
     site title on phones, so the title is hidden there instead. */
  .wp-site-blocks > header:has(.bw-call ~ .wp-block-buttons:not(.wp-block-hidden-mobile)) .wp-block-site-title {
    display: none;
  }
  /* collapse the number text, keep the link tappable, show the handset glyph */
  .wp-site-blocks > header .bw-call a {
    font-size: 0;
    display: inline-flex;
    padding: var(--wp--preset--spacing--xx-small);
  }
  .wp-site-blocks > header .bw-call a::before {
    content: "";
    width: var(--wp--preset--font-size--xxl);
    height: var(--wp--preset--font-size--xxl);
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M231.88,175.08A56.26,56.26,0,0,1,176,224C96.6,224,32,159.4,32,80A56.26,56.26,0,0,1,80.92,24.12a16,16,0,0,1,16.62,9.52l21.12,47.15,0,.12A16,16,0,0,1,117.39,96c-.18.27-.37.52-.57.77L96,121.45c7.49,15.22,23.41,31,38.83,38.51l24.34-20.71a8.12,8.12,0,0,1,.75-.56,16,16,0,0,1,15.17-1.4l.13.06,47.11,21.11A16,16,0,0,1,231.88,175.08Z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}
/* === Typography Rhythm: Section Spacing ===
   In a post or page body typed in the editor, give major section headings (H2)
   breathing room when they follow content, and subsection headings (H3/H4) moderate
   spacing. Only headings placed directly in the body: inside a section built from a
   pattern (a Group), the section's own block spacing decides the gap, so an eyebrow
   label and its heading stay together. `.is-root-container` is the post body in the
   editor canvas, so the editor matches the front end. */
/* H2 section headings: generous top margin for visual separation */
:is(.wp-block-post-content, .is-root-container) > :where(h2):not(:first-child),
:is(.wp-block-post-content, .is-root-container) > :where(.wp-block-heading[class*=h2]):not(:first-child) {
  margin-block-start: var(--wp--preset--spacing--x-large);
}

/* H3/H4 subsection headings: moderate spacing when following paragraphs/content */
:is(.wp-block-post-content, .is-root-container) > :where(h3, h4):not(:first-child),
:is(.wp-block-post-content, .is-root-container) > :where(.wp-block-heading[class*=h3], .wp-block-heading[class*=h4]):not(:first-child) {
  margin-block-start: var(--wp--preset--spacing--large);
}

/* Tighten spacing when headings directly follow other headings (ladder effect).
   :not(:first-child) is always true here; it raises this rule to the same
   specificity as the two above, so source order lets it win. */
:is(.wp-block-post-content, .is-root-container) > :where(h1, h2, h3, h4, h5, h6) + :where(h1, h2, h3, h4, h5, h6):not(:first-child) {
  margin-block-start: var(--wp--preset--spacing--medium);
}
/* Safety: ensure WP core button always shows pointer (in case missing elsewhere) */
.wp-block-button__link {
  cursor: pointer;
}

/* Scorecard header (flex, single row): reuse-safe for any title/ref length.
   The ref stays clean on one line and never shrinks; the TITLE
   COLUMN is the one that gives - min-width:0 lets it shrink below its content so
   the title wraps and yields space to the ref, which keeps its place at top-right
   instead of spilling. space-between holds title-left / ref-right; the header
   just grows taller when the title wraps.
   The title column is the header's only child group (the ref is a <p>). */
.bw-scorecard-head > .wp-block-group {
  min-width: 0;
}

.bw-scorecard-ref {
  flex-shrink: 0;
  white-space: nowrap;
}

.bw-scorecard-title {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Status chip never breaks mid-word or shrinks - the row label wraps instead
   (matters at narrow/mobile widths). */
.bw-scorecard-chip {
  white-space: nowrap;
  flex-shrink: 0;
  /* Uniform-width status column: all chips share a min-width so their left edges
     line up into a clean status column. ch scales with the chip
     font across breakpoints; longer statuses grow past it. text-align centers the
     shorter labels within the shared width. */
  min-width: 8ch;
  text-align: center;
}

/* ...and the row LABEL is what gives: flex/min-width:0 lets it absorb the row's
   width and wrap its own text, so the chip stays on the row pinned right. Without
   it the label's content width + chip exceeds a narrow mobile column and the row
   (flex-wrap:wrap) drops the chip to its own line, where space-between left-aligns
   it. Rows carry no class, so target the chip's sibling
   (the theme already uses :has() for the sticky header and stamp). */
.wp-block-group:has(> .bw-scorecard-chip) > p:not(.bw-scorecard-chip) {
  flex: 1 1 0;
  min-width: 0;
}

/* The scorecard reads as a printed "readout",
   so it stays a fixed LIGHT document in BOTH OS modes: color-scheme:light makes
   every light-dark() token inside (surface, text, chips, borders) resolve to its
   light value, even on a dark-mode site, like a sheet of paper.
   Targets the card via its header child so already-placed instances need no
   extra class (the theme already uses :has() for the sticky header and stamp). */
.wp-block-group:has(> .bw-scorecard-head) {
  color-scheme: light;
  /* Fixed-light "paper" card. color-scheme:light makes every light-dark() token
     inside (surface, text-1, chips, borders) resolve to its LIGHT value here,
     regardless of the visitor's OS - so text-1 becomes true dark (neutral-900) and
     the card reads like a sheet of paper even on a dark-mode site. Re-declaring
     `color: text-1` on the card re-resolves that token under THIS element's
     color-scheme:light (an inherited color is an already-resolved absolute value,
     which color-scheme cannot retroactively flip), so the uncolored title + row
     labels inherit true dark text. Chips and the text-2 ref set their own color. */
  color: var(--wp--preset--color--text-1);
  /* Rounded to the theme's standard
     radius (matches the chips, buttons, panels). A restrained shadow gives light-mode polish;
     dark-mode elevation comes from the lighter surface behind it, not a shadow, which can't read on a dark section. */
  border-radius: var(--wp--preset--border-radius--m);
  box-shadow: var(--wp--custom--shadow--m);
}

/* Scorecard footer note: a soft brand-tinted callout instead of a flat gray, so the theme's
   COLOR SYSTEM reads in the block itself (it re-hues with color variations). Mixed OVER surface-1 (the near-white card surface), NOT
   the gray surface-2: at a low brand share the gray base muddies a warm brand color into a flat
   tan; mixing into the lighter surface keeps the result high in lightness. The share stays low so it is an informational note, never
   a button; still clearly darker than the surface-1 card, so it reads as a distinct footer. */
.bw-scorecard-foot {
  /* A subtle brand tint of the CARD SURFACE, not an absolute ramp step: mix a low share of
     `primary` (the brand color) into surface-1. Both operands are light-dark(), so the mix resolves per mode and
     the tint keeps a CONSTANT relationship to the surface in light AND dark (an absolute ramp
     step can't - it sits ~1% off a near-white surface in light but ~13% and saturated off a
     near-black surface in dark). Re-hues per scheme; the 22% share reads as a distinct footer
     while staying quiet. */
  background-color: color-mix(in oklab, var(--wp--preset--color--surface-1), var(--wp--preset--color--primary) 22%);
}

/* The "Fixed" stamp sits over the card's bottom-right corner (group.css), on top of the footer
   band, at every width. The note's last line must end above it whatever its length, font or
   translation. The space kept below the note is the stamp's height. */
.wp-block-group:has(> .bw-scorecard-stamp) > .bw-scorecard-foot > :last-child {
  margin-block-end: var(--wp--preset--spacing--large);
}

/* Editorial-layer brand roles (registered in assets/js/editor-block-styles.js). Both
   carry the brand hue via tokens, so they re-hue with every color scheme and stay
   WCAG AA in light AND dark. `p.is-style-*` = specificity (0,1,1), which beats the
   theme's `:root :where(p)` (0,1,0) color rule so the brand color actually lands. */
/* Eyebrow / kicker: the small uppercase label above a heading, in the brand link
   tone. */
p.is-style-eyebrow {
  color: var(--wp--preset--color--link);
  font-family: var(--wp--preset--font-family--mono);
  font-weight: var(--wp--custom--eyebrow--weight);
  letter-spacing: var(--wp--custom--eyebrow--tracking);
  text-transform: uppercase;
  margin-bottom: var(--wp--preset--spacing--x-small);
  /* font-size + alignment stay per-instance (has-{size}-font-size /
     has-text-align-*), so the class doesn't pin them. */
}

/* Badge / pill: a small solid brand-tint chip (the Soft button's tonal pair - btn-soft-bg
   container + btn-soft-text ink at >=4.5:1, via the badge custom tokens). fit-content so a
   block-level paragraph hugs its text instead of stretching full width. */
p.is-style-badge {
  /* inline-flex + centered so the short label sits optically centered in the pill; a
     line-height:1.3 inline-block left capless labels ("New") reading high. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  background-color: var(--wp--custom--badge--bg);
  color: var(--wp--custom--badge--text);
  border-radius: var(--wp--custom--badge--radius);
  padding-block: var(--wp--custom--badge--py);
  padding-inline: var(--wp--custom--badge--px);
  font-size: var(--wp--custom--badge--font-size);
  font-weight: var(--wp--custom--badge--weight);
  line-height: 1;
}

/* The resolved-card "Fixed" stamp lives in assets/blocks/group.css (loaded via
   wp_enqueue_block_style on core/group) so it renders in BOTH the front end and
   the editor iframe - enqueue_block_assets / a front-end-only bundle does not
   reach the post editor canvas. */
/*
 * Button appearance - the SINGLE source for Gutenberg block buttons (core/button,
 * plus the search/file block buttons). Token-driven; author overrides respected via
 * revert-layer. Base box + the Soft / Outline / Subtle variants + active / disabled
 * live here. The plain and Fill button COLORS (rest, hover, active) do not: they are
 * theme.json elements.button, so a site owner's button colors in Styles apply. A
 * color rule here would out-specify WordPress's `:root :where()` output and silently
 * defeat those choices.
 *
 * Related by design - NOT duplicates:
 *   - theme.json elements.button - the plain/Fill colors and states, and the base box
 *     for editor parity + the block controls.
 *   - the interactive styles - the shared focus-ring + base transition baseline for ALL
 *     interactive controls, so buttons/links/inputs focus identically.
 *   - the form styles - native form submit/reset <input> buttons (form controls, the brand fill).
 */
:where(.wp-element-button,
.wp-block-button__link,
.wp-block-search__button,
.wp-block-file__button) {
  --_border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--custom--button--text-gap, 0.5ch);
  border: var(--wp--custom--border--width--thin, 1px) solid var(--_border);
  border-radius: var(--wp--custom--button--radius);
  padding-block: var(--wp--custom--button--py);
  padding-inline: var(--wp--custom--button--px);
  line-height: calc(var(--wp--custom--button--height, 2.5rem) - var(--wp--custom--border--width--thin, 1px) * 2);
  min-height: var(--wp--custom--button--height, 2.5rem);
  font-weight: var(--wp--custom--button--weight);
  font-size: var(--wp--custom--button--font-size);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--wp--custom--motion--duration--fast) linear, border-color var(--wp--custom--motion--duration--fast) linear, transform var(--wp--custom--motion--duration--x-fast) var(--wp--custom--motion--easing--standard), filter var(--wp--custom--motion--duration--fast) linear;
}

/* Respect author overrides */
:where(.wp-element-button, .wp-block-button__link).has-background,
:where(.wp-element-button, .wp-block-button__link)[style*=background] {
  background: revert-layer;
  color: revert-layer;
}

:where(.wp-element-button, .wp-block-button__link).has-text-color,
:where(.wp-element-button, .wp-block-button__link)[style*=color] {
  color: revert-layer;
}

:where(.wp-element-button, .wp-block-button__link):active {
  transform: translateY(var(--wp--custom--border--width--thin));
}

/* Focus ring: provided by the shared interactive baseline
   (identical tokens - link color, form focus-width). Not redefined here. */
:where(.wp-element-button, .wp-block-button__link)[disabled],
:where(.wp-element-button, .wp-block-button__link).is-disabled,
:where(.wp-element-button, .wp-block-button__link)[aria-disabled=true] {
  opacity: 0.6;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CTA VARIANTS - Marketing buttons with generous sizing and clear hierarchy
   ───────────────────────────────────────────────────────────────────────────── */
/* Shared CTA base - generous padding and prominent typography.
   is-style-outline is qualified with :not() so it out-specificities core's
   own outline padding rule (0,4,0) and takes the SAME box as the primary
   (secondary must never be larger than primary).
   The classless (default) button is in here too: core marks the "fill" style
   isDefault:true, so a button with no style class IS the primary CTA and must
   carry the same generous box - not the small form-control base. */
.wp-block-button:not(.is-style-fill):not(.is-style-soft):not(.is-style-accent):not(.is-style-outline):not(.is-style-subtle) .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:is(.is-style-soft, .is-style-accent) .wp-block-button__link,
.wp-block-button.is-style-subtle .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not([style*=background]) {
  padding-block: var(--wp--custom--button--cta--py);
  padding-inline: var(--wp--custom--button--cta--px);
  border-radius: var(--wp--custom--button--cta--radius);
  font-weight: var(--wp--custom--button--cta--weight);
  font-size: var(--wp--custom--button--cta--font-size);
  min-height: calc(var(--wp--custom--button--cta--py) * 2 + var(--wp--custom--button--cta--font-size) * 1.2 + var(--wp--custom--border--width--thin, 1px) * 2);
  line-height: 1.2;
}

/* PRIMARY CTA (is-style-fill and the classless default button): its colors and
   hover/active states are theme.json elements.button, NOT rules here - see the file
   header. It takes the CTA box above, and is borderless: the transparent base border
   keeps its box the same size as the bordered variants. */
/* SOFT button (is-style-soft, and the older class is-style-accent) - tonal tint, medium emphasis */
.wp-block-button:is(.is-style-soft, .is-style-accent) .wp-block-button__link:not(.has-background):not([style*=background]) {
  --_bg: var(--wp--custom--button--soft--bg);
  --_bg-h: var(--wp--custom--button--soft--bg-hover);
  --_bg-a: var(--wp--custom--button--soft--bg-active);
  --_tx: var(--wp--custom--button--soft--text);
  --_border: var(--wp--custom--button--soft--border);
  background: var(--_bg);
  color: var(--_tx);
  border-color: var(--_border);
}

.wp-block-button:is(.is-style-soft, .is-style-accent) .wp-block-button__link:not(.has-background):not([style*=background]):hover {
  background: var(--wp--custom--button--soft--bg-hover);
}

.wp-block-button:is(.is-style-soft, .is-style-accent) .wp-block-button__link:not(.has-background):not([style*=background]):active {
  background: var(--wp--custom--button--soft--bg-active);
  transform: translateY(var(--wp--custom--border--width--thin));
}

/* SUBTLE CTA (is-style-subtle) - Ghost: brand text only, no border, lowest emphasis */
.wp-block-button.is-style-subtle .wp-block-button__link:not(.has-background):not([style*=background]) {
  --_bg: var(--wp--custom--button--subtle--bg);
  --_bg-h: var(--wp--custom--button--subtle--bg-hover);
  --_bg-a: var(--wp--custom--button--subtle--bg-active);
  --_tx: var(--wp--custom--button--subtle--text);
  --_border: var(--wp--custom--button--subtle--border);
  background: var(--_bg);
  color: var(--_tx);
  border-color: var(--_border);
}

.wp-block-button.is-style-subtle .wp-block-button__link:not(.has-background):not([style*=background]):hover {
  background: var(--wp--custom--button--subtle--bg-hover);
}

.wp-block-button.is-style-subtle .wp-block-button__link:not(.has-background):not([style*=background]):active {
  background: var(--wp--custom--button--subtle--bg-active);
  transform: translateY(var(--wp--custom--border--width--thin));
}

/* OUTLINE (core "Outline" style) - themed as the brand-colored secondary.
   Core leaves this transparent with a currentColor (neutral) 2px border, so it
   renders black/white in every color scheme AND misses the CTA sizing above.
   Re-point it at the outline tokens and a thin border so it adapts per scheme, and sits at the
   same size as the primary. Selectors are :not()-qualified (0,5,0) to beat
   core's outline rules (0,4,0). This corrects already-placed buttons (they
   already carry .is-style-outline) with no pattern re-insert. */
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not([style*=background]) {
  --_bg: var(--wp--custom--button--outline--bg);
  --_bg-h: var(--wp--custom--button--outline--bg-hover);
  --_bg-a: var(--wp--custom--button--outline--bg-active);
  --_tx: var(--wp--custom--button--outline--text);
  --_border: var(--wp--custom--button--outline--border);
  background: var(--_bg);
  color: var(--_tx);
  border-color: var(--_border);
  border-width: var(--wp--custom--border--width--thin, 1px);
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not([style*=background]):hover {
  background: var(--wp--custom--button--outline--bg-hover);
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not([style*=background]):active {
  background: var(--wp--custom--button--outline--bg-active);
  transform: translateY(var(--wp--custom--border--width--thin));
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS ON A BRAND-FILL SECTION - the deep, static brand-fill band (the CTA) takes
   a soft near-white (on-brand-fill) button that pops against it on every scheme. A
   fill button's own brand background would vanish on the band, so inside
   .has-brand-fill-background-color the fill (and the classless default) becomes
   on-brand-fill with a brand-fill (deep brand) label, and the outline goes
   on-brand-fill too. Both tokens are generated/static per scheme. Used by CTA-Centered.
   ───────────────────────────────────────────────────────────────────────────── */
.has-brand-fill-background-color .wp-block-button.is-style-fill .wp-block-button__link:not(.has-background):not([style*=background]),
.has-brand-fill-background-color .wp-block-button:not(.is-style-fill):not(.is-style-soft):not(.is-style-accent):not(.is-style-outline):not(.is-style-subtle) .wp-block-button__link:not(.has-background):not([style*=background]) {
  background: var(--wp--preset--color--on-brand-fill);
  color: var(--wp--preset--color--brand-fill);
}
.has-brand-fill-background-color .wp-block-button.is-style-fill .wp-block-button__link:not(.has-background):not([style*=background]):hover,
.has-brand-fill-background-color .wp-block-button:not(.is-style-fill):not(.is-style-soft):not(.is-style-accent):not(.is-style-outline):not(.is-style-subtle) .wp-block-button__link:not(.has-background):not([style*=background]):hover,
.has-brand-fill-background-color .wp-block-button.is-style-fill .wp-block-button__link:not(.has-background):not([style*=background]):active,
.has-brand-fill-background-color .wp-block-button:not(.is-style-fill):not(.is-style-soft):not(.is-style-accent):not(.is-style-outline):not(.is-style-subtle) .wp-block-button__link:not(.has-background):not([style*=background]):active {
  background: color-mix(in oklab, var(--wp--preset--color--on-brand-fill) 90%, var(--wp--preset--color--brand-fill));
}
.has-brand-fill-background-color .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not([style*=background]) {
  background: transparent;
  color: var(--wp--preset--color--on-brand-fill);
  border-color: var(--wp--preset--color--on-brand-fill);
}
.has-brand-fill-background-color .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not([style*=background]):hover {
  background: color-mix(in oklab, var(--wp--preset--color--on-brand-fill) 12%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   OUTLINE + SUBTLE BUTTONS OVER A PHOTO - a cover with a dark overlay (core adds
   .is-light only to light ones) is not a page surface, so the link-colored label and
   border of these transparent styles disappear over it. They
   take the photo's own text ink, on-media, as the brand-fill band's outline does.
   Fill and Soft carry their own background and stay as they are.
   ───────────────────────────────────────────────────────────────────────────── */
.wp-block-cover:not(.is-light) .wp-block-button:is(.is-style-outline, .is-style-subtle) .wp-block-button__link:not(.has-background):not([style*=background]):not(.has-text-color) {
  color: var(--wp--preset--color--on-media);
  border-color: var(--wp--preset--color--on-media);
}
.wp-block-cover:not(.is-light) .wp-block-button.is-style-subtle .wp-block-button__link:not(.has-background):not([style*=background]):not(.has-text-color) {
  border-color: transparent;
}
.wp-block-cover:not(.is-light) .wp-block-button:is(.is-style-outline, .is-style-subtle) .wp-block-button__link:not(.has-background):not([style*=background]):hover {
  background: color-mix(in oklab, var(--wp--preset--color--on-media) 12%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER CTA is compact. Every button carries the generous CTA box above, which
   reads right in a hero but overwhelms the header bar (and its height pushes
   content like a hero-side scorecard below the fold). Scope a smaller box to the
   header TEMPLATE PART only: the `<header class="wp-block-template-part">` wrapper
   is emitted at render time, NOT frozen in the pattern snapshot, so this reaches
   already-placed headers live and never touches hero/body CTAs. Specificity clears the CTA-base rule.
   ───────────────────────────────────────────────────────────────────────────── */
.wp-site-blocks header.wp-block-template-part .wp-block-button .wp-block-button__link {
  padding-block: var(--wp--preset--spacing--xx-small);
  padding-inline: var(--wp--preset--spacing--small);
  font-size: var(--wp--custom--button--font-size);
  font-weight: var(--wp--custom--button--weight);
  min-height: var(--wp--custom--button--height, 2.5rem);
  line-height: 1.2;
}

body,
.wp-site-blocks {
  text-align: start;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure) {
  text-align: inherit;
}

ol.wp-block-comment-template ol {
  padding-inline-start: min(2rem, 5%);
}

.wp-block-comment-author-name {
  overflow-wrap: anywhere;
}

/* Layout & structure */
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=tel],
input[type=number],
input[type=date],
input[type=datetime-local],
input[type=month],
input[type=week],
input[type=time],
select,
textarea {
  box-sizing: border-box;
  min-height: var(--wp--custom--form--control-height);
  padding-inline: var(--wp--preset--spacing--x-small);
  border-radius: var(--wp--preset--border-radius--m);
  border-width: var(--wp--custom--border--width--thin);
  border-style: solid;
  border-color: var(--wp--preset--color--border-strong);
  background-color: var(--wp--preset--color--surface-1);
  color: var(--wp--preset--color--text-1);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--typography--line-height-control);
}

input::placeholder,
textarea::placeholder {
  color: var(--wp--preset--color--text-2);
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--wp--preset--color--focus);
  outline: var(--wp--custom--form--focus-width) solid var(--wp--preset--color--focus);
  outline-offset: var(--wp--custom--border--width--medium);
}

input[type=checkbox],
input[type=radio] {
  accent-color: var(--wp--preset--color--btn-fill-bg);
}

input[type=submit],
input[type=reset],
input[type=button],
button[type=submit],
button[type=reset] {
  min-height: var(--wp--custom--form--control-height);
  padding-block: 0;
  padding-inline: var(--wp--preset--spacing--small);
  border: var(--wp--custom--border--width--thin) solid transparent;
  border-radius: var(--wp--preset--border-radius--m);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--custom--button--font-size);
  font-weight: var(--wp--custom--button--weight);
  line-height: var(--wp--custom--typography--line-height-control);
  cursor: pointer;
}
input[type=submit]:not(.wp-element-button),
input[type=reset]:not(.wp-element-button),
input[type=button]:not(.wp-element-button),
button[type=submit]:not(.wp-element-button),
button[type=reset]:not(.wp-element-button) {
  background-color: var(--wp--preset--color--btn-fill-bg);
  color: var(--wp--preset--color--btn-fill-text);
}
input[type=submit]:not(.wp-element-button):hover,
input[type=reset]:not(.wp-element-button):hover,
input[type=button]:not(.wp-element-button):hover,
button[type=submit]:not(.wp-element-button):hover,
button[type=reset]:not(.wp-element-button):hover {
  background-color: var(--wp--preset--color--btn-fill-bg-hover);
}
input[type=submit]:not(.wp-element-button):active,
input[type=reset]:not(.wp-element-button):active,
input[type=button]:not(.wp-element-button):active,
button[type=submit]:not(.wp-element-button):active,
button[type=reset]:not(.wp-element-button):active {
  background-color: var(--wp--preset--color--btn-fill-bg-active);
}
input[type=submit]:focus-visible,
input[type=reset]:focus-visible,
input[type=button]:focus-visible,
button[type=submit]:focus-visible,
button[type=reset]:focus-visible {
  outline: var(--wp--custom--form--focus-width) solid var(--wp--preset--color--focus);
  outline-offset: var(--wp--custom--border--width--medium);
}
input[type=submit][disabled], input[type=submit][aria-disabled=true],
input[type=reset][disabled],
input[type=reset][aria-disabled=true],
input[type=button][disabled],
input[type=button][aria-disabled=true],
button[type=submit][disabled],
button[type=submit][aria-disabled=true],
button[type=reset][disabled],
button[type=reset][aria-disabled=true] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Native form elements */
:where(a,
button,
[role=button],
.wp-element-button,
input,
select,
textarea,
pre[tabindex]):focus-visible {
  outline: var(--wp--custom--form--focus-width) solid var(--wp--custom--form--focus-ring);
  outline-offset: var(--wp--preset--spacing--xx-small);
}

.has-brand-fill-background-color :is(a, button, [role=button], .wp-element-button, input, select, textarea, pre[tabindex]):focus-visible {
  outline-color: var(--wp--preset--color--on-brand-fill);
}

:is(.has-neutral-600-background-color,
.has-neutral-700-background-color,
.has-neutral-800-background-color,
.has-neutral-900-background-color,
.has-neutral-950-background-color,
.has-neutral-1000-background-color) :is(a, button, [role=button], .wp-element-button, input, select, textarea, pre[tabindex]):focus-visible {
  outline-color: var(--wp--preset--color--neutral-0);
}

.wp-block-cover:not(.is-light) :is(a, button, [role=button], .wp-element-button, input, select, textarea, pre[tabindex]):focus-visible {
  outline-color: var(--wp--preset--color--on-media);
}

a {
  text-decoration-thickness: var(--wp--custom--border--width--thin);
  text-underline-offset: 0.15em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.wp-block-read-more {
  text-decoration-thickness: var(--wp--custom--border--width--thin);
}

a:hover,
a:focus {
  text-decoration-thickness: var(--wp--custom--border--width--medium);
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

.wp-block-post-title {
  text-wrap: pretty;
}

:where(p, li, dd, figcaption, blockquote, th, td) {
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
}

:where(h1, h2, h3, h4, h5, h6)[id] {
  /* Clear the sticky header: its bar height plus a little breathing room, both tokens. */
  scroll-margin-top: calc(var(--wp--custom--nav--bar-height) + var(--wp--preset--spacing--medium));
}

:where(.wp-element-button,
.wp-block-button__link,
button,
input[type=submit],
input[type=button]) {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

::selection {
  background-color: color-mix(in oklab, var(--wp--preset--color--text-1) 16%, transparent);
}

.bw-page-header {
  margin-bottom: var(--wp--preset--spacing--large);
  padding-bottom: var(--wp--preset--spacing--small);
  border-bottom: var(--wp--custom--border--width--thin, 1px) solid var(--wp--preset--color--divider);
}

.bw-page-header .wp-block-post-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--xxl);
}

.wp-block-post-title a {
  color: var(--wp--preset--color--text-1);
  text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus {
  color: var(--wp--preset--color--link);
  text-decoration: underline;
}

p.has-text-2-color[style*="text-transform:uppercase"] {
  font-family: var(--wp--preset--font-family--mono);
}

.bw-stats .has-xxl-font-size {
  white-space: nowrap;
}

.bw-stats p {
  overflow-wrap: normal;
}

.alignleft {
  float: left;
  margin-inline-end: 1.5em;
  margin-block-end: 1em;
}

.alignright {
  float: right;
  margin-inline-start: 1.5em;
  margin-block-end: 1em;
}

.aligncenter {
  display: block;
  margin-inline: auto;
  margin-block-end: 1em;
}

.is-layout-constrained.alignfull > .alignleft {
  margin-inline-start: max(0px, (100% - var(--wp--style--global--content-size)) / 2);
}

.is-layout-constrained.alignfull > .alignright {
  margin-inline-end: max(0px, (100% - var(--wp--style--global--content-size)) / 2);
}

pre {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  white-space: nowrap;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--small);
  z-index: 100000;
  background-color: var(--wp--preset--color--surface-1);
  color: var(--wp--preset--color--text-1);
}

.wp-caption {
  max-width: min(100%, var(--wp--style--global--content-size)) !important;
}

.wp-caption img {
  height: auto;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
  padding-inline: var(--wp--preset--spacing--medium);
}
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-close {
  top: var(--wp--preset--spacing--small);
  inset-inline-end: var(--wp--preset--spacing--small);
}
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container {
  --navigation-layout-align: flex-start;
  --navigation-layout-justification-setting: flex-start;
}

.wp-caption-text,
.wp-element-caption,
figure.wp-block-image figcaption {
  font-size: var(--wp--preset--font-size--s);
  color: var(--wp--preset--color--text-2);
  text-align: center;
  margin-block-start: 0.5em;
}

.gallery {
  display: grid;
  gap: var(--wp--preset--spacing--small);
  margin-block: var(--wp--preset--spacing--medium);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gallery-item {
  margin: 0;
}

.gallery-caption {
  overflow-wrap: anywhere;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
}

.sticky {
  outline: var(--wp--custom--border--width--thin, 1px) solid var(--wp--preset--color--border-subtle);
  outline-offset: var(--wp--preset--spacing--x-small, 0.5rem);
  border-radius: var(--wp--preset--border-radius--m, 0.25rem);
}

.sticky > .wp-block-group {
  padding-bottom: 0 !important;
  border-bottom-width: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Focus/link styles */
/* Navigation - kept in the GLOBAL bundle (nav is on every page, so lazy-loading buys nothing). */
/* Container gap for nav items */
.wp-block-navigation .wp-block-navigation__container {
  gap: var(--wp--preset--spacing--small);
}

.wp-block-navigation .wp-block-navigation-link,
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-icon {
  border-radius: var(--wp--custom--nav--link--radius);
}

.wp-block-navigation .wp-block-navigation__container a:focus-visible,
.wp-block-navigation .wp-block-navigation__container button:focus-visible,
.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item__content:focus-visible {
  outline: var(--wp--custom--nav--focus-ring--width) solid var(--wp--custom--nav--focus-ring--color);
  outline-offset: var(--wp--preset--spacing--xx-small);
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-link,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-item > .wp-block-navigation-submenu__toggle,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-link,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-submenu__toggle,
.wp-block-navigation .wp-block-navigation-link[aria-current] {
  background-color: var(--wp--custom--nav--link--current--bg);
  color: var(--wp--custom--nav--link--current--text);
}

.wp-block-navigation .wp-block-navigation__container button:hover,
.wp-block-navigation .wp-block-navigation__container button:focus-visible {
  background-color: var(--wp--custom--nav--link--hover--bg);
  color: var(--wp--custom--nav--link--hover--text);
}

/* === Header nav: custom collapse breakpoint ===
   Core flips the nav from hamburger to the inline horizontal menu at a fixed min-width
   of 600 (wp-includes/blocks/navigation/style.css) and there is NO editor/theme.json
   setting for it - the documented way to change it is a CSS media-query override. The
   "Header: Contact" part packs branding + phone + CTA + nav on one nowrap row, so the
   inline menu overflows the tablet band (roughly 600 to 1000 wide). Keep it
   collapsed to the overlay hamburger until `lg`
   (1024), where the full header fits, then let core's horizontal menu
   take over.
   These rules live in the UNLAYERED global bundle (not the base layer's @layer, which
   would lose to core's unlayered display rules) and are header-scoped, so they beat core
   by specificity + source order - no !important. The `:not(.is-menu-open)` gate mirrors
   core's own and is REQUIRED: without it, hiding the container also blocks the overlay
   from opening. */
@media not all and (min-width: 64em) {
  .wp-site-blocks > header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .wp-site-blocks > header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}
/* The hamburger toggle uses the brand color whenever it shows (every collapsed width,
   not just the deep-mobile band), matching the header's other foreground icons (phone
   glyph, wp:icon blocks). Core hides this button at `lg` and up, so it is a no-op on
   desktop. */
.wp-site-blocks > header .wp-block-navigation__responsive-container-open {
  color: var(--wp--preset--color--primary);
}

/* Submenu dropdown container - must match core specificity (.has-child). A submenu set to
   always show (.open-always, as in the navigation overlay) is an inline list, not a dropdown,
   so it keeps no border or shadow. Its background and text colors come from the Navigation
   block's own overlay color settings (core puts their preset classes on the container), so a
   site owner sets them in the editor; the border and shadow make it a card on any color. */
.wp-block-navigation .has-child:not(.open-always) .wp-block-navigation__submenu-container {
  gap: var(--wp--preset--spacing--small);
  border: var(--wp--custom--border--width--thin) solid var(--wp--preset--color--border-subtle);
  border-radius: var(--wp--preset--border-radius--m);
  box-shadow: var(--wp--custom--shadow--m);
}

/* Custom mobile menu (a navigation-overlay template part): header nav links keep their inline
   padding for the current-item highlight, so the vertical menu is pulled out by that padding to
   line its text up with the phone link and button above it. */
.wp-site-blocks > header .disable-default-overlay .wp-block-navigation.is-vertical:not(.wp-block-navigation__container) {
  margin-inline-start: calc(-1 * var(--wp--custom--nav--link--pad-inline, 0.75rem));
}

.wp-block-navigation .has-child:not(.open-on-click).bw-submenu-dismissed:hover > .wp-block-navigation__submenu-container {
  opacity: 0;
  visibility: hidden;
}

/* Navigation - global (nav is on every page) */
/* Blockwright - front-end styles */
/* -------------------------------------------------------------------------- */
/* Root & base                                                                 */
/* -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--wp--preset--color--surface-1);
  color: var(--wp--preset--color--text-1, canvasText);
  /* Body font-family is owned by WordPress global styles (theme.json +
      style variations). Hardcoding it here would out-specify variations and
      stop them from changing the font - so it is intentionally omitted. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* avoid subpixel horizontal jiggle */
}

/* Layout tokens derived from WP globals (with safe fallbacks) */
:root {
  --bw-gutter: clamp(
  	var(--wp--custom--layout--gutter-min),
  	3vw,
  	var(--wp--custom--layout--gutter-max)
  );
  --bw-adminbar: 0;
  /* Keep these defined so patterns/blocks using the WP vars remain predictable */
  --wp--style--root--padding-left: var(--bw-gutter);
  --wp--style--root--padding-right: var(--bw-gutter);
  /* Featured image aspect can be adjusted project-wide if desired */
  --bw-fi-aspect: 16 / 9;
}

body.admin-bar {
  --bw-adminbar: var(--wp--custom--layout--adminbar--desktop);
}

@media (max-width: 48.875rem) {
  /* WP admin-bar mobile breakpoint (782px) */
  body.admin-bar {
    --bw-adminbar: var(--wp--custom--layout--adminbar--mobile);
  }
}
/* -------------------------------------------------------------------------- */
/* Page shell                                                                  */
/* -------------------------------------------------------------------------- */
/* IMPORTANT: Core already applies global padding to .wp-site-blocks when
   useRootPaddingAwareAlignments = true. Do NOT add our own side padding here
   or we get double gutters. */
/* Sticky footer: push footer to bottom on short pages */
.wp-site-blocks {
  min-height: calc(100svh - var(--bw-adminbar));
  display: flex;
  flex-direction: column;
}

/* Grow main to fill available space */
.wp-site-blocks > main,
.wp-site-blocks > main.wp-block-group {
  flex: 1 1 auto;
}

/* Remove list padding blowout for post templates when global padding is active */
.wp-site-blocks > main.has-global-padding > ul.wp-block-post-template,
.wp-site-blocks > main.has-global-padding > ol.wp-block-post-template {
  list-style: none;
  padding-inline-start: 0;
  margin-left: calc(var(--wp--style--root--padding-left, 0) * -1);
  margin-right: calc(var(--wp--style--root--padding-right, 0) * -1);
}

/* -------------------------------------------------------------------------- */
/* Featured image (FI) polish                                                  */
/* -------------------------------------------------------------------------- */
/* If a FI block renders without an <img> (e.g., no thumbnail), collapse it */
.wp-block-post-featured-image:not(:has(img)) {
  display: none;
}

/* For real thumbnails: keep them tidy and modern by default */
.wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--bw-fi-aspect);
  object-fit: cover;
  border-radius: var(--wp--preset--border-radius--m, 0.5rem);
}

/* Button appearance lives in the button styles (the single source); native form submit/reset buttons live in the form styles. */
button {
  border: 0;
}