/* ===================================================================
 * buttons.css — Pass 2 (design-system aligned)
 * Four core/button block-style variations:
 *   .is-style-tec-primary           yellow filled, white text
 *   .is-style-tec-outline           transparent, near-black stroke + text
 *   .is-style-tec-outline-inverse   transparent, white stroke + text (on dark)
 *   .is-style-tec-tertiary          transparent, yellow stroke, near-black text
 * + button-row wrap behaviour for cards.
 * =================================================================== */

/* === Shared shape (applies to every variant) ===
 * Values extracted from prod (englishconcert.co.uk) 2026-05-02 via the audit
 * pipeline. Prod is canonical. The 40px button height emerges naturally from
 * line-height 1.7 (23.8px) + padding 3.5px top/bottom + 1px border.
 *
 * The `.wp-block-button__link` selector covers the canonical anchor markup.
 * We also accept the element rendered as a <span> for current-page indicators
 * (e.g. installment-nav on single-video) — same chrome, no link semantics.
 * Holt 2026-05-07. */
.wp-block-button > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 3.5px 28px;
	border: 1px solid transparent;
	border-radius: 4.9px;
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--medium);
	/* Prod's visible label sits in <span class="x-anchor-text-primary"> with
	 * font-weight: 700 — measuring the outer <a> reports 400 (the wrapper
	 * default) and is misleading. 700 is the canonical visible weight. */
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* === Primary === */
.wp-block-button.is-style-tec-primary > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--accent-yellow);
}
.wp-block-button.is-style-tec-primary > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent-yellow);
	border-color: var(--wp--preset--color--accent-yellow);
}

/* === Outline (near-black on light surfaces) ===
 * Prod's inner <span class="x-anchor-text-primary"> reports color: rgb(0,0,0)
 * — the visible label is black, not yellow. The outer <a> reports yellow (the
 * border colour) which previously misled an alignment pass into setting text
 * to yellow. Linnea's reference also specifies near-black text on outlines. */
.wp-block-button.is-style-tec-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--near-black);
	border-color: var(--wp--preset--color--near-black);
}
.wp-block-button.is-style-tec-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--white);
}

/* === Outline Inverse (white on dark surfaces) === */
.wp-block-button.is-style-tec-outline-inverse > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-tec-outline-inverse > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--near-black);
}

/* === Tertiary (yellow stroke, near-black text — branded ghost) === */
.wp-block-button.is-style-tec-tertiary > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--near-black);
	border-color: var(--wp--preset--color--accent-yellow);
}
.wp-block-button.is-style-tec-tertiary > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--white);
}

/* === Focus (all variants) === */
.wp-block-button > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-yellow);
	outline-offset: 2px;
}

/* === Disabled (any variant) === */
.wp-block-button[aria-disabled="true"] > .wp-block-button__link,
.wp-block-button.is-disabled > .wp-block-button__link {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* === Buttons row — wrap when container narrow === */
.wp-block-buttons {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}
.wp-block-buttons .wp-block-button { flex: 0 1 auto; }
/* Inside event cards, buttons have a deliberate min footprint without expanding
 * to fill available space (per Alfonso 2026-05-02 — slightly wider than text-fit). */
.tec-event-card .wp-block-buttons .wp-block-button,
.tec-event-card .wp-block-button > .wp-block-button__link { min-width: 128px; }

/* === Mobile: buttons stretch to container width (≤766px sm breakpoint) === */
@media (max-width: 766px) {
	.wp-block-buttons {
		width: 100%;
	}
	.wp-block-buttons .wp-block-button {
		flex: 1 1 100%;
		width: 100%;
	}
	.wp-block-button > .wp-block-button__link {
		width: 100%;
	}
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button > .wp-block-button__link { transition: none; }
}