/*
 * Global rules that theme.json cannot express: browser surfaces, type refinements, link and
 * control states, form controls and reduced motion (premium redesign PLAN §5). Values come from
 * theme.json tokens. Movement (transform) is only ever declared under
 * `prefers-reduced-motion: no-preference`; under `reduce` every transition and animation is cut to
 * an instant state change (the change itself stays visible — tests/e2e/a11y-flows.spec.mjs).
 */

/* ------------------------------------------------------ Browser surfaces */

/* `--line-icon-arrow`: the site's one arrow (a mask, so it takes the text's colour) — text links
   and the collections button. `--line-icon-quote`: the editorial quotation mark (premium polish
   without motion, #43). `--line-icon-vessel`, `--line-icon-time`, `--line-icon-parcel`: the
   promises under "Add to cart" (#47), hairline drawings of the site's own. */
:root {
	--line-icon-vessel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3c0 2.5-4 4-4 9a6 6 0 0 0 12 0c0-5-4-6.5-4-9M8.5 21h7'/%3E%3C/svg%3E");
	--line-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--line-icon-parcel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5-9 4.5-9-4.5zM3 7.5v9L12 21l9-4.5v-9M12 12v9'/%3E%3C/svg%3E");
	--line-icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M2 24V14C2 6 6.5 1.5 13 0l1.2 3C10 4.5 8 7.5 8 11h5v13H2zm16 0V14c0-8 4.5-12.5 11-14l1.2 3C26 4.5 24 7.5 24 11h5v13H18z'/%3E%3C/svg%3E");
	--line-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
	accent-color: var(--wp--preset--color--ink);
	caret-color: var(--wp--preset--color--accent-strong);
	scrollbar-color: var(--wp--preset--color--line-control) var(--wp--preset--color--surface);
}

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

/* ------------------------------------------------------------------ Type */
:where(h1, h2, h3, .has-display-font-size, .has-title-1-font-size) {
	text-wrap: balance;
}

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

/* Long Latin words (emails, URLs) never push a phone layout sideways. */
:where(p, li, dd, td, figcaption, h1, h2, h3, h4) {
	overflow-wrap: break-word;
}

:where(.has-display-font-size) {
	line-height: var(--wp--custom--line-height--display);
}

:where(.has-display-font-size):lang(he) {
	line-height: var(--wp--custom--line-height--display-hebrew);
}

/* Negative tracking only on Latin display type, never on Hebrew. */
:where(h1, .has-display-font-size, .has-title-1-font-size):lang(en) {
	letter-spacing: var(--wp--custom--letter-spacing--display);
}

/* Quiet typographic polish (premium polish without motion, #45): no single word left alone on
   the last line of running text; tables set their figures in columns; quotation marks hang
   outside the text edge where the browser can. */
:where(p, li, dd, figcaption, blockquote) {
	text-wrap: pretty;
}

:where(table, .wp-block-table) {
	font-variant-numeric: tabular-nums lining-nums;
}

:where(blockquote, .wp-block-pullquote) {
	hanging-punctuation: first last;
}

/* Prices and quantities line up in columns (WooCommerce's `woocommerce-Price-amount` via an
   attribute selector: its capital letter is outside the BEM class pattern). */
:where([class~="woocommerce-Price-amount"], .wc-block-formatted-money-amount, .wc-block-components-product-price, .line-product-price, .line-config__cta) {
	font-variant-numeric: tabular-nums lining-nums;
}

/* The page never grows wider than the window, whatever a plugin makes of <body>: a payment
   plugin's stylesheet turns `.woocommerce` (a body class in the shop) into a grid on phones, and
   the page then took the collection chips' full width (961 px at 375). The chips scroll in their row. */
.wp-site-blocks {
	min-inline-size: 0;
}

/* ------------------------------------------------------------------ Links */
:where(a) {
	text-decoration-thickness: var(--wp--custom--link--underline-thickness);
	text-underline-offset: var(--wp--custom--link--underline-offset);
}

