/* Foundation and document layout. Component styles live in separate files. */

/*
 * A stand-in for Inter that takes up the same room.
 *
 * Inter loads with font-display: swap, so the page is painted in the fallback
 * first and re-painted in Inter a moment later. That is only free if the two
 * are the same size — and measured on this site, Inter sets the same string
 * 18.9% wider than "Open Sans", the fallback the kit currently names. Every
 * line rewraps and every block below it moves, which is where the layout shift
 * comes from.
 *
 * Arial is 5.9% narrower than Inter here, and size-adjust closes the rest, so
 * the swap becomes invisible. Local only: nothing is downloaded.
 */

@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 105.9%;
	ascent-override: 90%;
	descent-override: 22.4%;
	line-gap-override: 0%;
	font-display: swap;
}

:where(*, *::before, *::after) {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {

	/* The site's single horizontal measure. Platform components read
	 * --oreneta-shell, so setting it here is what keeps the shop, a product,
	 * a material and the blog on the same edge. The --oreneta-theme-* names
	 * remain as aliases for the theme's own rules. */
	--oreneta-shell: 90rem; /* 1440px, matching the Elementor container. */

	/* Steps rather than a clamp, and this is the reason: Elementor's container
	 * padding is a number per device, so a fluid value here can never be
	 * matched over there. The two systems only line up if both can be given
	 * the same figures — 20 / 32 / 64 — which is what these are for. Change
	 * one and change the other, or the header and the content drift apart
	 * again below the point where the 1440 cap governs both. */
	--oreneta-gutter: 64px;
	--oreneta-theme-shell: var(--oreneta-shell);
	--oreneta-theme-gutter: var(--oreneta-gutter);

	/* The one banner-title size, shared with the platform's own archive
	 * headings (.oreneta-materials-archive-heading__title and
	 * .oreneta-blog-archive__title carry these exact values). The theme used
	 * to run larger on the blog, which is why the shop and the blog did not
	 * look like the same site. */
	--oreneta-title-banner: 56px;
	--oreneta-title-banner-leading: 0.96;
	--oreneta-title-banner-tracking: -0.03em;
	--oreneta-title-banner-weight: 600;
	--oreneta-page-description-size: 19px;
	--oreneta-page-description-leading: 1.55;
	--oreneta-page-description-width: 75rem;
	--oreneta-page-title-gap: 24px;

	/* Air between the header and the first thing on the page. It matches the
	 * platform's own page padding, so the shop, a materials page and the blog
	 * all start their title at the same height instead of at 72, 86 and 149
	 * pixels down. */
	--oreneta-page-space: 72px;
	margin: 0;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

:where(img, video, iframe) {
	max-width: 100%;
}

img {
	height: auto;
}

:where(a) {
	text-underline-offset: 0.16em;
}

:where(a:hover) {
	text-decoration: underline;
}

:where(button, a) {
	touch-action: manipulation;
}

:where(h1, h2, h3) {
	letter-spacing: -0.025em;
	text-wrap: balance;
}

:where(p) {
	text-wrap: pretty;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

.oreneta-skip-link:focus {
	position: fixed;
	top: var(--wp--preset--spacing--md);
	left: var(--wp--preset--spacing--md);
	z-index: 100000;
	display: block;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--canvas);
	box-shadow: 0 8px 32px rgb(21 21 21 / 14%);
	color: var(--wp--preset--color--text);
}

.oreneta-site-main {
	min-height: 55vh;
}

.oreneta-theme .oreneta-page-shell {
	width: min(calc(100% - (2 * var(--oreneta-theme-gutter))), var(--oreneta-theme-shell));
	margin-inline: auto;
}

.oreneta-theme .oreneta-page-shell--spaced {
	padding-block: var(--oreneta-page-space);
}

.oreneta-site-main--builder:not(.oreneta-page-shell),
.elementor-page .oreneta-site-main {
	width: 100%;
	max-width: none;
	padding-block: 0;
}

.oreneta-entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.oreneta-entry-header,
.oreneta-entry-footer,
.oreneta-comments {
	margin-inline: auto;
}

.oreneta-entry-header {
	width: min(100%, var(--wp--style--global--content-size));
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.oreneta-entry-title {
	margin-block: 0;
	font-size: var(--oreneta-title-banner);
	font-weight: var(--oreneta-title-banner-weight);
	letter-spacing: var(--oreneta-title-banner-tracking);
	line-height: var(--oreneta-title-banner-leading);
}

/* One page-heading contract for native templates, platform archives and the
 * Oreneta Elementor widget. Automatic pages receive their top spacing from
 * `.oreneta-page-shell--spaced`; the Elementor widget restores it inside a
 * builder document, whose main element is deliberately unpadded. */

.oreneta-page-hero {
	width: 100%;
	margin: 0 0 var(--oreneta-page-space);
}

.oreneta-page-hero__title,
.oreneta-page-title {
	margin: 0;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--oreneta-title-banner);
	font-weight: var(--oreneta-title-banner-weight);
	letter-spacing: var(--oreneta-title-banner-tracking);
	line-height: var(--oreneta-title-banner-leading);
	text-transform: none;
}

.oreneta-page-hero__description,
.oreneta-page-description {
	max-width: var(--oreneta-page-description-width);
	margin: var(--oreneta-page-title-gap) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--oreneta-page-description-size);
	font-weight: 400;
	line-height: var(--oreneta-page-description-leading);
}

.oreneta-page-hero__description p,
.oreneta-page-description p {
	margin: 0;
}

.oreneta-page-hero--elementor {
	position: relative;
	left: 50%;
	width: min(calc(100vw - (2 * var(--oreneta-theme-gutter))), var(--oreneta-theme-shell));
	max-width: none;
	margin-bottom: 0;
	padding-block: var(--oreneta-page-space);
	transform: translateX(-50%);
}

.oreneta-entry-meta {
	margin-top: var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Tablet and phone steps. The values are plain numbers so they can be typed
   into Elementor's container padding, and the breakpoints are Elementor's own
   — 1024 and 767 — rather than the theme's old rem equivalents. They were
   1023.98 and 767.98, which sounds like nothing until a window sits at exactly
   1024: Elementor had already switched to tablet padding while the theme was
   still on desktop, and the content jumped 32px against a header that had not
   moved. An iPad in landscape is exactly 1024. */

@media (max-width: 1024px) {

	body {
		--oreneta-gutter: 32px;
		--oreneta-page-description-size: 18px;
		--oreneta-page-space: 48px;
		--oreneta-page-title-gap: 20px;
		--oreneta-title-banner: 50px;
	}
}

@media (max-width: 767px) {

	body {
		--oreneta-gutter: 20px;
		--oreneta-page-description-size: 16px;
		--oreneta-page-space: 32px;
		--oreneta-page-title-gap: 16px;
		--oreneta-title-banner: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}