/* Bistro Stefan's Family — visual system from design_handoff_bistro_landing/STYLE.md */

/* 1. Tokens */

:root {
	--sage:        #4f6b57; /* primary brand, wall green. Buttons, bands, links */
	--sage-dark:   #2f4a38; /* link hover */
	--sage-muted:  #566a58; /* section kickers (small caps labels) on light bg */
	--sage-soft:   #9bb09d; /* decorative only, never text */
	--sage-mist:   #d6e0d5; /* kicker text on sage bg */
	--blush:       #d9b3ad; /* accent only, never text on light bg */
	--blush-ink:   #8f4f49; /* blush-family text: prices, hours values */
	--crema:       #c98f6a; /* coffee accent, tiny details only */
	--bean:        #5c4433; /* bean drawing colour on light bg */
	--linen:       #f6f2ea; /* page background */
	--linen-deep:  #eee8dd; /* alternating section bg */
	--line:        #e0dad0; /* hairlines, borders */
	--ink:         #2e2b28; /* headings, primary text, footer bg */
	--ink-2:       #3d3a35; /* list text */
	--ink-3:       #5c5952; /* body copy */
	--white:       #ffffff;

	/* Derived values used by several components (STYLE.md §3–5) */
	--linen-hover: #e7dfd1; /* --linen darkened ~6% for button hover */
	--on-dark-soft: #e7e2d7; /* "Bistro" on photo */
	--footer-bistro: #b9c4b8;
	--footer-caption: #a8a196;
	--hero-scrim: linear-gradient(180deg, rgba(46, 43, 40, 0.18) 0%, rgba(46, 43, 40, 0.62) 62%, rgba(46, 43, 40, 0.82) 100%);

	--font-heading: "Cormorant Garamond", Georgia, serif;
	--font-body: "Jost", system-ui, sans-serif;

	--gutter: clamp(20px, 5vw, 64px);
	--section-pad: clamp(56px, 8vw, 96px);
	--column-gap: clamp(32px, 5vw, 72px);
}

/* 2. Base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Overscroll (rubber-band) areas show the html background: dark below the
   footer, linen above the header via a fixed layer behind the body. */
html {
	scroll-behavior: smooth;
	background: var(--ink);
}

html::before {
	content: "";
	position: fixed;
	inset: 0 0 50% 0;
	z-index: -1;
	background: var(--linen);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--linen);
	color: var(--ink-3);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

p {
	margin: 0;
	text-wrap: pretty;
}

h1,
h2,
h3 {
	margin: 0;
	color: var(--ink);
}

h2 {
	margin-bottom: 36px;
	font-family: var(--font-heading);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 400;
	line-height: 1.2;
}

h3 {
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
}

/* Links inside running text stay underlined so they aren't told apart by colour alone. */
a {
	color: var(--sage);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 150ms ease;
}

a:hover {
	color: var(--sage-dark);
}

:focus-visible {
	outline: 2px solid var(--sage);
	outline-offset: 2px;
}

/* Sage is under 3:1 on the dark photo scrim and the ink footer, so the ring switches to linen there. */
.hero :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--linen);
}

/* Hidden visually, still read by screen readers */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--gutter);
	z-index: 10;
	padding: 10px 16px;
	background: var(--linen);
	color: var(--ink);
}

.skip-link:focus {
	top: 12px;
}

/* 3. Components */