/*
 * Quiet links: an underline drawn by a pseudo-element under the text line, growing from the
 * reading start (transform only). Each is at least a 44 px target, the text centred in it.
 * - Text links in content (text-link buttons, "view all"): the underline shows at rest on touch
 *   screens and slides in on hover where there is a mouse.
 * - Navigation lists (menus, footer contacts): no underline at rest anywhere — the list says
 *   "links"; it slides in on hover and shows on keyboard focus (the current page is set in chrome.css).
 */
:where(.is-style-text-link .wp-block-button__link, .line-view-all a, .line-nav__link, .line-business--contacts a) {
	align-items: center;
	display: inline-flex;
	min-block-size: var(--wp--custom--target--min);
	position: relative;
	text-decoration: none;
}

:where(.is-style-text-link .wp-block-button__link, .line-view-all a, .line-nav__link, .line-business--contacts a)::after {
	background-color: currentcolor;
	block-size: var(--wp--custom--link--underline-thickness);
	content: "";
	inset-block-end: calc(50% - 0.5lh - var(--wp--preset--spacing--10));
	inset-inline: 0;
	position: absolute;
	transform-origin: left center;
}

:where(.is-style-text-link .wp-block-button__link, .line-view-all a, .line-nav__link, .line-business--contacts a):dir(rtl)::after {
	transform-origin: right center;
}

:where(.line-nav__link, .line-business--contacts a)::after {
	transform: scaleX(0);
}

:where(.is-style-text-link .wp-block-button__link, .line-view-all a, .line-nav__link, .line-business--contacts a):focus-visible::after {
	transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {

	:where(.is-style-text-link .wp-block-button__link, .line-view-all a)::after {
		transform: scaleX(0);
	}

	:where(.is-style-text-link .wp-block-button__link, .line-view-all a, .line-nav__link, .line-business--contacts a):is(:hover, :focus-visible)::after {
		transform: scaleX(1);
	}
}

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

	:where(.is-style-text-link .wp-block-button__link, .line-view-all a, .line-nav__link, .line-business--contacts a)::after {
		transition: transform var(--wp--custom--motion--duration--relaxed) var(--wp--custom--motion--easing--standard);
	}
}

/*
 * The arrow of text links (premium polish round 2, 21st.dev #17): "view all" links and text-link
 * buttons end in a small arrow drawn with a mask (the colour is the text's; no glyph, no icon
 * font), mirrored in RTL. It turns outward with the underline — on hover where there is a mouse,
 * and on keyboard focus everywhere. The underline stays under the words.
 */
:where(.is-style-text-link .wp-block-button__link, .line-view-all a) {
	gap: var(--wp--preset--spacing--20);
}

:where(.is-style-text-link .wp-block-button__link, .line-view-all a)::before {
	background-color: currentcolor;
	block-size: var(--wp--custom--icon--arrow);
	content: "";
	flex: none;
	inline-size: var(--wp--custom--icon--arrow);
	mask: var(--line-icon-arrow) center / contain no-repeat;
	order: 1;
}

:where(.is-style-text-link .wp-block-button__link, .line-view-all a)::after {
	inset-inline-end: calc(var(--wp--custom--icon--arrow) + var(--wp--preset--spacing--20));
}

:where(.is-style-text-link .wp-block-button__link, .line-view-all a):dir(rtl)::before {
	transform: scaleX(-1);
}

:where(.is-style-text-link .wp-block-button__link, .line-view-all a):focus-visible::before {
	transform: rotate(-45deg);
}

