/**
 * The shop's shared components: one definition of each part a customer screen
 * is built from. The rules they follow are in `docs/design-standards.md`; every
 * value comes from `tokens.css`.
 *
 * Loaded on every front-end page by `Storefront\DesignSystem`, after the tokens
 * and before any screen's own stylesheet.
 *
 * **Low specificity on purpose.** Every selector is wrapped in `:where()`, so a
 * component weighs nothing and a screen can adjust one with a single class. A
 * screen stylesheet styling someone else's markup (WooCommerce's `.button`,
 * CartFlows' fields) uses the same tokens rather than these classes; the values
 * are what is shared, and the tokens are where they live.
 *
 * Contents
 *  1. Buttons            .pod-button, --secondary, --compact, --block
 *  2. Text links         .pod-link
 *  3. Fields             .pod-input, .pod-field-label, .pod-help
 *  4. Cards              .pod-panel (static), .pod-card / .pod-tile (interactive), .pod-elevated
 *  5. Notices            .pod-notice, --success, --error
 *  6. Chips              .pod-chips, .pod-chip
 *  7. Status chips       .pod-status, --progress, --done, --problem
 *  8. Page head          .pod-page-head, .pod-eyebrow, .pod-page-title, .pod-lead
 *  9. Prose              .pod-prose
 * 10. Frame              .pod-frame
 * 11. Dialogs            .pod-dialog
 * 12. Utilities          .pod-visually-hidden
 * 13. Motion
 */

/* --- 1. Buttons ------------------------------------------------------------ */

/*
 * Primary: the one action a screen is for. Flat: no shadow and no lift, so
 * the colour carries it. A pill, 48px, so a thumb finds it.
 */
:where( .pod-button ) {
	align-items: center;
	background: var( --pod-accent );
	border: 1px solid var( --pod-accent );
	border-radius: var( --pod-radius-pill );
	box-sizing: border-box;
	color: var( --pod-on-ink );
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var( --pod-btn-size );
	font-weight: 700;
	gap: var( --pod-tight );
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.2;
	min-height: var( --pod-btn-h );
	padding: 0 var( --pod-btn-x );
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease ),
		color var( --pod-fast ) var( --pod-ease );
}

:where( .pod-button ):hover {
	background: var( --pod-accent-deep );
	border-color: var( --pod-accent-deep );
	color: var( --pod-on-ink );
}

/* Secondary: outlined, for everything that is not the screen's one action. */
:where( .pod-button--secondary ) {
	background: var( --pod-surface );
	border-color: var( --pod-field-border );
	color: var( --pod-ink );
}

:where( .pod-button--secondary ):hover {
	background: var( --pod-surface-2 );
	border-color: var( --pod-ink );
	color: var( --pod-ink );
}

/* Compact: dense rows and toolbars only (order rows, cart lines, the drawer). */
:where( .pod-button--compact ) {
	font-size: var( --pod-btn-compact-size );
	min-height: var( --pod-btn-compact-h );
	padding: 0 var( --pod-near );
}

:where( .pod-button--block ) {
	display: flex;
	width: 100%;
}

:where( .pod-button, .pod-button--secondary ):focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

:where( .pod-button, .pod-button--secondary ):is( :disabled, [aria-disabled='true'] ) {
	cursor: not-allowed;
	opacity: 0.5;
	pointer-events: none;
}

/* --- 2. Text links ---------------------------------------------------------- */

:where( .pod-link ) {
	color: var( --pod-accent );
	font-weight: 600;
	text-decoration: none;
}

