/*
 * Saigon After Dark — locked direction (gstack, Set 2-A), CLAUDE.md §8 2026-06-30
 * Dark atmospheric palette, brass/gold on near-black, full-bleed hero photography.
 */

:root {
	/* Tells the browser this page is dark-themed so native form controls,
	   scrollbars, and default UI chrome render in dark mode instead of the
	   browser/OS default (matters most on Windows: native <select>s and
	   scrollbars otherwise stay light against this dark design). */
	color-scheme: dark;

	/* Per the gstack source, the page alternates two near-black tones for
	   section separation: #23272e (default — body, Welcome, Reviews, cards)
	   and #1c2025 (raised accent — header, Chef's Recommendation, Visit Us).
	   Keep these names/usages straight; mixing them up flattens the page. */
	--sad-bg: #23272e;
	--sad-bg-raised: #1c2025;
	--sad-gold: #BFA14A;
	--sad-gold-light: #D8C27A;
	--sad-cream: #E4D9B5;
	--sad-text: #EDEAE2;
	--sad-text-muted: #B7B2A5;

	--sad-white: #fff;

	--sad-font-display: "Cormorant Garamond", serif;
	--sad-font-heading: "Poppins", sans-serif;
	--sad-font-body: "Lato", sans-serif;

	/* Matches the gstack source's .stage{max-width:1280px} — the overall
	   page container width every section is consistently contained to. */
	--sad-stage: 1280px;
}

body {
	background-color: var(--sad-bg);
	color: var(--sad-text);
	font-family: var(--sad-font-body);
}

/* The "full-width content" page layout setting used on this page makes
   GeneratePress's .site grid-container sit flush against the left edge
   (left:0) instead of centered in the viewport. Every full-bleed section
   below uses width:100vw + margin:calc(50% - 50vw) to break out of its
   parent, which only computes the correct offset if that parent is
   symmetrically centered — with .site flush-left, the math came out wrong
   by exactly .site's own missing right-side offset, shifting every section
   left and leaving a blank gap on the right. Forcing .site back to centered
   fixes the assumption for all of them at once. */
html body .site {
	margin-left: auto !important;
	margin-right: auto !important;
}

body,
.site,
.site-content,
#content,
.inside-article,
.entry-content,
.site-content .content-area,
.content-area,
article.page,
.site-main {
	background-color: var(--sad-bg) !important;
	margin: 0 !important;
}

.page .inside-article {
	padding: 0 !important;
}

.page .entry-header,
.page.home .entry-title,
.page-header-image {
	display: none;
}

/* Scoped to .page (not a bare .entry-content) on purpose: the reset-list
   rule above also matches plain .entry-content with the same !important
   margin:0, so on a bare selector these two rules tie in specificity and
   whichever wins is decided by file order alone — reorder the stylesheet
   and this silently breaks. Adding .page here gives this rule a genuine,
   unambiguous specificity edge for the page-header-gap fix it exists for
   (see the 2026-06-30 "Stray top/bottom bars fixed" log entry in CLAUDE.md).
   Safe for single blog posts too: they're body.single, not body.page, so
   this rule simply doesn't apply there — but the reset-list rule above is
   unscoped and already zeroes their .entry-content margin the same way. */
.page .entry-content {
	margin: 0 !important;
	padding: 0;
	max-width: none;
}

/* Sections are full-bleed (background spans the true browser viewport
   width); only the .sad-inner wrapper inside each one is constrained to
   --sad-stage and centered. This matches the mockup's pattern of clean
   full-width section bands with contained content, instead of the whole
   section (background included) floating as a boxed card.

   width:100% alone isn't enough here: GeneratePress nests page content
   inside its own narrower content-area wrapper (~1120px, confirmed via
   computed styles), so a "full width" section only fills that inner
   wrapper, not the real viewport. The 100vw/negative-margin pair breaks
   the section out to the actual edge of the browser regardless of how
   narrow its parent is. Applied directly to each section selector below
   rather than via an extra HTML class. */
.sad-inner {
	max-width: var(--sad-stage);
	margin-left: auto;
	margin-right: auto;
	padding-left: 64px;
	padding-right: 64px;
}

/* No blanket heading color here — per the gstack source, headings split
   between gold (.story/.chef/.visit h2), white (hero h1, card h3), and
   cream (review quote, nav links). Color is set per-context below. */
h1, h2, h3,
.gb-headline {
	font-family: var(--sad-font-display);
	font-weight: 600;
}

.sad-section-centered h2,
.sad-section-raised h2,
.sad-visit h2 {
	color: var(--sad-gold);
}

h4, h5, h6,
.site-title,
.main-navigation a {
	font-family: var(--sad-font-heading);
}

a {
	color: var(--sad-gold-light);
}

a:hover {
	color: var(--sad-gold);
}

.site-header,
.main-navigation {
	background-color: var(--sad-bg-raised);
	border-color: rgba(191, 161, 74, 0.25);
}

.site-footer {
	border-color: rgba(191, 161, 74, 0.25);
}

.main-navigation a {
	color: var(--sad-text);
}

.main-navigation a:hover {
	color: var(--sad-gold);
}

/* GeneratePress sets line-height:60px on every nav link (.main-nav ul li a)
   to vertically-center them against a tall default header — that's what was
   still inflating the header's open vertical space after the nav-cta fix.
   The mockup's header has no such oversized line-height. */
.main-navigation .main-nav ul li a {
	line-height: normal !important;
}

/* Nav links measured ~22px tall (below the 44px touch-target minimum used
   elsewhere on the site, e.g. the Menu page's filter buttons). Expand the
   clickable box to 44px via padding, canceled by an equal negative margin,
   so the tap target grows without changing the header's visual height or
   the already-approved homepage layout. Re-verified via screenshot after
   this change (CLAUDE.md §8, 2026-07-01). */
.main-navigation .main-nav ul li a {
	display: inline-block;
	padding-top: 11px !important;
	padding-bottom: 11px !important;
	margin-top: -11px;
	margin-bottom: -11px;
}

.main-title,
.main-title a,
.site-header .main-title a {
	color: var(--sad-gold) !important;
	font-family: var(--sad-font-display);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Custom Logo (added 2026-07-02, CLAUDE.md §8): GP renders the uploaded
   logo image at its native pixel size with no size constraint of its own,
   which broke the header entirely (1186x1200px image inside a ~70px-tall
   header). Constrain to the header's established height. User feedback
   2026-07-02: keep the "Hai Chi Em" wordmark text alongside the logo image
   (as before), not hidden — sit them side by side with the same spacing
   the header had before the logo was added. */
.site-branding-container {
	display: flex;
	align-items: center;
	gap: 14px;
}

.site-logo img.header-image.is-logo-image {
	height: 34px;
	width: auto;
	max-width: none;
}

.site-description {
	color: var(--sad-cream) !important;
	font-family: var(--sad-font-display);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.main-navigation ul li a,
.main-navigation .menu-item a {
	color: var(--sad-text) !important;
}

.main-navigation ul li a:hover,
.main-navigation .menu-item a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--sad-gold) !important;
}

