/**
 * Site chrome, on every page: header (Figma "Navigation" 18:9542), phone menu ("Mobile
 * navigation / 390" 18:8100), the phone booking bar ("M16 Quick booking bar · fixed" 18:8092)
 * and footer ("Footer · reference" 18:9571) with the newsletter. The same markup is printed by
 * the site header and footer widgets inside Elementor templates and by the theme's own templates.
 */

.km-main:focus {
	outline: 0;
}

/* ------------------------------------------------------------------ */
/* Header: 88 high (92 on phones), paper, wordmark left, links right   */
/* ------------------------------------------------------------------ */

.km-header {
	position: relative;
	z-index: 50;
	background: var(--km-header-bg, var(--km-c-paper));
	color: var(--km-header-text, var(--km-c-ink));
	font-family: var(--km-sans);
}

.km-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 88px;
	padding-block: 20px;
}

/* Wordmark: Shippori Mincho 32/110. */
.km-logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	font-family: var(--km-serif);
	font-size: 32px;
	line-height: 1.1;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}

.km-logo--image img {
	display: block;
	width: auto;
	max-height: 48px;
}

/* Links and the button, 16 apart (Figma "Page navigation"). */
.km-header__end {
	display: flex;
	align-items: center;
	gap: 16px;
}

.km-nav__list {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Figma link boxes are 80 / 90 / 120 wide around Noto Sans 14/150 text, 12 above and below. */
.km-nav__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 45px;
	padding: 0 17px;
	color: inherit;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}

/* "Book a counter seat": 179 x 48, the label 19 from each side. */
.km-header .km-header__cta {
	flex: none;
	min-width: 0;
	padding: 0 19px;
	white-space: nowrap;
}

.km-header__toggle {
	display: none;
}

/* Tablet: Figma "M3/Elevation Light/2" under the bar (none at 1440). */
@media (max-width: 1024px) {
	.km-header {
		box-shadow: 0 2px 6px 2px rgb(0 0 0 / 0.15), 0 1px 2px 0 rgb(0 0 0 / 0.3);
	}
}

@media (max-width: 767px) {
	/* Phone: "M3/Elevation Light/1". */
	.km-header {
		box-shadow: 0 1px 3px 1px rgb(0 0 0 / 0.15), 0 1px 2px 0 rgb(0 0 0 / 0.3);
	}

	.km-header__bar {
		min-height: 92px;
	}

	.km-header__end {
		display: none;
	}

	/* Menu button: 52 x 52 with the 24 x 16 hamburger, ink on paper (PLAN.md Q15a). */
	.km-js .km-header__toggle {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		margin: 0 -10px 0 0;
		padding: 0;
		border: 0;
		border-radius: var(--km-radius-control);
		background: transparent;
		color: inherit;
		cursor: pointer;
	}

	/* Without JavaScript the menu cannot open: the links wrap under the wordmark instead. */
	html:not(.km-js) .km-header__bar {
		flex-wrap: wrap;
	}

	html:not(.km-js) .km-header__end {
		display: flex;
		flex-wrap: wrap;
	}

	html:not(.km-js) .km-nav__list {
		flex-wrap: wrap;
	}

	html:not(.km-js) .km-nav__link {
		padding: 0 16px 0 0;
	}
}

/* ------------------------------------------------------------------ */
/* Phone menu: four outline buttons in place of the page content;     */
/* the site footer stays below, as in Figma                           */
/* ------------------------------------------------------------------ */

.km-menu[hidden] {
	display: none;
}

.km-menu__nav {
	padding-block: 32px;
}

.km-menu__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.km-header .km-menu__link {
	width: 100%;
}

@media (max-width: 767px) {
	html.km-menu-open .km-main,
	html.km-menu-open .km-sticky {
		display: none;
	}
}