:where( .pod-link ):hover {
	color: var( --pod-accent-deep );
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

:where( .pod-link ):focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

/* --- 3. Fields -------------------------------------------------------------- */

/*
 * A text field, select or textarea. The border is `--pod-field-border`, 3:1
 * against white, because a field has to be findable; focus thickens it in the
 * accent rather than adding a ring outside, and a transparent outline stays for
 * Windows' forced-colours mode, which drops box shadows.
 */
:where( .pod-input ) {
	appearance: none;
	background: var( --pod-surface );
	border: 1px solid var( --pod-field-border );
	border-radius: var( --pod-radius );
	box-shadow: none;
	box-sizing: border-box;
	color: var( --pod-ink );
	font-family: inherit;
	font-size: var( --pod-field-size );
	line-height: 1.4;
	min-height: var( --pod-btn-h );
	padding: 0 var( --pod-near );
	width: 100%;
}

:where( textarea.pod-input ) {
	min-height: 7rem;
	padding-block: 0.75rem;
	resize: vertical;
}

:where( select.pod-input ) {
	background-image: linear-gradient( 45deg, transparent 50%, var( --pod-ink-soft ) 50% ), linear-gradient( 135deg, var( --pod-ink-soft ) 50%, transparent 50% );
	background-position: calc( 100% - 20px ) 50%, calc( 100% - 15px ) 50%;
	background-repeat: no-repeat;
	background-size: 5px 5px;
	padding-right: 2.5rem;
}

:where( .pod-input )::placeholder {
	color: var( --pod-ink-soft );
	opacity: 1;
}

:where( .pod-input ):focus {
	border-color: var( --pod-accent );
	box-shadow: 0 0 0 1px var( --pod-accent );
	outline: 2px solid transparent;
}

:where( .pod-input ):is( [aria-invalid='true'], .is-invalid ) {
	border-color: var( --pod-danger );
}

:where( .pod-input ):is( [aria-invalid='true'], .is-invalid ):focus {
	box-shadow: 0 0 0 1px var( --pod-danger );
}

/* Toolbars only: beside the 40px chips. */
:where( .pod-input--compact ) {
	min-height: var( --pod-btn-compact-h );
}

:where( .pod-field-label ) {
	color: var( --pod-ink );
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 var( --pod-hair );
}

:where( .pod-help ) {
	color: var( --pod-ink-soft );
	display: block;
	font-size: 0.8125rem;
	line-height: 1.5;
	margin: var( --pod-hair ) 0 0;
}

/* --- 4. Cards --------------------------------------------------------------- */

/* Static: content that is read, not pressed. */
:where( .pod-panel ) {
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-lg );
	box-sizing: border-box;
	padding: var( --pod-apart );
}

/* Interactive: the whole card is a link. It lifts to say so. */
:where( .pod-tile, .pod-card ) {
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-lg );
	box-shadow: var( --pod-shadow-sm );
	color: inherit;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transition:
		border-color var( --pod-fast ) var( --pod-ease ),
		box-shadow var( --pod-fast ) var( --pod-ease ),
		transform var( --pod-fast ) var( --pod-ease );
}

:where( .pod-tile, .pod-card ):is( :hover, :focus-visible ) {
	border-color: transparent;
	box-shadow: var( --pod-shadow );
	transform: translateY( -3px );
}

:where( .pod-tile, .pod-card ):focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

/* Elevated: a card the screen is built around (sign in, the hero's price card). */
:where( .pod-elevated ) {
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-lg );
	box-shadow: var( --pod-shadow-sm );
	box-sizing: border-box;
	padding: var( --pod-break );
}

@media ( max-width: 599px ) {
	:where( .pod-elevated ) {
		padding: var( --pod-apart );
	}
}

/* --- 5. Notices ------------------------------------------------------------- */

:where( .pod-notice ) {
	background: var( --pod-surface-2 );
	border: 0;
	border-left: 3px solid var( --pod-accent );
	border-radius: 0 var( --pod-radius ) var( --pod-radius ) 0;
	color: var( --pod-ink );
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0 0 var( --pod-apart );
	padding: var( --pod-near ) var( --pod-apart );
}

:where( .pod-notice--success ) {
	background: var( --pod-success-wash );
	border-left-color: var( --pod-success );
}

:where( .pod-notice--error ) {
	background: var( --pod-danger-wash );
	border-left-color: var( --pod-danger );
}

/* --- 6. Chips --------------------------------------------------------------- */

:where( .pod-chips ) {
	display: flex;
	flex-wrap: wrap;
	gap: var( --pod-tight );
}

:where( .pod-chip ) {
	align-items: center;
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-pill );
	box-sizing: border-box;
	color: var( --pod-ink );
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	min-height: var( --pod-btn-compact-h );
	padding: 0 var( --pod-near );
	text-decoration: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease ),
		color var( --pod-fast ) var( --pod-ease );
}

:where( .pod-chip ):hover {
	background: var( --pod-surface-2 );
	color: var( --pod-ink );
}

:where( .pod-chip ):focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

:where( .pod-chip ):is( [aria-current='page'], [aria-pressed='true'] ) {
	background: var( --pod-ink );
	border-color: var( --pod-ink );
	color: var( --pod-on-ink );
}

/* --- 7. Status chips -------------------------------------------------------- */

/*
 * One label for a status wherever it appears (`Account\StatusChip`). Colour is
 * a second cue only: the status's own name is always the text.
 *
 * **Class weight, not `:where()`.** WooCommerce prints the order's status
 * inside a `<mark>`, which the theme's reset paints yellow and black
 * (`mark { background: #ff0; color: #000 }`). An element rule outranks a
 * `:where()`, so the chip lost its tint the moment the account's own copy of
 * these rules was removed. One class is enough, and a screen can still
 * adjust it.
 */
