/**
 * Ethics 404 accessibility and reflow hardening.
 *
 * This stylesheet is loaded after the global theme stylesheet and, when active,
 * after the WooCommerce stylesheet. It does not replace WordPress or
 * WooCommerce semantics, ARIA, validation, focus management or business logic.
 */

:root {
	--e404-muted-accessible: #595550;
	--e404-line-strong: #595550;
	--e404-focus-width: 3px;
	--e404-focus-offset: 3px;
	--e404-focus-halo: 3px;
	--e404-sticky-offset: calc(
		var(--wp--custom--ethics-404--component--header-desktop)
		+ var(--wp--preset--spacing--40)
	);
}

html {
	scroll-padding-top: var(--e404-sticky-offset);
}

:where(
	.e404-main,
	[id],
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	section,
	article,
	[role="region"],
	[role="alert"],
	[role="status"]
) {
	scroll-margin-top: var(--e404-sticky-offset);
}

:where(
	a,
	button,
	input,
	select,
	textarea,
	summary,
	[tabindex]:not([tabindex="-1"])
) {
	scroll-margin-block: var(--e404-sticky-offset) 6rem;
}

:where(
	.has-paper-deep-background-color,
	.has-dust-background-color,
	.e404-empty-state,
	.e404-product-purchase-notes,
	.e404-cart-empty,
	.e404-order-confirmation__status,
	.e404-order-confirmation__next,
	.e404-account-help
) {
	--e404-muted: var(--e404-muted-accessible);
}

:where(
	.has-paper-deep-background-color,
	.has-dust-background-color,
	.e404-empty-state,
	.e404-product-purchase-notes,
	.e404-cart-empty,
	.e404-order-confirmation__status,
	.e404-order-confirmation__next,
	.e404-account-help
) .has-muted-color {
	color: var(--e404-muted-accessible) !important;
}

.screen-reader-text,
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

.screen-reader-text:focus,
.screen-reader-text:active,
.skip-link:focus {
	position: fixed !important;
	top: max(0.75rem, env(safe-area-inset-top)) !important;
	left: max(0.75rem, env(safe-area-inset-left)) !important;
	z-index: 100000 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0.85rem 1rem !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	border: 2px solid var(--e404-carbon) !important;
	background: var(--e404-signal) !important;
	color: var(--e404-carbon) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	white-space: normal !important;
	box-shadow: 0 0 0 var(--e404-focus-halo) var(--e404-paper) !important;
}

:where(
	a,
	button,
	input,
	select,
	textarea,
	summary,
	[tabindex]:not([tabindex="-1"])
):focus-visible {
	outline-width: var(--e404-focus-width);
	outline-offset: var(--e404-focus-offset);
}

:where(
	.wp-element-button,
	.wp-block-button__link,
	.wp-block-navigation-item__content,
	.wp-block-search__button,
	.wc-block-components-button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button
):focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

:where(
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__submenu-icon,
	.wp-block-search__button,
	.wc-block-mini-cart__button,
	.wc-block-mini-cart__drawer .wc-block-components-drawer__close,
	.woocommerce-product-gallery__trigger,
	.wc-block-components-quantity-selector__button,
	.show-password-input
) {
	min-width: var(--e404-touch-target-min);
	min-height: var(--e404-touch-target-min);
}

:where(
	.wp-block-navigation-item__content,
	.e404-announcement-bar__link a,
	.e404-footer-navigation a,
	.e404-footer-legal a,
	.e404-checkout-header__return a,
	.woocommerce-MyAccount-navigation a
) {
	display: inline-flex;
	min-height: var(--e404-touch-target-min);
	align-items: center;
}

:where(
	.wp-block-navigation .current-menu-item,
	.wp-block-navigation .current-menu-ancestor,
	.wp-block-navigation [aria-current="page"],
	.wp-block-navigation [aria-current="true"]
) > .wp-block-navigation-item__content {
	font-weight: 800;
	text-decoration: underline;
	text-decoration-color: var(--e404-signal);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.28em;
}

:where(
	.e404-entry-content,
	.wp-block-post-content,
	.e404-product-details,
	.e404-account-page__content,
	.e404-order-confirmation__details
) a:not(
	.wp-element-button,
	.wp-block-button__link,
	.button,
	.wp-block-navigation-item__content
) {
	text-decoration: underline;
}

