/*
 * Atoms (inc/components.php) on top of the vendored DS component CSS (assets/css/ds/components/).
 * Only --occ-* tokens. Icon sizes are in em so they follow the surrounding text.
 * Also theme-owned: SectionHeading + ServiceCard CSS and the component states V2 no longer ships.
 */

/* Theme tokens on top of the DS (no raw values; both themes). */
@layer occ.tokens {
	:root,
	[data-brand="occ"] {
		/* Hairline widths, used by every component sheet. */
		--occ-border-width: 1px;
		--occ-border-width-strong: 1.5px;
		/* Theme-fixed plates: game logos are drawn for dark packaging; QR codes need a light quiet zone. */
		--occ-plate-dark: var(--occ-palette-charcoal);
		--occ-plate-light: var(--occ-palette-ivory-raised);
		/* Accent as text/line on the page: deep bronze on ivory, antique gold on obsidian
		   (deep bronze on obsidian is ~2:1). */
		--occ-accent-ink: var(--occ-accent-deep);
	}

	[data-brand="occ"][data-theme="dark"] {
		--occ-accent-ink: var(--occ-accent);
	}
}

@layer occ.components {
	/* Button / badge / product-card states V2 dropped from its sheets ---- */
	.occ-button {
		line-height: 1;
		letter-spacing: 0.04em;
	}

	.occ-button:active {
		transform: translateY(1px);
	}

	.occ-button--primary:hover {
		filter: brightness(1.035);
	}

	.occ-button--secondary:hover {
		background: var(--occ-bg-elevated);
		border-color: var(--occ-accent-strong);
	}

	.occ-button--ghost:hover {
		color: var(--occ-accent-ink);
	}

	.occ-button--icon:hover {
		border-color: var(--occ-border-strong);
	}

	.occ-badge {
		white-space: nowrap;
	}

	.occ-product-card__media > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.occ-product-card__badge {
		position: absolute;
		top: var(--occ-space-3);
		left: var(--occ-space-3);
	}

	/* SectionHeading (COMPONENT_CONTRACTS; V2 ships only the .tsx) ------- */
	.occ-section-heading {
		display: grid;
		gap: var(--occ-space-4);
		max-width: 50rem;
	}

	.occ-section-heading--center {
		margin-inline: auto;
		text-align: center;
	}

	.occ-section-heading .occ-heading,
	.occ-section-heading .occ-body {
		margin: 0;
	}

	/* ServiceCard (COMPONENT_CONTRACTS; V2 ships only the .tsx) ---------- */
	.occ-service-card {
		overflow: clip;
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-lg);
		background: var(--occ-surface);
	}

	.occ-service-card__media {
		aspect-ratio: 16 / 10;
		overflow: clip;
		background: var(--occ-bg-subtle);
	}

	.occ-service-card__media > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.occ-service-card__body {
		display: grid;
		gap: var(--occ-space-3);
		padding: var(--occ-space-6);
	}

	.occ-service-card__icon {
		color: var(--occ-accent-ink);
	}

	.occ-service-card h3 {
		margin: 0;
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		font-weight: var(--occ-fw-regular);
	}

	.occ-service-card p {
		margin: 0;
		color: var(--occ-fg-muted);
		line-height: var(--occ-leading-body);
	}

	/* Empty thumbnail (card without an image): a quiet surface, no glyph (V2: no card/star motifs). */
	.occ-thumb-empty {
		display: block;
		width: 100%;
		aspect-ratio: 63 / 88;
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-xs);
		background: var(--occ-bg-subtle);
	}

	/* Editorial media frame (page/hero photography) ---------------------- */
	.occ-editorial-media {
		overflow: clip;
		border-radius: var(--occ-radius-xl);
	}

	.occ-editorial-media > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform var(--occ-duration-slow) var(--occ-ease-emphasis);
	}

	.occ-editorial-media:hover > img {
		transform: scale(1.025);
	}

	/* Icon ------------------------------------------------------------ */
	.occ-icon {
		display: inline-block;
		flex: none;
		width: 1.5em;
		height: 1.5em;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.5;
		stroke-linecap: round;
		stroke-linejoin: round;
		vertical-align: middle;
	}

	/* Button: states the DS sheet leaves out ---------------------------- */
	a.occ-button {
		text-decoration: none;
	}

	.occ-button .occ-icon {
		width: 1.25em;
		height: 1.25em;
	}

	.occ-button--icon .occ-icon {
		width: 1.5em;
		height: 1.5em;
	}

	.occ-button:disabled,
	.occ-button[aria-disabled="true"] {
		cursor: not-allowed;
		opacity: 0.55;
		filter: none;
		transform: none;
	}

	.occ-button[aria-busy="true"] {
		pointer-events: none;
	}

	.occ-button[aria-busy="true"]::after,
	.occ-spinner {
		content: "";
		display: inline-block;
		flex: none;
		width: 1em;
		height: 1em;
		border: var(--occ-border-width-strong) solid currentColor;
		border-right-color: transparent;
		border-radius: var(--occ-radius-round);
		animation: occ-spin var(--occ-duration-slow) linear infinite;
	}

	@keyframes occ-spin {
		to {
			transform: rotate(1turn);
		}
	}

	/* Badge: status tones (order / repair / request states) ------------- */
	.occ-badge--success,
	.occ-badge--warning,
	.occ-badge--danger,
	.occ-badge--info {
		color: var(--occ-badge-tone);
		background: color-mix(in srgb, var(--occ-badge-tone) 10%, var(--occ-surface));
		border: var(--occ-border-width) solid color-mix(in srgb, var(--occ-badge-tone) 35%, transparent);
	}

	.occ-badge--success { --occ-badge-tone: var(--occ-success); }
	.occ-badge--warning { --occ-badge-tone: var(--occ-warning); }
	.occ-badge--danger { --occ-badge-tone: var(--occ-danger); }
	.occ-badge--info { --occ-badge-tone: var(--occ-info); }

	/* Section heading: eyebrow is a <p> here ---------------------------- */
	.occ-section-heading .occ-eyebrow {
		margin: 0;
	}

	.occ-section-heading .occ-body > :first-child {
		margin-top: 0;
	}

	.occ-section-heading .occ-body > :last-child {
		margin-bottom: 0;
	}

	/* Field -------------------------------------------------------------- */
	.occ-field {
		display: grid;
		gap: var(--occ-space-2);
		align-content: start;
	}

	.occ-field__label {
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-bold);
		line-height: var(--occ-leading-ui);
		color: var(--occ-fg);
	}

	.occ-field__required {
		color: var(--occ-accent-ink);
	}

	/* Border uses --occ-fg-muted: --occ-border is ≈1.58:1, too faint for an input boundary (SPEC §C). */
	.occ-field__control {
		width: 100%;
		min-height: var(--occ-touch-min);
		padding: var(--occ-space-2) var(--occ-space-3);
		border: var(--occ-border-width) solid var(--occ-fg-muted);
		border-radius: var(--occ-radius-md);
		color: var(--occ-fg);
		background: var(--occ-surface);
		font-size: var(--occ-text-md);
		line-height: var(--occ-leading-ui);
		transition:
			border-color var(--occ-duration-base) var(--occ-ease-standard),
			box-shadow var(--occ-duration-base) var(--occ-ease-standard);
	}

	textarea.occ-field__control {
		min-height: var(--occ-space-32);
		resize: vertical;
		line-height: var(--occ-leading-body);
	}

	.occ-field__control:hover {
		border-color: var(--occ-fg);
	}

	.occ-field__control:focus-visible {
		border-color: var(--occ-accent-ink);
		box-shadow: var(--occ-shadow-focus);
	}

	.occ-field__control[aria-invalid="true"] {
		border-color: var(--occ-danger);
	}

	.occ-field__control:disabled {
		cursor: not-allowed;
		color: var(--occ-fg-muted);
		background: var(--occ-bg-subtle);
	}

	.occ-field__help,
	.occ-field__error {
		margin: 0;
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-ui);
	}

	.occ-field__help {
		color: var(--occ-fg-muted);
	}

	.occ-field__error {
		display: flex;
		gap: var(--occ-space-2);
		align-items: flex-start;
		color: var(--occ-danger);
	}

	.occ-field__error .occ-icon {
		width: 1.25em;
		height: 1.25em;
	}

	.occ-field--checkbox {
		grid-template-columns: auto 1fr;
		column-gap: var(--occ-space-3);
		align-items: center;
		min-height: var(--occ-touch-min);
	}

	.occ-field--checkbox .occ-field__label {
		font-weight: var(--occ-fw-regular);
		font-size: var(--occ-text-md);
		cursor: pointer;
	}

	.occ-field--checkbox .occ-field__help,
	.occ-field--checkbox .occ-field__error {
		grid-column: 2;
	}

	.occ-field__check {
		width: var(--occ-space-6);
		height: var(--occ-space-6);
		margin: 0;
		accent-color: var(--occ-accent-ink);
		cursor: pointer;
	}

	/* Logo (approved raster assets; LOGO_USAGE clear space ≥ 20% of the logo height) ------ */
	.occ-logo {
		display: inline-flex;
		align-items: center;
		flex: none;
		text-decoration: none;
	}

	.occ-logo img {
		display: block;
		max-width: none;
		height: auto;
	}

	/* Theme-aware primary: one approved variant per theme, swapped by CSS only. */
	.occ-logo__on-dark,
	[data-theme="dark"] .occ-logo__on-light {
		display: none;
	}

	[data-theme="dark"] .occ-logo__on-dark {
		display: block;
	}

	/* Compact (header): the symbol replaces the wordmark below 48rem (LOGO_USAGE: symbol at small sizes). */
	.occ-logo--compact .occ-logo__symbol {
		display: none;
	}

	@media (max-width: 47.99rem) {
		.occ-logo--compact .occ-logo__wordmark {
			display: none;
		}

		.occ-logo--compact .occ-logo__symbol {
			display: block;
		}
	}
}

@layer occ.utilities {
	.occ-visually-hidden,
	.screen-reader-text,
	.occ-visually-hidden-focusable:not(:focus):not(:focus-within) {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	.occ-cluster {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--occ-space-3);
	}

	.occ-stack {
		display: grid;
		align-content: start;
		gap: var(--occ-space-4);
	}

	.occ-stack--lg {
		gap: var(--occ-space-8);
	}

	/* Asymmetric spans for .occ-grid-12 (4/8, 5/7, 7/5); the DS collapses the grid to 1 column ≤ 52rem. */
	@media (min-width: 52.0625rem) {
		.occ-col-4 { grid-column: span 4; }
		.occ-col-5 { grid-column: span 5; }
		.occ-col-6 { grid-column: span 6; }
		.occ-col-7 { grid-column: span 7; }
		.occ-col-8 { grid-column: span 8; }
		.occ-col-12 { grid-column: 1 / -1; }
	}
}