/*
	Base — tokens, html/body chassis, core layout primitives

	theme.json remains the source for WP presets (colors, fonts, spacing).
	This file holds CSS-only tokens and structure every page needs.
	Loaded before style.css and assets/css/menu.css.
*/

/* -------------------------------------------------------------------------
	Tokens
------------------------------------------------------------------------- */

:root {
	--anchor-offset: 109px;
	--net-blog-mobile-header-height: 84px;

	/* Interface motion */
	--net-blog-motion-duration-fast: 180ms;
	--net-blog-motion-ease-standard: ease-in-out;

	--list-item-spacing: 0.65em;
	--color-primary: var(--wp--preset--color--primary);
	--color-main: var(--wp--preset--color--main);
	--color-page-background: var(--wp--preset--color--page-white);
	--color-blue-plus-1: var(--wp--preset--color--blue-plus-1, #4d88ff);

	/*
		Type families live in theme.json as presets:
		--wp--preset--font-family--primary  (Geist)
		--wp--preset--font-family--mono     (Share Tech Mono)
		--wp--preset--font-family--accent   (Share Tech)
	*/

	/* Font sizes: aligned with theme.json presets */
	--global-font-size-12px: 0.75rem;
	--global-font-size-13px: 0.8125rem;
	--global-font-size-14px: 0.875rem;
	--global-font-size-16px: 1rem;
	--global-font-size-18px: 1.125rem;
	--global-font-size-24px: 1.5rem;
	--global-font-size-32px: 2rem;
	--global-font-size-36px: 2.25rem;
	--global-font-size-48px: 3rem;
	--global-font-size-64px: 4rem;
	--global-font-size-72px: 4.5rem;
	--global-font-size-96px: 6rem;

	/* Font weights: Geist regular + bold only; Share Tech / Mono are single-weight */
	--global-font-weight-regular: 400;
	--global-font-weight-bold: 700;

	/* Line heights */
	--global-line-height-none: 1;
	--global-line-height-tight: 1.1;
	--global-line-height-snug: 1.2;
	--global-line-height-body: 1.5;
	--global-line-height-relaxed: 1.625;
	--global-line-height-loose: 2;

	/* Palette aliases mapped to theme.json presets */
	--black: var(--wp--preset--color--main, #000000);
	--white: var(--wp--preset--color--base, #ffffff);
	--orange: var(--wp--preset--color--primary-accent, #ff6633);
	--periwinkle: var(--wp--preset--color--primary, #500eee);
	--page-white: var(--wp--preset--color--page-white, #ece9df);
	--powder: var(--wp--preset--color--primary-alt, #a3d1ff);

	/* Blues */
	--blue-minus-2: var(--wp--preset--color--blue-minus-2, #1b3098);
	--blue-minus-1: var(--wp--preset--color--blue-minus-1, #173ccf);
	--blue: var(--wp--preset--color--blue, #1a53ff);
	--blue-plus-1: var(--wp--preset--color--blue-plus-1, #4d88ff);
	--blue-plus-2: var(--wp--preset--color--blue-plus-2, #81b5ff);
	--blue-plus-3: var(--wp--preset--color--blue-plus-3, #a3d1ff);

	/* Purples */
	--purple-minus-1: var(--wp--preset--color--purple-minus-1, #3a2a6f);
	--purple: var(--wp--preset--color--purple, #493597);
	--purple-plus-1: var(--wp--preset--color--purple-plus-1, #7466cc);
	--purple-plus-2: var(--wp--preset--color--purple-plus-2, #9390df);
	--purple-plus-3: var(--wp--preset--color--purple-plus-3, #adb1eb);
	--purple-plus-4: var(--wp--preset--color--purple-plus-4, #cbd1f6);

	/* Greens */
	--green-minus-1: var(--wp--preset--color--green-minus-1, #0f8a61);
	--green: var(--wp--preset--color--green, #14b881);
	--green-plus-1: var(--wp--preset--color--green-plus-1, #13eca4);
	--green-plus-2: var(--wp--preset--color--green-plus-2, #7cf8cf);
	--green-plus-3: var(--wp--preset--color--green-plus-3, #c2ffeb);
}

/*
	WordPress core outputs fallback values for the reserved "normal" and
	"huge" presets after Global Styles. Reassert theme.json values.
*/
:root,
.editor-styles-wrapper {
	--wp--preset--font-size--normal:
		clamp(0.9375rem, 0.9rem + 0.25vw, 1rem);

	--wp--preset--font-size--huge:
		clamp(3.5rem, 2.3rem + 6vw, 6rem);
}

/* -------------------------------------------------------------------------
	Document / page chassis
------------------------------------------------------------------------- */

html {
	min-height: 100%;
	scrollbar-gutter: stable;
	/* 100vw breakouts ignore the gutter and cause a mobile horizontal bar */
	overflow-x: clip;
	scroll-padding-top: var(--anchor-offset);
}

body {
	min-height: 100dvh;
}

/* Sticky footer on short pages */
.wp-site-blocks {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
	/* Second child of .wp-site-blocks otherwise inherits block-gap
	   (spacing/medium) — leaves a strip above the front-page hero. */
	margin-block-start: 0;
}

.wp-site-blocks > footer,
.wp-site-blocks > .site-footer,
.wp-site-blocks > .wp-block-template-part:has(footer) {
	flex-shrink: 0;
}

/*
	Legacy editor classes → current family tokens.
	Keeps older content working after the slug rename.
*/
.has-heading-font-family {
	font-family: var(--wp--preset--font-family--primary) !important;
}

.has-geist-mono-font-family,
.has-share-tech-mono-font-family {
	font-family: var(--wp--preset--font-family--mono) !important;
}

.has-share-tech-font-family {
	font-family: var(--wp--preset--font-family--accent) !important;
}

/*
	Share Tech + Share Tech Mono are single-weight (400).
	Never request or synthesize bold.
*/
html {
	font-synthesis: none;
}

:is(
	.has-mono-font-family,
	.has-accent-font-family,
	.has-share-tech-mono-font-family,
	.has-share-tech-font-family,
	.is-style-eyebrow
) {
	font-weight: 400 !important;
}

/* Joined field + action (input flush against button). */
.joined-field,
.cta-subscribe-form {
	align-items: stretch;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	max-width: 32rem;
	position: relative;
	width: 100%;
}

.joined-field > label,
.cta-subscribe-form > label {
	border: 0 !important;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	white-space: nowrap;
	width: 1px !important;
}

.joined-field > input,
.joined-field > input[type="email"],
.cta-subscribe-form > input,
.cta-subscribe-form > input[type="email"] {
	-webkit-appearance: none;
	appearance: none;
	background: var(--wp--preset--color--base, #fff) !important;
	border-color: var(--wp--preset--color--primary, #500eee) !important;
	border-radius: 0 !important;
	border-style: solid !important;
	border-width: 1px 0 1px 1px !important;
	box-shadow: none !important;
	box-sizing: border-box;
	color: var(--wp--preset--color--main, #000);
	flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	min-width: 0;
	outline-offset: 0;
	padding: 1.25em 1rem;
}

.joined-field input::placeholder,
.cta-subscribe-form input::placeholder {
	color: var(--wp--preset--color--main, #000);
	opacity: 0.45;
}

.joined-field input:focus,
.joined-field input:focus-visible,
.cta-subscribe-form input:focus,
.cta-subscribe-form input:focus-visible {
	outline: 2px solid var(--wp--preset--color--purple, #493597);
	outline-offset: -2px;
	position: relative;
	z-index: 1;
}

.joined-field > button,
.joined-field > button[type="submit"],
.cta-subscribe-form > button,
.cta-subscribe-form > button[type="submit"] {
	-webkit-appearance: none;
	align-items: center;
	appearance: none;
	background: var(--wp--preset--color--base, #fff) !important;
	border: 1px solid var(--wp--preset--color--primary, #500eee) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box;
	color: var(--wp--preset--color--primary, #500eee);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: row;
	flex-wrap: nowrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1rem;
	font-weight: 400;
	gap: 0.5em;
	justify-content: center;
	letter-spacing: 0.045em;
	line-height: 1.2;
	margin: 0;
	padding: 1.25em 1.5em;
	text-transform: uppercase;
	white-space: nowrap;
}

.joined-field button:hover,
.joined-field button:focus-visible,
.cta-subscribe-form button:hover,
.cta-subscribe-form button:focus-visible {
	background: var(--wp--preset--color--base, #fff) !important;
	border-color: var(--wp--preset--color--secondary, #000) !important;
	color: var(--wp--preset--color--secondary, #000);
	text-decoration: none;
}

.joined-field button:focus-visible,
.cta-subscribe-form button:focus-visible {
	outline: 2px solid var(--wp--preset--color--purple, #493597);
	outline-offset: 0.25rem;
}

/* Arrow when markup has no icon SVG */
.joined-field > button:not(:has(svg))::after,
.cta-subscribe-form > button:not(:has(svg))::after {
	content: "→";
	flex: 0 0 auto;
	font-size: 1em;
	line-height: 1;
}

.joined-field svg,
.joined-field__icon,
.cta-subscribe-form__icon {
	display: block;
	flex: 0 0 auto;
	height: 1em;
	overflow: visible;
	width: 1em;
}

.joined-field svg path,
.cta-subscribe-form svg path {
	stroke: currentColor;
}

/*
	HubSpot subscribe mount ([nb_hubspot_subscribe]).

	- Grid keeps email | submit on one row; HubSpot error lists go full-width below
	  (they used to sit between the fields and break the joined border).
	- Beat Ollie parent input chrome (radius / soft shadow) on all viewports.
	- Thank-you leading   is stripped in hubspot-subscribe.php JS.
*/
.nb-hubspot-subscribe {
	max-width: 32rem;
	position: relative;
	width: 100%;
}

body .nb-hubspot-subscribe form.hs-form,
body .next-in-series__footer form.hs-form {
	align-items: start;
	column-gap: 0;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0 !important;
	max-width: none;
	row-gap: 0;
	width: 100%;
}

body .nb-hubspot-subscribe form.hs-form > fieldset,
body .next-in-series__footer form.hs-form > fieldset {
	border: 0 !important;
	display: flex !important;
	flex-direction: column;
	grid-column: 1;
	grid-row: 1;
	margin: 0 !important;
	max-width: none !important;
	min-width: 0;
	padding: 0 !important;
	width: auto !important;
}

body .nb-hubspot-subscribe form.hs-form > .hs_submit,
body .nb-hubspot-subscribe form.hs-form > .hs-submit,
body .next-in-series__footer form.hs-form > .hs_submit,
body .next-in-series__footer form.hs-form > .hs-submit {
	align-items: stretch;
	display: flex !important;
	flex-direction: column;
	grid-column: 2;
	grid-row: 1;
	margin: 0 !important;
	padding: 0 !important;
}

body .nb-hubspot-subscribe form.hs-form > .hs_error_rollup,
body .nb-hubspot-subscribe form.hs-form > ul.hs-error-msgs,
body .next-in-series__footer form.hs-form > .hs_error_rollup,
body .next-in-series__footer form.hs-form > ul.hs-error-msgs {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0.5rem 0 0 !important;
	padding: 0 !important;
	width: 100%;
}

body .nb-hubspot-subscribe .actions,
body .next-in-series__footer .hs-form .actions {
	display: flex !important;
	flex: 1 1 auto;
	margin: 0 !important;
	padding: 0 !important;
}

body .nb-hubspot-subscribe .hs-form-field,
body .nb-hubspot-subscribe .input,
body .next-in-series__footer .hs-form .hs-form-field,
body .next-in-series__footer .hs-form .input {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

body .nb-hubspot-subscribe .hs-form-field > label,
body .nb-hubspot-subscribe .hs-field-desc,
body .nb-hubspot-subscribe .hs-form-required,
body .nb-hubspot-subscribe legend,
body .next-in-series__footer .hs-form .hs-form-field > label,
body .next-in-series__footer .hs-form .hs-field-desc,
body .next-in-series__footer .hs-form legend {
	border: 0 !important;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	white-space: nowrap;
	width: 1px !important;
}

body .nb-hubspot-subscribe input.hs-input,
body .nb-hubspot-subscribe input.hs-input[type="email"],
body .nb-hubspot-subscribe input.hs-input[type="text"],
body .next-in-series__footer .hs-form input.hs-input,
body .next-in-series__footer .hs-form input.hs-input[type="email"],
body .next-in-series__footer .hs-form input.hs-input[type="text"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: var(--wp--preset--color--base, #fff) !important;
	border-color: var(--wp--preset--color--primary, #500eee) !important;
	border-radius: 0 !important;
	border-style: solid !important;
	border-width: 1px 0 1px 1px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	color: var(--wp--preset--color--main, #000) !important;
	font-family: var(--wp--preset--font-family--primary) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 400 !important;
	height: 3.75rem !important;
	line-height: 3.75rem !important;
	margin: 0 !important;
	max-height: 3.75rem !important;
	max-width: none !important;
	min-height: 3.75rem !important;
	min-width: 0;
	padding: 0 1rem !important;
	width: 100% !important;
}

body .nb-hubspot-subscribe input.hs-input::placeholder,
body .next-in-series__footer .hs-form input.hs-input::placeholder {
	color: var(--wp--preset--color--main, #000);
	opacity: 0.45;
}

body .nb-hubspot-subscribe input.hs-button,
body .nb-hubspot-subscribe input.hs-button[type="submit"],
body .next-in-series__footer .hs-form input.hs-button,
body .next-in-series__footer .hs-form input.hs-button[type="submit"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: var(--wp--preset--color--base, #fff) !important;
	border: 1px solid var(--wp--preset--color--primary, #500eee) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	color: var(--wp--preset--color--primary, #500eee) !important;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 400 !important;
	height: 3.75rem !important;
	letter-spacing: 0.045em;
	line-height: 3.75rem !important;
	margin: 0 !important;
	max-height: 3.75rem !important;
	min-height: 3.75rem !important;
	padding: 0 1.5rem !important;
	text-transform: uppercase;
	white-space: nowrap;
}

body .nb-hubspot-subscribe input.hs-button:hover,
body .nb-hubspot-subscribe input.hs-button:focus-visible,
body .nb-hubspot-subscribe input.hs-button[type="submit"]:hover,
body .nb-hubspot-subscribe input.hs-button[type="submit"]:focus-visible,
body .next-in-series__footer .hs-form input.hs-button:hover,
body .next-in-series__footer .hs-form input.hs-button:focus-visible,
body .next-in-series__footer .hs-form input.hs-button[type="submit"]:hover,
body .next-in-series__footer .hs-form input.hs-button[type="submit"]:focus-visible {
	background: var(--wp--preset--color--base, #fff) !important;
	border-color: var(--wp--preset--color--secondary, #000) !important;
	color: var(--wp--preset--color--secondary, #000) !important;
}

body .nb-hubspot-subscribe .hs-error-msgs,
body .nb-hubspot-subscribe .hs-error-msgs li,
body .nb-hubspot-subscribe .hs-error-msg,
body .nb-hubspot-subscribe label.hs-error-msg,
body .nb-hubspot-subscribe .hs_error_rollup,
body .next-in-series__footer .hs-form .hs-error-msgs,
body .next-in-series__footer .hs-form .hs-error-msgs li,
body .next-in-series__footer .hs-form .hs-error-msg,
body .next-in-series__footer .hs-form label.hs-error-msg {
	color: var(--wp--preset--color--primary, #500eee) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	list-style: none !important;
	margin: 0.5rem 0 0 !important;
	margin-left: 0 !important;
	padding: 0 !important;
	padding-left: 0 !important;
	text-align: left !important;
	width: 100%;
}

body .nb-hubspot-subscribe .hs-form-field .hs-error-msgs {
	order: 2;
}

body .nb-hubspot-subscribe:has(.submitted-message),
body .next-in-series__footer:has(.submitted-message) {
	justify-content: flex-start;
	text-align: left;
	width: 100%;
}

/*
	HubSpot bakes style="text-align: center" + leading   into thank-you HTML.
*/
body .nb-hubspot-subscribe .submitted-message,
body .nb-hubspot-subscribe .submitted-message[style],
body .nb-hubspot-subscribe .submitted-message div,
body .nb-hubspot-subscribe .submitted-message div[style],
body .nb-hubspot-subscribe .submitted-message p,
body .nb-hubspot-subscribe .submitted-message span,
body .nb-hubspot-subscribe .submitted-message strong,
body .next-in-series__footer .submitted-message,
body .next-in-series__footer .submitted-message[style],
body .next-in-series__footer .submitted-message div,
body .next-in-series__footer .submitted-message div[style],
body .next-in-series__footer .submitted-message p,
body .next-in-series__footer .submitted-message span,
body .next-in-series__footer .submitted-message strong {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--normal);
	margin: 0;
	padding: 0 !important;
	text-align: left !important;
	text-indent: 0 !important;
	width: 100%;
}

@media (max-width: 781px) {
	body .nb-hubspot-subscribe input.hs-input,
	body .nb-hubspot-subscribe input.hs-input[type="email"],
	body .nb-hubspot-subscribe input.hs-button,
	body .nb-hubspot-subscribe input.hs-button[type="submit"],
	body .next-in-series__footer .hs-form input.hs-input,
	body .next-in-series__footer .hs-form input.hs-button {
		border-radius: 0 !important;
		box-shadow: none !important;
	}
}