/**
 * Suresafe plugin — functional CSS only (brief 1.3)
 *
 * This file makes components WORK. It does not make them LOOK like
 * anything: no colours, fonts, spacing, borders or shadows. All of that is
 * the theme's, set from the --ssp-* design tokens.
 *
 * Allowed here: display, position (and its offsets), overflow, z-index,
 * show/hide state, aspect-ratio against layout shift, focus-visible
 * outlines. Where a functional rule needs a value it reads a custom
 * property with a neutral fallback, so the theme can change it.
 *
 * Almost every selector is wrapped in :where() — zero specificity — so a
 * theme rule always wins without !important. The exceptions are the
 * show/hide rules, which must hold.
 *
 * Tunable properties (set them in the theme):
 *   --ssp-z-dropdown            live search results        (default 100)
 *   --ssp-z-bar                 mobile bar                 (default 900)
 *   --ssp-live-search-max-height                           (default 70vh)
 *   --ssp-dialog-max-height     size guide / search drawer (default 90vh)
 *   --ssp-focus-outline         focus ring                 (default 2px solid var(--ssp-focus, currentColor))
 *   --ssp-focus-offset                                     (default 2px)
 */

/* ── Screen-reader-only text ─────────────────────────────── */

.ssp-sr-only {
	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;
}

/* ── Hidden state must hold, whatever display the theme sets ── */

/*
 * These three are toggled by JavaScript, and each one sits under a theme
 * rule that sets a display value (flex, block) which would otherwise beat
 * the UA stylesheet's [hidden] and leave the element visible.
 *
 * .ssp-chip__summary is NOT in this list, though it used to be.
 * [hidden] is that element's resting state — it exists for
 * aria-describedby, and CSS reveals it on hover and focus. An important
 * declaration here meant no theme could ever show it without answering
 * !important with !important, which the theme duly did in three places.
 * The contract says the plugin ships behaviour the theme must not be able
 * to break; it does not say the plugin gets to forbid a design. The UA
 * stylesheet already hides [hidden] elements, so nothing is lost.
 */
.ssp-live-search__results[hidden],
.ssp-swatch-set__clear[hidden],
.ssp-mobile-bar__count[hidden] {
	display: none !important;
}

/* ── VAT toggle: every price is printed twice ────────────── */

html:not( [data-ssp-vat="inc"] ) .ssp-price__inc,
html[data-ssp-vat="inc"] .ssp-price__ex {
	display: none !important;
}

/* ── Swatches: the WooCommerce select they replace ───────── */

.ssp-swatch-source {
	display: none !important;
}

:where( .ssp-swatch__image ) {
	display: block;
	aspect-ratio: 1;
}

/* ── Live search ─────────────────────────────────────────── */

:where( .ssp-live-search ) {
	position: relative;
}

:where( .ssp-live-search__results ) {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var( --ssp-z-dropdown, 100 );
	max-height: var( --ssp-live-search-max-height, 70vh );
	overflow-y: auto;
}

:where( .ssp-live-search__item ) {
	display: flex;
}

:where( .ssp-live-search__text ) {
	display: flex;
	flex-direction: column;
}

:where( .ssp-live-search__thumb ) {
	aspect-ratio: 1;
}

/* Inside the mobile drawer the results flow in the page, not over it. */
:where( .ssp-mobile-bar__drawer .ssp-live-search__results ) {
	position: static;
	max-height: none;
}

/* ── Dialogs (size guide, mobile search drawer) ──────────── */

:where( .ssp-size-chart__dialog, .ssp-mobile-bar__drawer ) {
	max-height: var( --ssp-dialog-max-height, 90vh );
	overflow: auto;
}

/* Lock page scroll behind an open dialog. */
html.has-ssp-dialog-open {
	overflow: hidden;
}

:where( .ssp-size-chart__scroll ) {
	overflow-x: auto;
}

/* ── Mobile bar ──────────────────────────────────────────── */

:where( .ssp-mobile-bar__nav ) {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var( --ssp-z-bar, 900 );
	display: flex;
}

:where( .ssp-mobile-bar__item ) {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 0;
}

:where( .ssp-mobile-bar__icon ) {
	position: relative;
	display: block;
}

:where( .ssp-mobile-bar__count ) {
	position: absolute;
}

/* Small screens only. Override in the theme to change the breakpoint. */
@media ( min-width: 1025px ) {
	:where( .ssp-mobile-bar ) {
		display: none;
	}
}

/* ── Focus ───────────────────────────────────────────────── */

:where(
	.ssp-swatch,
	.ssp-swatch-set__clear,
	.ssp-vat-toggle__btn,
	.ssp-pill,
	.ssp-chip,
	.ssp-live-search__input,
	.ssp-live-search__submit,
	.ssp-live-search__item,
	.ssp-size-chart__open,
	.ssp-size-chart__close,
	.ssp-mobile-bar__item,
	.ssp-mobile-bar__close,
	.ssp-documents__link,
	.ssp-term-list__link
):focus-visible {
	outline: var( --ssp-focus-outline, 2px solid var( --ssp-focus, currentColor ) );
	outline-offset: var( --ssp-focus-offset, 2px );
}

/* The keyboard-highlighted live search result (focus stays in the input). */
:where( .ssp-live-search__item.is-active ) {
	outline: var( --ssp-focus-outline, 2px solid var( --ssp-focus, currentColor ) );
	outline-offset: calc( -1 * var( --ssp-focus-offset, 2px ) );
}