.main-navigation .sub-menu {
	background-color: var(--sad-bg-raised);
	border: 1px solid rgba(191, 161, 74, 0.2);
}

.main-navigation .nav-cta-item {
	display: flex;
	align-items: center;
}

.main-navigation .main-nav ul li.nav-cta-item a.nav-cta,
.main-navigation a.nav-cta {
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important;
	height: auto !important;
	background-color: var(--sad-gold) !important;
	color: var(--sad-bg-raised) !important;
	font-family: var(--sad-font-heading);
	font-weight: 600;
	font-size: 14px;
	line-height: 1 !important;
	padding: 9px 18px !important;
	padding-left: 18px !important;
	padding-right: 18px !important;
	border-radius: 4px;
	margin-left: 8px;
}

.main-navigation a.nav-cta:hover {
	background-color: var(--sad-gold-light) !important;
	color: var(--sad-bg-raised) !important;
}

/* The dropdown's own Order Online pill is redundant on mobile now that the
   fixed .sad-mobile-order-bar (see functions.php, wp_footer) already gives
   a persistent ordering CTA — having both stacked right next to each other
   when the menu is open reads as crowded. Desktop keeps the inline CTA. */
@media (max-width: 782px) {
	.main-navigation .nav-cta-item {
		display: none;
	}
}

.menu-toggle .gp-icon {
	color: var(--sad-cream);
}

/* Persistent mobile "Order Online" CTA bar — see functions.php wp_footer
   hook for the markup/why. Desktop already has the header's inline CTA
   visible, so this is hidden above the 782px breakpoint used elsewhere on
   the site. body padding-bottom on mobile keeps the fixed bar from
   permanently covering the last row of footer content. */
.sad-mobile-order-bar {
	display: none;
}

@media (max-width: 782px) {
	body {
		padding-bottom: 72px;
	}

	.sad-mobile-order-bar {
		display: flex;
		justify-content: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background-color: var(--sad-bg-raised);
		border-top: 1px solid rgba(191, 161, 74, 0.35);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
	}

	.sad-mobile-order-bar a {
		display: block;
		width: 100%;
		max-width: 420px;
		min-height: 44px;
		line-height: 20px;
		text-align: center;
		background-color: var(--sad-gold) !important;
		color: var(--sad-bg-raised) !important;
		font-family: var(--sad-font-heading);
		font-weight: 600;
		font-size: 15px;
		padding: 12px 20px;
		border-radius: 999px;
	}

	.sad-mobile-order-bar a:hover {
		background-color: var(--sad-gold-light) !important;
	}
}

.site-footer,
.site-footer a,
.site-info {
	color: #8a8470 !important;
	background-color: #15181c !important;
}

/* GeneratePress makes .inside-site-info a flex row with justify-content:
   center by default, which shrink-wraps and centers our .sad-footer-inner
   (itself a flex row) instead of letting it fill the row edge to edge —
   that's why the link group was rendering centered instead of right-aligned.
   Forcing this back to a plain block box lets .sad-footer-inner's own
   width:100% + justify-content:space-between actually take effect. */
.site-info .inside-site-info {
	display: block !important;
	max-width: var(--sad-stage);
	margin: 0 auto;
	padding: 0;
}

/* Footer content — brand/copyright, quick links. Previously a 3-column
   1fr/1fr/1.3fr grid with a compact email signup as the third column —
   dropped 2026-07-02 (user feedback: it duplicated the dedicated "Get
   First Dibs on Specials" section immediately above the footer, especially
   noticeable on mobile scroll). With only 2 short columns left, an even
   1fr/1fr grid stretched them across the full width and left a large dead
   gap on the right — same "wasted space" problem this footer already had
   once before. Flex + gap keeps both columns their natural content width
   instead of stretching. See functions.php generate_credits hook. */
.sad-footer-inner {
	display: flex;
	gap: 96px;
	width: 100%;
	padding: 40px 64px;
	/* GeneratePress's .site-info default is text-align:center; without an
	   explicit override here it silently centers text inside each column
	   while block elements (like the footer logo image) stay flush-left,
	   which is what caused the logo and the brand text below it to look
	   misaligned instead of forming one clean left-aligned stack. */
	text-align: left;
	font-family: var(--sad-font-heading);
	font-size: 13px;
}

.sad-footer-logo {
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 0 12px;
}

@media (max-width: 782px) {
	.sad-footer-logo {
		margin: 0 auto 12px;
	}
}

.sad-footer-brand-name {
	color: var(--sad-cream);
	font-family: var(--sad-font-display);
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 6px;
}

.sad-footer-copy {
	margin: 0;
}

.sad-footer-col-label {
	color: var(--sad-text-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.sad-footer-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sad-footer-links a {
	color: var(--sad-gold) !important;
	text-decoration: none;
	margin-left: 0;
}

.site-footer a:hover {
	color: var(--sad-gold) !important;
}

@media (max-width: 782px) {
	.sad-footer-inner {
		flex-direction: column;
		text-align: center;
		gap: 28px;
	}

	.sad-footer-col-links {
		order: 1;
	}

	.sad-footer-brand {
		order: 2;
	}

	.sad-footer-links {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 16px;
	}
}

/* Buttons / GenerateBlocks button blocks */
.gb-button,
.wp-block-button__link,
.wp-block-button .wp-block-button__link,
.entry-content .wp-block-button__link,
button,
input[type="submit"] {
	background-color: var(--sad-gold) !important;
	color: var(--sad-bg-raised) !important;
	font-family: var(--sad-font-heading);
	font-weight: 600;
	border-radius: 4px !important;
	border: none !important;
	/* Every custom tap target site-wide (filter pills, accordion questions,
	   category labels, lightbox controls) is a real <button>, so this one
	   rule covers all of them: removes the ~300ms double-tap-zoom delay on
	   touch browsers instead of adding it per-component. */
	touch-action: manipulation;
}

.gb-button:hover,
.wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover,
.entry-content .wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
	background-color: var(--sad-gold-light) !important;
	color: var(--sad-bg-raised) !important;
}

.is-style-outline .wp-block-button__link,
.entry-content .is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--sad-gold) !important;
	border: 1px solid var(--sad-gold) !important;
}

.is-style-outline .wp-block-button__link:hover,
.entry-content .is-style-outline .wp-block-button__link:hover {
	background-color: var(--sad-gold) !important;
	color: var(--sad-bg-raised) !important;
}

/* Hero section */
.hero-saigon-after-dark {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 560px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--sad-bg);
	background-size: cover;
	background-position: center;
}

.hero-saigon-after-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(20,22,26,.62), rgba(20,22,26,.72));
}

.hero-saigon-after-dark .hero-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	padding: 0 24px;
}

.hero-saigon-after-dark h1 {
	color: var(--sad-white);
	font-size: 64px;
	line-height: 1.05;
	margin-bottom: 22px;
}