@media (min-width: 768px) {
	.km-menu {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Phone booking bar fixed to the bottom of the screen                 */
/* ------------------------------------------------------------------ */

.km-sticky {
	display: none;
}

@media (max-width: 767px) {
	/* 73 high: date over "time · guests" on the left, the 208 button on the right. */
	.km-sticky {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px var(--km-gutter);
		border-top: 1px solid rgb(82 98 86 / 0.4);
		background: var(--km-c-paper);
	}

	.km-sticky__summary {
		display: flex;
		flex-direction: column;
		min-width: 0;
		color: var(--km-c-ink);
		text-decoration: none;
	}

	.km-sticky__title {
		font-size: var(--km-fs-button);
		line-height: var(--km-lh-text);
	}

	.km-sticky__text {
		color: var(--km-c-muted);
		font-size: var(--km-fs-small);
		line-height: var(--km-lh-text);
	}

	.km-sticky__button {
		flex: none;
	}

	/* Room for the bar, so it never covers the end of the footer. */
	body:has(.km-sticky) {
		padding-bottom: 73px;
	}
}

/* ------------------------------------------------------------------ */
/* Footer ("Footer · reference", PLAN.md Q7): ink, paper text, the     */
/* design's own sizes (12.5, 10, 9.17...), rules as wide as the page   */
/* ------------------------------------------------------------------ */

.km-footer {
	--km-footer-gutter: 100px;
	padding: 50px 0;
	background: var(--km-footer-bg, var(--km-c-ink));
	color: var(--km-footer-text, var(--km-c-paper));
	font-family: var(--km-sans);
}

@media (max-width: 1024px) {
	.km-footer {
		--km-footer-gutter: var(--km-gutter);
	}
}

.km-footer h2,
.km-footer p,
.km-footer ul {
	margin: 0;
}

.km-footer ul {
	padding: 0;
	list-style: none;
}

.km-footer a {
	color: inherit;
}

.km-footer :focus-visible {
	outline-color: var(--km-c-paper);
}

/* 1240 wide at 1440 (100 either side). */
.km-footer__inner {
	width: min(1240px, 100% - 2 * var(--km-footer-gutter));
	margin-inline: auto;
}

/* Final call: Shippori 60/110, then 16.67/110, 16 apart; a paper rule at 30% 27 under it. */
.km-footer__top {
	padding-bottom: 27px;
	border-bottom: 0.8px solid rgb(238 239 228 / 0.3);
}

.km-footer .km-footer__title {
	font-family: var(--km-serif);
	font-size: 60px;
	line-height: 1.1;
	font-weight: 400;
}

.km-footer .km-footer__text {
	margin-top: 16px;
	font-family: var(--km-serif);
	font-size: 16.67px;
	line-height: 1.1;
}

/* Columns spread across the width (Figma: space between); a paper rule 27 under them. */
.km-footer__cols {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-block: 27px;
	border-bottom: 0.8px solid var(--km-footer-text, var(--km-c-paper));
}

.km-footer__col {
	min-width: 0;
}

.km-footer__col--news {
	flex: 0 1 343px;
}

.km-footer .km-footer__heading {
	margin-bottom: 8px;
	color: rgb(238 239 228 / 0.75);
	font-family: var(--km-sans);
	font-size: 10px;
	line-height: 1.5;
	font-weight: 400;
}

.km-footer__lines {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 12.5px;
	line-height: 1.5;
}

/* "Get directions" and the first menu links: 12.5, underlined, 10 above and below. */
.km-footer__more {
	margin-top: 8px;
}

.km-footer__more a,
.km-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 37px;
	font-size: 12.5px;
	line-height: 1.5;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.km-footer__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.km-footer__links a {
	min-height: 39px;
}

/* The last menu links ("Whole counter", "Gallery") are 15/150 and not underlined in Figma. */
.km-footer__links .km-footer__link--plain a {
	min-height: 47px;
	font-size: var(--km-fs-button);
	text-decoration: none;
}

.km-footer__legal {
	margin-top: 27px;
	font-size: 9.17px;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	/* Visit and Hours, then Menu and booking and the newsletter (343). */
	.km-footer__cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 343px);
		gap: 24px;
	}
}

@media (max-width: 767px) {
	/* One column: the newsletter first. */
	.km-footer__cols {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.km-footer__col--news {
		flex: none;
		order: -1;
	}
}

/* ------------------------------------------------------------------ */
/* Newsletter (Figma "Newsletter": email 40 high, Subscribe beside it; */
/* "State=Subscribed" 18:6304 replaces the form)                      */
/* ------------------------------------------------------------------ */

.km-news__text {
	font-size: 12.5px;
	line-height: 1.5;
}

.km-news__form {
	margin-top: 8px;
}

.km-news__form[hidden],
.km-news__sent[hidden] {
	display: none;
}

.km-news__row {
	display: flex;
	gap: 10px;
}

.km-footer .km-news__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	margin: 0;
	padding: 0 13.33px;
	border: 1px solid var(--km-c-line);
	border-radius: 6.67px;
	background: var(--km-c-paper);
	color: var(--km-c-ink);
	font-family: var(--km-sans);
	font-size: 12.5px;
	line-height: 1.5;
	box-shadow: none;
}

.km-news__input::placeholder {
	color: var(--km-c-muted);
	opacity: 1;
}

.km-footer .km-news__input:focus {
	outline: 2px solid var(--km-c-paper);
	outline-offset: 2px;
}

.km-footer .km-news__submit {
	flex: none;
	min-width: 0;
	height: 40px;
	min-height: 40px;
	padding: 0 25.6px;
	border: 1px solid rgb(238 239 228 / 0.6);
	border-radius: 6.67px;
	background: transparent;
	color: var(--km-c-paper);
	font-size: 12.5px;
}

.km-news__sent:focus {
	outline: 0;
}

/* Subscribed: Noto Sans 15/150 with 12 above and below, at the footer's 0.833 scale. */
.km-news__message {
	padding-block: 10px;
	font-size: 12.5px;
	line-height: 1.5;
}