/**
 * Global rules theme.json cannot express. Loaded on the front end and in
 * the editor. Block specific rules live in assets/css/blocks/.
 */

/* ------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
}

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

/* Headings never break inside a word on large screens (columns would force it). */
:where(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: normal;
	word-break: normal;
	text-wrap: balance;
}

@media (max-width: 600px) {
	:where(h1, h2, h3, h4, h5, h6) {
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

:where(p, li, figcaption, summary) {
	text-wrap: pretty;
}

/* Accent words in headings stay together and wrap as one phrase. */
:where(h1, h2, h3) mark.has-inline-color {
	display: inline-block;
}

mark.has-inline-color {
	background: none;
}

/*
 * #247BA5 reaches 4.5:1 on white only. On the tinted sections and the
 * footer, blue text uses the checkout's darker step (#1A6A91, 5.3:1).
 */
:where(.has-surface-gradient-background, .has-hero-gradient-background, .site-footer) {
	--wp--preset--color--primary-text: var(--wp--preset--color--primary-text-hover);
}

::selection {
	background: var(--wp--preset--color--primary-wash);
	color: var(--wp--preset--color--text-main);
}

/* Checkout rule: a visible focus ring that is never removed. */
:where(a, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

:where(button, .wp-element-button, input[type="submit"], input[type="button"]):focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--wp--custom--focus--ring);
}

/* Two-column layouts stack below 900px, as on affilicon.de. */
@media (max-width: 900px) {
	.wp-block-columns.alignwide:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.alignwide:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ------------------------------------------------------------------
 * Form fields (checkout style guide)
 * ------------------------------------------------------------------ */

:where(
	input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"], [type="file"], [type="image"], [type="hidden"]),
	select,
	textarea
) {
	box-sizing: border-box;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--grey-border);
	border-radius: var(--wp--custom--radius--field);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text-main);
	font: inherit;
	font-size: 16px; /* 16px keeps iOS from zooming into the field */
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

:where(textarea) {
	min-height: 120px;
	padding: 10px 12px;
}

:where(input, select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--focus--ring-field);
}

:where(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--wp--preset--color--error);
	box-shadow: 0 0 0 3px var(--wp--custom--status--error-bg);
}

::placeholder {
	color: var(--wp--custom--field--label);
	opacity: 1;
}

/* Floating label: <div class="affilicon-field"><input placeholder=" "><label></label></div> */
.affilicon-field {
	position: relative;
}

.affilicon-field > :is(input, select, textarea) {
	width: 100%;
}

.affilicon-field > label {
	position: absolute;
	top: 21px;
	left: 6px;
	padding: 0 6px;
	transform: translateY(-50%);
	background: var(--wp--preset--color--white);
	color: var(--wp--custom--field--label);
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	transition: top var(--wp--custom--transition), font-size var(--wp--custom--transition), color var(--wp--custom--transition);
}

.affilicon-field > input::placeholder,
.affilicon-field > textarea::placeholder {
	color: transparent;
}

.affilicon-field:has(:focus) > label,
.affilicon-field:has(input:not(:placeholder-shown)) > label,
.affilicon-field:has(textarea:not(:placeholder-shown)) > label,
.affilicon-field:has(select) > label {
	top: 0;
	font-size: 12px;
}

.affilicon-field:has(:focus) > label {
	color: var(--wp--preset--color--primary-text);
}

.affilicon-field:has([aria-invalid="true"]) > label,
.affilicon-field__error {
	color: var(--wp--preset--color--error);
}

.affilicon-field__error {
	display: block;
	margin-top: 6px;
	font-size: 12px;
}

.affilicon-required {
	color: var(--wp--preset--color--error);
}

:where(input[type="checkbox"], input[type="radio"]) {
	appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	border: 2px solid var(--wp--preset--color--grey-border);
	border-radius: 4px;
	background: var(--wp--preset--color--white) center / 11px 11px no-repeat;
	vertical-align: top;
	cursor: pointer;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

:where(input[type="radio"]) {
	border-radius: 50%;
}

:where(input[type="checkbox"], input[type="radio"]):checked {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

:where(input[type="checkbox"], input[type="radio"]):focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--focus--ring);
}

@media (max-width: 767px) {
	:where(input[type="checkbox"], input[type="radio"]) {
		width: 20px;
		height: 20px;
	}
}

/* ------------------------------------------------------------------
 * Site header
 * ------------------------------------------------------------------ */

.site-header {
	border-bottom: 1px solid var(--wp--preset--color--text-main);
	background: var(--wp--preset--color--white);
}

.site-header .site-header__logo {
	margin: 0;
}

.site-header .site-header__logo img {
	display: block;
	width: 277px;
	height: auto;
	aspect-ratio: 1600 / 288;
}

@media (max-width: 1100px) {
	.site-header .site-header__logo img {
		width: 200px;
	}
}

@media (max-width: 400px) {
	.site-header .site-header__logo img {
		width: 160px;
	}
}

/* ------------------------------------------------------------------
 * Site footer
 * ------------------------------------------------------------------ */

.site-footer {
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 44px;
}

.site-footer__brand img {
	display: block;
	width: auto;
	height: 36px;
	aspect-ratio: 1600 / 288;
}

.site-footer__address p {
	margin: 0;
}

.site-footer__address .wp-block-affilicon-icon {
	--icon-size: 18px;
	margin-top: 3px;
}

.site-footer__address a {
	color: inherit;
	text-decoration: none;
}

.site-footer__address a:hover {
	color: var(--wp--preset--color--primary-text);
}

.site-footer__top .wp-block-navigation {
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
}

.site-footer__top .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-main);
	transition: color var(--wp--custom--transition);
}

.site-footer__top .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary-text);
}

.site-footer__bar,
.site-footer__bar .wp-block-navigation {
	font-size: 14px;
	font-weight: 500;
}

.site-footer__bar .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-on-dark);
	transition: color var(--wp--custom--transition);
}

.site-footer__bar .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--white);
}

.site-footer__bar :focus-visible {
	outline-color: var(--wp--preset--color--white);
}

@media (max-width: 980px) {
	.site-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 40px 32px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.site-footer__top {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.site-footer__bar > .wp-block-group {
		flex-direction: column;
		align-items: flex-start !important;
	}
}

/* ------------------------------------------------------------------
 * Motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}