/*
Theme Name: Storyteller's Stage
Author: WordPress Telex
Description: A warm, earthy WordPress block theme designed for professional oral storytellers. Stage Dust & Stone brings the atmosphere of live performance — desaturated warmth, theatrical presence, and refined editorial typography.
Version: 0.2.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: telex-storyteller-stage
Tags: block-theme, full-site-editing, entertainment, custom-colors, custom-menu, editor-style
*/

/* =======================================
   DESIGN SYSTEM — COLOR TOKENS
   ======================================= */
:root {
	/* Surface layers */
	--tss-surface-deep: var(--wp--preset--color--charcoal);
	--tss-surface-raised: var(--wp--preset--color--deep-stone);
	--tss-surface-base: var(--wp--preset--color--limestone);
	--tss-surface-subtle: var(--wp--preset--color--warm-cream);
	--tss-surface-muted: var(--wp--preset--color--bleached-linen);

	/* Accent system */
	--tss-accent-primary: var(--wp--preset--color--amber-clay);
	--tss-accent-hover: var(--wp--preset--color--dusty-amber);
	--tss-accent-muted: var(--wp--preset--color--dry-earth);

	/* Green accent system */
	--tss-green-primary: var(--wp--preset--color--forest-sage);
	--tss-green-light: var(--wp--preset--color--pale-moss);
	--tss-green-deep: var(--wp--preset--color--deep-fern);
	--tss-glow-green: rgba(94, 122, 90, 0.25);

	/* Text hierarchy */
	--tss-text-primary: var(--wp--preset--color--charcoal);
	--tss-text-secondary: var(--wp--preset--color--slate);
	--tss-text-tertiary: var(--wp--preset--color--dry-earth);
	--tss-text-inverse: var(--wp--preset--color--bleached-linen);

	/* Border & decoration */
	--tss-border-default: var(--wp--preset--color--dry-earth);
	--tss-border-subtle: rgba(181, 149, 106, 0.25);
	--tss-border-accent: var(--wp--preset--color--amber-clay);
	--tss-glow-amber: rgba(201, 125, 53, 0.3);

	/* Shadows */
	--tss-shadow-sm: 0 2px 8px rgba(42, 37, 32, 0.08);
	--tss-shadow-md: 0 8px 24px rgba(42, 37, 32, 0.12);
	--tss-shadow-lg: 0 12px 40px rgba(42, 37, 32, 0.16);
	--tss-shadow-glow: 0 0 12px var(--tss-glow-amber);

	/* Rotation tokens */
	--tss-rotate-subtle: 1.5deg;
	--tss-rotate-card: -1deg;
	--tss-rotate-accent: 3deg;
}

/* =======================================
   CARD LAYOUTS
   ======================================= */
.equal-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
}

.equal-cards > .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.equal-cards .cta-bottom {
	margin-top: auto;
	justify-content: center;
}

/* =======================================
   FOOTER MARGIN RESET
   ======================================= */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* =======================================
   HEADER
   ======================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Transparent header — overlays the hero */
.site-header--transparent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent !important;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: none !important;
	min-height: 64px;
	align-items: center;
}

.site-header--transparent .wp-block-site-title a {
	color: var(--tss-text-inverse) !important;
	text-shadow: 0 1px 4px rgba(42, 37, 32, 0.6);
}

.nav-transparent .wp-block-navigation-item a {
	color: var(--tss-text-inverse) !important;
	text-shadow: 0 1px 4px rgba(42, 37, 32, 0.6);
	transition: color 0.2s ease;
}

.nav-transparent .wp-block-navigation-item a:hover {
	color: var(--tss-accent-hover) !important;
}

/* =======================================
   TYPOGRAPHY — FONT ASSIGNMENTS
   ======================================= */
/* Lora for headings and quotes */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-quote,
.wp-block-quote p,
.wp-block-quote cite,
blockquote {
	font-family: 'Lora', Georgia, serif;
}

/* Roboto Flex for body text, buttons, captions, navigation */
body,
p,
.wp-block-navigation,
.wp-block-navigation-item a,
.wp-block-button__link,
.wp-element-button,
button,
input,
textarea,
select,
figcaption,
.wp-element-caption,
.overline,
.small-caps,
.nav-small-caps .wp-block-navigation-item a {
	font-family: 'Roboto Flex', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* =======================================
   GLOBAL BORDER RADIUS (8px)
   ======================================= */
.wp-block-button__link,
.wp-element-button,
button,
.wp-block-image img,
.wp-block-image .wp-block-image__crop-area,
.wp-block-cover img.wp-block-cover__image-background,
.event-card,
.story-card,
.booking-form,
.booking-form input,
.booking-form textarea,
.booking-form select {
	border-radius: 8px;
}

/* Cards and bordered groups */
.event-card,
.story-card {
	border-radius: 8px;
	overflow: hidden;
}

/* =======================================
   TYPOGRAPHY UTILITIES
   ======================================= */
.small-caps {
	font-variant: small-caps;
	letter-spacing: 0.14em;
}

.overline {
	font-variant: small-caps;
	letter-spacing: 0.22em;
	font-size: 0.8125rem;
}

/* =======================================
   GRAIN OVERLAY
   ======================================= */
.grain-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0.04;
	background-image: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(181, 149, 106, 0.3) 2px,
		rgba(181, 149, 106, 0.3) 3px
	);
	pointer-events: none;
}

