/*
 * Shop OV — site styles.
 *
 * Global: base type, the header accent, buttons, editor formats, bands
 * (core/group block styles), the spacing system, header and footer.
 * Per-block overrides of parent blocks live in css/blocks/<block>.css and
 * load with the block. Child blocks carry their own CSS.
 *
 * Every hook is a block style (is-style-sov-*), a format (sov-*) or a
 * block's own class; nothing depends on a typed class name. Figma file
 * 2H0TRLnej7KjivuDmzTwf8, artboard 1440, content 1152 (x 144…1296).
 * Structure ported from S&H Steel (same parent commit).
 */

/* ---- Base --------------------------------------------------------------- */

body {
	background: var(--white);
	color: var(--text-primary);
	font-family: var(--font-family-body);
	line-height: var(--line-height-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p,
li {
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-heading);
	color: var(--color-heading);
	line-height: var(--line-height-heading);
}

h1, h2 {
	font-weight: 700;
}

h3, h4 {
	font-weight: 600;
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

/* Block headings follow the band they sit in (--color-heading); the parent
   colours some with --text-primary. White-background intros are set back to
   dark grey per block (css/blocks). */
:is(.lp-callout__header, .lp-two-column__header, .lp-multi-column__header, .lp-gallery__header) {
	color: var(--color-heading);
}

[class*="__sub-header"] {
	font-family: var(--font-family-body);
	font-weight: 400;
	color: inherit;
}

a {
	color: var(--accent-link);
}

/* Links in body copy: underlined, in the text's own colour (Figma). */
:is(.lp-callout__content, .lp-two-column__body, .lp-multi-column__body, .lp-multi-column__card-body, .lp-multi-column__icon-card-body, .sov-faq) a:not(.btn) {
	color: inherit;
	text-decoration: underline;
}

ul:not([class]) li::marker,
.sov-list-2col li::marker,
.sov-list-lg li::marker {
	font-size: 0.8em;
}

/* Dark surfaces: blocks over a photo (parent .is-dark) and dark bands. */
.is-dark {
	--color-heading: var(--white);
	--text-primary: var(--white);
	--text-secondary: var(--white);
	color: var(--white);
}

/* Script accents: the Header Accent field (functions.php) in headings, and
   the "Script accent" format in body copy. Style Script, gold. */
.sov-accent,
.sov-script {
	font-family: var(--sov-font-script);
	font-weight: 400;
	color: var(--accent-300);
	font-size: 1.1em;
	line-height: 1;
}

.sov-accent--break {
	display: block;
}

/* ---- Buttons ------------------------------------------------------------
   Figma components: Primary Light (orange, hover pink), Secondary (navy,
   hover mint with navy text), Primary Dark (orange outline on dark, hover
   mint). Blocks print "btn btn-primary"; colours come from --btn-*
   properties so a section can switch them (bands below). */

a.btn,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"] {
	display: inline-block;
	border: 1px solid transparent;
	border-radius: var(--btn-radius);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	box-shadow: none;
	font-family: var(--font-family-button);
	font-size: 18px;
	font-weight: 800;
	line-height: 27px;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

a.btn-primary {
	background-color: var(--btn-bg);
	border-color: var(--btn-border, var(--btn-bg));
	color: var(--btn-text);
}

a.btn-primary:hover,
a.btn-primary:focus-visible {
	background-color: var(--btn-bg-hover);
	border-color: var(--btn-bg-hover);
	color: var(--btn-text-hover);
}

:root {
	--btn-bg: var(--accent-400);
	--btn-text: var(--white);
	--btn-bg-hover: var(--secondary-300);
	--btn-text-hover: var(--white);
}

/* Navy (Secondary component): a format, and the default on orange. */
a.btn.sov-btn-navy,
:is(.is-style-sov-orange, .is-style-sov-panel, .is-style-sov-text-columns) a.btn-primary:not(.sov-btn-outline) {
	--btn-bg: var(--primary-400);
	--btn-border: var(--primary-400);
	--btn-text: var(--white);
	--btn-bg-hover: var(--primary-200);
	--btn-text-hover: var(--primary-400);
}

/* Outline (Primary Dark component): a format, and the default on navy. */
a.btn.sov-btn-outline,
.is-style-sov-navy .lp-two-column a.btn-primary {
	--btn-bg: transparent;
	--btn-border: var(--accent-400);
	--btn-text: var(--white);
	--btn-bg-hover: var(--primary-200);
	--btn-text-hover: var(--white);
}

/* Orange back on bands that would otherwise turn it navy, where Figma
   keeps orange (pink band cards, photo bands). */
.is-style-sov-pink a.btn-primary {
	--btn-bg: var(--accent-400);
}

/* Text columns on a mint band keep the orange button (Economic Impact
   "Dig Deeper"), hover included. */
.is-style-sov-mint .is-style-sov-text-columns a.btn-primary:not(.sov-btn-outline) {
	--btn-bg: var(--accent-400);
	--btn-border: var(--accent-400);
	--btn-text: var(--white);
	--btn-bg-hover: var(--secondary-300);
	--btn-text-hover: var(--white);
}

/* Buttons placed in body copy with the Formats menu sit side by side. */
p:has(> a.btn) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

/* Buttons keep at least 20px from the text above them (WebMO, 2026-10-14:
   minimum 20, more where the frame has more; pipeline default). Block
   buttons follow their block's text; Formats buttons are a paragraph of
   their own, so the paragraph before them drops its bottom margin. */
:is(.lp-callout__content, .lp-two-column__body, .lp-hero__content, .lp-gallery__content, .lp-form__content) + a.btn {
	margin-top: 20px;
}

* + p:has(> a.btn) {
	margin-top: 20px;
}

:has(+ p > a.btn) {
	margin-bottom: 0 !important;
}

/* Card buttons sit at the card's foot (cards in a row align their buttons,
   Christmas pink band), at least 20 below the text (8 flex gap + 12). */
:is(.lp-multi-column__card-body, .lp-multi-column__icon-card-body):has(+ a.btn) {
	margin-bottom: 12px;
}

:is(.lp-multi-column__card-btn, .lp-multi-column__icon-card-btn) {
	margin-top: auto !important;
}

/* Lists: bullets flush with the text's left edge, wrapped lines hang under
   the text (WebMO, 2026-10-14; pipeline default). */
:is(.lp-callout__content, .lp-two-column__body, .lp-multi-column__body, .lp-multi-column__card-body, .lp-multi-column__icon-card-body, .lp-gallery__content, .sov-faq__answer, .sov-ornament-hunt, .sov-modal__content) ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

:is(.lp-callout__content, .lp-two-column__body, .lp-multi-column__body, .lp-multi-column__card-body, .lp-multi-column__icon-card-body, .lp-gallery__content, .sov-faq__answer, .sov-ornament-hunt, .sov-modal__content) ul > li {
	position: relative;
	padding-left: 1.1em;
}

:is(.lp-callout__content, .lp-two-column__body, .lp-multi-column__body, .lp-multi-column__card-body, .lp-multi-column__icon-card-body, .lp-gallery__content, .sov-faq__answer, .sov-ornament-hunt, .sov-modal__content) ul > li::before {
	content: "•";
	position: absolute;
	left: 0;
	top: 0;
}

/* ---- Mountain line (Decoration field on any block, functions.php) -------
   Figma's line drawing (assets/mountain.svg, ~/Desktop/Vector.svg) placed
   behind a section: navy at 30% (grey on white, darker on mint and pink)
   or white. Top / right / width are the frame's pixels at 1440 and scale
   down with the viewport. Wider than 1440 the line keeps its place beside
   the centred content (the 1440 frame's right edge), not the window's
   (WebMO, 2026-10-15: at 4000 it sat 1400px off). "Inside" clips it to
   its section (and its band);
   "Overflow" lets it run on behind the next section, which paints over it. */
.has-sov-mountain {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.has-sov-mountain--overflow {
	overflow: visible;
	overflow-x: clip;
}

.has-sov-mountain--overflow + * {
	position: relative;
}

.sov-mountain {
	--m-unit: min(1px, calc(100vw / 1440));
	position: absolute;
	z-index: -1;
	top: calc(var(--m-top, 0) * var(--m-unit));
	right: calc(max(0px, (100% - 1440px) / 2) + var(--m-right, 0) * var(--m-unit));
	width: calc(var(--m-width, 793) * var(--m-unit));
	aspect-ratio: 793 / 220;
	background: rgb(24 52 81 / 0.3);
	-webkit-mask: url(../assets/mountain.svg) center / 100% 100% no-repeat;
	mask: url(../assets/mountain.svg) center / 100% 100% no-repeat;
	pointer-events: none;
}

.sov-mountain--white {
	background: var(--white);
}

.wp-block-group[class*="is-style-sov-"] {
	overflow: clip;
}

/* Phones and tablets: behind the content the line fights the text, so it
   rests under the section's content instead, full width at the section's
   foot, like a divider (WebMO, 2026-10-14). The section's bottom padding
   makes room: 30 above the line + the line's height (220/793 of its width). */
@media (max-width: 1024px) {
	.has-sov-mountain {
		padding-bottom: calc(30px + 100vw * 220 / 793) !important;
	}

	.sov-mountain {
		top: auto;
		bottom: 0;
		right: 0;
		width: 100%;
	}

	/* A line that ran on behind the next section, inside a band (Spotlight's
	   "Visit Wow Wow"): it moves to the band's foot instead, under all of
	   the band's content. Descendant selectors: classic themes wrap a
	   group's blocks in .wp-block-group__inner-container. */
	.wp-block-group[class*="is-style-sov-"]:has(.has-sov-mountain--overflow) {
		isolation: isolate;
		padding-bottom: calc(30px + 100vw * 220 / 793);
	}

	.wp-block-group[class*="is-style-sov-"] .has-sov-mountain--overflow {
		position: static;
		isolation: auto;
		padding-bottom: var(--margin-vertical-normal) !important;
	}

	.wp-block-group[class*="is-style-sov-"] .has-sov-mountain--overflow + * {
		position: static;
	}

	/* …and the band's last block gives up its bottom padding, so the line
	   sits 30 under the content like everywhere else. */
	.wp-block-group[class*="is-style-sov-"]:has(.has-sov-mountain--overflow) :is(.wp-block-group__inner-container, .wp-block-group) > .lp-block:last-child {
		padding-bottom: 0 !important;
	}
}


p:has(> a.btn) a.btn {
	align-self: auto;
}

/* ---- Formats (TinyMCE "Formats" menu) ---------------------------------- */

.sov-emphasis {
	font-weight: 600;
	color: var(--primary-400);
}

.is-dark .sov-emphasis,
:is(.is-style-sov-orange, .is-style-sov-pink, .is-style-sov-navy) .sov-emphasis {
	color: inherit;
}

.sov-small {
	font-size: var(--font-size-small);
	line-height: 19px;
}

ul.sov-list-2col {
	columns: 2;
	column-gap: 24px;
}

ul.sov-list-2col li {
	break-inside: avoid;
}

@media (max-width: 600px) {
	ul.sov-list-2col {
		columns: 1;
	}
}

ul.sov-list-lg li {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h3);
	font-weight: 600;
	line-height: 1.1;
	color: var(--primary-400);
}

/* ---- Bands (core/group block styles) ------------------------------------
   The group carries the background; the blocks inside keep their layout.
   The parent constrains non-Launchpad blocks to the content width, so the
   bands reset it (S&H trap). 1px padding stops margins collapsing through. */

.entry-content > .wp-block-group {
	max-width: none;
	margin-block: 0;
}

.wp-block-group[class*="is-style-sov-"] {
	position: relative;
	padding-block: 1px;
}

:is(.wp-block-group.is-style-sov-orange, .wp-block-group.is-style-sov-pink, .wp-block-group.is-style-sov-navy) :is(.lp-callout__content, .lp-callout__content p, .lp-two-column__body, .lp-multi-column__body) {
	color: var(--white);
}

.wp-block-group.is-style-sov-orange {
	background: var(--accent-400);
	--color-heading: var(--white);
	--text-primary: var(--white);
	color: var(--white);
}

.wp-block-group.is-style-sov-mint {
	background: var(--primary-200);
	--color-heading: var(--primary-400);
	--text-primary: var(--primary-400);
	color: var(--primary-400);
}

.wp-block-group.is-style-sov-light-mint {
	background: var(--primary-100);
	--color-heading: var(--primary-400);
}

.wp-block-group.is-style-sov-pink {
	background: var(--secondary-400);
	--color-heading: var(--white);
	--text-primary: var(--white);
	color: var(--white);
}

.wp-block-group.is-style-sov-navy {
	background: var(--primary-400);
	--color-heading: var(--white);
	--text-primary: var(--white);
	--text-secondary: var(--white);
	color: var(--white);
}

/* Navy panel: the contact panel, content width, rounded. */
.entry-content > .wp-block-group.is-style-sov-navy-panel,
.wp-block-group.is-style-sov-navy-panel {
	background: var(--primary-400);
	border-radius: var(--sov-radius);
	max-width: var(--content-max-width);
	margin: var(--sov-space-section) auto;
	--color-heading: var(--white);
	--text-primary: var(--white);
	color: var(--white);
}

@media (max-width: 1200px) {
	.entry-content > .wp-block-group.is-style-sov-navy-panel {
		margin-inline: var(--side-margin);
	}
}

/* White cards and text inside coloured bands keep dark text. */
:is(.is-style-sov-orange, .is-style-sov-pink, .is-style-sov-navy) :is(.lp-multi-column__card, .lp-multi-column__icon-card) {
	--color-heading: var(--primary-400);
	--text-primary: var(--primary-400);
	color: var(--primary-400);
}

/* ---- Spacing system -----------------------------------------------------
   Every block pads 50 top and bottom (--sov-space-section, via the parent's
   --margin-vertical-* tokens), and the parent drops the top padding of a
   no-background block after another one, so white sections sit 50 apart.
   These rules cover what that model misses (S&H Steel, same parent). */

/* A white gap between two bands in a row. */
:is(.wp-block-group[class*="is-style-sov-"]:not(.is-style-sov-navy-panel), .lp-block--has-bg:not(.sov-page-header, .lp-hero))
	+ :is(.wp-block-group[class*="is-style-sov-"]:not(.is-style-sov-navy-panel), .lp-block--has-bg) {
	margin-top: 0;
}

/* Inside bands, the first block keeps its top padding and the next ones
   follow at the stack gap. */
.wp-block-group[class*="is-style-sov-"] > .lp-block--no-bg + .lp-block--no-bg {
	padding-block-start: 0;
}

/* Heading → body and intro → items. */
:is(.entry-content, .is-root-container) :is(.lp-two-column, .lp-multi-column, .lp-callout, .lp-form, .lp-gallery) :is([class$="__header"], [class$="__sub-header"]) {
	margin-block: 0;
}

:is(.entry-content, .is-root-container) :is([class$="__header"]) + [class$="__sub-header"] {
	margin-top: 6px;
	font-size: var(--font-size-body);
}

:is(.entry-content, .is-root-container) :is([class$="__header"], [class$="__sub-header"]) + :is(.lp-two-column__body, .lp-multi-column__body, .lp-callout__content, .lp-form__content) {
	margin-top: 16px;
}

:is(.entry-content, .is-root-container) .lp-multi-column .block-contents {
	row-gap: var(--sov-space-stack);
}

:is(.entry-content, .is-root-container) :is(.lp-two-column__body, .lp-multi-column__body, .lp-multi-column__card-body, .lp-multi-column__icon-card-body, .lp-callout__content, .lp-form__content) > :last-child {
	margin-bottom: 0;
}

:is(.lp-two-column__body, .lp-callout__content, .lp-multi-column__body) p {
	margin: 0 0 25px;
}

/* ---- Header ------------------------------------------------------------- */

.site-header {
	background: var(--white);
}

.lp-header__inner {
	max-width: calc(var(--content-max-width) + 2 * var(--side-margin));
	min-height: 118px;
}

.site-branding img,
.custom-logo {
	width: 113px;
	height: auto;
	max-height: 100px;
}

/* The logo links home and names the site (its alt text), so the parent's
   site title beside it is a duplicate: hidden whenever a logo is set
   (WebMO, 2026-10-15). It also squeezed the logo to 80px at 1440. */
.site-branding .custom-logo-link ~ :is(.site-title, .site-description) {
	display: none;
}

.lp-header__menu {
	gap: 10px;
}

.lp-header__item {
	flex-shrink: 0;
}

.lp-header__link {
	font-family: var(--font-family-heading);
	font-size: 18px;
	font-weight: 800;
	color: var(--primary-400);
	padding: 8px 10px;
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.2s;
}

a.lp-header__cta {
	white-space: nowrap;
}

.lp-header__link:hover,
.lp-header__link:focus-visible,
.lp-header__item.current-menu-item > .lp-header__link {
	color: var(--secondary-400);
}

.lp-header__item.current-menu-item > .lp-header__link {
	border-bottom-color: var(--primary-300);
}

.lp-header__cta {
	margin-left: 10px;
}


/* ---- Footer (template-parts/footer/site-footer.php) --------------------- */

.site-footer.lp-footer {
	background: var(--primary-400);
	color: var(--white);
}

.sov-footer .lp-footer__inner {
	max-width: calc(var(--content-max-width) + 2 * var(--side-margin));
	margin-inline: auto;
	padding: 50px var(--side-margin) 40px;
}

.sov-footer__cols {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}

.sov-footer__heading {
	margin: 0 0 6px;
	font-family: var(--font-family-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 21px;
	color: var(--white);
}

.sov-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sov-footer__list li,
.sov-footer__list a {
	font-size: 13px;
	line-height: 19px;
	color: var(--neutral-200);
	text-decoration: none;
}

.sov-footer__list a:hover {
	color: var(--white);
}

.sov-footer__phone {
	text-decoration: underline !important;
}

.sov-footer__links {
	columns: 2;
	column-gap: 20px;
}

.sov-footer__rule {
	margin: 30px 0;
	border: 0;
	border-top: 1px solid var(--neutral-200);
}

/* Newsletter sign-up under the rule (Figma 4046:204, 2026-10-15): the
   heading, 15, the outline button, 30 to the social row. */
.sov-footer__newsletter {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 30px;
}

.sov-footer__newsletter .sov-footer__heading {
	margin: 0;
}

.sov-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.sov-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Figma's white glyphs (assets/social/*.svg), linked from Options. */
.sov-footer__social a {
	display: inline-flex;
	color: var(--white);
	transition: color 0.2s;
}

.sov-footer__social a:hover,
.sov-footer__social a:focus-visible {
	color: var(--primary-200);
}

.sov-footer__social svg {
	width: 32px;
	height: 32px;
}

.sov-footer__note {
	margin: 0;
	font-size: 13px;
	line-height: 19px;
	color: var(--neutral-200);
	text-align: right;
}

@media (max-width: 760px) {
	.sov-footer__cols,
	.sov-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.sov-footer__note {
		text-align: left;
	}
}