/*
Theme Name: Kōshi Studio
Theme URI: https://koshi.studio
Author: Kōshi Studio
Author URI: https://koshi.studio
Description: The website theme for Kōshi Studio, built on the same design system as Stay.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: koshi-studio
*/

/* ==========================================================================
   Base
   ========================================================================== */

.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks { overflow-x: clip; }

/* Italics inside headings switch to the serif accent face */
:where(h1, h2, h3, .zzp-display) em {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* Hairline between sections that share the page colour (default style) */
main section.alignfull:not([class*="-background-color"]),
main section.alignfull.has-surface-background-color,
main section.alignfull.has-oat-background-color,
main section.alignfull.has-oat-2-background-color { border-top: var(--wp--custom--section-line, 0 solid transparent); }
main section.has-tint-background-color + section, main .zzp-slider { border-top: 0 !important; }

/* Signature corner: one rounded corner, bottom right */
.is-style-zzp-corner,
.is-style-zzp-corner img,
.is-style-zzp-corner .wp-block-cover__image-background {
	border-radius: 0 0 var(--wp--custom--corner) 0;
}
.is-style-zzp-corner { overflow: hidden; }

/* Panel that sits over the next section, and the section tucked under it */
.zzp-overlap { position: relative; z-index: 2; border-radius: 0 0 var(--wp--custom--corner) 0; }
.zzp-overlap + .zzp-tucked,
.zzp-tucked { position: relative; z-index: 1; }
.zzp-overlap + .zzp-tucked { margin-top: calc(-1 * var(--wp--custom--corner) - 24px) !important; padding-top: calc(var(--wp--preset--spacing--60) + var(--wp--custom--corner) + 24px) !important; }

/* Small sentence-case meta line (replaces old uppercase eyebrows) */
.zzp-meta { font-size: var(--wp--preset--font-size--small); opacity: 0.8; margin: 0; }

/* Tiles: covers used as cards */
.zzp-tile.wp-block-cover { align-items: flex-end; }
.zzp-tile .wp-block-cover__inner-container > * { margin-block: 0; }
.zzp-tile .wp-block-cover__inner-container > * + * { margin-top: 0.15rem; }

/* Drink chips */
.zzp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zzp-chips > p {
	margin: 0 !important;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0 0 calc(var(--wp--custom--corner-small) * 0.6) 0;
	padding: 6px 14px;
	font-size: var(--wp--preset--font-size--small);
}

/* Text links with arrow */
.zzp-arrow a { text-underline-offset: 4px; }

/* ==========================================================================
   Header
   ========================================================================== */

.wp-site-blocks > header:has(.zzp-header--sticky),
.wp-site-blocks > header:has(.zzp-header--overlay) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
.wp-site-blocks > header:has(.zzp-header--overlay) { height: 0; }

.zzp-header {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--line);
	transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.zzp-header > .zzp-header__inner { transition: padding 0.35s ease; }
.zzp-header.is-scrolled > .zzp-header__inner { padding-top: 12px !important; padding-bottom: 12px !important; }

.zzp-header--overlay:not(.is-scrolled) {
	background: transparent;
	color: var(--wp--preset--color--on-deep);
	box-shadow: inset 0 -1px 0 rgba(242, 240, 235, 0.25);
}
/* Hero headlines stay readable over light photos */
.zzp-slider .wp-block-cover__inner-container .wp-block-heading,
.wp-block-cover.zzp-parallax .wp-block-cover__inner-container p,
.wp-block-cover.alignfull .wp-block-cover__inner-container h1 { text-shadow: 0 2px 28px rgba(28, 26, 24, 0.32), 0 1px 3px rgba(28, 26, 24, 0.18); }
/* Keeps the logo and menu readable over bright parts of a photo */
.zzp-header--overlay:not(.is-scrolled) .wp-block-site-title,
.zzp-header--overlay:not(.is-scrolled) .wp-block-navigation-item__content,
.zzp-header--overlay:not(.is-scrolled) .wp-block-navigation__responsive-container-open { text-shadow: 0 1px 14px rgba(28, 26, 24, 0.35), 0 0 2px rgba(28, 26, 24, 0.18); }
.zzp-header--overlay:not(.is-scrolled) .wp-block-navigation__responsive-container-open svg { filter: drop-shadow(0 1px 6px rgba(28, 26, 24, 0.35)); }
.zzp-header--overlay:not(.is-scrolled) .wp-block-button__link {
	background: var(--wp--preset--color--on-deep);
	color: var(--wp--preset--color--deep);
}
.zzp-header .wp-block-navigation__responsive-container.is-menu-open { color: var(--wp--preset--color--ink); }

@media (max-width: 599px) {
	.zzp-header .wp-block-buttons { display: none; }
}

/* ==========================================================================
   Hero slider (front end only; in the editor slides stay stacked)
   ========================================================================== */

body:not(.editor-styles-wrapper) .zzp-slider {
	position: relative;
	height: max(600px, min(92vh, 900px));
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}
body:not(.editor-styles-wrapper) .zzp-slider > .wp-block-cover {
	position: absolute;
	inset: 0;
	min-height: 100% !important;
	margin: 0 !important;
	opacity: 0;
}
body:not(.editor-styles-wrapper) .zzp-slider:not(.zzp-ready) > .wp-block-cover:first-child,
body:not(.editor-styles-wrapper) .zzp-slider > .wp-block-cover.is-active { opacity: 1; z-index: 2; }

/* Slide content */
.zzp-slider .wp-block-cover { padding-bottom: 120px; }
.zzp-slider .wp-block-cover__inner-container { width: 100%; }
.zzp-slider .wp-block-cover .wp-block-cover__image-background { transform: scale(1); }

body:not(.editor-styles-wrapper) .zzp-slider.zzp-ready > .wp-block-cover .wp-block-cover__inner-container {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
body:not(.editor-styles-wrapper) .zzp-slider.zzp-ready > .wp-block-cover.is-active .wp-block-cover__inner-container {
	opacity: 1;
	transform: none;
	transition: opacity 0.9s ease 0.5s, transform 0.9s ease 0.5s;
}

/* Fade + slow zoom */
.zzp-slider.is-style-zzp-fx-fade > .wp-block-cover,
.zzp-slider.is-style-zzp-fx-zoom > .wp-block-cover { transition: opacity 1.2s ease; }
.zzp-slider.is-style-zzp-fx-zoom > .wp-block-cover .wp-block-cover__image-background { transition: transform 1.2s ease 1.2s; }
.zzp-slider.is-style-zzp-fx-zoom > .wp-block-cover.is-active .wp-block-cover__image-background { transform: scale(1.1); transition: transform 7s linear; }

/* Slide */
body:not(.editor-styles-wrapper) .zzp-slider.zzp-ready.is-style-zzp-fx-slide > .wp-block-cover {
	opacity: 1;
	transform: translateX(100%);
	transition: transform 1.1s cubic-bezier(.7, 0, .2, 1);
}
body:not(.editor-styles-wrapper) .zzp-slider.zzp-ready.is-style-zzp-fx-slide > .wp-block-cover.is-prev { transform: translateX(-100%); }
body:not(.editor-styles-wrapper) .zzp-slider.zzp-ready.is-style-zzp-fx-slide > .wp-block-cover.is-active { transform: none; }

/* Curtain */
body:not(.editor-styles-wrapper) .zzp-slider.zzp-ready.is-style-zzp-fx-curtain > .wp-block-cover {
	opacity: 1;
	clip-path: inset(0 0 0 100%);
	z-index: 0;
	transition: none;
}
body:not(.editor-styles-wrapper) .zzp-slider.zzp-ready.is-style-zzp-fx-curtain > .wp-block-cover.is-prev { clip-path: inset(0 0 0 0); z-index: 1; }
body:not(.editor-styles-wrapper) .zzp-slider.zzp-ready.is-style-zzp-fx-curtain > .wp-block-cover.is-active { clip-path: inset(0 0 0 0); z-index: 2; transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
.zzp-slider.is-style-zzp-fx-curtain > .wp-block-cover .wp-block-cover__image-background { transform: scale(1.06); }
.zzp-slider.is-style-zzp-fx-curtain > .wp-block-cover.is-active .wp-block-cover__image-background { transform: scale(1); transition: transform 1.6s ease; }

/* Hairline and controls */
body:not(.editor-styles-wrapper) .zzp-slider::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 88px;
	height: 1px;
	background: rgba(242, 240, 235, 0.28);
	z-index: 3;
	pointer-events: none;
}
.zzp-slider__controls {
	position: absolute;
	left: 0; right: 0; bottom: 22px;
	z-index: 4;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2px;
}
.zzp-slider__controls button {
	width: 44px; height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--on-deep);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.zzp-slider__dot span {
	display: block;
	width: 8px; height: 8px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	background: currentColor;
	box-sizing: border-box;
	transition: all 0.3s ease;
}
.zzp-slider__dot[aria-current="true"] span { width: 12px; height: 12px; background: transparent; }
.zzp-slider__controls button:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: -6px; }
.zzp-slider__pause { margin-left: 8px; }

/* ==========================================================================
   Menu tabs
   ========================================================================== */

.zzp-menu__tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 2rem; }
.zzp-menu__tab {
	background: none;
	border: 0;
	padding: 2px 0;
	min-height: 44px;
	cursor: pointer;
	font-family: inherit;
	font-weight: 300;
	font-size: clamp(2.25rem, 4vw, 3.75rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink-3);
	opacity: 0.75;
	text-align: left;
	transition: color 0.3s ease, opacity 0.3s ease;
}
.zzp-menu__tab[aria-selected="true"] { color: var(--wp--preset--color--ink); opacity: 1; }
.zzp-menu__tab:hover { opacity: 1; }
.zzp-menu__tab:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }
.zzp-menu.zzp-ready .zzp-menu__panel[hidden] { display: none; }
.zzp-menu.zzp-ready .zzp-menu__panels > .zzp-menu__panel { margin-block-start: 0; }
.zzp-menu.zzp-ready .zzp-menu__cat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.zzp-dish { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 13%, transparent); padding-block: 1.25rem; gap: 1.5rem; }
.zzp-dish p { margin: 0; }
.zzp-dish em { font-style: normal; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--accent-strong); margin-left: 0.4em; }
.zzp-dish .zzp-price { font-size: 1.375rem; font-weight: 300; white-space: nowrap; }

