/**
 * Base layer: what theme.json cannot express.
 *
 * Loaded on the front end and in the editor. Every value reads a design token.
 *
 * Contents
 * 1. Document
 * 2. Type tiers
 * 3. Links and focus
 * 4. Layout
 * 5. Site header
 * 6. Colour correction inside sections
 * 7. Forms
 * 8. Reveal on scroll
 * 9. User preferences
 * 10. Editorial details
 */

/* 1. Document
   ======================================================================== */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 5rem;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
}

::selection {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
}

/* 2. Type tiers
   Tracking and leading tighten as size grows, whichever block uses the size.
   ======================================================================== */

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

p, li, figcaption, blockquote {
	text-wrap: pretty;
}

.has-hero-font-size {
	letter-spacing: -0.025em;
	line-height: 0.98;
}

.has-display-font-size {
	letter-spacing: -0.02em;
	line-height: 1.02;
}

.has-xxx-large-font-size {
	letter-spacing: -0.018em;
	line-height: 1.06;
}

.has-xx-large-font-size {
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.has-x-large-font-size {
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.has-large-font-size {
	letter-spacing: -0.016em;
	line-height: 1.4;
}

.has-small-font-size {
	letter-spacing: -0.006em;
	line-height: 1.45;
}

.has-x-small-font-size {
	letter-spacing: 0;
	line-height: 1.4;
}

/* 3. Links and focus
   ======================================================================== */

/* Links inside running text stay underlined so colour is not the only signal. */
.wp-block-post-content :where(p, li, td, figcaption) a:where(:not(.wp-element-button)),
.wp-block-post-excerpt__excerpt a,
.wp-block-comment-content a {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: text-decoration-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}

.wp-block-post-content :where(p, li, td, figcaption) a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--small);
}

.is-style-section-contrast :focus-visible,
.is-style-card-contrast :focus-visible {
	outline-color: var(--wp--preset--color--accent-inverse);
}

.is-style-section-accent :focus-visible {
	outline-color: var(--wp--preset--color--on-accent);
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--control);
	box-shadow: var(--wp--preset--shadow--lifted);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: 0.625rem 1.25rem;
	text-decoration: none;
	z-index: 100001;
}

/* Contact links are usually tapped, and often sit alone on a line. */
:where(a[href^="mailto:"], a[href^="tel:"]) {
	display: inline-block;
	min-block-size: 1.5rem;
}

/* 4. Layout
   ======================================================================== */

/* Template regions butt up against each other; sections set their own rhythm. */
.wp-site-blocks > :where(header, main, footer, .wp-block-group) {
	margin-block: 0;
}

/* Consecutive full-bleed sections sit flush, with no stripe between them. */
.alignfull + .alignfull {
	margin-block-start: 0;
}

/* Rounded corners would leave notches on edge-to-edge media. */
:is(.wp-block-cover, .wp-block-image).alignfull,
.wp-block-image.alignfull img {
	border-radius: 0;
}

/* Image blocks with a fixed aspect ratio fill their column and reserve their
   height, which prevents layout shift while the file loads. */
.wp-block-image img[style*="aspect-ratio"] {
	width: 100%;
}

/* Cards in a grid share a row height, so a trailing image sits on the bottom
   edge and any spare room falls between it and the text. */
:is(.is-style-card, .is-style-card-raised, .is-style-card-contrast) {
	display: flex;
	flex-direction: column;
}

:is(.is-style-card, .is-style-card-raised, .is-style-card-contrast) > .wp-block-image:last-child {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--40);
}

/* 5. Site header
   The material sits on a pseudo-element. On the header itself, backdrop-filter
   would become the containing block for the fixed mobile menu and trap it.
   ======================================================================== */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

header.wp-block-template-part::before {
	-webkit-backdrop-filter: saturate(var(--wp--custom--material--saturate)) blur(var(--wp--custom--material--blur));
	backdrop-filter: saturate(var(--wp--custom--material--saturate)) blur(var(--wp--custom--material--blur));
	background: var(--wp--preset--color--base);
	background: color-mix(in srgb, var(--wp--preset--color--base) var(--wp--custom--material--opacity), transparent);
	border-bottom: 1px solid var(--wp--preset--color--border);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transition: border-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
	z-index: -1;
}