@media (max-width: 900px) {
	.hero-saigon-after-dark h1 {
		font-size: 42px;
	}
}

.hero-kicker {
	font-family: var(--sad-font-heading);
	color: var(--sad-gold);
	font-size: 12px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.hero-lede {
	font-family: var(--sad-font-body);
	color: #cfc7ad;
	font-size: 17px;
	line-height: 1.7;
	max-width: 520px;
	margin: 0 0 30px;
}

.hero-buttons {
	margin: 0;
}

/* Core WP block-library CSS (which normally makes .wp-block-buttons a flex
   row) only loads when WordPress detects real parsed block comments in the
   post content. The About page's buttons are raw HTML with block-matching
   classes but no wp: comments, so that CSS never loads and rows collapsed
   to stacked full-width blocks. Provide the flex behavior directly instead
   of depending on block-parsing. */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wp-block-buttons .wp-block-button {
	width: auto;
}

.wp-block-buttons .wp-block-button__link {
	display: inline-block;
	padding: 12px 24px;
}

/* Left-aligned hero variant (matches approved Saigon After Dark mockup).
   Unlike the centered sections below, the hero's content is NOT wrapped in
   .sad-inner (the 1280px-centered container) — the mockup's hero text hugs
   the section's true left edge with a fixed 64px inset at any viewport
   width. Nesting it in a centered 1280 box instead pushed the text further
   right/toward the middle as the browser got wider than 1280, which is
   exactly the drift a direct screenshot comparison caught. */
.hero-saigon-after-dark.hero-left {
	justify-content: flex-start;
	text-align: left;
}

.hero-saigon-after-dark.hero-left .hero-inner {
	max-width: 720px;
	padding: 0 64px;
}

/* Section rhythm + dividers, matching the approved mockup. Sections are
   full-width bands (vertical padding only); .sad-inner (above) handles the
   --sad-stage contained width so left/right edges line up consistently
   across hero/welcome/chef/visit without boxing the section backgrounds. */
.sad-section-centered {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 80px 0;
	text-align: center;
}

.sad-section-centered p {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.sad-section-raised {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--sad-bg-raised);
	padding: 30px 0 90px;
}

.sad-divider {
	width: 70px;
	height: 2px;
	background-color: var(--sad-gold);
	margin: 18px auto 26px;
}

.sad-reviews {
	padding: 70px 0;
}

.sad-reviews .sad-stars {
	color: var(--sad-gold);
	font-size: 1.5rem;
	letter-spacing: 4px;
	margin-bottom: 18px;
}

.sad-review-quote {
	font-family: var(--sad-font-display);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--sad-cream);
	max-width: 640px;
	margin: 0 auto 14px;
}

.sad-review-author {
	font-family: var(--sad-font-heading);
	color: var(--sad-gold);
}

/* Visit Us split section — the <section> is the full-bleed background band;
   .sad-visit-grid (combined with .sad-inner) is the contained photo+info
   grid. Unlike the text sections, the grid itself has no horizontal padding
   in the source spec — the photo should reach the stage's edges, with
   padding only inside .sad-visit-info — so cancel .sad-inner's default
   64px padding for this one case. */
.sad-visit {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--sad-bg-raised);
}

.sad-visit-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 480px;
	padding-left: 0;
	padding-right: 0;
}

.sad-visit-photo {
	background-size: cover;
	background-position: center;
	min-height: 320px;
}

.sad-visit-info {
	background-color: var(--sad-bg-raised);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px;
}

.sad-visit-row {
	color: #cfc7ad;
	font-size: 15px;
	margin: 0 0 10px;
}

.sad-visit-hours {
	color: var(--sad-gold);
	font-family: var(--sad-font-heading);
	margin: 14px 0 26px;
}

/* Visit Us hours — reuses the Contact page's stacked .sad-hours-card/
   .sad-hours-list component (day + time on their own row, Tue closed
   called out in gold) instead of the original single dense line
   ("Mon, Wed, Thu, Sun · 11–9 | Fri, Sat · 11–11 | Tue closed"), which was
   hard to scan at a glance. Left-aligned here (not centered) to match the
   address/phone lines above it in this left-aligned info panel, unlike
   the Contact page's centered usage.
   NOTE: this must be the combined ".sad-hours-card.sad-visit-hours-card"
   selector, not ".sad-visit-hours-card" alone — the base ".sad-hours-card"
   rule (margin: 0 auto) is defined *later* in this file, and with equal
   single-class specificity the later rule wins regardless of source
   order intent. That's exactly what happened here: this override was
   silently losing to the base rule's margin:auto, shifting the whole
   hours block ~115px right of the address text above it — looked like
   the rows themselves were still misaligned, but it was actually the
   entire block sitting in the wrong horizontal position. Two classes
   beats one, so the combined selector guarantees this wins regardless of
   where either rule sits in the file. */
.sad-hours-card.sad-visit-hours-card {
	max-width: none;
	margin: 14px 0 26px;
}

@media (max-width: 782px) {
	.sad-visit-grid {
		grid-template-columns: 1fr;
	}
}

/* Menu card grid */
.menu-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

@media (max-width: 782px) {
	.menu-card-grid {
		grid-template-columns: 1fr;
	}
}

