/**
 * PPB Core — button object.
 * Block: ppb-button
 *
 * Structure
 * ---------
 * ppb-button                      Base styles — structure only, no colour.
 *
 * Fill variants (colour-role):
 * ppb-button--secondary           Filled, uses --color-secondary. Default CTA.
 * ppb-button--primary             Filled, uses --color-primary.
 *
 * Dark chrome (e.g. footer on --ppb-color-footer-bg):
 * ppb-button--primary-on-dark     Filled primary + light border ring (About us).
 * ppb-button--inverse             Solid light fill; border matches fill (no visible rim, same 1px box as other buttons).
 *
 * Width:
 * ppb-button--wide                Fills the width of its container.
 *
 * Icon:
 * ppb-button--icon-left           Icon slot before label text.
 * ppb-button--icon-right          Icon slot after label text.
 *
 * Outline:
 * ppb-button--ghost               Transparent fill; border/text use --color-primary (pair with filled primary).
 *
 * Theming
 * -------
 * All colour comes from --color-primary and --color-secondary, which are set per
 * venue via ACF Pub Appearance and output as inline :root vars by ppb-core.
 * Typography: always `--font-body` (theme base / UI font), not `--font-display`.
 * Font size is always `--ppb-button-font-size` (see tokens.css); do not override in components.
 * No button colour is hardcoded here.
 */

/* ─── Base ─────────────────────────────────────────────────────────────── */

.ppb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.4rem;
	font-family: var(--font-body, inherit);
	/* One size site-wide; !important beats component-scoped rules that targeted smaller CTAs. */
	font-size: var(--ppb-button-font-size, 1rem) !important;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--ppb-radius-btn, 0.5rem);
	border: 1px solid transparent;
	cursor: pointer;
	/* `color` included so focus/hover re-declaration wins over theme `a:hover` for anchor buttons. */
	transition:
		background-color var(--ppb-transition-base),
		border-color var(--ppb-transition-base),
		box-shadow var(--ppb-transition-base),
		transform var(--ppb-transition-base),
		color var(--ppb-transition-base);
}

/*
 * Manual optical centre: body fonts sit low in flex-centred pills; nudge label + icon together.
 * Tune with --ppb-button-label-nudge on :root (tokens.css).
 */
.ppb-button__label {
	display: inline-block;
	line-height: 1;
	transform: translateY(var(--ppb-button-label-nudge, 0.08em));
}

/* ─── Filled: secondary (default CTA — venue accent colour) ────────────── */

.ppb-button--secondary {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: var(--ppb-btn-secondary-text, #fff);
}

/* :is(a, button) beats theme `a:hover` and `.ppb-u-prose a:hover` on CTA links. */
:is(a, button).ppb-button--secondary:hover,
:is(a, button).ppb-button--secondary:focus-visible {
	/* Reassert label/icon colour: theme `a:hover` would otherwise set the same mix as the fill. */
	color: var(--ppb-btn-secondary-text, #fff);
	background-color: color-mix(in srgb, var(--color-secondary) 82%, black);
	border-color: color-mix(in srgb, var(--color-secondary) 82%, black);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--color-secondary) 35%, transparent);
	transform: translateY(-1px);
}

.ppb-button--secondary:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--color-secondary) 60%, transparent);
	outline-offset: 3px;
}

/* ─── Filled: primary (dark navy, or venue primary colour) ─────────────── */

.ppb-button--primary {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--ppb-btn-primary-text, #fff);
}

:is(a, button).ppb-button--primary:hover,
:is(a, button).ppb-button--primary:focus-visible {
	color: var(--ppb-btn-primary-text, #fff);
	background-color: color-mix(in srgb, var(--color-primary) 82%, black);
	border-color: color-mix(in srgb, var(--color-primary) 82%, black);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
	transform: translateY(-1px);
}

.ppb-button--primary:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
	outline-offset: 3px;
}

/* Filled primary on dark chrome — visible contrasting border (e.g. footer). */