/* ==========================================================================
   Live opening status
   ========================================================================== */

.zzp-open-status__big { font-size: clamp(2.6rem, 4vw, 3.5rem); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.zzp-open-status.is-open .zzp-open-status__big::before {
	content: "";
	display: inline-block;
	width: 0.22em; height: 0.22em;
	border-radius: 50%;
	background: #7FB069;
	margin-right: 0.25em;
	vertical-align: 0.3em;
}

/* ==========================================================================
   Footer wordmark
   ========================================================================== */

.zzp-wordmark { white-space: nowrap; max-width: 100%; font-size: clamp(7.5rem, 20vw, 18.75rem) !important; line-height: 1 !important; font-weight: 500 !important; letter-spacing: -0.05em !important; margin-bottom: -0.18em !important; }
.zzp-wordmark a { text-decoration: none; }
.zzp-wordmark a::after { content: "."; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 400; color: var(--wp--preset--color--accent); }

/* ==========================================================================
   Motion (only when the body has .zzp-motion, added by the theme when
   "Scroll animations" is on, and never for reduced-motion visitors)
   ========================================================================== */

/* Image reveal: a mask opens upward while the photo settles from a slight zoom */
.zzp-motion .zzp-mask { clip-path: inset(22% 0 0 0); transition: clip-path 1.4s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--zzp-i, 0) * 120ms); }
.zzp-motion .zzp-mask.is-in { clip-path: inset(0 0 0 0); }
.zzp-motion .zzp-mask:not(.zzp-parallax) img,
.zzp-motion .zzp-mask:not(.zzp-parallax) > .wp-block-cover__image-background { transform: scale(1.16); transition: transform 1.9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--zzp-i, 0) * 120ms); }
.zzp-motion .zzp-mask.is-in:not(.zzp-parallax) img,
.zzp-motion .zzp-mask.is-in:not(.zzp-parallax) > .wp-block-cover__image-background { transform: scale(1); }