.menu-card {
	display: block;
	background-color: var(--sad-bg);
	border: 1px solid #3a3f47;
	border-radius: 6px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.menu-card:hover {
	color: inherit;
}

.menu-card:hover {
	border-color: var(--sad-gold);
	transform: translateY(-2px);
}

.menu-card img,
.menu-card .wp-block-image img {
	height: 230px;
	width: 100%;
	object-fit: cover;
	display: block;
}

.menu-card-body {
	padding: 20px;
}

.menu-card-title {
	font-family: var(--sad-font-display);
	color: var(--sad-white);
	font-size: 1.4rem;
	margin: 0 0 6px;
}

.menu-card-desc {
	color: var(--sad-text-muted);
	font-family: var(--sad-font-body);
	font-size: 0.85rem;
	line-height: 1.5;
	margin: 0 0 10px;
}

.menu-card-price {
	color: var(--sad-gold);
	font-family: var(--sad-font-heading);
	font-weight: 600;
	margin: 0;
}

/* Menu page header ("Our Menu") — reuses .sad-section-centered's rhythm */
.sad-section-centered h1 {
	color: var(--sad-white);
}

/* Menu page: sticky search + category filter controls, product grid
   (66 products, all 9 WooCommerce categories represented — CLAUDE.md
   decision 2026-07-01, no category reachable only via "All"). Sticky so
   customers can search/switch category without scrolling back to the top
   of a ~9,000px page — flagged by both design critiques 2026-07-01. */
.sad-menu-controls {
	position: sticky;
	top: 72px;
	z-index: 20;
	background-color: var(--sad-bg);
	padding: 16px 0;
	margin-bottom: 24px;
}

.sad-menu-search {
	display: flex;
	justify-content: center;
	margin-bottom: 14px;
}

.sad-menu-search input {
	width: 100%;
	max-width: 420px;
	padding: 10px 18px;
	font-family: var(--sad-font-body);
	font-size: 15px;
	color: var(--sad-text);
	background-color: var(--sad-bg-raised);
	border: 1px solid rgba(191, 161, 74, 0.35);
	border-radius: 999px;
}

.sad-menu-search input::placeholder {
	color: var(--sad-text-muted);
}

.sad-menu-search input:focus {
	outline: 2px solid var(--sad-gold);
	outline-offset: 1px;
}

.sad-menu-empty {
	text-align: center;
	color: var(--sad-text-muted);
	margin: 0 0 24px;
}

.sad-menu-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* !important needed: GeneratePress's own generic button styling otherwise
   wins the cascade tie (same class of bug fixed on the FAQ accordion and
   Gallery lightbox buttons, CLAUDE.md 2026-07-01 — this one was missed at
   the time since the Menu page's filter pills happened to look plausible
   already-gold rather than obviously broken like a solid-fill accordion). */
.sad-menu-filter-btn {
	font-family: var(--sad-font-heading);
	font-size: 14px;
	font-weight: 600;
	min-height: 44px;
	padding: 10px 20px !important;
	border-radius: 999px;
	border: 1px solid var(--sad-gold) !important;
	background: transparent !important;
	color: var(--sad-gold) !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sad-menu-filter-btn:hover {
	background-color: rgba(191, 161, 74, 0.15) !important;
}

.sad-menu-filter-btn.active {
	background-color: var(--sad-gold) !important;
	color: var(--sad-bg-raised) !important;
}

/* On mobile, 10 wrapping filter pills eat ~4 full rows and push every dish
   below the fold. Collapse to a single horizontally-scrollable chip row
   instead — the standard mobile pattern for category filters — so the
   first menu item is visible without scrolling past a wall of buttons. */
@media (max-width: 782px) {
	.sad-menu-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding: 4px 4px 10px;
		-webkit-overflow-scrolling: touch;
		/* scrollbar-width:thin alone only softens this in Firefox — Chrome/
		   Edge/Safari still render a full native scrollbar (with visible
		   track + arrow buttons on some OSes) under the chips, which reads
		   as a UI glitch, not an intentional chip-scroller. Hide it
		   entirely; the pill overflow + touch/drag is enough of an
		   affordance on its own (user feedback 2026-07-02, mobile menu
		   redesign planning). */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.sad-menu-filters::-webkit-scrollbar {
		display: none;
	}

	.sad-menu-filter-btn {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* Fade-edge hint (mockup pattern, approved 2026-07-02) — with the
	   scrollbar hidden above, the partial-cut-off pill at the right edge
	   is the main "there's more here" signal; this fade reinforces it
	   without adding a visible control, matching how native mobile chip/
	   tab rows (App Store categories, Instagram Stories) handle the same
	   pattern. */
	.sad-menu-filters-wrap {
		position: relative;
	}

	.sad-menu-filters-wrap::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 10px;
		width: 32px;
		background: linear-gradient(to right, transparent, var(--sad-bg));
		pointer-events: none;
	}

	/* Scroll affordance v2 (client feedback 2026-07-02: the fade alone
	   didn't register as "this scrolls" on a real phone) — a solid gold
	   circular badge (not a thin outline icon, which blended into the
	   fade) that pulses in sync with the on-load nudge, then settles into
	   a static permanent reminder, fading out once there's nothing
	   further right to scroll to. See inline script in sad_menu_grid(). */
	.sad-menu-filters-arrow {
		position: absolute;
		top: 50%;
		right: 4px;
		transform: translateY(-50%);
		width: 26px;
		height: 26px;
		border-radius: 50%;
		/* Cream, not gold — the active filter pill is already a solid gold
		   fill, and a gold-on-gold badge sitting next to it blended in
		   (client feedback 2026-07-02). Cream reads as a distinct accent
		   against both the dark background and neighboring gold chips. */
		background: var(--sad-cream);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}

	.sad-menu-filters-arrow.is-hidden {
		opacity: 0;
	}

	.sad-menu-filters-arrow.is-nudging svg {
		animation: sad-menu-arrow-pulse 0.9s ease-in-out 2;
	}

	@keyframes sad-menu-arrow-pulse {
		0%, 100% { transform: translateX(0); }
		50% { transform: translateX(3px); }
	}

	/* Persistent scroll-progress bar — always visible from first paint
	   (not scroll-triggered), so an empty-looking track next to a
	   partial-width thumb is itself a clear "there's more" signal even
	   before any interaction or animation. */
	.sad-menu-filters-progress-track {
		height: 3px;
		border-radius: 999px;
		background: rgba(191, 161, 74, 0.18);
		margin: 8px 2px 0;
		overflow: hidden;
	}

	.sad-menu-filters-progress-thumb {
		height: 100%;
		border-radius: 999px;
		background: var(--sad-gold);
		width: 40%;
		transform: translateX(0%);
	}
}

/* .sad-menu-grid uses .menu-card-grid's existing 3-col / 782px-breakpoint
   1-col responsive rules above — no separate breakpoints needed here. */

/* Out-of-stock items are shown, not hidden (CLAUDE.md decision 2026-07-01) */
.menu-card-unavailable {
	opacity: 0.55;
}

.menu-card-badge {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 10px;
	font-family: var(--sad-font-heading);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sad-text-muted);
	border: 1px solid var(--sad-text-muted);
	border-radius: 999px;
}

/* Menu page — "Editorial Contemporary" (CLAUDE.md §8, 2026-07-02: Menu
   redesign, Direction B chosen from 3 mockups at
   designs/menu-redesign-directions/). Deliberately uses new .sad-menu-b-*
   class names, NOT .menu-card/.menu-card-grid — those stay untouched since
   they're shared with the homepage "What We Believe" icon cards and the
   Blog archive grid; this redesign must not affect either. */
.sad-menu-b-hero {
	position: relative;
	display: block;
	height: 460px;
	border-radius: 4px;
	overflow: hidden;
	margin: 8px 0 64px;
	color: inherit;
	text-decoration: none;
}

.sad-menu-b-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sad-menu-b-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(16,18,21,0.92) 10%, rgba(16,18,21,0.05) 60%);
}

.sad-menu-b-hero-copy {
	position: absolute;
	left: 48px;
	bottom: 40px;
	z-index: 2;
	max-width: 520px;
	display: flex;
	flex-direction: column;
}

.sad-menu-b-eyebrow {
	font-family: var(--sad-font-heading);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sad-gold);
	margin: 0 0 10px;
}

.sad-menu-b-hero-title {
	font-family: var(--sad-font-display);
	font-size: 40px;
	color: var(--sad-white);
	margin: 0 0 10px;
}

.sad-menu-b-hero-desc {
	color: var(--sad-cream);
	font-size: 15px;
	margin: 0 0 14px;
	max-width: 460px;
}