header.wp-block-template-part.is-at-top::before {
	border-bottom-color: transparent;
}

/* A long menu wraps rather than pushing the page wider than the screen. */
header.wp-block-template-part .is-nowrap,
header.wp-block-template-part .wp-block-navigation {
	min-width: 0;
}

header.wp-block-template-part .wp-block-site-title {
	white-space: nowrap;
}

/* The core admin bar stops being fixed on small screens. */
@media (max-width: 600px) {
	.admin-bar header.wp-block-template-part {
		top: 0;
	}
}

/* 6. Colour correction inside sections
   Preset colour classes are !important in core, so this has to match. It keeps
   muted text and accents readable when a section inverts the background.
   ======================================================================== */

.is-style-section-contrast .has-muted-color,
.is-style-card-contrast .has-muted-color {
	color: var(--wp--preset--color--muted-inverse) !important;
}

.is-style-section-contrast .has-accent-color,
.is-style-card-contrast .has-accent-color {
	color: var(--wp--preset--color--accent-inverse) !important;
}

.is-style-section-accent .has-muted-color,
.is-style-section-accent .has-accent-color {
	color: var(--wp--preset--color--on-accent) !important;
}

.is-style-section-contrast :is(.wp-block-post-date, .wp-block-post-excerpt, .wp-block-post-terms),
.is-style-section-contrast :is(.wp-block-post-date, .wp-block-post-terms) a {
	color: var(--wp--preset--color--muted-inverse);
}

/* 7. Forms
   ======================================================================== */

input:where(:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="file"], [type="hidden"])),
select,
textarea {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.875rem;
	transition: border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}

input:where(:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="file"], [type="hidden"])):hover,
select:hover,
textarea:hover {
	border-color: var(--wp--preset--color--muted);
}

label {
	font-size: var(--wp--preset--font-size--small);
}

/* 8. Reveal on scroll
   theme.js adds .is-reveal-pending at runtime; it never appears in saved markup,
   so content is visible in the editor, without JS, in print and to crawlers.
   ======================================================================== */

@media (prefers-reduced-motion: no-preference) {

	.is-style-reveal {
		transition:
			opacity var(--wp--custom--motion--slow) var(--wp--custom--motion--ease-out),
			transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease-out);
	}

	.is-style-reveal.is-reveal-pending {
		opacity: 0;
		transform: translateY(var(--wp--custom--motion--rise));
	}

	.is-style-reveal:nth-child(2) {
		transition-delay: 70ms;
	}

	.is-style-reveal:nth-child(3) {
		transition-delay: 140ms;
	}

	.is-style-reveal:nth-child(4) {
		transition-delay: 210ms;
	}

	html {
		scroll-behavior: smooth;
	}

	@view-transition {
		navigation: auto;
	}
}

/* 9. User preferences
   ======================================================================== */

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

	header.wp-block-template-part::before {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--wp--preset--color--base);
	}
}

@media (prefers-contrast: more) {

	header.wp-block-template-part::before {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--wp--preset--color--base);
		border-bottom-color: currentColor;
	}

	header.wp-block-template-part.is-at-top::before {
		border-bottom-color: currentColor;
	}

	.wp-element-button {
		outline: 1px solid currentColor;
	}
}

@media (forced-colors: active) {

	header.wp-block-template-part::before {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: Canvas;
	}
}

@media print {

	header.wp-block-template-part {
		position: static;
	}

	.is-style-reveal.is-reveal-pending {
		opacity: 1;
		transform: none;
	}
}

/* 10. Editorial details
   ======================================================================== */

.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* The header sits over a hero and turns solid once the page scrolls. Without
   JavaScript .is-at-top is never added, so it simply stays solid and readable. */
header.wp-block-template-part.is-overlay {
	left: 0;
	position: fixed;
	right: 0;
}

header.wp-block-template-part.is-overlay.is-at-top::before {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
	border-bottom-color: transparent;
	inset: 0 0 -2rem;
}

header.is-overlay.is-at-top :is(.wp-block-site-title a, .wp-block-navigation-item__content, .wp-block-navigation__responsive-container-open, .wc-block-mini-cart__button, .wp-block-woocommerce-customer-account a, .wp-element-button) {
	color: #fff;
}

header.is-overlay.is-at-top .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}