.button {
	display: inline-block;
	padding: 14px 26px;
	border: 0;
	border-radius: 2px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.button-light {
	background: var(--linen);
	color: var(--ink);
}

.button-light:hover {
	background: var(--linen-hover);
	color: var(--ink);
}

.button-sage {
	background: var(--sage);
	color: var(--white);
}

.button-sage:hover {
	background: var(--sage-dark);
	color: var(--white);
}

/* Wordmark: "Bistro" over "Stefan's Family", set in the heading font. */
.wordmark {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-family: var(--font-heading);
	line-height: 1;
}

a.wordmark {
	text-decoration: none;
}

.wordmark-bistro {
	font-size: 17px;
	font-weight: 500;
	color: var(--sage-muted);
}

.wordmark-name {
	font-size: 28px;
	font-weight: 500;
	color: var(--ink);
}

/* 4. Header */

.site-header {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	align-items: center;
	justify-content: space-between;
	padding: 18px var(--gutter);
	background: var(--linen);
	border-bottom: 1px solid var(--line);
}

.site-header nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header nav a {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.lang-switch a[aria-current] {
	color: var(--ink);
	text-decoration: underline;
}

/* Narrow screens: language switch top right next to the wordmark, main nav on its own row below */
@media (max-width: 899px) {
	.lang-switch {
		order: 1;
	}

	.site-header nav:not(.lang-switch) {
		order: 2;
		flex-basis: 100%;
	}
}

/* 5. Hero */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 68vh;
	overflow: hidden;
	background: var(--ink);
}

.hero-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--hero-scrim);
}

.hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--column-gap);
	width: 100%;
	padding: clamp(48px, 9vw, 110px) var(--gutter) clamp(40px, 7vw, 76px);
}

.hero-content {
	display: flex;
	flex: 1 1 420px;
	flex-direction: column;
	gap: 22px;
	max-width: 680px;
	color: var(--white);
}

.hero hgroup {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.wordmark-hero .wordmark-bistro {
	font-size: clamp(24px, 4vw, 34px);
	color: var(--on-dark-soft);
}

.wordmark-hero .wordmark-name {
	font-size: clamp(48px, 9vw, 82px);
	color: var(--white);
}

/* The rule under the hero wordmark (the logo's beans are left out for now). */
.wordmark-hero::after {
	content: "";
	width: 100px;
	height: 1.5px;
	margin-top: 22px;
	background: rgba(255, 255, 255, 0.6);
}

.hero-lede {
	font-size: clamp(16px, 2vw, 19px);
	line-height: 1.6;
	color: var(--white);
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding-top: 4px;
}

/* Opening hours: sits on the photo beside the title on wide screens. */
.hero-hours {
	flex: 1 1 300px;
	max-width: 420px;
}

@media (min-width: 900px) {
	.hero-hours {
		color: var(--on-dark-soft);
	}

	.hero-hours h2 {
		margin-bottom: 16px;
		font-size: clamp(26px, 3vw, 32px);
		color: var(--white);
	}

	.hero-hours .hours,
	.hero-hours .hours td {
		color: var(--white);
	}

	.hero-hours .hours tr + tr > * {
		border-top-color: rgba(255, 255, 255, 0.35);
	}

	.hero-hours a {
		color: var(--white);
	}
}

/* Narrow screens: the photo and title take the first row, the hours drop below as a plain section. */
@media (max-width: 899px) {
	.hero {
		display: grid;
		min-height: 0;
	}

	/* Explicit end lines: on absolutely positioned items an auto end means the grid's edge. */
	.hero-photo,
	.hero::before {
		grid-area: 1 / 1 / 2 / 2;
	}

	.hero-inner {
		display: contents;
	}

	.hero-content {
		position: relative;
		z-index: 2;
		grid-area: 1 / 1;
		justify-content: flex-end;
		min-height: 68vh;
		padding: clamp(48px, 9vw, 110px) var(--gutter) clamp(40px, 7vw, 76px);
	}

	.hero-hours {
		grid-area: 2 / 1;
		max-width: none;
		padding: var(--section-pad) var(--gutter);
		background: var(--linen);
		color: var(--ink-3);
	}

	.hero-hours > * {
		max-width: 560px;
	}

	.hero-hours :focus-visible {
		outline-color: var(--sage);
	}
}

/* 6. Sections */

.section {
	padding: var(--section-pad) var(--gutter);
}

.section-deep {
	background: var(--linen-deep);
}

.narrow {
	max-width: 560px;
}

.section-cta {
	margin-top: 24px;
}

.note {
	margin-top: 16px;
	font-size: 14px;
	line-height: 1.6;
}

/* Hours: hairline list */
.hours {
	width: 100%;
	border-collapse: collapse;
	color: var(--ink-2);
}

.hours th,
.hours td {
	padding: 10px 0;
	font-weight: 400;
	line-height: 1.5;
}

.hours th {
	padding-right: 16px;
	text-align: left;
}

.hours td {
	text-align: right;
	color: var(--blush-ink);
}

.hours tr + tr > * {
	border-top: 1px solid var(--line);
}

/* Services: card grid */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 2px;
	background: var(--linen);
}