/* =======================================
   HERO
   ======================================= */
.hero-desaturated img.wp-block-cover__image-background {
	filter: saturate(0.55) contrast(1.05) brightness(0.85);
}

/* Hero absorbs the transparent header — negative margin pulls it under */
.hero-with-transparent-header {
	margin-top: -64px !important;
	padding-top: 0 !important;
}

/* Vertically center the inner-container, accounting for the absorbed header */
.hero-with-transparent-header > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding-top: 64px;
}

/* =======================================
   CORNER ACCENTS — with rotation
   ======================================= */
.corner-accents {
	position: relative;
}

.corner-accents::before,
.corner-accents::after {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	pointer-events: none;
	z-index: 5;
	transition: transform 0.6s ease;
}

.corner-accents::before {
	top: 2rem;
	left: 2rem;
	border-top: 1px solid var(--tss-border-subtle);
	border-left: 1px solid var(--tss-border-subtle);
	transform: rotate(calc(var(--tss-rotate-accent) * -1));
}

.corner-accents::after {
	bottom: 2rem;
	right: 2rem;
	border-bottom: 1px solid var(--tss-border-subtle);
	border-right: 1px solid var(--tss-border-subtle);
	transform: rotate(var(--tss-rotate-accent));
}

/* =======================================
   DECORATIVE RULE
   ======================================= */
.amber-rule {
	width: 60px;
	border-top: 2px solid var(--tss-accent-primary);
	box-shadow: var(--tss-shadow-glow);
}

/* =======================================
   NAVIGATION
   ======================================= */
.nav-small-caps .wp-block-navigation-item a {
	font-family: 'Roboto Flex', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	font-variant: small-caps;
	letter-spacing: 0.14em;
	font-size: 0.75rem;
}

/* =======================================
   CARD INTERACTIONS — rotation on hover
   ======================================= */
.event-card {
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
	will-change: transform;
}

.event-card:hover {
	transform: translateY(-4px) rotate(var(--tss-rotate-card));
	box-shadow: var(--tss-shadow-md);
}

.story-card {
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
	overflow: hidden;
	will-change: transform;
}

.story-card:hover {
	transform: translateY(-6px) rotate(calc(var(--tss-rotate-card) * -1));
	box-shadow: var(--tss-shadow-lg);
}

/* =======================================
   ROTATED DECORATIVE ELEMENTS
   ======================================= */
.tilt-left {
	transform: rotate(calc(var(--tss-rotate-subtle) * -1));
}

.tilt-right {
	transform: rotate(var(--tss-rotate-subtle));
}

.tilt-accent {
	transform: rotate(var(--tss-rotate-accent));
}

/* Rotated separator variant */
.amber-rule-tilted {
	width: 60px;
	border-top: 2px solid var(--tss-accent-primary);
	box-shadow: var(--tss-shadow-glow);
	transform: rotate(var(--tss-rotate-accent));
}

/* =======================================
   SCROLL ANIMATIONS
   ======================================= */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(32px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-40px) rotate(calc(var(--tss-rotate-subtle) * -1));
	}
	to {
		opacity: 1;
		transform: translateX(0) rotate(0deg);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(40px) rotate(var(--tss-rotate-subtle));
	}
	to {
		opacity: 1;
		transform: translateX(0) rotate(0deg);
	}
}