:where(.is-style-text-link .wp-block-button__link, .line-view-all a):dir(rtl):focus-visible::before {
	transform: scaleX(-1) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {

	:where(.is-style-text-link .wp-block-button__link, .line-view-all a):hover::before {
		transform: rotate(-45deg);
	}

	:where(.is-style-text-link .wp-block-button__link, .line-view-all a):dir(rtl):hover::before {
		transform: scaleX(-1) rotate(-45deg);
	}
}

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

	:where(.is-style-text-link .wp-block-button__link, .line-view-all a)::before {
		transition: transform var(--wp--custom--motion--duration--relaxed) var(--wp--custom--motion--easing--standard);
	}

	/*
	 * Page transitions (21st.dev #14): same-site navigations cross-fade, and a piece's photograph
	 * travels from its card into its product page (the shared name comes from line-core
	 * Card_Media); the header keeps its place (chrome.css). Browsers without cross-document
	 * view transitions navigate as before; none of it under reduced motion. The opt-in itself
	 * (`@view-transition`) is printed inline at the top of the head (inc/assets.php).
	 */
	::view-transition-group(*) {
		animation-duration: var(--wp--custom--motion--duration--relaxed);
		animation-timing-function: var(--wp--custom--motion--easing--enter);
	}
}

/* In-page jumps land below the sticky header (premium polish round 4, #26). */
html {
	scroll-padding-block-start: calc(var(--wp--custom--sticky--header) + var(--wp--preset--spacing--50));
}

/* --------------------------------------------------------------- Controls */

/* Every button is at least a touch target, with its label centred in that height. */
:where(.wp-element-button, .wp-block-button__link) {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-block-size: var(--wp--custom--target--min);
	transition:
		background-color var(--wp--custom--motion--duration--quick) var(--wp--custom--motion--easing--standard),
		border-color var(--wp--custom--motion--duration--quick) var(--wp--custom--motion--easing--standard),
		color var(--wp--custom--motion--duration--quick) var(--wp--custom--motion--easing--standard),
		transform var(--wp--custom--motion--duration--instant) var(--wp--custom--motion--easing--standard);
}

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

	:where(.wp-element-button, .wp-block-button__link):active:not(:disabled, [aria-disabled="true"]) {
		transform: scale(var(--wp--custom--motion--press));
	}
}

:where(button, .wp-element-button, .wp-block-button__link):is(:disabled, [aria-disabled="true"]) {
	cursor: not-allowed;
}

:where(.wp-element-button, .wp-block-button__link):is(:disabled, [aria-disabled="true"]):not(.is-style-text-link *) {
	background-color: var(--wp--preset--color--surface-alt);
	border-color: var(--wp--preset--color--line-strong);
	color: var(--wp--preset--color--ink-subtle);
}

:where(button, .wp-element-button, .wp-block-button__link)[aria-busy="true"] {
	cursor: progress;
}

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

/* ------------------------------------------------------------ Form fields */
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="image"], [type="reset"]), select) {
	min-block-size: var(--wp--custom--target--control);
}

:where(textarea) {
	min-block-size: calc(var(--wp--custom--target--control) * 2);
}

:where(input, select, textarea):is([aria-invalid="true"], :user-invalid) {
	border-color: var(--wp--preset--color--error);
}

:where(input[type="checkbox"], input[type="radio"]) {
	block-size: var(--wp--custom--target--check);
	flex-shrink: 0;
	inline-size: var(--wp--custom--target--check);
}

/* A checkbox or radio inside its label: the whole label is the target, at least 44 px high. */
:where(label:has(> input[type="checkbox"], > input[type="radio"])) {
	align-items: center;
	display: inline-flex;
	gap: var(--wp--preset--spacing--40);
	min-block-size: var(--wp--custom--target--min);
}

/* …or its label beside it (`<input> <label for>`, e.g. WordPress's comment-cookies consent): the
   label is the target, padded to more than 44 px high; it stays inline so its text flows. */
:where(input[type="checkbox"], input[type="radio"]):has(+ label) {
	vertical-align: middle;
}

:where(input[type="checkbox"], input[type="radio"]) + :where(label) {
	display: inline-block;
	padding-block: var(--wp--preset--spacing--40);
}

/* WooCommerce's show-password toggle (22×22) becomes a 44×44 target around the same icon. */
.woocommerce form .password-input .show-password-input {
	align-items: center;
	block-size: var(--wp--custom--target--min);
	display: inline-flex;
	inline-size: var(--wp--custom--target--min);
	justify-content: center;
}

/* ---------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {

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