/**
 * Sian's Feast — Theme Styles
 * Consumes design tokens. No arbitrary values.
 */

/* Base body styling */
body {
	background-color: var(--token-color-background-page);
	color: var(--token-color-text-primary);
	font-family: var(--token-font-family-body);
	font-size: var(--token-font-size-base);
	line-height: var(--token-line-height-normal);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--token-font-family-heading);
	line-height: var(--token-line-height-tight);
	color: var(--token-color-text-primary);
}

/* Links */
a {
	color: var(--token-color-interactive-secondary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--token-motion-duration-fast) var(--token-motion-easing-default);
}

a:hover {
	color: var(--token-color-interactive-secondary-hover);
}

a:focus-visible {
	outline: 2px solid var(--token-color-border-focus);
	outline-offset: 2px;
	border-radius: var(--token-radius-sm);
}

/* Buttons */
.wp-block-button__link,
.wp-element-button {
	background-color: var(--token-color-interactive-primary);
	color: #ffffff;
	font-family: var(--token-font-family-body);
	font-weight: var(--token-font-weight-semibold);
	font-size: var(--token-font-size-base);
	padding: var(--token-spacing-3) var(--token-spacing-6);
	border-radius: var(--token-radius-md);
	border: none;
	text-decoration: none;
	transition:
		background-color var(--token-motion-duration-fast) var(--token-motion-easing-default),
		box-shadow var(--token-motion-duration-fast) var(--token-motion-easing-default);
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--token-color-interactive-primary-hover);
	box-shadow: var(--token-shadow-md);
}

.wp-block-button__link:active,
.wp-element-button:active {
	background-color: var(--token-color-interactive-primary-active);
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--token-color-interactive-secondary);
	border: 2px solid var(--token-color-interactive-secondary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--token-color-interactive-secondary);
	color: #ffffff;
}

/* Site header */
.site-header {
	padding: var(--token-spacing-4) var(--token-spacing-6);
	background-color: var(--token-color-background-surface-elevated);
	border-bottom: 1px solid var(--token-color-border-subtle);
}

.sf-brand-mark {
	gap: var(--token-spacing-3) !important;
}

.sf-brand-emblem img {
	border-radius: var(--token-radius-full);
	box-shadow: 0 1px 4px rgba(139, 100, 32, 0.12);
	border: 1px solid var(--token-color-border-subtle);
	width: 64px;
	height: 64px;
	object-fit: cover;
}

@media (max-width: 768px) {
	.sf-brand-emblem img {
		width: 48px;
		height: 48px;
	}
}

/* Site footer */
.site-footer {
	padding: var(--token-spacing-12) var(--token-spacing-6);
	background-color: var(--token-color-background-inverse);
	color: var(--token-color-text-inverse);
}

.site-footer a {
	color: var(--token-color-brand-secondary);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--token-color-brand-secondary-hover);
	text-decoration: underline;
}

/* Hero section */
.hero-section {
	padding: var(--token-spacing-16) var(--token-spacing-6);
	text-align: center;
}

.hero-section h1 {
	font-size: clamp(3rem, 6vw, var(--token-font-size-6xl));
	font-weight: var(--token-font-weight-bold);
	letter-spacing: -0.02em;
	margin-bottom: var(--token-spacing-4);
}

.hero-section p {
	font-size: var(--token-font-size-lg);
	color: var(--token-color-text-secondary);
	max-width: 640px;
	margin-inline: auto;
}

/* Eyebrow text */
.eyebrow-text {
	font-size: var(--token-font-size-sm);
	font-weight: var(--token-font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--token-color-text-brand);
}

/* Caption text */
.wp-element-caption {
	font-size: 0.85rem;
	font-weight: var(--token-font-weight-regular);
	color: var(--token-color-text-muted);
	margin-top: var(--token-spacing-2);
}

/* Card surfaces */
.surface-card {
	background-color: var(--token-color-background-surface-elevated);
	border-radius: var(--token-radius-lg);
	box-shadow: var(--token-shadow-sm);
	padding: var(--token-spacing-6);
	transition:
		box-shadow var(--token-motion-duration-fast) var(--token-motion-easing-default),
		transform var(--token-motion-duration-fast) var(--token-motion-easing-default);
}

.surface-card:hover {
	box-shadow: var(--token-shadow-md);
	transform: translateY(calc(var(--token-motion-hover-lift) * -1));
}

/* Menu item styling */
.menu-item-card {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: var(--token-spacing-4) 0;
	border-bottom: 1px solid var(--token-color-border-subtle);
}