/* Rise: headings, text and cards arrive one after another */
.zzp-motion .zzp-rise { opacity: 0; transform: translateY(36px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--zzp-i, 0) * 110ms); }
.zzp-motion .zzp-rise.is-in { opacity: 1; transform: none; }

/* Parallax: the photo drifts slower than the page */
.zzp-motion .zzp-parallax img,
.zzp-motion .zzp-parallax > .wp-block-cover__image-background { transform: translate3d(0, var(--zzp-py, 0px), 0) scale(1.14); will-change: transform; }

/* Statement: words fill in as you scroll */
.zzp-motion .zzp-w { opacity: 0.16; transition: opacity 0.35s ease; }
.zzp-motion .zzp-w.is-on { opacity: 1; }

/* Hover: photos zoom gently */
.is-style-zzp-corner:not(.zzp-parallax) img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.zzp-motion .is-style-zzp-corner.is-in:not(.zzp-parallax):hover img,
.zzp-tile.is-in:hover .wp-block-cover__image-background { transform: scale(1.05); }

/* Signature dishes: a full-width strip you swipe or drag */
.zzp-carousel { --zzp-edge: max(var(--wp--preset--spacing--40), calc((100% - var(--wp--style--global--wide-size, 1360px)) / 2)); }
.zzp-carousel__head { gap: 1.5rem; }
.zzp-carousel__head .wp-block-heading { margin: 0; }
.zzp-carousel .zzp-carousel__track {
	gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	padding: 0 var(--zzp-edge) 4px !important; scroll-padding-inline: var(--zzp-edge);
	scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab;
}
.zzp-carousel__track::-webkit-scrollbar { display: none; }
.zzp-carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.zzp-carousel__track.is-dragging * { pointer-events: none; user-select: none; }
.zzp-carousel .zzp-card { flex: 0 0 clamp(250px, 26vw, 380px); scroll-snap-align: start; margin: 0 !important; }
.zzp-card .wp-block-image { margin: 0; }
.zzp-card .wp-block-image img { width: 100%; -webkit-user-drag: none; }
.zzp-card .wp-block-heading { margin: 0; font-weight: 400; }
.zzp-card .zzp-price { margin: 0; }
.zzp-carousel__ui { display: flex; align-items: center; gap: 14px; flex-shrink: 0; font-size: var(--wp--preset--font-size--small); font-variant-numeric: tabular-nums; }
.zzp-carousel__count { color: var(--wp--preset--color--ink-3); margin-right: 6px; }
.zzp-carousel__count b { color: var(--wp--preset--color--ink); font-weight: 500; }
.zzp-carousel__btn {
	width: 48px; height: 48px; display: grid; place-items: center; padding: 0; cursor: pointer;
	background: transparent; color: var(--wp--preset--color--ink);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent);
	border-radius: 0 0 var(--wp--custom--corner-small) 0; transition: background-color .35s ease, color .35s ease, border-color .35s ease, opacity .35s ease;
}
.zzp-carousel__btn:hover:not(:disabled) { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); border-color: var(--wp--preset--color--ink); }
.zzp-carousel__btn:disabled { opacity: .3; cursor: default; }
.zzp-carousel__btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.zzp-carousel__btn svg { width: 18px; height: 18px; }
@media (max-width: 600px) {
	.zzp-carousel .zzp-carousel__track { gap: 14px; }
	.zzp-carousel .zzp-card { flex-basis: 76vw; }
	.zzp-carousel__btn { display: none; }
}

