/* ==========================================================================
   WordPress core block → design system bridge.

   The design CSS (site.css) was written for hand-authored HTML. A block theme
   renders the same structure through core block wrappers, so this file maps
   block classes onto the design's classes without redefining the design.
   ========================================================================== */

/* --- Layout: let the design's .wrap and .section do the spacing --- */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-group { margin-block-start: 0; margin-block-end: 0; }
.wp-block-post-content > * { margin-block-start: 0; }
/* Groups the design gives an intentional margin. The blanket reset above
   flattens them otherwise — which shortened every section that uses a
   .sectionhead by 48px and pulled the footer legal block up by 46px. */
.wp-block-group.sectionhead { margin: 0 auto 48px; }
.wp-block-group.footlegal { margin-block-start: 46px; }

/* --- Vertical rhythm -------------------------------------------------------
   theme.json sets styles.spacing.blockGap to "0" so band padding alone controls
   section spacing. But WordPress's flow-layout support *also* zeroes
   margin-block-end on every flow child, and it does so with a class selector
   (.is-layout-flow > *). The design's base rhythm in site.css uses element
   selectors (p { margin: 0 0 1.1em }, h1..h4 { margin: 0 0 .5em }), so it lost
   the specificity contest and collapsed: the hero headline sat flush on the
   lede, and the lede flush on the button row — which read as cramped, uneven
   spacing. Restore the rhythm at class-level specificity so it outranks the
   layout support rule. Last children stay flush so band padding, not a stray
   margin, is what closes a section. */
.hero h1, .hero h2, .pagehead h1, .pagehead h2,
.ctaband h2, .leadbox h2,
.section h1, .section h2, .section h3 { margin-block-end: .5em; }
.hero p, .pagehead p, .ctaband p, .leadbox p,
.section p { margin-block-end: 1.1em; }
.section li, .hero li { margin-block-end: .5em; }

/* Containers the design deliberately keeps flush — keep them flush. */
.hero .eyebrow, .pagehead .eyebrow,
.ctaband .eyebrow, .leadbox .eyebrow { margin-block-end: 14px; }
.hero .herofine { margin-block-start: 24px; margin-block-end: 0; }
.utilitybar p, .leadmagnet p,
.sitefooter p, .sitefooter li { margin-block-end: 0; }

.hero .herogrid > .wp-block-group > *:last-child,
.section > .wrap > *:last-child,
.ctaband > .wrap > *:last-child,
.pagehead > .wrap > *:last-child { margin-block-end: 0; }

