/*
 * Base rules shared by every pattern, front end and editor.
 * Values come from theme.json (palette, fonts, sizes, gutters); see CONVENTIONS.md.
 *
 * Breakpoints are the old site's Tailwind ones:
 *   sm 640  md 768  lg 1024  xl 1280  2xl 1536  3xl 1921
 */

/*
 * Metric-matched fallbacks, exactly as the old site's next/font output, so
 * text set before (or without) the web fonts takes the same space, and glyphs
 * the fonts lack (→) come from the same face.
 */
@font-face {
	font-family: "Manrope Fallback";
	src: local("Arial");
	ascent-override: 106.45%;
	descent-override: 29.96%;
	line-gap-override: 0%;
	size-adjust: 100.14%;
}
@font-face {
	font-family: "Poppins Fallback";
	src: local("Arial");
	ascent-override: 92.83%;
	descent-override: 30.94%;
	line-gap-override: 8.84%;
	size-adjust: 113.11%;
}

/* Page gutters: 16 / 30 from lg / 60 from xl, set in theme.json custom.gutter. */
:root {
	--sp-gutter: var(--wp--custom--gutter--base);
	--sp-container: var(--wp--custom--container--max-width);
}
@media (min-width: 1024px) {
	:root { --sp-gutter: var(--wp--custom--gutter--lg); }
}
@media (min-width: 1280px) {
	:root { --sp-gutter: var(--wp--custom--gutter--xl); }
}

html {
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Tailwind-style preflight, kept low specificity with :where(). */
:where(.wp-site-blocks, .editor-styles-wrapper) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd, pre) {
	margin: 0;
}
:where(.wp-site-blocks, .editor-styles-wrapper) :where(ul, ol) {
	padding: 0;
}
:where(.wp-site-blocks, .editor-styles-wrapper) :where(img, svg, video) {
	max-width: 100%;
	height: auto;
}
*, ::before, ::after {
	box-sizing: border-box;
}

/* The page container: max 1921px, centred, with the page gutters. */
.sp-container {
	width: 100%;
	max-width: var(--sp-container);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
}
/* Bleeds to the right edge from lg (the old .bleed-right). */
@media (min-width: 1024px) {
	.sp-container.sp-bleed-right { padding-right: 0; }
}

/* Images inside links: no baseline gap under the image. */
a img,
.wp-block-image a img,
.wp-block-image img {
	display: block;
}

/* Underlined link (old .link-underline). */
.sp-link-underline a,
a.sp-link-underline {
	position: relative;
	display: inline-block;
	transition: color 0.2s ease;
}
.sp-link-underline a::after,
a.sp-link-underline::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: currentColor;
}
.sp-link-underline a:hover,
a.sp-link-underline:hover {
	color: var(--wp--preset--color--primary);
}

/* Buttons: nowrap and the shadow transition from the old Button component. */
.wp-block-button__link,
.wp-element-button {
	white-space: nowrap;
	transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
	display: inline-block;
	text-align: center;
	cursor: pointer;
}

/* Visually hidden, still read by screen readers. */
.sp-sr-only {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Hide scrollbars on horizontal scrollers (old scrollbar-hide). */
.sp-scrollbar-hide { scrollbar-width: none; }
.sp-scrollbar-hide::-webkit-scrollbar { display: none; }

/* ---------- Shared motion hooks (see assets/js/theme.js) ----------
 * Hidden states apply only once theme.js has marked the page (html.sp-js),
 * so the editor and no-JS visitors always see everything.
 */
html.sp-js .sp-reveal:not(.is-revealed) {
	opacity: 0;
	transform: translate3d(0, var(--sp-reveal-y, 40px), 0);
}
html.sp-js .sp-reveal.sp-reveal--left:not(.is-revealed) { transform: translate3d(-40px, 0, 0); }
html.sp-js .sp-reveal.sp-reveal--right:not(.is-revealed) { transform: translate3d(40px, 0, 0); }
html.sp-js .sp-reveal.sp-reveal--fade:not(.is-revealed) { transform: none; }
html.sp-js .sp-reveal.sp-reveal--scale:not(.is-revealed) { transform: scale(0.96); }
html.sp-js .sp-reveal {
	transition: opacity 0.7s var(--wp--custom--ease--out), transform 0.7s var(--wp--custom--ease--out);
	transition-delay: var(--sp-delay, 0s);
}
.sp-delay-1 { --sp-delay: 0.1s; }
.sp-delay-2 { --sp-delay: 0.2s; }
.sp-delay-3 { --sp-delay: 0.3s; }
.sp-delay-4 { --sp-delay: 0.4s; }
.sp-delay-5 { --sp-delay: 0.5s; }
.sp-delay-6 { --sp-delay: 0.6s; }

/* Marquee: theme.js clones the children until the row overfills, then scrolls. */
.sp-marquee { overflow: hidden; }
html.sp-js .sp-marquee > .sp-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: sp-marquee var(--sp-marquee-duration, 40s) linear infinite;
}
html.sp-js .sp-marquee--reverse > .sp-marquee__track { animation-direction: reverse; }
html.sp-js .sp-marquee:hover.sp-marquee--pause-hover > .sp-marquee__track { animation-play-state: paused; }
@keyframes sp-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-1 * var(--sp-marquee-shift, 50%)), 0, 0); }
}

/* Tabs: every panel stacks in the editor; on the front end only the active one shows. */
html.sp-js .sp-tabs .sp-tab-panel:not(.is-active) { display: none; }
html.sp-js .sp-tabs.sp-tabs--fade .sp-tab-panel:not(.is-active) { display: block; opacity: 0; visibility: hidden; position: absolute; inset: 0; }
.sp-tabs .sp-tab { cursor: pointer; }

/* Slider: a scroll-snap row; theme.js adds buttons, dots and the active class. */
.sp-slider__track {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.sp-slider__track::-webkit-scrollbar { display: none; }
.sp-slider__track > * {
	flex: 0 0 var(--sp-slide-width, 100%);
	scroll-snap-align: start;
	min-width: 0;
}
.editor-styles-wrapper .sp-slider__track { overflow-x: visible; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
	html.sp-js .sp-reveal:not(.is-revealed) { opacity: 1; transform: none; }
	html.sp-js .sp-marquee > .sp-marquee__track { animation: none; }
	.sp-slider__track { scroll-behavior: auto; }
	*, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}