:where(
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	li,
	dt,
	dd,
	figcaption,
	caption,
	th,
	td,
	label,
	legend,
	a,
	button
) {
	overflow-wrap: anywhere;
}

:where(
	.wp-block-group,
	.wp-block-columns,
	.wp-block-column,
	.wp-block-query,
	.wp-block-post-template,
	.wp-block-navigation,
	.wp-block-navigation__responsive-container-content,
	.wc-block-components-sidebar-layout,
	.wc-block-components-main,
	.wc-block-components-sidebar
) > * {
	min-width: 0;
}

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

:where(video, iframe) {
	height: auto;
}

:where(pre, .wp-block-preformatted) {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	white-space: pre-wrap;
}

:where(code, kbd, samp) {
	overflow-wrap: anywhere;
}

.wp-block-table,
.woocommerce .shop_table_responsive {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

:where(input, select, textarea, button) {
	font: inherit;
}

:where(
	input[type="checkbox"],
	input[type="radio"]
) {
	min-width: 1.25rem;
	min-height: 1.25rem;
}

:where(
	input,
	select,
	textarea,
	button,
	.wp-block-search__inside-wrapper,
	.wc-block-components-text-input input,
	.wc-block-components-combobox-control input
) {
	border-color: var(--e404-line-strong);
}

:where(input, select, textarea)[aria-invalid="true"],
:where(.woocommerce-invalid) :where(input, select, textarea),
:where(.has-error) :where(input, select, textarea) {
	border-width: 2px;
	border-color: var(--e404-error);
	box-shadow: inset 4px 0 0 var(--e404-error);
}

:where(
	.wc-block-components-validation-error,
	.woocommerce-error,
	.wc-block-components-notice-banner.is-error
) {
	border-left: 6px solid var(--e404-error);
}

:where(
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error,
	.wc-block-components-notice-banner
) a {
	color: inherit;
	font-weight: 800;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

:where(button, input, select, textarea):disabled,
:where(button, input, select, textarea)[aria-disabled="true"],
:where(.wc-block-components-button)[aria-disabled="true"] {
	filter: grayscale(0.25);
}

:where(summary) {
	display: flex;
	min-height: var(--e404-touch-target-min);
	align-items: center;
	cursor: pointer;
}

:where(abbr[title]) {
	text-decoration-style: dotted;
	text-decoration-thickness: 2px;
	cursor: help;
}

.wp-block-navigation__responsive-container.is-menu-open {
	max-height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	padding-bottom: max(
		var(--wp--preset--spacing--60),
		env(safe-area-inset-bottom)
	);
}

:where(
	.wc-block-components-drawer,
	.wc-block-mini-cart__drawer,
	.wp-block-navigation__responsive-container
) {
	overscroll-behavior: contain;
}

.wc-block-cart__submit-container {
	padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
	background: var(--e404-paper);
	color: var(--e404-carbon);
}

.wc-block-cart__submit-container::before {
	color: rgba(17, 17, 15, 0.22);
}

:where(
	.wc-block-components-order-summary-item__quantity,
	.wc-block-cart-item__quantity
) {
	border-color: var(--e404-carbon);
	background: var(--e404-paper);
	color: var(--e404-carbon);
}

:where(
	.wc-block-components-radio-control__option,
	.wc-block-components-radio-control-accordion-option,
	.wc-block-components-checkbox__label,
	.wc-block-components-radio-control__label
) {
	min-height: var(--e404-touch-target-min);
}

:where(
	.woocommerce-password-strength,
	.woocommerce-password-hint
) {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--e404-line-strong);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-password-strength.bad,
.woocommerce-password-strength.short {
	border-left: 6px solid var(--e404-error);
	background: var(--e404-paper-deep);
	color: var(--e404-carbon);
}

.woocommerce-password-strength.good,
.woocommerce-password-strength.strong {
	border-left: 6px solid var(--e404-carbon);
	background: var(--e404-signal);
	color: var(--e404-carbon);
}

@supports not selector(:focus-visible) {
	:where(
		a,
		button,
		input,
		select,
		textarea,
		summary,
		[tabindex]:not([tabindex="-1"])
	):focus {
		outline: var(--e404-focus-width) solid var(--e404-carbon);
		outline-offset: var(--e404-focus-offset);
		box-shadow: 0 0 0 6px var(--e404-signal);
	}
}

@media (max-width: 781px) {
	:root {
		--e404-sticky-offset: calc(
			var(--wp--custom--ethics-404--component--header-mobile)
			+ var(--wp--preset--spacing--30)
		);
	}

	.e404-cart-page {
		padding-bottom: calc(var(--wp--preset--spacing--90) + 6rem);
	}

	:where(
		.wp-block-buttons,
		.e404-header-actions,
		.e404-product-purchase form.cart,
		.wc-block-checkout__actions
	) {
		max-width: 100%;
	}

	.wp-block-buttons > .wp-block-button {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	:root {
		--wp--custom--ethics-404--layout--gutter: 1rem;
	}

	:where(
		.e404-home-hero__title,
		.e404-pattern-hero__title,
		.e404-product-title,
		.e404-shop-archive__title,
		.e404-account-page__title
	) {
		max-width: 100%;
		font-size: clamp(2.5rem, 15vw, 4.25rem);
	}

	:where(
		.wp-block-button,
		.wp-block-button__link,
		.wp-element-button
	) {
		max-width: 100%;
	}

	.wp-block-buttons:not(.is-content-justification-center)
	.wp-block-button {
		width: 100%;
	}

	.wp-block-buttons:not(.is-content-justification-center)
	.wp-block-button__link {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	:where(
		.e404-product-summary-card,
		.e404-cart-block .wc-block-cart__sidebar,
		.e404-checkout-block .wc-block-checkout__sidebar,
		.e404-cart-empty,
		.e404-order-confirmation__status,
		.e404-order-confirmation__next,
		.e404-account-help
	) {
		padding: var(--wp--preset--spacing--30);
	}

	:where(
		.e404-home-category-card,
		.e404-pattern-category-card,
		.e404-home-principle,
		.e404-pattern-trust__item,
		.e404-home-journal-card,
		.e404-pattern-journal-card
	) {
		padding: var(--wp--preset--spacing--40);
	}
}

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

	*,
	*::before,
	*::after {
		animation-delay: 0s !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}
}

@media (prefers-contrast: more) {
	:root {
		--e404-line: var(--e404-line-strong);
	}

	:where(
		a,
		button,
		input,
		select,
		textarea,
		summary,
		[tabindex]:not([tabindex="-1"])
	):focus-visible {
		outline-width: 4px;
		box-shadow: none;
	}

	:where(
		.e404-catalog-card,
		.e404-product-summary-card,
		.e404-cart-block .wc-block-cart__sidebar,
		.e404-checkout-block .wc-block-checkout__sidebar,
		.e404-account-page__content .woocommerce-form-login,
		.e404-account-page__content .woocommerce-form-register
	) {
		border-color: var(--e404-carbon);
		box-shadow: none;
	}

	:where(.has-muted-color) {
		color: var(--e404-carbon) !important;
	}
}

@media (forced-colors: active) {
	* {
		forced-color-adjust: auto;
	}

	:where(
		.wp-element-button,
		.wp-block-button__link,
		button,
		input,
		select,
		textarea,
		.wc-block-components-button,
		.e404-catalog-card,
		.e404-product-summary-card
	) {
		border: 2px solid ButtonText;
	}

	:where(
		a,
		button,
		input,
		select,
		textarea,
		summary,
		[tabindex]:not([tabindex="-1"])
	):focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 3px;
		box-shadow: none;
	}

	:where(
		.wp-block-navigation .current-menu-item,
		.wp-block-navigation [aria-current="page"],
		.woocommerce-MyAccount-navigation .is-active
	) > a {
		border: 2px solid Highlight;
	}

	.is-style-signal-label,
	.wc-block-components-product-sale-badge {
		border: 1px solid CanvasText;
	}
}

@media print {
	.e404-announcement-bar,
	.e404-site-header,
	.e404-checkout-header,
	.e404-site-footer,
	.wp-block-navigation,
	.e404-header-actions,
	.wc-block-mini-cart,
	.e404-related-products,
	.e404-account-help {
		display: none !important;
	}

	* {
		background: transparent !important;
		box-shadow: none !important;
		color: #000 !important;
		text-shadow: none !important;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		font-weight: 400;
	}

	.e404-main {
		min-height: 0;
		padding: 0 !important;
	}

	@page {
		margin: 1.5cm;
	}
}