.ppb-button--primary-on-dark {
	background: var(--color-primary);
	border-color: var(--ppb-btn-primary-on-dark-border, #fff);
	color: var(--ppb-btn-primary-text, #fff);
}

:is(a, button).ppb-button--primary-on-dark:hover,
:is(a, button).ppb-button--primary-on-dark:focus-visible {
	color: var(--ppb-btn-primary-text, #fff);
	background-color: color-mix(in srgb, var(--color-primary) 82%, black);
	border-color: color-mix(in srgb, var(--color-primary) 82%, black);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
	transform: translateY(-1px);
}

.ppb-button--primary-on-dark:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
	outline-offset: 3px;
}

/* Solid light button on dark chrome — border colour matches background (no visible edge, size matches bordered CTAs). */

.ppb-button--inverse {
	background: var(--ppb-btn-inverse-bg, var(--ppb-color-footer-fg, #fefffc));
	border-color: var(--ppb-btn-inverse-border, var(--ppb-btn-inverse-bg, var(--ppb-color-footer-fg, #fefffc)));
	color: var(--ppb-btn-inverse-text, var(--ppb-color-text, #1a1a1a));
}

:is(a, button).ppb-button--inverse:hover,
:is(a, button).ppb-button--inverse:focus-visible {
	color: var(--ppb-btn-inverse-text, var(--ppb-color-text, #1a1a1a));
	background-color: color-mix(
		in srgb,
		var(--ppb-btn-inverse-bg, var(--ppb-color-footer-fg, #fefffc)) 90%,
		black
	);
	border-color: color-mix(
		in srgb,
		var(--ppb-btn-inverse-bg, var(--ppb-color-footer-fg, #fefffc)) 90%,
		black
	);
	box-shadow: 0 4px 14px
		color-mix(
			in srgb,
			var(--ppb-btn-inverse-bg, var(--ppb-color-footer-fg, #fefffc)) 35%,
			transparent
		);
	transform: translateY(-1px);
}

.ppb-button--inverse:focus-visible {
	outline: 3px solid
		color-mix(
			in srgb,
			var(--ppb-btn-inverse-bg, var(--ppb-color-footer-fg, #fefffc)) 60%,
			transparent
		);
	outline-offset: 3px;
}

/* ─── Ghost: outline on light surfaces (e.g. secondary CTA beside filled primary) ─ */

.ppb-button--ghost {
	background: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

:is(a, button).ppb-button--ghost:hover,
:is(a, button).ppb-button--ghost:focus-visible {
	color: var(--color-primary, #917145);
	background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
	transform: translateY(-1px);
}

.ppb-button--ghost:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
	outline-offset: 3px;
}

/* Ghost on dark surfaces — light border/text at rest. */

:is(a, button).ppb-button--ghost-on-dark:hover,
:is(a, button).ppb-button--ghost-on-dark:focus-visible {
	color: var(--ppb-color-footer-fg, #fefffc);
	background-color: rgba(255, 255, 255, 0.12);
	transform: translateY(-1px);
}

.ppb-button--ghost-on-dark:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.6);
	outline-offset: 3px;
}

.ppb-button--secondary:active,
.ppb-button--primary:active,
.ppb-button--primary-on-dark:active,
.ppb-button--inverse:active,
.ppb-button--ghost:active,
.ppb-button--ghost-on-dark:active {
	transform: translateY(0);
	box-shadow: none;
	transition-duration: var(--ppb-duration-fast);
}

/* ─── Disabled (all variants) ──────────────────────────────────────────── */

.ppb-button:disabled,
.ppb-button[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* ─── Wide: fills container ─────────────────────────────────────────────── */

.ppb-button--wide {
	width: 100%;
}

/* ─── Icon position ─────────────────────────────────────────────────────── */

.ppb-button--icon-right .ppb-button__icon {
	order: 2;
}

.ppb-button__icon {
	display: inline-flex;
	line-height: 0;
	flex-shrink: 0;
	transform: translateY(var(--ppb-button-label-nudge, 0.08em));
}

.ppb-button__icon svg {
	width: 1.1em;
	height: 1.1em;
	display: block;
}