@keyframes fadeInRotate {
	from {
		opacity: 0;
		transform: translateY(24px) rotate(var(--tss-rotate-accent));
	}
	to {
		opacity: 1;
		transform: translateY(0) rotate(0deg);
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.92);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Pre-animation state — elements hidden until observed */
.tss-reveal {
	opacity: 0;
}

/* Triggered states */
.tss-reveal.tss-visible {
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tss-reveal.tss-fade-up.tss-visible {
	animation-name: fadeInUp;
	animation-duration: 0.7s;
}

.tss-reveal.tss-fade-left.tss-visible {
	animation-name: fadeInLeft;
	animation-duration: 0.8s;
}

.tss-reveal.tss-fade-right.tss-visible {
	animation-name: fadeInRight;
	animation-duration: 0.8s;
}

.tss-reveal.tss-fade-rotate.tss-visible {
	animation-name: fadeInRotate;
	animation-duration: 0.7s;
}

.tss-reveal.tss-scale-in.tss-visible {
	animation-name: scaleIn;
	animation-duration: 0.6s;
}

/* Stagger delays for child elements */
.tss-stagger > .tss-reveal:nth-child(1) { animation-delay: 0s; }
.tss-stagger > .tss-reveal:nth-child(2) { animation-delay: 0.12s; }
.tss-stagger > .tss-reveal:nth-child(3) { animation-delay: 0.24s; }
.tss-stagger > .tss-reveal:nth-child(4) { animation-delay: 0.36s; }
.tss-stagger > .tss-reveal:nth-child(5) { animation-delay: 0.48s; }
.tss-stagger > .tss-reveal:nth-child(6) { animation-delay: 0.60s; }

/* Stagger for columns (cards in a row) */
.tss-stagger > .wp-block-column:nth-child(1) .tss-reveal { animation-delay: 0s; }
.tss-stagger > .wp-block-column:nth-child(2) .tss-reveal { animation-delay: 0.15s; }
.tss-stagger > .wp-block-column:nth-child(3) .tss-reveal { animation-delay: 0.3s; }

/* =======================================
   SECTION DIVIDER
   ======================================= */
.section-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--tss-accent-muted), transparent);
	border: none;
}

/* =======================================
   BOOKING FORM
   ======================================= */
.booking-form input,
.booking-form textarea,
.booking-form select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--tss-border-default);
	background-color: var(--tss-surface-subtle);
	font-family: 'Roboto Flex', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	font-size: 1rem;
	color: var(--tss-text-primary);
	outline: none;
	border-radius: 8px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.booking-form input:focus,
.booking-form textarea:focus,
.booking-form select:focus {
	border-color: var(--tss-accent-primary);
	box-shadow: 0 0 0 3px var(--tss-glow-amber);
}

.booking-form label {
	font-family: 'Roboto Flex', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	font-size: 0.875rem;
	color: var(--tss-text-secondary);
	display: block;
	margin-bottom: 0.5rem;
}

/* =======================================
   GREEN ACCENT UTILITIES
   ======================================= */

/* Badge / tag style — small inline labels */
.tss-badge-green {
	display: inline-block;
	font-family: 'Roboto Flex', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	font-variant: small-caps;
	letter-spacing: 0.12em;
	font-size: 0.6875rem;
	padding: 4px 12px;
	border-radius: 8px;
	background-color: var(--tss-green-primary);
	color: var(--tss-surface-subtle);
	line-height: 1.4;
}

/* Subtle green left-border accent for quotes or callouts */
.tss-green-border-left {
	border-left: 3px solid var(--tss-green-primary) !important;
}

/* Green-tinted separator variant */
.sage-rule {
	width: 60px;
	border-top: 2px solid var(--tss-green-primary);
	box-shadow: 0 0 12px var(--tss-glow-green);
}

/* Green hover glow for cards */
.event-card:hover {
	box-shadow: var(--tss-shadow-md), 0 0 0 1px rgba(94, 122, 90, 0.15);
}

.story-card:hover {
	box-shadow: var(--tss-shadow-lg), 0 0 0 1px rgba(94, 122, 90, 0.15);
}

/* Green-tinted surface for callout blocks */
.tss-surface-green {
	background-color: rgba(94, 122, 90, 0.08);
	border: 1px solid rgba(94, 122, 90, 0.18);
	border-radius: 8px;
}

/* Green accent text utility */
.has-forest-sage-color a {
	color: var(--tss-green-primary);
	text-decoration-color: var(--tss-green-light);
}

.has-forest-sage-color a:hover {
	color: var(--tss-green-deep);
}

/* Green dot indicator — e.g. for "available" / "confirmed" status */
.tss-dot-green::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--tss-green-primary);
	margin-right: 0.5em;
	vertical-align: middle;
	box-shadow: 0 0 6px var(--tss-glow-green);
}

/* =======================================
   REDUCED MOTION
   ======================================= */
@media (prefers-reduced-motion: reduce) {
	.tss-reveal {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.event-card:hover,
	.story-card:hover {
		transform: translateY(-2px);
	}

	.corner-accents::before,
	.corner-accents::after {
		transform: none;
	}
}

/* =======================================
   RESPONSIVE
   ======================================= */
@media (max-width: 768px) {
	.corner-accents::before,
	.corner-accents::after {
		display: none;
	}

	.site-header--transparent {
		min-height: 56px;
	}

	.hero-with-transparent-header {
		margin-top: -56px !important;
	}

	.hero-with-transparent-header > .wp-block-cover__inner-container {
		padding-top: 56px;
	}
}