/* ==========================================================================
   Tacos La Rana — theme styles (rana-theme.css)
   Design tokens come from theme.json (--wp--preset--*). This file carries
   the section styling from the "modern / professional" prototype.
   ========================================================================== */

:root {
	--rana-bg: var( --wp--preset--color--base, #FAFAF7 );
	--rana-surface: var( --wp--preset--color--surface, #FFFFFF );
	--rana-ink: var( --wp--preset--color--contrast, #16150F );
	--rana-ink-2: var( --wp--preset--color--muted, #5B5A50 );
	--rana-line: var( --wp--preset--color--line, #E4E3DC );
	--rana-green: var( --wp--preset--color--rana-green, #5E9418 );
	--rana-green-soft: var( --wp--preset--color--green-soft, #EDF3E0 );
	--rana-red: var( --wp--preset--color--rana-red, #C1272D );
	--rana-dark: var( --wp--preset--color--dark, #16150F );
	--rana-dark-2: var( --wp--preset--color--dark-2, #221F18 );
	--rana-display: var( --wp--preset--font-family--display, 'Archivo', system-ui, sans-serif );
	--rana-body: var( --wp--preset--font-family--body, 'Inter', system-ui, sans-serif );
	--rana-mono: var( --wp--preset--font-family--mono, 'Space Grotesk', monospace );
	--rana-r: var( --wp--custom--radius, 10px );
	--rana-r-lg: var( --wp--custom--radius-large, 14px );
	--rana-ease: var( --wp--custom--ease, cubic-bezier( .22, .61, .36, 1 ) );
}

html {
	scroll-behavior: smooth;
	/* Offset anchor jumps (#menu, #schedule, …) so targets land below the
	   sticky header. The admin-bar var is 0 for logged-out visitors. */
	scroll-padding-top: calc( 92px + var( --wp-admin--admin-bar--height, 0px ) );
}

/* Never allow sideways page scroll (wide hero text, cramped header rows).
   `clip` (not `hidden`) keeps position:sticky working. */
html,
body {
	overflow-x: clip;
}

:focus-visible {
	outline: 2px solid var( --rana-green );
	outline-offset: 3px;
}

/* ── Mono label (kicker above headings) ──────────────────────────────────── */

.rana-label {
	font-family: var( --rana-mono );
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --rana-green );
	font-weight: 500;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────
   Base pill style comes from theme.json (elements.button).
   Variants applied via "Additional CSS class" on core/button blocks.       */

.wp-block-button .wp-block-button__link {
	transition: all 0.25s var( --rana-ease );
}

.wp-block-button .wp-block-button__link:hover {
	transform: translateY( -2px );
}

.rana-btn-outline .wp-block-button__link {
	background: transparent;
	color: var( --rana-ink );
	border: 1px solid var( --rana-ink );
}

.rana-btn-outline .wp-block-button__link:hover {
	background: var( --rana-ink );
	color: #fff;
}

.rana-btn-green .wp-block-button__link {
	background: var( --rana-green );
	color: #fff;
}

.rana-btn-green .wp-block-button__link:hover {
	background: var( --rana-ink );
}

.rana-btn-light .wp-block-button__link {
	background: #fff;
	color: var( --rana-ink );
}

.rana-btn-light .wp-block-button__link:hover {
	background: var( --rana-green );
	color: #fff;
}

.rana-btn-ghost-light .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
}

.rana-btn-ghost-light .wp-block-button__link:hover {
	background: #fff;
	color: var( --rana-ink );
}

/* Compact button used in the header (replaces inline padding/font-size,
   which the block editor flags as invalid on hand-written markup). */
.rana-btn-compact .wp-block-button__link {
	padding: 11px 24px;
	font-size: 0.85rem;
	white-space: nowrap; /* Never let the label wrap character-by-character. */
}

/* ── Header ──────────────────────────────────────────────────────────────── */

/* Kill WordPress's default root block gap (24px margin between the
   top-level header part, main, and footer part) — sections manage their
   own spacing, so the gap just shows page background between them. */
body .wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Sticky must live on the template-part WRAPPER, not the group inside it:
   a sticky element can only travel within its parent, and the <header>
   wrapper is exactly as tall as its content — so the inner group's
   position:sticky never engages. Stick the wrapper itself instead. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
}

/* Keep the sticky header below the WP admin bar when logged in. */
body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var( --wp-admin--admin-bar--height, 32px );
}

/* ONE cart only — the La Rana trigger. WooCommerce's Mini-Cart and
   Customer Account blocks duplicate it (separate drawer, off-design);
   hide them if they end up in the header via Site Editor edits. */
.rana-header .wc-block-mini-cart,
.rana-header .wp-block-woocommerce-mini-cart,
.rana-header .wp-block-woocommerce-customer-account {
	display: none !important;
}

/* ── Header cart trigger (via [tlr_mini_cart]) ──────────────────────────────
   Full rebuild with hard alignment: a crisp 46px circle, the cart icon
   dead-centered, and the count badge riding the top-right edge — overriding
   any plugin base styles that misplace the pieces.                          */

.rana-header .rana-header-cart .tlr-mini-cart-trigger-wrap {
	display: inline-flex;
	line-height: 0;
}

.rana-header .rana-header-cart .tlr-mini-cart-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	margin: 0;
	background: #fff;
	color: var( --rana-ink );
	border: 1px solid var( --rana-line );
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.rana-header .rana-header-cart .tlr-mini-cart-trigger:hover {
	background: #fff;
	border-color: var( --rana-ink );
	transform: translateY( -1px );
}

.rana-header .rana-header-cart .tlr-mini-cart-trigger__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.rana-header .rana-header-cart .tlr-mini-cart-trigger svg {
	display: block;
	width: 20px;
	height: 20px;
}

.rana-header .rana-header-cart .tlr-mini-cart-trigger__count {
	position: absolute;
	top: -6px;
	right: -6px;
	box-sizing: border-box;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	background: var( --rana-green );
	color: #fff;
	border: 2px solid #fff;
	border-radius: 99px;
	font-family: var( --rana-mono );
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	overflow: visible;
}

.rana-header .rana-header-cart .tlr-mini-cart-trigger__count--empty,
.rana-header .rana-header-cart .tlr-mini-cart-trigger__count:empty {
	display: none !important;
}

.rana-header {
	background: rgba( 250, 250, 247, 0.88 );
	backdrop-filter: blur( 14px );
	-webkit-backdrop-filter: blur( 14px );
	border-bottom: 1px solid var( --rana-line );
	transition: box-shadow 0.3s ease;
}

.rana-header.is-scrolled {
	box-shadow: 0 4px 24px rgba( 22, 21, 15, 0.06 );
}

.rana-header .wp-block-site-title a {
	text-decoration: none;
}

.rana-header .wp-block-navigation a:not(.wp-block-button__link) {
	position: relative;
	text-decoration: none;
	transition: color 0.2s ease;
}

.rana-header .wp-block-navigation a:not(.wp-block-button__link)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 100%;
	height: 2px;
	background: var( --rana-green );
	transform: scaleX( 0 );
	transform-origin: right;
	transition: transform 0.3s var( --rana-ease );
}

.rana-header .wp-block-navigation a:not(.wp-block-button__link):hover {
	color: var( --rana-ink );
}

.rana-header .wp-block-navigation a:not(.wp-block-button__link):hover::after {
	transform: scaleX( 1 );
	transform-origin: left;
}

.rana-brand-mark {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
}

.rana-brand-tag {
	font-family: var( --rana-mono );
	font-weight: 400;
	font-size: 0.6rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var( --rana-ink-2 );
	margin-top: 2px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.rana-hero {
	overflow: hidden;
}

.rana-hero h1 {
	color: #fff;
	letter-spacing: -0.03em;
}

.rana-hero h1 .rana-stroke {
	color: transparent;
	-webkit-text-stroke: 1.5px var( --rana-green );
}

.rana-hero p {
	color: #B9B7AC;
	max-width: 46ch;
}

.rana-hero-meta {
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
}

.rana-stat b,
.rana-stat strong {
	font-family: var( --rana-display );
	font-size: 1.5rem;
	font-weight: 700;
	display: block;
	letter-spacing: -0.02em;
}

.rana-stat span {
	font-family: var( --rana-mono );
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8B897E;
}

.rana-hero-photo {
	border-radius: var( --rana-r-lg );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	background:
		radial-gradient( circle at 68% 30%, rgba( 94, 148, 24, 0.28 ), transparent 55% ),
		radial-gradient( circle at 25% 80%, rgba( 193, 39, 45, 0.18 ), transparent 50% ),
		linear-gradient( 160deg, #2A2820, #1B1913 );
	min-height: 440px;
}

/* ── Today strip ─────────────────────────────────────────────────────────── */

.rana-today {
	background: var( --rana-green );
	color: #fff;
}

.rana-today .rana-today-label {
	font-family: var( --rana-mono );
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.85;
}

.rana-today .rana-today-loc {
	font-family: var( --rana-display );
	font-weight: 700;
	font-size: 1rem;
}

.rana-today .rana-today-time {
	font-family: var( --rana-mono );
	font-size: 0.85rem;
	opacity: 0.9;
}

.rana-today a {
	color: #fff;
	font-weight: 600;
	font-size: 0.86rem;
	text-decoration: none;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.5 );
	padding-bottom: 2px;
	transition: border-color 0.2s;
}

.rana-today a:hover {
	border-color: #fff;
}

/* ── Section head ────────────────────────────────────────────────────────── */

.rana-sec-head {
	max-width: 640px;
}

.rana-sec-head p {
	color: var( --rana-ink-2 );
}

.rana-on-dark .rana-sec-head p,
.rana-on-dark p {
	color: #B9B7AC;
}

/* ── How it works (steps) ────────────────────────────────────────────────── */

.rana-steps {
	gap: 1px !important;
	background: rgba( 255, 255, 255, 0.1 );
	border: 1px solid rgba( 255, 255, 255, 0.1 );
	border-radius: var( --rana-r-lg );
	overflow: hidden;
}

.rana-step {
	background: var( --rana-dark-2 );
	transition: background 0.3s ease;
	margin: 0 !important;
}

.rana-step:hover {
	background: #2A2720;
}

.rana-step-num {
	font-family: var( --rana-mono );
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var( --rana-green );
	display: block;
}

.rana-step h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: #fff;
}

.rana-step p {
	color: #A5A398;
	font-size: 0.92rem;
}

/* ── Weekly schedule ─────────────────────────────────────────────────────── */

.rana-sched {
	border: 1px solid var( --rana-line );
	border-radius: var( --rana-r-lg );
	overflow: hidden;
	background: var( --rana-surface );
}

.rana-day {
	display: grid;
	grid-template-columns: 150px 1fr auto;
	gap: 20px;
	align-items: center;
	padding: 22px 32px;
	border-bottom: 1px solid var( --rana-line );
	transition: background 0.2s ease;
	margin: 0 !important;
}

.rana-day:last-child {
	border-bottom: none;
}

.rana-day:hover {
	background: var( --rana-bg );
}

.rana-day.rana-day-today,
.rana-day.rana-day-today:hover {
	background: var( --rana-green-soft );
}

.rana-day-name {
	font-family: var( --rana-display );
	font-weight: 700;
	font-size: 0.98rem;
	margin: 0;
}

.rana-day-badge {
	font-family: var( --rana-mono );
	font-size: 0.58rem;
	letter-spacing: 0.14em;
	background: var( --rana-green );
	color: #fff;
	padding: 2px 9px;
	border-radius: 99px;
	margin-left: 10px;
	vertical-align: middle;
	text-transform: uppercase;
}

.rana-day-loc {
	font-size: 0.94rem;
	color: var( --rana-ink-2 );
	margin: 0;
}

.rana-day-time {
	font-family: var( --rana-mono );
	font-size: 0.82rem;
	color: var( --rana-ink-2 );
	margin: 0;
}

/* ── About ───────────────────────────────────────────────────────────────── */

.rana-about {
	background: var( --rana-surface );
	border-top: 1px solid var( --rana-line );
	border-bottom: 1px solid var( --rana-line );
}

.rana-about-photo {
	aspect-ratio: 4 / 5;
	border-radius: var( --rana-r-lg );
	background:
		radial-gradient( circle at 30% 25%, rgba( 94, 148, 24, 0.22 ), transparent 50% ),
		linear-gradient( 160deg, #EDEBE2, #DDDBD0 );
}

.rana-about-stats {
	border-top: 1px solid var( --rana-line );
}

.rana-about-stats .rana-stat b,
.rana-about-stats .rana-stat strong {
	font-size: 1.8rem;
	font-weight: 800;
}

.rana-about-stats .rana-stat span {
	color: var( --rana-ink-2 );
}

/* ── Catering CTA ────────────────────────────────────────────────────────── */

.rana-catering h2 {
	color: #fff;
	letter-spacing: -0.03em;
}

.rana-catering p {
	color: #B9B7AC;
	max-width: 50ch;
}

/* ── Footer ───────────────────────────────────────────────────── */

.rana-footer h4 {
	font-family: var( --rana-mono );
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --rana-ink-2 );
	font-weight: 500;
}

.rana-footer a {
	text-decoration: none;
	transition: color 0.2s;
}

.rana-footer a:hover {
	color: var( --rana-green );
}

.rana-footer-tag {
	color: var( --rana-ink-2 );
	font-size: 0.9rem;
	max-width: 30ch;
}

.rana-footer-bottom {
	border-top: 1px solid var( --rana-line );
	font-family: var( --rana-mono );
	font-size: 0.75rem;
	color: var( --rana-ink-2 );
}

.rana-footer .wp-block-social-links .wp-social-link {
	border: 1px solid var( --rana-line );
	border-radius: 50%;
	transition: all 0.2s ease;
}

.rana-footer .wp-block-social-links .wp-social-link:hover {
	border-color: var( --rana-ink );
	transform: translateY( -2px );
}

/* ── Mobile navigation drawer ────────────────────────────────────────────────
   The mobile menu is a fully theme-owned drawer (custom toggle + panel in
   parts/header.html, driven by inline JS in functions.php). Its complete CSS
   is INLINED into every page via rana_nav_critical_css() in functions.php so
   it can never be broken by a stale cached copy of this file or by changes
   to core Navigation overlay internals (rebuilt in WP 7.0).
   → Edit the drawer's styles in functions.php, not here.                   */

/* ── Motion safety ─────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	html {
		scroll-behavior: auto;
	}
}

/* ── Responsive ───────────────────────────────────────────────
   Patterns carry desktop paddings inline, so mobile overrides use !important.
   781px = the core/columns stacking breakpoint; 600px / 480px = phones.    */

@media ( max-width: 781px ) {

	/* Section rhythm: 110px desktop → 72px tablet/mobile. */
	.rana-section {
		padding-top: 72px !important;
		padding-bottom: 72px !important;
	}

	.rana-section-sm {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}

	.rana-sec-head {
		margin-bottom: 44px !important;
	}

	/* Hero: tighter meta row, shorter photo panel below the stacked text. */
	.rana-hero-meta {
		gap: 28px !important;
		margin-top: 44px !important;
	}

	.rana-hero-photo {
		min-height: 300px;
	}

	.rana-hero-photo .wp-block-spacer {
		height: 300px !important;
	}

	/* About: cap the photo panel so it doesn't dominate a phone screen. */
	.rana-about-photo {
		aspect-ratio: auto;
	}

	.rana-about-photo .wp-block-spacer {
		height: 340px !important;
	}

	.rana-about-stats {
		gap: 32px !important;
	}

	/* Steps: stacked columns keep the 1px divider look. */
	.rana-steps .rana-step {
		padding: 32px 26px !important;
	}

	/* Header: below the desktop breakpoint the row gets crowded (brand +
	   tagline + nav + Order button + cart). Hide the redundant compact
	   "Order Online" button — the hamburger menu and the mini-cart already
	   cover ordering — and keep everything on one line so the label can
	   never wrap character-by-character. */
	.rana-header .rana-btn-compact {
		display: none !important;
	}

	.rana-header .wp-block-group {
		flex-wrap: nowrap;
		gap: 14px;
	}

	.rana-brand-tag {
		display: none;
	}
}

@media ( max-width: 600px ) {

	.rana-section {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}

	/* Schedule rows collapse to a single column. */
	.rana-day {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 18px 22px;
	}

	/* Hero CTAs: full-width tap targets for one-thumb ordering. */
	.rana-hero .wp-block-buttons {
		width: 100%;
	}

	.rana-hero .wp-block-button {
		width: 100%;
	}

	.rana-hero .wp-block-button__link {
		width: 100%;
		display: block;
		text-align: center;
	}

	/* Footer bottom bar stacks. */
	.rana-footer-bottom {
		flex-direction: column;
		gap: 6px;
	}
}

@media ( max-width: 480px ) {

	/* Header: drop the tagline, tighten gaps so brand + hamburger +
	   cart fit a 360px viewport without wrapping. */
	.rana-brand-tag {
		display: none;
	}

	.rana-header {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.rana-header .wp-block-group {
		gap: 10px;
	}

	.rana-header .wp-block-button__link {
		padding: 10px 16px !important;
		font-size: 0.78rem !important;
		white-space: nowrap;
	}

	.rana-header .wp-block-site-title {
		font-size: 0.92rem !important;
	}

	/* Today strip stacks cleanly. */
	.rana-today .wp-block-group {
		gap: 6px 16px;
	}
}

/* Ensure comfortable tap targets on any touch device. */
@media ( hover: none ) and ( pointer: coarse ) {
	.rana-header .wp-block-navigation a,
	.rana-footer a,
	.wp-block-button__link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}