.menu-item-card:last-child {
	border-bottom: none;
}

.menu-item-name {
	font-family: var(--token-font-family-body);
	font-weight: var(--token-font-weight-semibold);
	font-size: var(--token-font-size-base);
}

.menu-item-description {
	font-size: var(--token-font-size-sm);
	color: var(--token-color-text-secondary);
	margin-top: var(--token-spacing-1);
}

.menu-item-price {
	font-weight: var(--token-font-weight-semibold);
	color: var(--token-color-text-accent);
	white-space: nowrap;
}

/* Section spacing */
.section-spacing {
	padding-block: var(--token-spacing-12);
}

.section-spacing-lg {
	padding-block: var(--token-spacing-16);
}

/* Brand highlight text */
.text-brand {
	color: var(--token-color-text-brand);
}

.text-accent {
	color: var(--token-color-text-accent);
}

/* Image treatment */
.wp-block-image img {
	border-radius: var(--token-radius-lg);
}

.wp-block-image img {
	width: 100%;
	height: auto;
}

/* Separator styling */
.wp-block-separator {
	border-color: var(--token-color-border-subtle);
	opacity: 1;
}

.wp-block-separator.is-style-wide {
	border-color: var(--token-color-border-brand);
}

/* WhatsApp floating button */
.sf-whatsapp-float {
	position: fixed;
	bottom: var(--token-spacing-6);
	right: var(--token-spacing-6);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background-color: #25d366;
	color: #ffffff;
	border-radius: var(--token-radius-full);
	box-shadow: var(--token-shadow-lg);
	text-decoration: none;
	transition: transform var(--token-motion-duration-fast) var(--token-motion-easing-default),
		box-shadow var(--token-motion-duration-fast) var(--token-motion-easing-default);
}

.sf-whatsapp-float:hover {
	transform: scale(1.1);
	box-shadow: var(--token-shadow-xl);
	color: #ffffff;
}

/* Sticky mobile CTA bar */
.sf-mobile-cta-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: var(--token-color-background-surface-elevated);
	border-top: 1px solid var(--token-color-border-subtle);
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
	padding: var(--token-spacing-2) var(--token-spacing-4);
}

@media (max-width: 768px) {
	.sf-mobile-cta-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.sf-whatsapp-float {
		bottom: calc(var(--token-spacing-6) + 60px);
	}
}

.sf-mobile-cta-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--token-spacing-2) var(--token-spacing-4);
	color: var(--token-color-text-brand);
	text-decoration: none;
	font-size: var(--token-font-size-xs);
	font-weight: var(--token-font-weight-semibold);
	transition: color var(--token-motion-duration-fast) var(--token-motion-easing-default);
}

.sf-mobile-cta-bar__item:hover {
	color: var(--token-color-interactive-primary);
}

/* Motion system — reveal animations */
.sf-motion-ready .sf-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--token-motion-duration-normal, 300ms) var(--token-motion-easing-default, cubic-bezier(0.22, 1, 0.36, 1)),
		transform var(--token-motion-duration-normal, 300ms) var(--token-motion-easing-default, cubic-bezier(0.22, 1, 0.36, 1));
	will-change: opacity, transform;
}

.sf-motion-ready .sf-reveal.sf-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* Hero Ken Burns slow zoom */
@keyframes sf-hero-zoom {
	from { transform: scale(1); }
	to { transform: scale(1.04); }
}

.sf-motion-ready .hero-section .wp-block-cover__image-background {
	animation: sf-hero-zoom 20s ease-in-out infinite alternate;
}

/* Image reveal: scale + slight blur */
.sf-motion-ready .wp-block-image.sf-reveal img {
	transition:
		opacity var(--token-motion-duration-normal, 300ms) var(--token-motion-easing-default),
		transform var(--token-motion-duration-slow, 400ms) var(--token-motion-easing-default),
		filter var(--token-motion-duration-slow, 400ms) var(--token-motion-easing-default);
	transform: scale(0.96);
	filter: blur(2px);
}

.sf-motion-ready .wp-block-image.sf-reveal.sf-revealed img {
	transform: scale(1);
	filter: blur(0);
}

/* CTA pulse glow on idle */
@keyframes sf-pulse-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(196, 149, 53, 0.4); }
	50% { box-shadow: 0 0 0 8px rgba(196, 149, 53, 0); }
}

.hero-section .wp-block-button__link {
	animation: sf-pulse-glow 3s ease-in-out infinite;
	animation-delay: 2s;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

.sf-motion-reduced .sf-reveal {
	opacity: 1 !important;
	transform: none !important;
}