.sad-menu-b-hero .sad-menu-b-price {
	font-family: var(--sad-font-display);
	font-size: 26px;
	color: var(--sad-gold);
}

/* Category label is a real <button> (mobile accordion, CLAUDE.md §8
   2026-07-02) so it needs the same reset-against-the-global-gold-button
   rule treatment the FAQ accordion already required — see .sad-faq-question
   above, same root cause. Desktop and mobile share this one markup/CSS
   source; the button only *behaves* like an accordion trigger below the
   782px breakpoint (see the min-width:783px override further down and the
   matchMedia-gated click handler in the shortcode's JS). */
.sad-menu-b-cat-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	font-family: var(--sad-font-heading);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(191, 161, 74, 0.25) !important;
	border-radius: 0 !important;
	color: var(--sad-gold) !important;
	margin: 56px 0 20px;
	padding: 0 0 12px;
	text-align: left;
	cursor: default;
}

.sad-menu-b-cat-label:hover {
	background: transparent !important;
}

.sad-menu-b-cat-count {
	flex: 1;
	font-family: var(--sad-font-body);
	font-size: 12px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sad-text-muted);
}

.sad-menu-b-chevron {
	display: none;
	font-size: 14px;
	transition: transform 0.2s ease;
}

.sad-menu-b-section:first-of-type .sad-menu-b-cat-label {
	margin-top: 0;
}

.sad-menu-b-row {
	display: flex;
	gap: 40px;
	align-items: center;
	margin-bottom: 48px;
	color: inherit;
	text-decoration: none;
}

.sad-menu-b-row.reverse {
	flex-direction: row-reverse;
}

.sad-menu-b-row-img {
	flex: 0 0 42%;
	aspect-ratio: 4/3;
	border-radius: 4px;
	overflow: hidden;
	display: block;
}

.sad-menu-b-row-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sad-menu-b-row.unavailable .sad-menu-b-row-img img {
	filter: grayscale(1) brightness(0.55);
}

.sad-menu-b-row-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sad-menu-b-row-title {
	font-family: var(--sad-font-display);
	font-size: 28px;
	color: var(--sad-white);
	margin: 0 0 8px;
}

.sad-menu-b-row-desc {
	color: var(--sad-text-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 14px;
	max-width: 400px;
}

.sad-menu-b-row-price {
	font-family: var(--sad-font-display);
	font-size: 22px;
	color: var(--sad-gold);
}

.sad-menu-b-tag {
	display: inline-block;
	font-family: var(--sad-font-heading);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sad-bg-raised);
	background: var(--sad-gold);
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
	width: fit-content;
}

.sad-menu-b-unavail-tag {
	font-family: var(--sad-font-heading);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sad-text-muted);
}

.sad-menu-b-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-bottom: 48px;
}

.sad-menu-b-card {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.sad-menu-b-card-img {
	aspect-ratio: 1/1;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 12px;
	display: block;
}

.sad-menu-b-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sad-menu-b-card.unavailable .sad-menu-b-card-img img {
	filter: grayscale(1) brightness(0.55);
}

.sad-menu-b-tag-card {
	margin-bottom: 8px;
}

.sad-menu-b-card-title {
	font-family: var(--sad-font-display);
	font-size: 20px;
	color: var(--sad-white);
	margin: 0 0 4px;
}

.sad-menu-b-card-desc {
	color: var(--sad-text-muted);
	font-size: 12.5px;
	margin: 0 0 8px;
	line-height: 1.5;
}

.sad-menu-b-card .sad-menu-b-row-price {
	font-size: 17px;
}

@media (max-width: 782px) {
	.sad-menu-b-hero {
		height: 340px;
	}

	.sad-menu-b-hero-copy {
		left: 24px;
		right: 24px;
		bottom: 24px;
	}

	.sad-menu-b-hero-title {
		font-size: 30px;
	}

	.sad-menu-b-row,
	.sad-menu-b-row.reverse {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.sad-menu-b-row-img {
		flex-basis: auto;
		width: 100%;
		/* Secondary compaction (CLAUDE.md §8 2026-07-02 mobile redesign):
		   cap the lead-row image instead of an uncapped 4:3 crop of the
		   full-width column, so even the one section open by default on
		   load is shorter. */
		max-height: 220px;
	}

	.sad-menu-b-grid {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	/* Collapsible category accordion (CLAUDE.md §8 2026-07-02) — collapsed
	   by default except the first populated section (set server-side in
	   PHP via the `hidden` attribute, see sad_menu_grid). Multiple sections
	   can be open at once, matching the FAQ page's own independently-
	   toggleable items — not a mutually-exclusive single-open accordion. */
	.sad-menu-b-cat-label {
		cursor: pointer;
	}

	.sad-menu-b-chevron {
		display: inline-block;
	}

	.sad-menu-b-cat-label[aria-expanded="true"] .sad-menu-b-chevron {
		transform: rotate(180deg);
	}
}

@media (max-width: 480px) {
	.sad-menu-b-grid {
		grid-template-columns: 1fr;
	}
}

/* Desktop safety (CLAUDE.md §8 2026-07-02): the `hidden` attribute is
   native HTML — any element with it is display:none in every browser
   regardless of custom CSS. Since mobile and desktop share one HTML
   source of truth (PHP always renders the same hidden/aria-expanded state
   based on "first populated section"), desktop would silently lose 6
   categories without this override. Forces every section body visible on
   desktop no matter what the accordion state says, and makes the category
   button visually inert (no chevron, default cursor already the base
   state) so it doesn't look like a broken/dead control. */
@media (min-width: 783px) {
	.sad-menu-b-section-body[hidden] {
		display: block !important;
	}

	/* Filter-chip scroll affordance (arrow badge + progress bar) is
	   mobile-only — desktop's filter row already wraps to fit, no scroll
	   exists to hint at. */
	.sad-menu-filters-arrow,
	.sad-menu-filters-progress-track {
		display: none !important;
	}
}

/* About page: two-column split sections (photo + copy), used for Our Story
   and The Experience. .sad-two-col-reverse flips visual column order via
   CSS grid without duplicating markup, so the photo can sit on either side. */
.sad-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.sad-two-col img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.sad-two-col-reverse .sad-two-col-media {
	order: 2;
}

@media (max-width: 782px) {
	.sad-two-col {
		grid-template-columns: 1fr;
	}
	.sad-two-col-reverse .sad-two-col-media {
		order: 0;
	}
}

.sad-checklist {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
}

.sad-checklist li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	color: var(--sad-text-muted);
}

.sad-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--sad-gold);
}

/* Icon cards (What We Believe) reuse .menu-card's border/hover treatment via
   .menu-card-grid, but swap the photo for an SVG icon badge — there's no
   product photo for a value statement. Replaces the raw-emoji icons flagged
   by the 2026-07-01 dual critique (no semantic meaning for screen readers). */
.sad-icon-card {
	padding: 28px 24px;
	text-align: center;
}