/* --- Header --- */
.wp-block-group.utilitybar { background: var(--navy); color: #b9c9d8; font-size: 13px; }
.wp-block-group.utilitybar .wrap { display: flex; justify-content: space-between; gap: 18px; align-items: center; min-height: 42px; }
.wp-block-group.utilitybar p { margin: 0; }
.wp-block-group.utilitybar a { color: #fff; text-decoration: none; border-bottom: 1px solid transparent; }

.wp-block-group.siteheader { background: #fff; border-bottom: 1px solid var(--line); }
.wp-block-group.siteheader > .wrap {
	display: flex; align-items: center; justify-content: space-between;
	gap: 28px; min-height: 86px;
}
.wp-block-group.brand { display: flex; align-items: center; gap: 12px; }
.wp-block-site-title { margin: 0 !important; font-size: 21px; font-weight: 500; letter-spacing: .01em; line-height: 1.2; }
.wp-block-site-title a { color: var(--ink); text-decoration: none; }
.wp-block-site-title a:hover { color: var(--brass-2); }
.wp-block-site-tagline { margin: 0 !important; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px !important; }
.wp-block-navigation.nav { font-size: 14.6px; }
.wp-block-navigation.nav .wp-block-navigation-item__content { color: var(--ink); text-decoration: none; }
.wp-block-navigation.nav .wp-block-navigation-item__content:hover { color: var(--brass-2); }
.wp-block-navigation.nav .wp-block-navigation-submenu__toggle { color: var(--ink); }
/* The header nav is plain markup (see parts/header.html), so site.css's own
   .nav / .navtoggle / .pop rules drive it — including the 960px collapse and
   the CTA travelling inside the panel. No bridge mapping needed. */

/* --- Buttons: match .btn geometry (square, solid) --- */
.wp-block-button__link {
	border-radius: 0;
	padding: 15px 28px;
	font-family: var(--font);
	font-size: 15px;
	font-weight: 500;
	/* The design's .btn has no line-height of its own, so it inherits the body's
	   1.68. Hard-coding 1.2 here made WordPress buttons 7px shorter than the
	   reference build (55px vs 62px) and visibly lighter than the hero. */
	line-height: 1.68;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .18s var(--ease), color .18s var(--ease);
}
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button.primary .wp-block-button__link {
	background: var(--brass); color: var(--ink); border-color: var(--brass);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button.primary .wp-block-button__link:hover {
	background: var(--brass-2); border-color: var(--brass-2);
}
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent; color: var(--ink); border-color: var(--ink);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: var(--ink); color: #fff; }

/* On dark bands the ghost button inverts */
.ctaband .wp-block-button.is-style-ghost .wp-block-button__link,
.pagehead .wp-block-button.is-style-ghost .wp-block-button__link,
.hero .wp-block-button.is-style-ghost .wp-block-button__link {
	color: #fff; border-color: rgba(255,255,255,.7);
}

/* --- Button classes emitted on the wrapper div, not the link ---
   The HTML converter put the theme's .btn-lg / .btn-primary / .btn-ghost classes on the
   .wp-block-button wrapper instead of on the <a>. The theme's own rules target the link,
   so the wrapper collected the padding a second time and every button sat inside ~68px of
   invisible horizontal space — which read as uneven, sloppy spacing in the hero and CTA
   rows. Worse, the ghost variant never reached the link, so the secondary button rendered
   solid brass and looked identical to the primary. Strip the wrapper, hand the intent to
   the anchor. */
.wp-block-button.btn,
.wp-block-button.btn-lg,
.wp-block-button.btn-primary,
.wp-block-button.btn-navy,
.wp-block-button.btn-gold,
.wp-block-button.btn-ghost {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}

.wp-block-button.btn-lg .wp-block-button__link { padding: 17px 34px; font-size: 16px; }

.wp-block-button.btn-primary .wp-block-button__link {
	background: var(--brass); color: var(--ink); border-color: var(--brass);
}
.wp-block-button.btn-primary .wp-block-button__link:hover {
	background: var(--brass-2); border-color: var(--brass-2);
}
.wp-block-button.btn-ghost .wp-block-button__link {
	background: transparent; color: var(--ink); border-color: var(--ink);
}
.wp-block-button.btn-ghost .wp-block-button__link:hover {
	background: var(--ink); border-color: var(--ink); color: #fff;
}
.hero .wp-block-button.btn-ghost .wp-block-button__link,
.pagehead .wp-block-button.btn-ghost .wp-block-button__link,
.ctaband .wp-block-button.btn-ghost .wp-block-button__link,
.leadbox .wp-block-button.btn-ghost .wp-block-button__link {
	background: transparent; color: #fff; border-color: rgba(255,255,255,.7);
}
.hero .wp-block-button.btn-ghost .wp-block-button__link:hover,
.pagehead .wp-block-button.btn-ghost .wp-block-button__link:hover,
.ctaband .wp-block-button.btn-ghost .wp-block-button__link:hover,
.leadbox .wp-block-button.btn-ghost .wp-block-button__link:hover {
	background: #fff; border-color: #fff; color: var(--ink);
}

/* Zero the core buttons wrapper gap so .btnrow's own gap is the only spacing. */
.btnrow > .wp-block-buttons { gap: 0; }
/* The design lifts the CTA band's button off the paragraph above it via
   (.ctaband .btn { margin-top: 10px }) plus the paragraph's 1.1em bottom margin.
   WordPress zeroes that paragraph margin and puts the anchor in a wrapper, so
   carry the combined 32px gap on the wrapper instead. */
.ctaband .wp-block-buttons { margin-block-start: 32px; }

/* --- Lists: the design's check-mark list --- */
ul.is-style-ticks { list-style: none; padding-left: 0; }
ul.is-style-ticks li { position: relative; padding-left: 28px; margin-bottom: 12px; }
ul.is-style-ticks li::before {
	content: "\2713"; position: absolute; left: 0; top: 0;
	color: var(--brass-2); font-weight: 600; font-size: 14px;
}
.pagehead ul.is-style-ticks li::before,
.ctaband ul.is-style-ticks li::before,
.hero ul.is-style-ticks li::before { color: var(--brass); }

/* --- Groups used as design bands --- */
.wp-block-group.section { padding: 86px 0; }
.wp-block-group.section.is-style-tight,
.wp-block-group.section.tight { padding: 54px 0; }
.wp-block-group.section.is-style-band-alt,
.wp-block-group.section.alt {
	background: var(--paper-2);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.wp-block-group.section.is-style-band-sand,
.wp-block-group.section.sand { background: var(--paper-3); }
.wp-block-group.section.is-style-band-navy,
.wp-block-group.section.navy { background: var(--navy); color: #c8d6e3; }
.wp-block-group.section.is-style-band-navy h2,
.wp-block-group.section.navy h2 { color: #fff; }

.wp-block-group.pagehead {
	background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
	color: #d5e0ea;
	padding: 68px 0 62px;
}
.wp-block-group.ctaband {
	background: linear-gradient(158deg, var(--navy) 0%, var(--navy-2) 100%);
	color: #c8d6e3;
	padding: 82px 0;
}
.wp-block-group.ctaband h2 { color: #fff; }

/* --- Cards ---
   .card is fully styled in site.css (padding 34px 30px 30px, 3px brass top
   rule, flex column). Redeclaring it here with tighter padding made every card
   16px shorter than the reference build, which shortened each card grid by
   ~58px. Only the block-style alias needs a mapping now. */
.is-style-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 3px solid var(--brass);
	padding: 34px 30px 30px;
	display: flex; flex-direction: column;
}
.wp-block-group.grid { display: grid; gap: 24px; }
.wp-block-group.grid.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.wp-block-group.grid.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.wp-block-group.grid.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* --- Disclosure / note boxes --- */
.wp-block-group.disclosure {
	border: 1px solid var(--line);
	background: var(--paper-2);
	padding: 22px 24px;
	margin: 2em 0;
	font-size: 13.2px;
	color: var(--slate);
}
.wp-block-group.disclosure h3 { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: var(--ink); }

/* --- Video placeholder --- */
.wp-block-group.videoblock {
	position: relative;
	background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255,255,255,.14);
	color: #fff;
}

/* --- Two-column text --- */
.wp-block-group.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }

/* --- Footer ---
   .sitefooter / .footgrid / .footh / .footlegal are all defined in site.css.
   Redeclaring them here (56px padding, 1.4fr columns, 40px gap, uppercase footh)
   pulled the WordPress footer 250px away from the reference build. Only the
   WordPress-specific site title and tagline need mapping. */
.wp-block-group.sitefooter .wp-block-site-title a { color: #fff; }
.wp-block-group.sitefooter .wp-block-site-tagline { color: #7d94a9; }
/* WordPress zeroes child margins inside flow-layout groups. The design relies on
   .footgrid li (10px) and .footlegal p (1em) to build the footer's height, so
   restore them at a specificity the layout rule can't beat. Without this the
   footer came out 101px shorter than the reference build. */
.wp-block-group.sitefooter li { margin-block-end: 10px; }
.wp-block-group.footlegal p { margin-block-end: 1em; }

/* --- Editorial eyebrow / lede helpers used by the patterns --- */
.wp-block-paragraph.eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 12.4px;
	font-weight: 600;
	color: var(--brass-2);
	margin-bottom: 14px;
}
.wp-block-paragraph.lede { font-size: 1.1rem; line-height: 1.66; color: var(--body); max-width: 62ch; }
.pagehead .wp-block-paragraph.lede { color: #c4d1dc; }
.hero .wp-block-paragraph.lede { color: #c4d1dc; }

/* --- Responsive --- */
@media (max-width: 900px) {
	.wp-block-group.twocol { grid-template-columns: 1fr; gap: 30px; }
	.wp-block-group.grid.grid-3,
	.wp-block-group.grid.grid-4,
	.wp-block-group.grid.grid-2 { grid-template-columns: 1fr; }
	.wp-block-group.sitefooter .footgrid { grid-template-columns: 1fr 1fr; }
	.wp-block-group.section { padding: 56px 0; }
}
@media (max-width: 600px) {
	.wp-block-group.sitefooter .footgrid { grid-template-columns: 1fr; }
	.wp-block-group.siteheader > .wrap { min-height: 72px; }
}

/* --- CTA band centring ---
   The design centres this band with .center on the wrap, which centres inline
   content. WordPress puts the button inside a flex wrapper that defaults to
   flex-start, so the button sat hard left while the heading and paragraph were
   centred. */
.wp-block-group.ctaband .wp-block-buttons { justify-content: center; }