/* TSW Premium — Material Design 3 layer.
 * Loaded after main.css. Applies M3 principles — elevation, shape, state
 * layers, and standardized motion — on top of the existing components by
 * (a) re-pointing the shared design tokens to Material values and
 * (b) adding Material-specific surfaces, state layers, and a ripple/FAB. */

:root {
	/* ── Motion: M3 easing + duration ───────────────────────────────────── */
	--md-easing-standard: cubic-bezier(0.2, 0, 0, 1);
	--md-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
	--md-easing-decelerate: cubic-bezier(0, 0, 0, 1);
	--md-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
	--md-duration-short: 150ms;
	--md-duration-medium: 250ms;
	--md-duration-long: 400ms;

	/* ── Shape scale ────────────────────────────────────────────────────── */
	--md-shape-xs: 4px;
	--md-shape-sm: 8px;
	--md-shape-md: 12px;
	--md-shape-lg: 16px;
	--md-shape-xl: 28px;
	--md-shape-full: 999px;

	/* ── Elevation (M3 levels 0–5) ──────────────────────────────────────── */
	--md-elevation-0: none;
	--md-elevation-1: 0 1px 2px rgba(17, 20, 24, 0.30), 0 1px 3px 1px rgba(17, 20, 24, 0.10);
	--md-elevation-2: 0 1px 2px rgba(17, 20, 24, 0.30), 0 2px 6px 2px rgba(17, 20, 24, 0.12);
	--md-elevation-3: 0 4px 8px 3px rgba(17, 20, 24, 0.12), 0 1px 3px rgba(17, 20, 24, 0.30);
	--md-elevation-4: 0 6px 10px 4px rgba(17, 20, 24, 0.12), 0 2px 3px rgba(17, 20, 24, 0.30);
	--md-elevation-5: 0 8px 12px 6px rgba(17, 20, 24, 0.12), 0 4px 4px rgba(17, 20, 24, 0.30);

	/* ── State-layer opacities ──────────────────────────────────────────── */
	--md-state-hover: 0.08;
	--md-state-focus: 0.12;
	--md-state-pressed: 0.12;

	/* Primary = the theme accent. RGB form for state-layer rgba(). */
	--md-primary-rgb: 15, 118, 110;
	--md-on-surface-rgb: 17, 20, 24;

	/* ── Re-point the shared tokens main.css already consumes ───────────── */
	--tsw-shadow-sm: var(--md-elevation-1);
	--tsw-shadow-md: var(--md-elevation-2);
	--tsw-shadow-lg: var(--md-elevation-3);
	--tsw-radius: var(--md-shape-md);
	--tsw-transition: var(--md-duration-medium) var(--md-easing-standard);
}

/* ─── Resting elevation on Material surfaces ─────────────────────────────── */
.tsw-post-card,
.tsw-episode-card,
.is-style-tsw-card {
	border-radius: var(--md-shape-md);
	box-shadow: var(--md-elevation-1);
	transition: box-shadow var(--md-duration-medium) var(--md-easing-standard),
		transform var(--md-duration-medium) var(--md-easing-standard);
}
.tsw-post-card:hover,
.tsw-episode-card:hover,
.is-style-tsw-card:hover {
	box-shadow: var(--md-elevation-3);
}

.tsw-sidebar,
.tsw-toc {
	border-radius: var(--md-shape-md);
	box-shadow: var(--md-elevation-1);
}

/* ─── Material buttons: shape, touch target, state layer, ripple ─────────── */
.wp-block-button__link,
.tsw-newsletter__row button,
.wp-block-search__button {
	position: relative;
	overflow: hidden;
	border-radius: var(--md-shape-full);
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.02em;
	transition: box-shadow var(--md-duration-short) var(--md-easing-standard),
		background-color var(--md-duration-short) var(--md-easing-standard);
}
.wp-block-button__link:hover,
.tsw-newsletter__row button:hover,
.wp-block-search__button:hover {
	box-shadow: var(--md-elevation-1);
}

/* State layer: a tinted overlay that intensifies on hover / focus / press. */
.tsw-state-layer::after {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: 0;
	transition: opacity var(--md-duration-short) var(--md-easing-standard);
	pointer-events: none;
}
.tsw-state-layer:hover::after {
	opacity: var(--md-state-hover);
}
.tsw-state-layer:focus-visible::after {
	opacity: var(--md-state-focus);
}

/* ─── Ripple ─────────────────────────────────────────────────────────────── */
.tsw-ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	background: currentColor;
	opacity: 0.28;
	pointer-events: none;
	animation: tsw-ripple var(--md-duration-long) var(--md-easing-decelerate);
}
@keyframes tsw-ripple {
	to {
		transform: scale(2.2);
		opacity: 0;
	}
}

/* ─── Navigation + TOC + links: state-layer hover treatment ──────────────── */
.wp-block-navigation a:where(:not(.wp-element-button)) {
	border-radius: var(--md-shape-sm);
	padding: 0.35rem 0.6rem;
	transition: background-color var(--md-duration-short) var(--md-easing-standard);
}
.wp-block-navigation a:where(:not(.wp-element-button)):hover {
	background: rgba(var(--md-primary-rgb), var(--md-state-hover));
}

.tsw-toc__item a {
	display: block;
	border-radius: var(--md-shape-xs);
	padding: 0.2rem 0.4rem;
	transition: background-color var(--md-duration-short) var(--md-easing-standard),
		color var(--md-duration-short) var(--md-easing-standard);
}
.tsw-toc__item a:hover {
	background: rgba(var(--md-primary-rgb), var(--md-state-hover));
	border-bottom-color: transparent;
}

/* ─── Inputs: Material filled-field focus ring ───────────────────────────── */
.tsw-newsletter__row input[type="email"],
.wp-block-search__input {
	border-radius: var(--md-shape-xs);
	transition: border-color var(--md-duration-short) var(--md-easing-standard),
		box-shadow var(--md-duration-short) var(--md-easing-standard);
}

/* ─── Back-to-top becomes a Material FAB ─────────────────────────────────── */
.tsw-back-to-top {
	position: fixed;
	overflow: hidden;
	border-radius: var(--md-shape-lg);
	width: 3.5rem;
	height: 3.5rem;
	box-shadow: var(--md-elevation-3);
	transition: box-shadow var(--md-duration-medium) var(--md-easing-standard),
		transform var(--md-duration-medium) var(--md-easing-standard),
		opacity var(--md-duration-medium) var(--md-easing-standard);
}
.tsw-back-to-top:hover {
	box-shadow: var(--md-elevation-4);
	transform: translateY(-2px);
}
.tsw-back-to-top:active {
	box-shadow: var(--md-elevation-2);
}

/* ─── Sticky-post badge as a Material chip ───────────────────────────────── */
.tsw-sticky-badge {
	border-radius: var(--md-shape-sm);
	box-shadow: var(--md-elevation-2);
}

/* ─── Reduced motion: disable ripple ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.tsw-ripple {
		display: none;
	}
}