/*
 * Component classes shared by the plugin's blocks.
 *
 * Tokens (colour, type, radius, easing) come from the theme's theme.json - this
 * file only turns them into the DS components that more than one block needs.
 * Anything used by exactly one block belongs in that block's style.scss.
 */

/* Set while the mobile menu is open, so the page behind it stays put. */
.stw-no-scroll,
.stw-no-scroll body {
	overflow: hidden;
}

/* DS `.eyebrow` - the mono kicker above almost every heading on the site. It
   lives here rather than in a block because seven blocks print one; the theme
   also has an `is-style-stw-eyebrow` variation, which is the same shape for a
   plain core/paragraph an editor adds by hand. */
.stw-eyebrow {
	align-items: center;
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 500;
	gap: 12px;
	letter-spacing: 0.2em;
	margin: 0;
	text-transform: uppercase;
}

.stw-eyebrow::before {
	background: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 1px;
	opacity: 0.7;
	width: 28px;
}

/* DS `.lede`. */
.stw-lede {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.6;
	margin: 0;
	max-width: 56ch;
}

/* The fragment of a headline the design picks out in gold. It is a RichText
   format (toolbar → "Akcents"), so which words are accented is the editor's
   call and not baked into a block. */
.stw-accent {
	color: var(--wp--preset--color--accent);
}

/* DS `.crumb`. */
.stw-crumbs {
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	gap: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.stw-crumbs a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.stw-crumbs a:hover,
.stw-crumbs a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.stw-crumbs span[aria-hidden] {
	color: var(--wp--preset--color--muted-2);
}

/* Striped stand-in for a photo that has not arrived yet, labelled with the
   picture it is waiting for. Cars use it for empty galleries, the content
   blocks for sections whose photography is still owed. */
.stw-ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	background-color: #0e0e10;
	background-image:
		radial-gradient(120% 90% at 50% 18%, rgba(201, 169, 106, 0.06), transparent 60%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 12px);
}

.stw-ph::after {
	color: var(--wp--preset--color--muted-2);
	content: attr(data-label);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	line-height: 1.7;
	max-width: 90%;
	padding: 0 24px;
	text-align: center;
	text-transform: uppercase;
}

/* DS `.btn` - the button shape our blocks render themselves, rather than
   relying on whatever core/button looks like in the current theme.
   The class lands on both `<a>` and `<button>`, so the base has to undo the
   UA button chrome: without `background: transparent` a variant that only
   sets a colour - `--outline`, `--text` - keeps the browser's light
   `buttonface` and puts pale text on it. */
.stw-btn {
	align-items: center;
	appearance: none;
	background: transparent;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 700;
	gap: 10px;
	justify-content: center;
	letter-spacing: 0.14em;
	padding: 16px 30px;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color 0.25s var(--wp--custom--ease),
		border-color 0.25s var(--wp--custom--ease),
		color 0.25s var(--wp--custom--ease);
	white-space: nowrap;
}

.stw-btn:active {
	transform: translateY(1px);
}

.stw-btn--primary {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.stw-btn--primary:hover,
.stw-btn--primary:focus-visible {
	background: var(--wp--preset--color--accent-hi);
	color: var(--wp--preset--color--base);
}

.stw-btn--outline {
	border-color: var(--wp--custom--line-2);
	color: var(--wp--preset--color--contrast);
}

.stw-btn--outline:hover,
.stw-btn--outline:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* WhatsApp keeps its own green wherever it appears - it is a recognised
   button, not one of ours. */
.stw-btn--whatsapp {
	background: #25d366;
	color: #0a0a0b;
}

.stw-btn--whatsapp:hover,
.stw-btn--whatsapp:focus-visible {
	background: #2ee676;
	color: #0a0a0b;
}

/* Waze, like WhatsApp, is recognised by its own colour rather than by ours. */
.stw-btn--waze {
	background: #33ccff;
	color: #0a0a0b;
}

.stw-btn--waze:hover,
.stw-btn--waze:focus-visible {
	background: #5bd6ff;
	color: #0a0a0b;
}

/* A button that is only a label - used where the row already has two coloured
   buttons and a third would shout. */
.stw-btn--text {
	color: var(--wp--preset--color--muted);
	padding-left: 0;
	padding-right: 0;
}

.stw-btn--text:hover,
.stw-btn--text:focus-visible {
	color: var(--wp--preset--color--accent);
}

.stw-btn--block {
	width: 100%;
}

.stw-btn--lg {
	font-size: 14px;
	padding: 19px 38px;
}

@media (prefers-reduced-motion: reduce) {
	.stw-btn {
		transition: none;
	}
}