.sad-icon-card .sad-icon {
	width: 40px;
	height: 40px;
	margin: 0 auto 16px;
	color: var(--sad-gold);
}

.sad-icon-card h3 {
	color: var(--sad-white);
	font-size: 1.25rem;
	margin: 0 0 8px;
}

.sad-icon-card p {
	color: var(--sad-text-muted);
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0;
}

/* Press feature — distinct "hero moment" treatment for the Noms Magazine
   press mention, per the 2026-07-01 dual critique: the page's strongest
   social-proof asset deserved more than a plain text block. */
.sad-press {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
	padding: 48px 56px;
	border: 1px solid var(--sad-gold);
	border-radius: 8px;
	background-color: rgba(191, 161, 74, 0.06);
}

.sad-press-eyebrow {
	font-family: var(--sad-font-heading);
	color: var(--sad-gold);
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.sad-press-source {
	font-family: var(--sad-font-display);
	color: var(--sad-white);
	font-size: 1.3rem;
	font-weight: 600;
	margin: 0 0 22px;
}

.sad-press-quote {
	font-family: var(--sad-font-display);
	font-style: italic;
	color: var(--sad-cream);
	font-size: 1.6rem;
	line-height: 1.4;
	margin: 0 0 20px;
}

.sad-press-sub {
	color: var(--sad-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 24px;
}

@media (max-width: 600px) {
	.sad-press {
		padding: 32px 24px;
	}
	.sad-press-quote {
		font-size: 1.25rem;
	}
}

/* Experience bullets: icon + text rows, reusing the gold-icon language
   established by the values cards above. */
.sad-bullet-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 16px;
	text-align: left;
}

.sad-bullet-row .sad-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--sad-gold);
	margin-top: 2px;
}

.sad-bullet-row p {
	margin: 0;
	color: var(--sad-text-muted);
}

/* Find Us map embed */
.sad-map-embed iframe {
	width: 100%;
	height: 360px;
	border: 0;
	border-radius: 6px;
	display: block;
}

/* Contact page — gold links matching the rest of the design system (footer,
   nav, FAQ CTAs). Was near-white + underlined, the browser/theme default,
   since this class had never been styled — a visible inconsistency next to
   every other link on the site. */
.sad-contact-link {
	color: var(--sad-gold) !important;
	text-decoration: none;
}

.sad-contact-link:hover {
	color: var(--sad-gold-light) !important;
}

.sad-contact-micro {
	color: var(--sad-text-muted);
	font-size: 0.85rem;
	margin-top: 18px;
	max-width: none;
}

.sad-hours-card {
	max-width: 420px;
	margin: 0 auto;
	text-align: left;
}

.sad-hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Grid, not flex + space-between: with space-between, only the time
   text's *right* edge lined up — its left edge (where the numbers start)
   still shifted per row depending on how long that row's day name was
   ("Tuesday" vs "Wednesday"), so the times never formed a clean column.
   A fixed-width first column guarantees every time starts at the same x
   position regardless of day-name length, like a real table. */
.sad-hours-list li {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(191, 161, 74, 0.15);
	color: var(--sad-text);
}

.sad-hours-time {
	text-align: left;
}

@media (max-width: 480px) {
	.sad-hours-list li {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

.sad-hours-day {
	font-family: var(--sad-font-heading);
	font-weight: 600;
}

.sad-hours-time {
	color: var(--sad-text-muted);
}

.sad-hours-closed {
	color: var(--sad-gold);
	font-weight: 600;
}

.sad-hours-note {
	color: var(--sad-text-muted);
	font-size: 0.85rem;
	margin: 14px 0 0;
	text-align: center;
}

/* Contact Form 7 — restyled only (no field/logic changes, per the standing
   "never touch form/checkout logic" rule). CF7 renders plain white inputs
   by default with no theming; this brings it in line with the rest of the
   Saigon After Dark input/button language. */
.sad-contact-form-col .wpcf7-form p {
	margin: 0 0 18px;
}

.sad-contact-form-col .wpcf7-form label {
	display: block;
	color: var(--sad-text);
	font-family: var(--sad-font-heading);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
}

.sad-contact-form-col .wpcf7-form input[type="text"],
.sad-contact-form-col .wpcf7-form input[type="email"],
.sad-contact-form-col .wpcf7-form textarea {
	width: 100%;
	padding: 12px 16px;
	font-family: var(--sad-font-body);
	font-size: 15px;
	color: var(--sad-text);
	background-color: var(--sad-bg-raised);
	border: 1px solid rgba(191, 161, 74, 0.35);
	border-radius: 4px;
}

.sad-contact-form-col .wpcf7-form textarea {
	min-height: 120px;
	resize: vertical;
}

.sad-contact-form-col .wpcf7-form input::placeholder,
.sad-contact-form-col .wpcf7-form textarea::placeholder {
	color: var(--sad-text-muted);
}

.sad-contact-form-col .wpcf7-form input:focus,
.sad-contact-form-col .wpcf7-form textarea:focus {
	outline: 2px solid var(--sad-gold);
	outline-offset: 1px;
	border-color: var(--sad-gold);
}

.sad-contact-form-col .wpcf7-form input[type="submit"] {
	background-color: var(--sad-gold) !important;
	color: var(--sad-bg-raised) !important;
	font-family: var(--sad-font-heading);
	font-weight: 600;
	font-size: 15px;
	min-height: 44px;
	padding: 12px 28px;
	border: none !important;
	border-radius: 999px;
	cursor: pointer;
}

.sad-contact-form-col .wpcf7-form input[type="submit"]:hover {
	background-color: var(--sad-gold-light) !important;
}

.sad-contact-form-col .wpcf7-not-valid-tip {
	color: #e08a7a;
	font-size: 13px;
	margin-top: 6px;
}

.sad-contact-form-col .wpcf7-form-control-wrap {
	display: block;
}

.sad-contact-form-col .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 4px;
	border-color: rgba(191, 161, 74, 0.35) !important;
	color: var(--sad-text-muted);
	font-size: 14px;
}

.sad-contact-form-col .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--sad-gold) !important;
	color: var(--sad-gold);
}

.sad-contact-form-col .wpcf7-form.invalid .wpcf7-response-output {
	border-color: #e08a7a !important;
	color: #e08a7a;
}

/* FAQ page: search box */
.sad-faq-search {
	max-width: 520px;
	margin: 0 auto 32px;
}

.sad-faq-search input {
	width: 100%;
	padding: 12px 20px;
	font-family: var(--sad-font-body);
	font-size: 15px;
	color: var(--sad-text);
	background-color: var(--sad-bg-raised);
	border: 1px solid rgba(191, 161, 74, 0.35);
	border-radius: 999px;
}

.sad-faq-search input::placeholder {
	color: var(--sad-text-muted);
}

.sad-faq-search input:focus {
	outline: 2px solid var(--sad-gold);
	outline-offset: 1px;
}

.sad-faq-empty {
	text-align: center;
	color: var(--sad-text-muted);
	margin: 0 0 24px;
}