/* Buttons fill from the signature corner */
.wp-element-button { position: relative; overflow: hidden; isolation: isolate; transition: color 0.45s ease, border-color 0.45s ease; }
.wp-element-button::before {
	content: "";
	position: absolute;
	right: -30%;
	bottom: -160%;
	width: 170%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	transform: scale(0);
	transform-origin: 100% 100%;
	transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
	z-index: -1;
	pointer-events: none;
}
.wp-element-button:hover,
.wp-element-button:focus-visible { color: var(--wp--preset--color--ink) !important; border-color: var(--wp--preset--color--accent) !important; }
.wp-element-button:hover::before,
.wp-element-button:focus-visible::before { transform: scale(1); }
body:not(.zzp-motion) .wp-element-button::before { transition: none; }

/* Text links with an arrow: the underline draws away and back */
.zzp-arrow a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size 0.5s cubic-bezier(.2, .7, .2, 1); }
.zzp-arrow a:hover { background-size: 0 1px; background-position: 100% 100%; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
	.zzp-motion .zzp-mask, .zzp-motion .zzp-rise, .zzp-motion .zzp-w { clip-path: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   Reservation panel
   ========================================================================== */

.zzp-reserve { position: relative; overflow: hidden; }
.zzp-reserve .zzp-reserve__content { position: relative; z-index: 1; }
.zzp-watermark {
	position: absolute;
	right: -0.06em;
	bottom: -0.32em;
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: clamp(10rem, 24vw, 21rem);
	line-height: 1;
	opacity: 0.08;
	pointer-events: none;
	user-select: none;
}

/* Outline buttons follow the surrounding text colour */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1px solid currentColor;
	padding: calc(0.85em - 1px) calc(1.6em - 1px);
}


/* Columns gap on stacked mobile */
@media (max-width: 781px) {
	.zzp-menu__nav { margin-bottom: 0; }
	.zzp-slider .wp-block-cover .wp-block-heading { max-width: 100%; }
}

/* Small fixes */
.wp-block-column > .zzp-open-status { height: 100%; box-sizing: border-box; }
.wp-block-quote.zzp-statement cite { display: block; margin-top: 1.5rem; font-size: var(--wp--preset--font-size--small); font-style: normal; color: var(--wp--preset--color--ink-3); letter-spacing: 0; }
.zzp-footer { overflow: hidden; }


/* ==========================================================================
   Kōshi Studio site
   ========================================================================== */
.ks-logo img { display: block; height: auto; }
.ks-label { letter-spacing: 0.16em; text-transform: uppercase; }
.ks-card { height: 100%; box-sizing: border-box; }
.ks-step-num { font-variant-numeric: tabular-nums; }
.ks-looks .wp-block-image { margin: 0; }
.ks-looks figcaption { margin-top: 0.6rem; text-align: left; }
.ks-nav a { text-decoration: none; }
@media (max-width: 781px) { .ks-hide-mobile { display: none !important; } }