/*
 * Horseman — CSS sandbox.
 *
 * Loads after the entire Darkhorse system and the child style.css, so
 * anything you write here wins ties. Guidelines:
 *
 *  - Prefer the theme's tokens over raw values so your rules follow
 *    every style/character switch automatically:
 *      color:    var(--wp--preset--color--primary)   (secondary, accent,
 *                base, contrast, muted, surface, outline)
 *      spacing:  var(--wp--preset--spacing--50)      (30–90)
 *      radius:   var(--wp--custom--radius--m)        (s, m, l, xl)
 *      gradient: var(--dh-gradient)
 *  - Scope rules to a class you add in the editor (e.g. .my-hero)
 *    rather than restyling theme classes broadly.
 *  - Front end only — the editor canvas does not load this file.
 */

/* ======================================================================
 * Rustica header personality
 * Opt in per feature by adding CSS classes to the HEADER TEMPLATE PART
 * (Site Editor → header part → Advanced → Additional CSS classes):
 *
 *   hm-brick-wall  — faded brick texture behind the header bar that
 *                    slides with the page scroll, so the header reads
 *                    as riding down a brick wall. Pairs with the
 *                    transparent header-surface effect.
 *   hm-rooster     — the logo rolls into the open menu overlay and
 *                    lands a little cock-eyed. Also a small hover tilt.
 *
 * Both follow the Studio palette via preset vars where possible and
 * respect prefers-reduced-motion.
 * ==================================================================== */

#reserve-a-table a {
	box-shadow:
		4px 4px 0 0
		color-mix(in srgb, 
			var(--wp--preset--color--primary) 62%, 
			var(--wp--preset--color--contrast)
		),
		inset 0 0 0 -4px
		color-mix(in srgb,
			var(--wp--preset--color--primary) 54%,
			var(--wp--preset--color--contrast)
		);
	transform: translate(0, 0);
}
#reserve-a-table a:hover {
	box-shadow:
		0 0 0 -4px
		color-mix(in srgb, 
			var(--wp--preset--color--primary) 62%, 
			var(--wp--preset--color--contrast)
		),
		inset 2px 2px 0.667px 4px
		color-mix(in srgb,
			var(--wp--preset--color--primary) 54%,
			var(--wp--preset--color--contrast)
		);
	border-color: color-mix(in srgb,
		var(--wp--preset--color--primary) 54%,
		var(--wp--preset--color--outline)
	);
	transform: translate(4px, 4px);
}

header > .is-scrolled .signpost {
	box-shadow: 0.5px 0.5px 1.5px 0 var(--dh-muted, black);
}

/* ---- brick blade-sign wall ----------------------------------------- */

/* A small sketched-brick panel BEHIND the logo only — like an alley wall
 * a round sign hangs off. Perspective recedes to the RIGHT (left edge
 * closest), a soft shadow gives it depth, and the bricks slide vertically
 * with the page scroll (horseman.js drives --hm-wall-y) so the sign reads
 * as riding down the wall. The logo casts its own shadow onto the panel.
 * Comic-sketch strokes: hand-wobbled paths, two-pass line work. */
.hm-brick-wall .wp-block-site-logo {
	position: relative;
}

