/*
 * Base layer shared by the front end and the editor canvas.
 * Tokens live in theme.json; this file only wires behaviour that
 * theme.json cannot express.
 */

/*
 * Stepped responsive scale. The mock-up switches sizes at 900px and 600px
 * instead of scaling fluidly, so the presets are re-pointed to the
 * per-breakpoint tokens from settings.custom.
 * "html:root" outranks the ":root" rule WordPress prints for global styles.
 */
@media (max-width: 899px) {

	html:root {
		--wp--custom--gutter: var(--wp--custom--breakpoint--tablet--gutter);
		--wp--custom--header: var(--wp--custom--breakpoint--tablet--header);
		--wp--preset--font-size--title: var(--wp--custom--breakpoint--tablet--type--title);
		--wp--preset--font-size--section: var(--wp--custom--breakpoint--tablet--type--section);
		--wp--preset--font-size--subsection: var(--wp--custom--breakpoint--tablet--type--subsection);
		--wp--preset--font-size--lead: var(--wp--custom--breakpoint--tablet--type--lead);
	}
}

@media (max-width: 599px) {

	html:root {
		--wp--custom--gutter: var(--wp--custom--breakpoint--mobile--gutter);
		--wp--custom--header: var(--wp--custom--breakpoint--mobile--header);
		--wp--preset--font-size--title: var(--wp--custom--breakpoint--mobile--type--title);
		--wp--preset--font-size--section: var(--wp--custom--breakpoint--mobile--type--section);
		--wp--preset--font-size--subsection: var(--wp--custom--breakpoint--mobile--type--subsection);
		--wp--preset--font-size--lead: var(--wp--custom--breakpoint--mobile--type--lead);
	}
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wp--custom--header) + var(--wp--preset--spacing--40));
	color-scheme: light;
}

body {
	-webkit-font-smoothing: antialiased;
}

body.is-modal-open {
	overflow: hidden;
}

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

img,
svg {
	max-width: 100%;
}

a,
button,
summary {
	touch-action: manipulation;
}

:where(a, button, summary, input, textarea, select, [tabindex="0"]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--blue-deep);
	outline-offset: var(--wp--custom--focus--offset);
}

::selection {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--ink);
}

/*
 * Small uppercase label above headings. In the mock-up it is an inline
 * element inside body-sized text: every line is as tall as a body line and
 * the text sits on the baseline of the body font. The line height and the
 * small downward shift (0.38 of the size difference, from the font metrics)
 * reproduce exactly that.
 */
.is-style-eyebrow {
	position: relative;
	top: calc((var(--wp--preset--font-size--body) - 1em) * 0.38);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--font-weight--eyebrow);
	line-height: calc(var(--wp--preset--font-size--body) * var(--wp--custom--line-height--body));
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

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

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Inline line icons. */
.biomasha-icon {
	display: block;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}

/* Pill button used by theme blocks; mirrors the core button element style. */
.biomasha-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 48px;
	transition: background var(--wp--custom--transition--fast), transform var(--wp--custom--transition--fast);
}

.biomasha-button {
	padding: 12px 23px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--blue-deep);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--ui);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.biomasha-button:hover,
.wp-block-button__link:hover {
	text-decoration: none;
	transform: translateY(-2px);
}

.biomasha-button:hover {
	background: var(--wp--custom--color--button-hover);
}

/* Green variant for dark backgrounds: header, footer, dark call-to-action. */
.biomasha-button--green,
.wp-block-button.is-style-green .wp-block-button__link {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--ink);
}

.biomasha-button--green:hover,
.wp-block-button.is-style-green .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

/* Round icon-only button. */
.biomasha-icon-button {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid currentcolor;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* ---------- Dialogs: motion as on the landing page ---------- */

/* The dimmed, blurred page behind a dialog fades in and out. */
dialog::backdrop {
	backdrop-filter: blur(var(--wp--custom--blur--backdrop));
}

dialog[open]::backdrop {
	animation:
		biomasha-backdrop-in var(--wp--custom--transition--backdrop)
		var(--wp--custom--transition--ease-out);
}

dialog.is-closing::backdrop {
	opacity: 0;
	transition: opacity var(--wp--custom--transition--ui) ease-in;
}

@keyframes biomasha-backdrop-in {

	from {
		opacity: 0;
	}
}

/* The close button turns a quarter under the pointer. */
dialog :is(.biomasha-booking__close, .biomasha-icon-button) {
	transition:
		transform var(--wp--custom--transition--ui)
		var(--wp--custom--transition--ease-out);
}

dialog :is(.biomasha-booking__close, .biomasha-icon-button):hover {
	transform: rotate(90deg);
}

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

	dialog[open]::backdrop {
		animation: none;
	}

	dialog.is-closing::backdrop {
		transition: none;
	}

	dialog :is(.biomasha-booking__close, .biomasha-icon-button) {
		transition: none;
	}

	dialog :is(.biomasha-booking__close, .biomasha-icon-button):hover {
		transform: none;
	}
}