.card img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	font-size: 15px;
	line-height: 1.65;
}

/* Gallery: photo strip of 3:4 tiles */
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gallery img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 2px;
}

/* Full menu page (menu.html) */
.menu-page-intro {
	padding-block: clamp(36px, 5vw, 56px);
}

.menu-page-title {
	margin-bottom: 12px;
	font-family: var(--font-heading);
	font-size: clamp(36px, 5vw, 52px);
	font-weight: 400;
	line-height: 1.1;
}

/* Food and Drinks groups */
.menu-group > h2 {
	margin-bottom: 24px;
	font-size: clamp(26px, 3vw, 32px);
	font-weight: 500;
	line-height: 1.25;
}

.menu-group + .menu-group {
	margin-top: clamp(40px, 6vw, 64px);
}

/* Categories stack in a single column, each its own linen panel with the section background showing
   between them. Within each, items are boxes that flow left to right and wrap onto new rows, so a long
   category gets more rows rather than a taller column. */
.menu-category {
	padding: clamp(20px, 3vw, 32px);
	border-radius: 2px;
	background: var(--linen);
}

.menu-category + .menu-category {
	margin-top: 16px;
}

.menu-category h3 {
	margin: 0 0 12px;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink);
}

.menu-note {
	margin: -6px 0 12px;
	font-size: 14px;
	color: var(--ink-3);
}

.menu-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ink-2);
}

/* Item box: name, then ingredients, then price directly below. */
.menu-items li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	line-height: 1.5;
}

.menu-item-name {
	font-weight: 500;
	color: var(--ink);
}

/* Item numbers stay legible for phone orders but step back from the name. */
.menu-item-num {
	font-size: 14px;
	font-weight: 400;
	color: var(--ink-3);
}

.menu-item-desc {
	display: block;
	font-size: 14px;
	color: var(--ink-3);
}

.menu-item-price {
	color: var(--blush-ink);
}

/* Phones: one box per row anyway, so use the classic menu row (price on the right) to save height. */
@media (max-width: 479px) {
	.menu-items li {
		flex-direction: row;
		justify-content: space-between;
		gap: 16px;
	}

	.menu-item-price {
		flex-shrink: 0;
	}
}

/* Contact: two columns that stack on mobile */
.contact-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--column-gap);
}

.contact-details,
.map-wrapper {
	flex: 1 1 380px;
	min-width: 0;
}

.contact-details {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.8;
	color: var(--ink-2);
}

.map-wrapper {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.address {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	color: var(--ink-2);
}

.map-wrapper iframe,
.map-consent {
	display: block;
	width: 100%;
	height: 400px;
	border: 0;
	border-radius: 2px;
}

.map-consent {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 18px;
	padding: 24px;
	background: var(--linen-deep);
	text-align: center;
}

.map-consent p {
	max-width: 40ch;
	font-size: 15px;
	line-height: 1.65;
}

/* 7. Footer */

.site-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	padding: 40px var(--gutter);
	background: var(--ink);
}

.site-footer .wordmark-bistro {
	font-size: 16px;
	color: var(--footer-bistro);
}

.site-footer .wordmark-name {
	font-size: 26px;
	color: var(--white);
}

.footer-meta {
	font-size: 13px;
	line-height: 1.6;
	color: var(--footer-caption);
}