/* FAQ accordion. Each header is a real <button> (native keyboard support —
   Enter/Space activation, natural Tab order) with aria-expanded reflecting
   true state and aria-controls pointing at its panel; each panel has a
   matching id + role="region" and is hidden via the `hidden` attribute
   (not display:none via a class alone) so assistive tech gets a real
   state change, not just a visual one. Per UI/UX Pro Max's accordion
   guidance, gathered during the pre-build audit rather than bolted on
   after. */
.sad-faq-list {
	max-width: 820px;
	margin: 0 auto;
}

.sad-faq-item {
	border-bottom: 1px solid rgba(191, 161, 74, 0.2);
}

/* The global `button{background-color:var(--sad-gold) !important}` rule
   (for real CTA buttons elsewhere) would otherwise paint these accordion
   headers gold too, since they're real <button> elements by design (see
   comment above) — override with matching !important specificity. */
.sad-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 4px;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	text-align: left;
	font-family: var(--sad-font-heading);
	font-size: 16px;
	font-weight: 600;
	color: var(--sad-text) !important;
	cursor: pointer;
	min-height: 44px;
}

/* The matching global `button:hover{background-color:var(--sad-gold-light)
   !important}` rule wasn't overridden here either — same root cause as the
   base-state fix above, just the :hover variant. Left gold text on a
   gold-light hover background, illegible (found on live re-check after
   this build shipped). */
.sad-faq-question:hover {
	background: transparent !important;
	color: var(--sad-gold) !important;
}

.sad-faq-question:focus-visible {
	outline: 2px solid var(--sad-gold);
	outline-offset: 2px;
}

.sad-faq-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--sad-gold);
	transition: transform 0.2s ease;
}

.sad-faq-question[aria-expanded="true"] .sad-faq-icon {
	transform: rotate(45deg);
}

.sad-faq-answer {
	padding: 0 4px 20px;
	color: var(--sad-text-muted);
	line-height: 1.7;
}

.sad-faq-answer p {
	margin: 0 0 12px;
}

.sad-faq-answer p:last-child {
	margin-bottom: 0;
}

.sad-faq-item.is-hidden {
	display: none;
}

.sad-faq-bottom-help {
	text-align: center;
	margin-top: 48px;
	color: var(--sad-text-muted);
}

/* Blog / Journal — archive grid (reuses .menu-card-grid/.menu-card) */
.sad-blog-date {
	color: var(--sad-gold);
	font-family: var(--sad-font-heading);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 6px;
}

.sad-blog-title-link {
	color: var(--sad-white) !important;
	text-decoration: none;
}

.sad-blog-title-link:hover {
	color: var(--sad-gold) !important;
}

.sad-blog-readmore {
	display: inline-block;
	margin-top: 4px;
	color: var(--sad-gold-light) !important;
	font-family: var(--sad-font-heading);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.sad-blog-readmore:hover {
	color: var(--sad-gold) !important;
}

/* Blog / Journal — single post. Kills the Flatsome demo styling (or lack
   thereof) on the promo template's plain HTML offer grid, matching the
   design system instead of relying on Flatsome CSS that no longer loads. */
.hce-promo {
	background-color: var(--sad-bg-raised);
	border: 1px solid rgba(191, 161, 74, 0.25);
	border-radius: 6px;
	padding: 24px 28px;
	margin: 24px 0;
}

.hce-promo-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.hce-promo-row h3 {
	color: var(--sad-gold);
	font-size: 1rem;
	margin: 0 0 6px;
}

.hce-promo-row p {
	color: var(--sad-text);
	margin: 0;
}

.hce-promo-note {
	color: var(--sad-text-muted);
	font-size: 0.85rem;
	margin: 16px 0 0;
}

@media (max-width: 600px) {
	.hce-promo-row {
		grid-template-columns: 1fr;
	}
}

.hce-lead {
	font-family: var(--sad-font-display);
	font-style: italic;
	font-size: 1.2rem;
	color: var(--sad-cream);
	line-height: 1.6;
}

.hce-quote {
	border-left: 3px solid var(--sad-gold);
	padding-left: 20px;
	margin: 28px 0;
	font-family: var(--sad-font-display);
	font-style: italic;
	font-size: 1.2rem;
	color: var(--sad-cream);
}

/* Single-post WP comment form — restyled only (same approach as the CF7
   restyle on Contact: no logic/field changes, just theming to match the
   dark palette instead of GeneratePress's plain-white defaults). */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
	width: 100%;
	padding: 12px 16px;
	font-family: var(--sad-font-body);
	font-size: 15px;
	color: var(--sad-text);
	background-color: var(--sad-bg-raised);
	border: 1px solid rgba(191, 161, 74, 0.35);
	border-radius: 4px;
}

#commentform textarea {
	min-height: 120px;
	resize: vertical;
}

#commentform input::placeholder,
#commentform textarea::placeholder {
	color: var(--sad-text-muted);
}

#commentform input:focus,
#commentform textarea:focus {
	outline: 2px solid var(--sad-gold);
	outline-offset: 1px;
	border-color: var(--sad-gold);
}

#commentform label {
	display: block;
	color: var(--sad-text);
	font-family: var(--sad-font-heading);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

#commentform .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
}

#commentform .comment-form-cookies-consent label {
	display: inline;
	margin-bottom: 0;
	font-weight: 400;
	color: var(--sad-text-muted);
}

#commentform input[type="submit"] {
	background-color: var(--sad-gold) !important;
	color: var(--sad-bg-raised) !important;
	font-family: var(--sad-font-heading);
	font-weight: 600;
	font-size: 15px;
	min-height: 44px;
	padding: 12px 28px;
	border: none !important;
	border-radius: 999px;
	cursor: pointer;
}

#commentform input[type="submit"]:hover {
	background-color: var(--sad-gold-light) !important;
}

.comment-respond,
.comments-area {
	max-width: 720px;
	margin: 0 auto;
	background-color: transparent !important;
	padding: 40px 0 0;
}

.comment-reply-title {
	color: var(--sad-gold);
}

.comment-notes,
.logged-in-as {
	color: var(--sad-text-muted);
}

.comment-notes a,
.logged-in-as a {
	color: var(--sad-gold-light);
}

/* Food Gallery — masonry grid via CSS columns (no JS layout library
   needed; photos have varied natural aspect ratios so this reads as a
   real masonry without measuring anything). Each item is a real <button>
   for native keyboard focus/activation. */
.sad-gallery {
	column-count: 3;
	column-gap: 16px;
}

.sad-gallery-item {
	display: block;
	width: 100%;
	break-inside: avoid;
	margin-bottom: 16px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	line-height: 0;
}

.sad-gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.sad-gallery-item:hover img {
	transform: scale(1.02);
	opacity: 0.9;
}

.sad-gallery-item:focus-visible {
	outline: 2px solid var(--sad-gold);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	.sad-gallery {
		column-count: 2;
	}
}

