/**
 * Komorebi: tokens, type, layout and shared components.
 *
 * Breakpoints match Elementor's defaults: tablet <= 1024px, mobile <= 767px.
 * Figma frames: desktop 1440, tablet 834, mobile 390.
 * The Figma file has no local styles or variables (its text styles come from a library the
 * plugin cannot read); every token below was read from the frames (PLAN.md B2.1e).
 * Section styles live in assets/css/parts/<widget>.css and use these tokens.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                             */
/* ------------------------------------------------------------------ */

/*
 * Colours and fonts follow Elementor's global colours and fonts (Site Settings), so changing
 * them in Elementor restyles every section. Elementor prints those variables on the kit class
 * of <body>, so these tokens are declared on body; the hex values are the Figma colours, used
 * when Elementor is off or a global is missing. The demo importer writes the same values into
 * the kit: system colours primary/secondary/text/accent and the custom colours below.
 */
body {
	--km-c-ink: var(--e-global-color-primary, #254233);      /* text, dark sections (hero, feature band, footer), photo overlay */
	--km-c-forest: var(--e-global-color-secondary, #284c3b); /* primary buttons, active season card, selected chip */
	--km-c-muted: var(--e-global-color-text, #526256);       /* secondary text, captions, labels, placeholders, FAQ rules */
	--km-c-paper: var(--e-global-color-accent, #eeefe4);     /* page background, fields; text on dark */
	--km-c-sage: var(--e-global-color-kmsage, #dde2d2);      /* alternate sections, full chips, the counter bar */
	--km-c-line: var(--e-global-color-kmline, #637368);      /* field borders, timeline steps */
	--km-c-error: var(--e-global-color-kmerror, #b3342c);    /* error borders and messages */

	/* Headings, numbers, names: Elementor "Primary" font; text: Elementor "Text" font. */
	--km-serif: var(--e-global-typography-primary-font-family, "Shippori Mincho"), "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
	--km-sans: var(--e-global-typography-text-font-family, "Noto Sans"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root {
	/* "Overlay · flat ink 40%" on hero photos; the photos themselves carry no overlay. */
	--km-overlay: rgb(37 66 51 / 0.4);

	--km-max: 1200px;
	--km-gutter: 120px;
	--km-section-pad: 80px;
	--km-heading-gap: 40px;
	--km-gap: 24px;
	--km-radius: 16px;
	--km-radius-card: 12px;
	--km-radius-control: 8px;
	--km-control: 48px;

	/* Type (desktop). Library styles: display 72/112%, h2 48/120%, h3 40/112%, body-lg 18/150%,
	   body 16/150%, button 15/150%, small 13/150%, label 12/150%; all weight 400. */
	--km-fs-display: 72px;
	--km-lh-display: 1.12;
	--km-fs-title: 64px;   /* Reservations page title */
	--km-lh-title: 1.1;
	--km-fs-h2: 48px;      /* section titles */
	--km-lh-h2: 1.2;
	--km-fs-h3: 40px;
	--km-lh-h3: 1.12;
	--km-fs-tile: 24px;    /* photo tile, card and step titles */
	--km-lh-tile: 1.2;
	--km-fs-figure: 40px;  /* numbers: "10", "60 min", "S$120" */
	--km-lh-figure: 1.2;
	--km-fs-body-lg: 18px;
	--km-fs-body: 16px;
	--km-fs-button: 15px;
	--km-fs-small: 13px;
	--km-fs-label: 12px;
	--km-lh-text: 1.5;
}

@media (max-width: 1279px) {
	:root {
		--km-gutter: 32px;
	}
}

/* Tablet: the 834 frames. */
@media (max-width: 1024px) {
	:root {
		--km-section-pad: 56px;
		--km-heading-gap: 24px;
		--km-gap: 16px;
		--km-fs-display: 56px;
		--km-fs-h2: 40px;
		--km-fs-figure: 34px;
		--km-fs-body-lg: 17px;
	}
}

/* Phone: the 390 frames. */
@media (max-width: 767px) {
	:root {
		--km-gutter: 20px;
		--km-section-pad: 32px;
		--km-gap: 12px;
		--km-fs-display: 40px;
		--km-fs-title: 44px;
		--km-fs-h2: 32px;
		--km-fs-tile: 20px;
		--km-fs-figure: 28px;
		--km-fs-body-lg: 16px;
	}
}

/* Palettes: paper (#eeefe4), sage (#dde2d2), ink (dark). Elementor colour controls override them per widget. */
.km--paper,
.km--sage,
.km--ink {
	--km-heading: var(--km-c-ink);
	--km-text: var(--km-c-ink);
	--km-muted: var(--km-c-muted);
	--km-line: var(--km-c-muted);
	--km-accent: var(--km-c-forest);
	--km-on-accent: var(--km-c-paper);
}

.km--paper {
	--km-bg: var(--km-c-paper);
}

.km--sage {
	--km-bg: var(--km-c-sage);
}

.km--ink {
	--km-bg: var(--km-c-ink);
	--km-heading: var(--km-c-paper);
	--km-text: var(--km-c-paper);
	--km-muted: var(--km-c-paper);
	--km-line: rgb(238 239 228 / 0.3);
	--km-accent: var(--km-c-paper);
	--km-on-accent: var(--km-c-ink);
}

/* ------------------------------------------------------------------ */
/* Base                                                               */
/* ------------------------------------------------------------------ */

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

/* In-page links jump at once: the prototype scrolls to "#request" with no animation (PLAN.md Q13). */
html {
	-webkit-text-size-adjust: 100%;
}

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

body {
	margin: 0;
	background: var(--km-c-paper);
	color: var(--km-c-ink);
	font-family: var(--km-sans);
	font-size: var(--km-fs-body);
	line-height: var(--km-lh-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--km-c-ink);
	outline-offset: 2px;
}

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

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.km-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 12px 16px;
	border-radius: var(--km-radius-control);
	background: var(--km-c-forest);
	color: var(--km-c-paper);
	text-decoration: none;
}

.km-skip-link:focus {
	top: 16px;
}

/* A section rendered by a Komorebi widget. */
.km {
	/* Reset, so a section placed inside a narrow column (e.g. inside a post) keeps its 1200 container. */
	--km-max: 1200px;
	position: relative;
	background: var(--km-bg);
	color: var(--km-text);
	font-family: var(--km-sans);
	font-size: var(--km-fs-body);
	line-height: var(--km-lh-text);
}

/* Zero specificity, so a section's own margins (".km-heading__text { margin-top }") always win. */
:where(.km) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) {
	margin: 0;
}

:where(.km) :where(ul, ol) {
	list-style: none;
	padding: 0;
}

/* Vertical rhythm (Figma section padding 80 / 56 / 32): Elementor "Padding" controls override it. */
.km-pad {
	padding-top: var(--km-pad-t, var(--km-section-pad));
	padding-bottom: var(--km-pad-b, var(--km-section-pad));
}

.km-container {
	width: min(var(--km-max), 100% - 2 * var(--km-gutter));
	margin-inline: auto;
}

/* Text measure of the plain-page templates (not in Figma: 8 of 12 columns). */
.km-container--narrow {
	--km-max: 792px;
}

/* Dark photo overlay (heroes): put it inside the photo's positioned wrapper. */
.km-overlay {
	position: absolute;
	inset: 0;
	background: var(--km-overlay);
	pointer-events: none;
}

/* Full-bleed photo filling its positioned wrapper. */
.km-cover,
.km .km-cover {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Type                                                               */
/* ------------------------------------------------------------------ */

.km-display,
.km-title,
.km-h2,
.km-h3,
.km-tile-title,
.km-figure-value {
	font-family: var(--km-serif);
	font-weight: 400;
	color: var(--km-heading, var(--km-c-ink));
	letter-spacing: 0;
}

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

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

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

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

.km-tile-title {
	font-size: var(--km-fs-tile);
	line-height: var(--km-lh-tile);
}

.km-figure-value {
	font-size: var(--km-fs-figure);
	line-height: var(--km-lh-figure);
}

.km-body-lg,
.km-lead {
	font-size: var(--km-fs-body-lg);
	line-height: var(--km-lh-text);
}

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

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

/* Section markers and eyebrows ("SEASONAL TEA CALENDAR"): written in capitals in the copy. */
.km-label {
	font-family: var(--km-sans);
	font-size: var(--km-fs-label);
	line-height: var(--km-lh-text);
	font-weight: 400;
}

.km-muted {
	color: var(--km-muted, var(--km-c-muted));
}

.km-eyebrow {
	color: var(--km-muted);
}

/* Section heading (Figma "Heading group"): title, then a body-lg line 16px under it. */
.km-heading {
	margin-bottom: var(--km-heading-gap);
}

.km-heading .km-eyebrow {
	margin-bottom: 16px;
}

.km-heading__text {
	max-width: 820px;
	margin-top: 16px;
	color: var(--km-muted);
}

/* ------------------------------------------------------------------ */
/* Buttons and links                                                  */
/* ------------------------------------------------------------------ */

/* Figma "Action / …": 48 high, 208 wide, radius 8, Noto Sans 15. No hover state in the design. */
.km-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 208px;
	min-height: var(--km-control);
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: var(--km-radius-control);
	font-family: var(--km-sans);
	font-size: var(--km-fs-button);
	line-height: var(--km-lh-text);
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.km .km-btn--primary,
.km-btn--primary {
	background: var(--km-accent, var(--km-c-forest));
	color: var(--km-on-accent, var(--km-c-paper));
}

/* Outline (phone menu buttons): forest rule and text, no fill. */
.km .km-btn--outline,
.km-btn--outline {
	background: transparent;
	border-color: var(--km-c-forest);
	color: var(--km-c-forest);
}

/* Secondary (form pages, "Use example details"): ink rule at 40%, ink text (PLAN.md Q15g). */
.km .km-btn--secondary,
.km-btn--secondary {
	background: transparent;
	border-color: rgb(37 66 51 / 0.4);
	color: var(--km-c-ink);
}

.km-btn--block {
	width: 100%;
}

/* Figma "Link / …": underlined, ink; 44px tall hit area. */
.km .km-link,
.km-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--km-heading, var(--km-c-ink));
	font-size: var(--km-fs-body);
	line-height: var(--km-lh-text);
	font-weight: 400;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.km-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

/* ------------------------------------------------------------------ */
/* Form fields (reservation, whole counter request, newsletter)       */
/* ------------------------------------------------------------------ */

/* Field: label (small 13, ink) 8px above the control, error line 8px under it. */
.km-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

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

/* Figma "KOMOREBI/Input": 48 high, paper, line border, radius 8, padding 0 16, text 15. */
.km-input {
	width: 100%;
	min-height: var(--km-control);
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--km-c-line);
	border-radius: var(--km-radius-control);
	background: var(--km-c-paper);
	color: var(--km-c-ink);
	font-family: var(--km-sans);
	font-size: var(--km-fs-button);
	line-height: var(--km-lh-text);
}

/* Figma "KOMOREBI/Input · Textarea": 112 high, padding 12 16. */
textarea.km-input {
	min-height: 112px;
	padding: 12px 16px;
	resize: vertical;
}

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

.km-input:focus {
	outline: 0;
	border-color: var(--km-c-ink);
}

.km-input[aria-invalid="true"] {
	border-color: var(--km-c-error);
}

.km-field__error {
	color: var(--km-c-error);
	font-size: var(--km-fs-label);
	line-height: var(--km-lh-text);
}

/* Error summary at the top of a form: error rule, radius 8, padding 16 20. */
.km-error-summary {
	padding: 16px 20px;
	border: 1px solid var(--km-c-error);
	border-radius: var(--km-radius-control);
	color: var(--km-c-ink);
	font-size: var(--km-fs-button);
	line-height: var(--km-lh-text);
}

.km-error-summary ul {
	margin-top: 4px;
	color: var(--km-c-error);
	font-size: 14px;
}

/* Chips (party size, date, seating time): 48 high, padding 0 16, radius 8. */
.km-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--km-control);
	min-height: var(--km-control);
	padding: 0 16px;
	border: 1px solid var(--km-c-ink);
	border-radius: var(--km-radius-control);
	background: transparent;
	color: var(--km-c-ink);
	font-family: var(--km-sans);
	font-size: var(--km-fs-button);
	line-height: var(--km-lh-text);
	cursor: pointer;
}

.km-chip.is-selected,
.km-chip[aria-pressed="true"],
input:checked + .km-chip {
	border-color: var(--km-c-forest);
	background: var(--km-c-forest);
	color: var(--km-c-paper);
}

.km-chip.is-full,
.km-chip:disabled,
input:disabled + .km-chip {
	border-color: var(--km-c-muted);
	background: var(--km-c-sage);
	color: var(--km-c-muted);
	cursor: default;
}

input:focus-visible + .km-chip {
	outline: 2px solid var(--km-c-ink);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* FAQ accordion (Figma "FaqItem")                                    */
/* ------------------------------------------------------------------ */

/* Closed: 1px muted rule on top, question row 20/0, Shippori 22/130, plus 24. */
.km-faq__item {
	border-top: 1px solid var(--km-line);
}

.km-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 0;
	list-style: none;
	cursor: pointer;
}

.km-faq__q::-webkit-details-marker {
	display: none;
}

.km-faq__question {
	color: var(--km-heading);
	font-family: var(--km-serif);
	font-size: 22px;
	line-height: 1.3;
}

.km-faq__icon {
	flex: none;
	color: var(--km-heading);
}

.km-faq__icon--close,
.km-faq__item[open] .km-faq__icon--open {
	display: none;
}

.km-faq__item[open] .km-faq__icon--close {
	display: block;
}

/* Open: the answer 4px under the question row, 24px above the next rule. */
.km-faq__a {
	margin-top: 4px;
	padding-bottom: 24px;
	color: var(--km-muted);
	font-size: var(--km-fs-body);
	line-height: var(--km-lh-text);
}

.km-faq__a p + p {
	margin-top: 12px;
}

/* ------------------------------------------------------------------ */
/* Photos with captions                                               */
/* ------------------------------------------------------------------ */

.km-figure {
	margin: 0;
	min-width: 0;
}

.km-figure__media {
	overflow: hidden;
	border-radius: var(--km-radius);
	background: var(--km-c-sage);
}

/* Focal point of a cropped photo (PLAN.md Q28): km_media_image() prints it as --km-focus and,
   when phones crop it differently, --km-focus-phone. */
img[style*="--km-focus"] {
	object-position: var(--km-focus, 50% 50%);
}

@media (max-width: 767px) {
	img[style*="--km-focus"] {
		object-position: var(--km-focus-phone, var(--km-focus, 50% 50%));
	}
}

/* Photos the design shows with square corners (PLAN.md Q15c). */
.km-figure--square .km-figure__media {
	border-radius: 0;
}

.km .km-figure__media img,
.km-figure__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.km-figure__caption {
	margin-top: 8px;
	color: var(--km-muted);
	font-size: var(--km-fs-small);
	line-height: var(--km-lh-text);
}

/* Horizontal scroll rows (Figma "Scroll row": phone, and tablet where the design says so). */
.km-scroll {
	display: flex;
	gap: var(--km-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--km-gutter);
	scrollbar-width: none;
}

.km-scroll::-webkit-scrollbar {
	display: none;
}

.km-scroll > * {
	flex: none;
	scroll-snap-align: start;
}

/* Bleeds a scroll row to the viewport edge while its first item lines up with the container. */
.km-bleed {
	margin-inline: calc(-1 * var(--km-gutter));
	padding-inline: var(--km-gutter);
}

/* ------------------------------------------------------------------ */
/* Split layout (V11 Closing and V11 Request, PLAN.md Q14c)           */
/* ------------------------------------------------------------------ */

/* Desktop: a 720 photo flush to the left edge, the content on the right with the 120 gutter;
   tablet and phone: the photo full width above the content. */
.km-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
}

.km-split__media {
	position: relative;
	min-height: 100%;
}

.km-split__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.km-split__body {
	padding: var(--km-section-pad) var(--km-gutter) var(--km-section-pad) 72px;
}

@media (max-width: 1024px) {
	.km-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.km-split__media {
		min-height: 0;
	}

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

/* ------------------------------------------------------------------ */
/* Elementor integration                                              */
/* ------------------------------------------------------------------ */

/* Komorebi widgets bring their own spacing; remove wrapper gaps around them. */
.elementor-widget[class*="elementor-widget-km-"],
.elementor-widget[class*="elementor-widget-km-"] > .elementor-widget-container {
	margin: 0;
	padding: 0;
}