/* =============================================================================
   Rock and Roll Reclaimed — supplemental design layer
   Loaded on the front end and inside the block editor.

   theme.json supplies the tokens as CSS custom properties, e.g.
     --wp--preset--color--teal, --wp--preset--font-family--display,
     --wp--preset--spacing--60, --wp--preset--font-size--hero
   We reuse those here so everything stays in sync with the Site Editor.
   ========================================================================== */

:root {
	--rrr-tracking-caps: 0.12em;
	--rrr-tracking-display: -0.01em;
	--rrr-ease-out: cubic-bezier(.2, .7, .2, 1);
	--rrr-ease-rock: cubic-bezier(.2, .9, .3, 1.3);
	--rrr-dur: 220ms;
}

/* ---- Focus ring: brand teal, visible on keyboard nav --------------------- */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
	border-radius: 2px;
}

/* =============================================================================
   BLOCK STYLE VARIATIONS  (registered in functions.php)
   ========================================================================== */

/* ---- Button › Ghost (outline) ------------------------------------------- */
.wp-block-button.is-style-rrr-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--charcoal);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--charcoal);
	transition: background-color var(--rrr-dur) var(--rrr-ease-out),
		color var(--rrr-dur) var(--rrr-ease-out);
}
.wp-block-button.is-style-rrr-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-rrr-ghost .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--bone);
}

/* ---- Button › Ink (charcoal) -------------------------------------------- */
.wp-block-button.is-style-rrr-ink .wp-block-button__link {
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--bone);
}
.wp-block-button.is-style-rrr-ink .wp-block-button__link:hover,
.wp-block-button.is-style-rrr-ink .wp-block-button__link:focus {
	background-color: #1a1a1a;
}

/* ---- Group › Stage card ------------------------------------------------- */
.wp-block-group.is-style-rrr-stage {
	background-color: var(--wp--preset--color--white);
	border: 1px solid #e8e4da;
	border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--stage);
	padding: var(--wp--preset--spacing--90);
	overflow: clip;
}

/* ---- Heading › Kicker rule (teal accent line above) --------------------- */
.is-style-rrr-kicker {
	position: relative;
	padding-top: 0.6em;
}
.is-style-rrr-kicker::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 4px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--teal);
}

/* ---- Separator › Amp bar (short, thick, teal) --------------------------- */
.wp-block-separator.is-style-rrr-amp {
	border: none;
	height: 4px;
	width: 64px;
	max-width: 64px;
	margin-left: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--teal);
	opacity: 1;
}

/* =============================================================================
   UTILITY HELPER CLASSES
   Apply via the block "Advanced › Additional CSS class(es)" field.
   ========================================================================== */

/* Display / hero typography — the logo's condensed-caps voice. */
.rrr-hero {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: var(--wp--preset--font-size--hero) !important;
	line-height: 1.02 !important;
	letter-spacing: var(--rrr-tracking-display) !important;
	text-transform: uppercase !important;
}
.rrr-display {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: var(--wp--preset--font-size--display) !important;
	line-height: 1.05 !important;
	letter-spacing: var(--rrr-tracking-display) !important;
	text-transform: uppercase !important;
}

/* Eyebrow / kicker — podcast-tag voice. */
.rrr-eyebrow {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: var(--wp--preset--font-size--caps) !important;
	font-weight: 700 !important;
	letter-spacing: var(--rrr-tracking-caps) !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--teal) !important;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

/* Sub-mark eyebrow (Studio / Merch Table / Workshop) — Oswald, muted. */
.rrr-submark {
	font-family: var(--wp--preset--font-family--display-alt) !important;
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--caps) !important;
	letter-spacing: var(--rrr-tracking-caps) !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--graphite) !important;
}

/* Reading column — long-form serif. */
.rrr-prose {
	font-family: var(--wp--preset--font-family--serif) !important;
	font-size: var(--wp--preset--font-size--body) !important;
	line-height: 1.7 !important;
}

/* Meta line — small mono, smoke. */
.rrr-meta {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--meta) !important;
	letter-spacing: 0.02em !important;
	color: var(--wp--preset--color--graphite) !important;
}

/* Inverted section — charcoal stage with bone text. */
.rrr-invert {
	background-color: var(--wp--preset--color--charcoal) !important;
	color: var(--wp--preset--color--bone) !important;
}
.rrr-invert :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--bone) !important;
}
.rrr-invert a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--teal-bright) !important;
}

/* =============================================================================
   MARQUEE — the scrolling banner from the design language.
   Wrap a Paragraph/Group in .rrr-marquee; its first child scrolls.
   Respects reduced-motion.
   ========================================================================== */
.rrr-marquee {
	overflow: hidden;
	white-space: nowrap;
	border-block: 2px solid var(--wp--preset--color--charcoal);
	padding-block: var(--wp--preset--spacing--30);
}
.rrr-marquee > * {
	display: inline-block;
	padding-left: 100%;
	font-family: var(--wp--preset--font-family--display) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	animation: rrr-scroll 22s linear infinite;
}
@keyframes rrr-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
	.rrr-marquee > * {
		animation: none;
		padding-left: 0;
		white-space: normal;
	}
}