.pod-status {
	align-items: center;
	background: var( --pod-surface-2 );
	border-radius: var( --pod-radius-pill );
	color: var( --pod-ink-soft );
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	min-height: 24px;
	padding: 0 0.625rem;
	white-space: nowrap;
}

.pod-status--progress {
	background: var( --pod-accent-wash );
	color: var( --pod-accent-deep );
}

.pod-status--done {
	background: var( --pod-success-wash );
	color: var( --pod-success );
}

.pod-status--problem {
	background: var( --pod-danger-wash );
	color: var( --pod-danger );
}

/* --- 8. Page head ----------------------------------------------------------- */

/*
 * Eyebrow, title, lead: the top of every page that is not the home page or a
 * product. The title is the Title tier; `--display` is for the heroes only.
 * The eyebrow and lead keep their type anywhere they are used.
 */
:where( .pod-page-head ) {
	margin: 0 0 var( --pod-break );
}

:where( .pod-eyebrow ) {
	color: var( --pod-accent );
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: none;
}

:where( .pod-page-title ) {
	color: var( --pod-ink );
	font-size: var( --pod-title-size );
	font-weight: 800;
	letter-spacing: var( --pod-title-tracking );
	line-height: 1.08;
	margin: 0;
	text-wrap: balance;
}

:where( .pod-page-title--display ) {
	font-size: var( --pod-display-size );
	letter-spacing: -0.03em;
	line-height: 1.02;
}

:where( .pod-lead ) {
	color: var( --pod-ink-soft );
	font-size: clamp( 1.0625rem, 1.5vw, 1.25rem );
	line-height: 1.55;
}

/*
 * Spacing and measure only inside a page head. The eyebrow and lead also appear
 * as Elementor widgets on the landing page, which spaces them itself
 * (`landing.css`); a margin from here would add to that.
 */
:where( .pod-page-head ) :where( .pod-eyebrow ) {
	margin: 0 0 var( --pod-tight );
}

:where( .pod-page-head ) :where( .pod-lead ) {
	margin: var( --pod-near ) 0 0;
	max-width: var( --pod-measure-lead );
}

/* --- 9. Prose --------------------------------------------------------------- */

/* Long-form reading: help pages, policies, product descriptions. */
:where( .pod-prose ) {
	color: var( --pod-ink );
	font-size: 1rem;
	line-height: 1.6;
	max-width: var( --pod-measure );
}

:where( .pod-prose ) > * {
	margin-block: 0 var( --pod-near );
}

:where( .pod-prose ) :is( h2 ) {
	color: var( --pod-ink );
	font-size: var( --pod-h2-prose-size );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-block: var( --pod-break ) var( --pod-near );
	text-wrap: balance;
}

:where( .pod-prose ) :is( h3 ) {
	color: var( --pod-ink );
	font-size: var( --pod-h3-size );
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin-block: var( --pod-apart ) var( --pod-tight );
}

:where( .pod-prose ) > :first-child {
	margin-top: 0;
}

:where( .pod-prose ) :is( ul, ol ) {
	padding-left: 1.25em;
}

:where( .pod-prose ) li + li {
	margin-top: var( --pod-tight );
}

:where( .pod-prose ) a {
	color: var( --pod-accent );
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

:where( .pod-prose ) a:hover {
	color: var( --pod-accent-deep );
}

/* --- 10. Frame -------------------------------------------------------------- */

/* The content column every page sits in: one width, one gutter, one rhythm. */
:where( .pod-frame ) {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var( --pod-container );
	padding: var( --pod-frame-top ) var( --pod-gutter ) var( --pod-frame-bottom );
	width: 100%;
}

@media ( max-width: 767px ) {
	:where( .pod-frame ) {
		padding-bottom: var( --pod-frame-bottom-sm );
	}
}

/* --- 11. Dialogs ------------------------------------------------------------ */

:where( .pod-dialog ) {
	background: var( --pod-surface );
	border: 0;
	border-radius: var( --pod-radius-xl );
	box-shadow: var( --pod-shadow-lift );
	box-sizing: border-box;
	color: var( --pod-ink );
	max-height: 92vh;
	max-width: min( 44rem, calc( 100vw - 2 * var( --pod-gutter ) ) );
	padding: 0;
	width: 100%;
}

:where( .pod-dialog )::backdrop {
	background: var( --pod-scrim );
}

/* --- 12. Utilities ---------------------------------------------------------- */

:where( .pod-visually-hidden ) {
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* --- 13. Motion ------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	:where( .pod-button, .pod-chip, .pod-tile, .pod-card, .pod-link ) {
		transition: none;
	}

	:where( .pod-tile, .pod-card ):is( :hover, :focus-visible ) {
		transform: none;
	}
}