@media (max-width: 560px) {
	.sad-gallery {
		column-count: 1;
	}
}

/* Lightbox — role="dialog"/aria-modal handled in markup; focus management,
   Escape/arrow-key navigation, and focus trapping handled in the
   [sad_gallery] shortcode's JS (functions.php). */
.sad-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(15, 17, 20, 0.92);
	/* Without this, scrolling at the top/bottom edge of the modal on mobile
	   can chain through and scroll the page behind it. */
	overscroll-behavior: contain;
}

.sad-lightbox[hidden] {
	display: none;
}

.sad-lightbox-img {
	max-width: 85vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 4px;
}

.sad-lightbox-close,
.sad-lightbox-prev,
.sad-lightbox-next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background-color: rgba(28, 32, 37, 0.85) !important;
	border: 1px solid rgba(191, 161, 74, 0.35) !important;
	border-radius: 999px;
	color: var(--sad-cream) !important;
	cursor: pointer;
}

.sad-lightbox-close svg,
.sad-lightbox-prev svg,
.sad-lightbox-next svg {
	width: 22px;
	height: 22px;
}

.sad-lightbox-close:hover,
.sad-lightbox-prev:hover,
.sad-lightbox-next:hover {
	background-color: var(--sad-gold) !important;
	color: var(--sad-bg-raised) !important;
}

.sad-lightbox-close:focus-visible,
.sad-lightbox-prev:focus-visible,
.sad-lightbox-next:focus-visible {
	outline: 2px solid var(--sad-gold);
	outline-offset: 2px;
}

.sad-lightbox-close {
	top: 24px;
	right: 24px;
}

.sad-lightbox-prev {
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
}

.sad-lightbox-next {
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 600px) {
	.sad-lightbox-close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
	}
	.sad-lightbox-prev {
		left: 8px;
		width: 40px;
		height: 40px;
	}
	.sad-lightbox-next {
		right: 8px;
		width: 40px;
		height: 40px;
	}
}

/* About page: "What We Believe" has exactly 4 cards, which doesn't divide
   evenly into the shared .menu-card-grid's 3 columns (left the 4th card
   stranded alone on its own row). A clean 2x2 is the standard layout for
   exactly 4 items — narrower centered grid reads better than stretching
   4 cards edge-to-edge at the full 1280px stage width. */
.sad-values-grid {
	grid-template-columns: repeat(2, 1fr);
	max-width: 720px;
	margin: 0 auto;
}

@media (max-width: 560px) {
	.sad-values-grid {
		grid-template-columns: 1fr;
	}
}

/* Meet the Team, reduced to 2 cards (Head Chef + family, 2026-07-02) —
   same centered 2-col treatment as .sad-values-grid above, so 2 cards
   don't sit left-aligned with a large dead gap on the right like the
   default 3-col .menu-card-grid produces. */
.sad-team-grid {
	grid-template-columns: repeat(2, 1fr);
	max-width: 720px;
	margin: 0 auto;
}

@media (max-width: 560px) {
	.sad-team-grid {
		grid-template-columns: 1fr;
	}
}

/* Announcement bar — see functions.php customize_register/wp_body_open.
   Single line, no wrap, so it can never push the hero down or grow tall on
   small screens; long text truncates with an ellipsis instead. */
.sad-announcement-bar {
	background-color: var(--sad-bg-raised);
	border-bottom: 1px solid rgba(191, 161, 74, 0.25);
}

.sad-announcement-inner {
	max-width: var(--sad-stage);
	margin: 0 auto;
	padding: 8px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.sad-announcement-text {
	font-family: var(--sad-font-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--sad-gold);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sad-announcement-social {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.sad-announcement-social a {
	display: flex;
	color: var(--sad-gold);
}

.sad-announcement-social a:hover {
	color: var(--sad-gold-light);
}

.sad-announcement-social svg {
	width: 15px;
	height: 15px;
}

@media (max-width: 480px) {
	.sad-announcement-social {
		display: none;
	}
	.sad-announcement-inner {
		padding: 7px 16px;
	}
}

/* Email signup — full version (dedicated homepage section) and compact
   version (footer, reusing the same shortcode/markup with a modifier
   class). See functions.php [sad_email_signup]. */
.sad-signup {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.sad-signup-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 10px;
}

.sad-signup-form input[type="email"] {
	flex: 1 1 240px;
	max-width: 320px;
	padding: 12px 18px;
	font-family: var(--sad-font-body);
	font-size: 15px;
	color: var(--sad-text);
	background-color: var(--sad-bg-raised);
	border: 1px solid rgba(191, 161, 74, 0.35);
	border-radius: 999px;
}

.sad-signup-form input::placeholder {
	color: var(--sad-text-muted);
}

.sad-signup-form input:focus {
	outline: 2px solid var(--sad-gold);
	outline-offset: 1px;
}

.sad-signup-form button {
	background-color: var(--sad-gold) !important;
	color: var(--sad-bg-raised) !important;
	font-family: var(--sad-font-heading);
	font-weight: 600;
	font-size: 15px;
	padding: 12px 28px;
	min-height: 44px;
	border-radius: 999px;
	border: none !important;
	cursor: pointer;
}

.sad-signup-form button:hover {
	background-color: var(--sad-gold-light) !important;
}

.sad-signup-form button:disabled {
	opacity: 0.6;
	cursor: default;
}

.sad-signup-message {
	margin-top: 12px;
	font-size: 14px;
	color: var(--sad-gold);
}

.sad-signup-message.is-error {
	color: #e08a7a;
}

/* Compact footer variant — sits inside a .sad-footer-col-signup grid
   column now (see .sad-footer-inner above), not its own stacked full-width
   block, so no standalone max-width/padding/border of its own. */
.sad-signup-compact {
	max-width: none;
	text-align: left;
}

.sad-signup-compact .sad-signup-form {
	justify-content: flex-start;
	margin-top: 8px;
}

.sad-signup-compact-label {
	font-family: var(--sad-font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--sad-text-muted);
	margin: 0;
}

@media (max-width: 782px) {
	.sad-signup-compact .sad-signup-form {
		justify-content: center;
	}
	.sad-signup-compact {
		text-align: center;
	}
}

/* Individual product page — "Order via Zomi" CTA replacing the add-to-cart
   form. Explicit, self-contained rule rather than relying on .gb-button
   alone: that class depends on GenerateBlocks' own per-block dynamic CSS
   for padding/display, which only exists for real block-editor buttons,
   not a hand-authored link — same gold-pill values as .nav-cta. */
.sad-product-zomi-btn {
	display: inline-flex !important;
	align-items: center;
	background-color: var(--sad-gold) !important;
	color: var(--sad-bg-raised) !important;
	font-family: var(--sad-font-heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 12px 24px !important;
	border-radius: 4px;
	text-decoration: none !important;
	margin: 14px 0;
}

.sad-product-zomi-btn:hover {
	background-color: var(--sad-gold-light) !important;
	color: var(--sad-bg-raised) !important;
}