.hm-brick-wall .wp-block-site-logo::before {
	content: "";
	position: absolute;
	top: -14px;
	bottom: -14px;
	left: -26px;
	width: 215px;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(90deg, rgba(26, 12, 5, 0) 35%, rgba(26, 12, 5, 0.28) 100%),
		url('data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27200%27%20height=%2796%27%3E%3Cg%20fill=%27none%27%20stroke-linecap=%27round%27%3E%3Cpath%20d=%27M%20-0.1%200.2%20Q%2030.9%200.0%2062.1%20-1.0%20Q%2088.9%200.5%20115.5%20-0.2%20Q%20135.7%201.4%20158.3%20-1.5%20Q%20180.5%200.7%20200.2%20-1.1%20M%2010.8%201.3%20L%2012.1%2021.5%20M%2075.4%201.9%20L%2073.7%2021.9%20M%20140.8%202.2%20L%20140.1%2022.0%20M%200.3%2023.9%20Q%2022.7%2024.2%2046.7%2022.7%20Q%2068.4%2022.8%2091.7%2022.6%20Q%20121.7%2022.3%20153.7%2022.6%20Q%20174.1%2021.8%20191.5%2025.3%20Q%20195.6%2024.9%20199.9%2024.2%20M%2043.3%2025.7%20L%2044.8%2045.7%20M%20106.8%2026.7%20L%20107.6%2045.4%20M%20172.5%2025.9%20L%20169.7%2046.0%20M%200.3%2047.0%20Q%2026.0%2049.0%2053.4%2048.5%20Q%2074.2%2050.2%2094.2%2049.2%20Q%20122.4%2049.7%20150.5%2047.7%20Q%20176.0%2046.2%20200.8%2047.1%20M%2011.4%2049.7%20L%2013.3%2069.7%20M%2075.0%2050.1%20L%2074.0%2069.6%20M%20140.2%2049.9%20L%20139.4%2070.7%20M%20-0.0%2072.2%20Q%2024.0%2070.5%2050.7%2073.0%20Q%2073.2%2070.5%2095.2%2072.2%20Q%20125.9%2073.7%20154.2%2071.7%20Q%20173.2%2072.1%20194.6%2072.8%20Q%20196.7%2073.4%20200.2%2071.3%20M%2043.2%2073.3%20L%2045.1%2093.6%20M%20108.1%2074.2%20L%20109.7%2093.6%20M%20173.0%2073.2%20L%20170.6%2093.6%20M%20120%2034%20l%205%202%20M%2051%2039%20l%207%204%20M%20152%2019%20l%205%203%20M%2041%2060%20l%207%204%20M%20182%2069%20l%209%202%20M%20157%207%20l%205%203%20M%2097%2042%20l%205%202%20M%20159%2084%20l%205%203%20M%2023%2042%20l%207%202%20M%2024%2012%20l%208%204%27%20stroke=%27%2333241a%27%20stroke-opacity=%270.38%27%20stroke-width=%271.6%27/%3E%3Cpath%20transform=%27translate(1.2%201)%27%20d=%27M%20-0.1%200.2%20Q%2030.9%200.0%2062.1%20-1.0%20Q%2088.9%200.5%20115.5%20-0.2%20Q%20135.7%201.4%20158.3%20-1.5%20Q%20180.5%200.7%20200.2%20-1.1%20M%200.3%2023.9%20Q%2022.7%2024.2%2046.7%2022.7%20Q%2068.4%2022.8%2091.7%2022.6%20Q%20121.7%2022.3%20153.7%2022.6%20Q%20174.1%2021.8%20191.5%2025.3%20Q%20195.6%2024.9%20199.9%2024.2%20M%200.3%2047.0%20Q%2026.0%2049.0%2053.4%2048.5%20Q%2074.2%2050.2%2094.2%2049.2%20Q%20122.4%2049.7%20150.5%2047.7%20Q%20176.0%2046.2%20200.8%2047.1%20M%20-0.0%2072.2%20Q%2024.0%2070.5%2050.7%2073.0%20Q%2073.2%2070.5%2095.2%2072.2%20Q%20125.9%2073.7%20154.2%2071.7%20Q%20173.2%2072.1%20194.6%2072.8%20Q%20196.7%2073.4%20200.2%2071.3%27%20stroke=%27%2333241a%27%20stroke-opacity=%270.14%27%20stroke-width=%271%27/%3E%3C/g%3E%3C/svg%3E'),
		linear-gradient(color-mix(in srgb, var(--wp--preset--color--base, #f7f0e3) 55%, transparent), color-mix(in srgb, var(--wp--preset--color--base, #f7f0e3) 55%, transparent));
	background-size: 100% 100%, 200px 96px, 100% 100%;
	background-position: 0 0, 0 var(--hm-wall-y, 0px), 0 0;
	transform: perspective(320px) rotateY(24deg);
	transform-origin: left center;
	filter: drop-shadow(10px 14px 12px rgba(26, 12, 5, 0.35));
	-webkit-mask-image: radial-gradient(135% 150% at 0% 50%, #000 52%, transparent 96%);
	mask-image: radial-gradient(135% 150% at 0% 50%, #000 52%, transparent 96%);
}

/* The sign hangs off the wall: its own thrown shadow, down and right. */
.hm-brick-wall .wp-block-site-logo img {
	filter: drop-shadow(9px 12px 10px rgba(26, 12, 5, 0.45));
}

/* ---- rooster roll ---------------------------------------------------- */

.hm-rooster .wp-block-site-logo img {
	transition: transform 420ms cubic-bezier(0.34, 1.3, 0.4, 1);
	will-change: transform;
	transform-origin: 50% 50%;
}

/* whimsy at rest: a little head-tilt on hover */
.hm-rooster .wp-block-site-logo a:hover img {
	transform: rotate(8deg);
}

/* Menu open: float the brand above core's overlay (it sits at
 * z-index 100000 inside the header) and roll the rooster in. */
.hm-rooster:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-site-logo {
	position: relative;
	z-index: 100001;
}

.hm-rooster:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-site-logo img {
	animation: hm-rooster-roll 900ms cubic-bezier(0.34, 1.3, 0.4, 1) both;
}

@keyframes hm-rooster-roll {
	0% {
		transform: translateX(-56vw) rotate(-520deg);
	}
	70% {
		transform: translateX(0) rotate(7deg);
	}
	85% {
		transform: rotate(-14deg);
	}
	100% {
		transform: rotate(-9deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hm-rooster:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-site-logo img {
		animation: none;
		transform: rotate(-9deg);
	}
}

/* ======================================================================
 * Rustica menu templates (single-menu-item / generic taxonomy-menu rows).
 * The printed menus (archive / dinner / drinks) are Final Blocks parts and
 * carry their own styles; nothing for them lives here.
 * ==================================================================== */

.rustica-item-terms,
.rustica-menu-eyebrow {
	font-family: var(--wp--preset--font-family--dh-heading);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.rustica-item-terms a,
.rustica-menu-eyebrow a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.rustica-item-terms a:hover,
.rustica-menu-eyebrow a:hover {
	color: var(--wp--preset--color--secondary);
}

.rustica-price-wrap {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	white-space: nowrap;
}

.rustica-price {
	font-family: var(--wp--preset--font-family--dh-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--wp--preset--color--contrast);
}

.rustica-price-hh {
	font-family: var(--wp--preset--font-family--dh-heading);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.rustica-item-lede p {
	max-width: 60ch;
}

.rustica-menu-row {
	border-bottom: 1px solid var(--wp--preset--color--outline);
}

.rustica-menu-row .wp-block-post-title a {
	text-decoration: none;
}

.rustica-menu-row .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

.rustica-menu-row .wp-block-post-excerpt__excerpt {
	margin: 0;
	max-width: 56ch;
}

.rustica-tags-line {
	font-family: var(--wp--preset--font-family--dh-heading);
	letter-spacing: 0.06em;
}

.rustica-menu-index a {
	font-family: var(--wp--preset--font-family--dh-heading);
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.rustica-menu-index a:hover {
	color: var(--wp--preset--color--primary);
}

/* Safari: a live feTurbulence grain at background-size:cover (and
 * no-repeat) rasterizes the filter at the full band size. Tile the
 * 240px SVG instead. Doubled uid beats the block's own sheet. */
.fb-h1jpsijp.fb-h1jpsijp {
	background-size: 240px !important;
	background-repeat: repeat !important;
}

/* ======================================================================
 * Printed menus (Final Blocks parts) — tiny hooks only
 * ==================================================================== */

/* Item names stay rust, descriptions muted, when a term/style switch
 * remaps the palette (the parts read the presets, this pins the pair). */
.rustica-menu-food h3 a,
.rustica-menu-wine h3 a,
.rustica-menu-cocktails h3 a {
	color: #a5551e;
}

/* Sections never split across print pages / multi-column fallbacks. */
.rustica-menu-food section,
.rustica-menu-wine section,
.rustica-menu-cocktails section {
	break-inside: avoid;
}

/* Wine and cocktail anchors clear the sticky header when jumped to. */
#wine,
#cocktails {
	scroll-margin-top: 6rem;
}

}

/* ======================================================================
 * Lesser menus (dessert, pasta, wine – red …) — templates/taxonomy-menu +
 * parts/menu-section-lite. One printed-menu section (the dinner part's
 * heading and row values, mirrored here so the section reads as a
 * clipping from that page) beside a small menu switcher. Dinner, Drinks
 * and the top-level archive keep their own templates and are untouched.
 * ==================================================================== */

/* Doubled class: the theme's flow-layout rule pins display on
 * .wp-block-group-is-layout-flow and outranks a lone class. */
.rustica-menu-lite.rustica-menu-lite {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
}

.rustica-menu-lite__section {
	flex: 1 1 22rem;
	min-width: 0;
}

.rustica-menu-lite__nav {
	flex: 0 1 12rem;
}

@media (min-width: 768px) {
	.rustica-menu-lite__section {
		max-width: 50%;
	}

	.rustica-menu-lite__nav {
		position: sticky;
		top: 6rem;
	}
}

/* Section heading — the dinner part's h2 values. */
.rustica-menu-lite__title {
	font-family: var(--wp--preset--font-family--dh-heading);
	font-weight: 400;
	font-size: 1.55rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: lowercase;
	text-align: center;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.9rem;
	padding-bottom: 0.28rem;
	border-bottom: 2.5px solid var(--wp--preset--color--contrast);
}

.rustica-menu-lite__item {
	margin: 0 0 0.95rem;
	break-inside: avoid;
}

.rustica-menu-lite__item .wp-block-post-title {
	font-family: var(--wp--preset--font-family--dh-heading);
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}

.rustica-menu-lite__item .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.rustica-menu-lite__item .wp-block-post-title a:hover {
	color: var(--wp--preset--color--secondary);
}

/* Description and price run INLINE like the printed line
 * ("…lemon zest | 25") — a flex row wrapped the price onto its own
 * line whenever the description broke. */
.rustica-menu-lite__meta.rustica-menu-lite__meta {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--wp--preset--font-family--dh-body);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.rustica-menu-lite__meta .wp-block-post-excerpt,
.rustica-menu-lite__meta .wp-block-post-excerpt__excerpt,
.rustica-menu-lite__meta p,
.rustica-menu-lite__meta .rustica-price-wrap {
	display: inline;
	margin: 0;
}

.rustica-menu-lite__meta .rustica-price {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

.rustica-menu-lite__meta .rustica-price::before {
	content: "| ";
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

/* The switcher: a quiet list, current menu lit. */
.rustica-menu-lite__nav-title {
	font-family: var(--wp--preset--font-family--dh-heading);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.6rem;
}

.rustica-menu-lite__nav-list,
.rustica-menu-lite__nav-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rustica-menu-lite__nav-list ul {
	margin: 0.15rem 0 0.5rem 0.85rem;
}

.rustica-menu-lite__nav-list li {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--dh-heading);
	font-size: 0.9rem;
	line-height: 1.35;
}

.rustica-menu-lite__nav-list > li {
	font-weight: 700;
	text-transform: lowercase;
}

.rustica-menu-lite__nav-list ul li {
	font-weight: 400;
	text-transform: none;
}

.rustica-menu-lite__nav-list a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.rustica-menu-lite__nav-list a:hover {
	color: var(--wp--preset--color--primary);
}

.rustica-menu-lite__nav-list .current-cat > a {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}