/*
Theme Name: Kamakura
Theme URI: https://koshi.studio/
Author: Kōshi Studio
Author URI: https://koshi.studio
Description: Kamakura is a calm, editorial block theme for restaurants, bars, cafés and boutique hotels. A slow-zoom hero slider, a split-screen menu panel, an interactive menu, live opening hours with weather, a swipeable strip of signature dishes, smooth scroll motion and a signature rounded corner. Seven destination styles (Kamakura, Hydra, Marrakech, Paris, Amalfi, Kyoto, Gion), each with its own colours, fonts and line pattern, plus three font pairings to mix and match.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 3.9.17
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kamakura
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, style-variations, translation-ready, wide-blocks, food-and-drink, blog
*/

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

/* Lighter, crisper text on macOS (Safari, Chrome and Firefox draw fonts heavier by default) */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

.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: inherit;
	letter-spacing: -0.01em;
}

/* 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; }
/* Captions stay readable on light photos (a white bathtub, a whitewashed wall), also on short tiles */
.zzp-tile .wp-block-cover__background.has-background-gradient { background: linear-gradient(180deg, rgba(28,26,24,0) 22%, rgba(28,26,24,0.34) 58%, rgba(28,26,24,0.7) 100%) !important; }
.zzp-tile .wp-block-cover__inner-container { text-shadow: 0 1px 12px rgba(28,26,24,0.35); }
.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;
}
body:not(.editor-styles-wrapper) .wp-site-blocks > header:has(.zzp-header--overlay) { height: 0; }
/* In the Site Editor the transparent header sits above the hero instead of over it */
.editor-styles-wrapper .zzp-header--overlay:not(.is-scrolled) { background: var(--wp--preset--color--deep); }

.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; }
}

/* Weather in the opening-hours tile (Pro) */
.zzp-open-status .zzp-weather { margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); display: flex; align-items: center; gap: 8px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--on-deep); }
.zzp-open-status .zzp-weather svg { flex: none; opacity: 0.9; }
.zzp-open-status .zzp-weather__credit { display: block; margin-top: 4px; font-size: 10px; letter-spacing: 0.02em; color: inherit; opacity: 0.6; text-decoration: none; }
.zzp-open-status .zzp-weather__credit:hover { opacity: 1; text-decoration: underline; }

/* ==========================================================================
   Menu panel header: "Menu" button, location switcher, split-screen panel
   ========================================================================== */
.zzp-header--panel .zzp-header__left { min-width: 0; }
.zzp-menu-toggle-wrap, .zzp-menu-close-wrap { margin: 0; }
.zzp-menu-toggle, .zzp-menu-close {
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
	color: inherit; text-decoration: none; font-size: var(--wp--preset--font-size--small); letter-spacing: 0.01em;
}
.zzp-menu-toggle::before {
	content: ""; width: 20px; height: 9px; flex: none;
	border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transition: transform 0.35s ease;
}
.zzp-menu-toggle:hover::before { transform: scaleX(0.8); transform-origin: left; }
.zzp-menu-close::before {
	content: ""; width: 16px; height: 16px; flex: none;
	background:
		linear-gradient(45deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px)),
		linear-gradient(-45deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px));
	transition: transform 0.35s ease;
}
.zzp-menu-close:hover::before { transform: rotate(90deg); }
.zzp-menu-toggle:focus-visible, .zzp-menu-close:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }

/* Location switcher */
.zzp-header nav.zzp-locations, .zzp-header .zzp-demo-switch { padding-left: 22px; border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent); font-size: var(--wp--preset--font-size--small); }
.zzp-header .zzp-locations .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface) !important; color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--preset--color--line) !important; border-radius: 0 0 var(--wp--custom--corner-small) 0; padding: 6px 0; min-width: 180px !important;
	box-shadow: 0 18px 40px -24px rgba(28, 26, 24, 0.35);
}
.zzp-header .zzp-locations .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 18px; text-shadow: none !important; }
.zzp-header .zzp-locations .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--surface-2); }

/* The panel */
body:not(.editor-styles-wrapper) .zzp-menu-panel {
	position: fixed; inset: 0; z-index: 999; overflow-y: auto; overscroll-behavior: contain;
	top: var(--wp-admin--admin-bar--height, 0px);
	margin: 0 !important; padding: 0 !important;
}
body:not(.editor-styles-wrapper) .zzp-menu-panel:not(:target):not(.is-open) { display: none; }
html.zzp-menu-open { overflow: hidden; }
.zzp-menu-panel { opacity: 0; transition: opacity 0.4s ease; }
.zzp-menu-panel.is-visible, .zzp-menu-panel:target, .editor-styles-wrapper .zzp-menu-panel { opacity: 1; }
.zzp-menu-panel .zzp-menu-panel__cols { min-height: 100%; margin: 0; gap: 0; align-items: stretch !important; }
body:not(.editor-styles-wrapper) .zzp-menu-panel .zzp-menu-panel__cols { min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); }
.zzp-menu-panel__left {
	display: flex; flex-direction: column; justify-content: space-between; gap: var(--wp--preset--spacing--50);
	padding: 22px var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}
.zzp-menu-panel .zzp-menu-panel__right { align-self: stretch !important; }
.zzp-menu-panel__right {
	overflow: hidden;
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	display: flex; flex-direction: column; justify-content: center;
}
.zzp-menu-panel .wp-block-site-title, .zzp-menu-panel .wp-block-navigation-item__content { text-shadow: none !important; }
.zzp-menu-panel .zzp-menu-panel__nav { font-family: var(--zzp-heading-font, var(--wp--preset--font-family--serif)); font-weight: 300; }
.zzp-menu-panel:focus { outline: none; }
.zzp-menu-panel .zzp-menu-panel__nav .wp-block-navigation-item__content:focus-visible { outline: none; }
.zzp-menu-panel .zzp-menu-panel__nav .wp-block-navigation-item__content {
	font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.12; letter-spacing: -0.01em; padding: 0.06em 0;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s cubic-bezier(.2,.7,.2,1);
}
.zzp-menu-panel .zzp-menu-panel__nav .wp-block-navigation-item__content:hover,
.zzp-menu-panel .zzp-menu-panel__nav .wp-block-navigation-item__content:focus-visible { background-size: 100% 1px; }
.zzp-menu-panel .zzp-menu-panel__foot { margin: 0; }
.zzp-header .zzp-menu-panel .wp-block-button__link,
.zzp-header--overlay:not(.is-scrolled) .zzp-menu-panel .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 1px solid currentColor; }
/* Cards sit on the drawing: the caption gets a clean white base */
.zzp-carousel--panel .zzp-card { background: var(--wp--preset--color--surface); padding-bottom: 18px; }
.zzp-carousel--panel .zzp-card > :not(figure) { padding-inline: 16px; }
.zzp-carousel--panel .zzp-carousel__head { background: var(--wp--preset--color--surface); align-self: flex-start; padding: 6px 14px; margin-bottom: 4px; }
.zzp-carousel--panel .zzp-carousel__track { padding: 0 var(--wp--preset--spacing--40) 4px 0 !important; scroll-padding-inline: 0; }
.zzp-carousel--panel .zzp-card { flex: 0 0 clamp(240px, 24vw, 340px); }
.zzp-carousel--panel .zzp-carousel__head { padding-right: var(--wp--preset--spacing--40); }

/* Opening motion: links rise one after another, cards follow */
.zzp-menu-panel .zzp-menu-panel__nav > .wp-block-navigation__container > li,
.zzp-menu-panel .zzp-carousel--panel .zzp-card { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.zzp-menu-panel.is-visible .zzp-menu-panel__nav > .wp-block-navigation__container > li,
.zzp-menu-panel:target .zzp-menu-panel__nav > .wp-block-navigation__container > li,
.zzp-menu-panel.is-visible .zzp-carousel--panel .zzp-card,
.zzp-menu-panel:target .zzp-carousel--panel .zzp-card,
.editor-styles-wrapper .zzp-menu-panel .zzp-menu-panel__nav > .wp-block-navigation__container > li,
.editor-styles-wrapper .zzp-menu-panel .zzp-card { opacity: 1; transform: none; }
.zzp-menu-panel__nav > .wp-block-navigation__container > li:nth-child(2) { transition-delay: 60ms; }
.zzp-menu-panel__nav > .wp-block-navigation__container > li:nth-child(3) { transition-delay: 120ms; }
.zzp-menu-panel__nav > .wp-block-navigation__container > li:nth-child(4) { transition-delay: 180ms; }
.zzp-menu-panel__nav > .wp-block-navigation__container > li:nth-child(5) { transition-delay: 240ms; }
.zzp-menu-panel__nav > .wp-block-navigation__container > li:nth-child(n+6) { transition-delay: 300ms; }
.zzp-carousel--panel .zzp-card:nth-child(1) { transition-delay: 220ms; }
.zzp-carousel--panel .zzp-card:nth-child(2) { transition-delay: 300ms; }
.zzp-carousel--panel .zzp-card:nth-child(n+3) { transition-delay: 380ms; }

@media (max-width: 781px) {
	.zzp-header .zzp-locations { display: none; }
	.zzp-menu-panel__left { border-right: 0; min-height: auto; }
	.zzp-menu-panel__right { padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
	.zzp-carousel--panel .zzp-card { flex-basis: 62vw; }
	.zzp-menu-panel .zzp-menu-panel__nav .wp-block-navigation-item__content { font-size: clamp(2rem, 9vw, 2.6rem); }
}
@media (max-width: 599px) {
	.zzp-header .zzp-menu-panel .wp-block-buttons { display: flex; }
	.zzp-header--panel .zzp-header__left .wp-block-site-title { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
	.zzp-menu-panel, .zzp-menu-panel .zzp-menu-panel__nav > .wp-block-navigation__container > li, .zzp-menu-panel .zzp-card { transition: none !important; opacity: 1; transform: none; }
}

/* Demo mode: destination / style switcher */
.zzp-demo-switch { position: relative; font-size: var(--wp--preset--font-size--small); }
.zzp-demo-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.zzp-demo-switch > summary::-webkit-details-marker { display: none; }
.zzp-demo-switch > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s ease; }
.zzp-demo-switch[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.zzp-demo-switch > summary:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }
.zzp-demo-switch ul {
	position: absolute; top: 100%; left: 22px; z-index: 20; margin: 0; padding: 6px 0; list-style: none; min-width: 240px;
	background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line); border-radius: 0 0 var(--wp--custom--corner-small) 0;
	box-shadow: 0 18px 40px -24px rgba(28, 26, 24, 0.35); text-shadow: none;
}
.zzp-demo-switch a { display: flex; flex-direction: column; gap: 1px; padding: 10px 18px; color: inherit; text-decoration: none; }
.zzp-demo-switch a:hover, .zzp-demo-switch a:focus-visible { background: var(--wp--preset--color--surface-2); outline: none; }
.zzp-demo-switch a[aria-current="true"] .zzp-demo-switch__name::after { content: " ✓"; color: var(--wp--preset--color--accent-strong); }
.zzp-demo-switch__note { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--ink-3); }
.zzp-header--overlay:not(.is-scrolled) .zzp-demo-switch > summary { text-shadow: 0 1px 14px rgba(28, 26, 24, 0.35), 0 0 2px rgba(28, 26, 24, 0.18); }
@media (max-width: 781px) { .zzp-header .zzp-demo-switch { display: block; padding-left: 14px; } .zzp-demo-switch ul { left: auto; right: -60px; } }

/* Line pattern, drawn in the block's own text colour */
.is-style-zzp-pattern, .zzp-reserve { position: relative; isolation: isolate; overflow: hidden; }
.is-style-zzp-pattern::before, .zzp-reserve::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-color: currentColor; opacity: calc(var(--zzp-pattern-opacity, 0.16) * var(--zzp-pattern-strength, 1));
	-webkit-mask: var(--zzp-pattern) var(--zzp-pattern-pos, 0 0) / var(--zzp-pattern-size) var(--zzp-pattern-repeat, repeat);
	mask: var(--zzp-pattern) var(--zzp-pattern-pos, 0 0) / var(--zzp-pattern-size) var(--zzp-pattern-repeat, repeat);
}
.zzp-reserve::before {
	/* fades in from the right so the headline stays calm */
	-webkit-mask: var(--zzp-pattern) var(--zzp-pattern-pos, 0 0) / var(--zzp-pattern-size) var(--zzp-pattern-repeat, repeat), linear-gradient(90deg, transparent 25%, #000 85%);
	mask: var(--zzp-pattern) var(--zzp-pattern-pos, 0 0) / var(--zzp-pattern-size) var(--zzp-pattern-repeat, repeat), linear-gradient(90deg, transparent 25%, #000 85%);
	-webkit-mask-composite: source-in; mask-composite: intersect;
	opacity: calc(var(--zzp-pattern-opacity, 0.22) * var(--zzp-pattern-strength, 1));
}
/* Footer band: the destination's own pattern where the big name used to be, rising softly out of the footer */
.zzp-footer-band { min-height: clamp(160px, 22vw, 280px); margin-top: var(--wp--preset--spacing--40) !important; }
.zzp-footer-band::before {
	-webkit-mask: var(--zzp-pattern) var(--zzp-pattern-pos, 0 0) / var(--zzp-pattern-size) var(--zzp-pattern-repeat, repeat), linear-gradient(180deg, transparent 0%, #000 75%);
	mask: var(--zzp-pattern) var(--zzp-pattern-pos, 0 0) / var(--zzp-pattern-size) var(--zzp-pattern-repeat, repeat), linear-gradient(180deg, transparent 0%, #000 75%);
	-webkit-mask-composite: source-in; mask-composite: intersect;
	opacity: calc(var(--zzp-pattern-opacity, 0.22) * var(--zzp-pattern-strength, 1));
}
/* Full: the pattern as a backdrop, a fine line at full strength in the style's pattern colour */
.is-style-zzp-pattern.zzp-pat-full::before, .zzp-reserve.zzp-pat-full::before {
	opacity: 1; background-color: var(--wp--preset--color--pattern, currentColor);
}

/* ---- Agency sections: the pattern used sparingly, as a frame ---- */
/* Photo with pattern backdrop: one screen tall, the drawing covers the section, a 2:3 photo centred
   in the left half and the text on a clean card anchored to the bottom of the right half */
.zzp-backdrop { padding: 0 !important; }
.zzp-backdrop > .wp-block-columns { margin: 0 !important; gap: 0 !important; align-items: stretch !important; flex-wrap: nowrap; min-height: clamp(640px, 100vh, 1000px); }
.zzp-backdrop__media { position: relative; z-index: 1; display: flex !important; align-items: center; justify-content: center; padding: clamp(40px, 6vh, 72px) 24px; }
.zzp-backdrop__media .wp-block-image { margin: 0; height: min(75vh, 750px); aspect-ratio: 2 / 3; width: auto; max-width: 100%; }
.zzp-backdrop__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zzp-backdrop__side { display: flex !important; flex-direction: column; justify-content: flex-end; position: relative; z-index: 1; }
.zzp-backdrop__card {
	background: var(--wp--preset--color--surface); margin: 0 !important;
	padding: clamp(48px, 8vh, 96px) clamp(24px, 6vw, 112px) clamp(48px, 9vh, 112px) !important;
}
.zzp-backdrop__card h2 { margin-bottom: 0.5em; }
.zzp-backdrop__card p:not(.zzp-meta):not(.zzp-arrow) { font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.5; }
/* Text position follows the column's Align setting (top / middle / bottom; bottom by default) */
.zzp-backdrop .zzp-backdrop__side.is-vertically-aligned-top { justify-content: flex-start; align-self: stretch !important; }
.zzp-backdrop .zzp-backdrop__side.is-vertically-aligned-center { justify-content: center; align-self: stretch !important; }
.zzp-backdrop .zzp-backdrop__side.is-vertically-aligned-bottom { justify-content: flex-end; align-self: stretch !important; }
.zzp-backdrop--half .zzp-backdrop__side.is-vertically-aligned-center .zzp-backdrop__card,
.zzp-backdrop--half .zzp-backdrop__side.is-vertically-aligned-top .zzp-backdrop__card { padding-block: clamp(40px, 6vh, 72px) !important; }

/* Mirrored: photo on the right, text on the left (alternate with the full backdrop) */
.zzp-backdrop--reverse > .wp-block-columns { flex-direction: row-reverse; }

/* Half variation: the drawing only behind the photo, the text on plain white */
.zzp-backdrop--half .zzp-backdrop__media { overflow: hidden; }

@media (max-width: 781px) {
	.zzp-backdrop > .wp-block-columns, .zzp-backdrop--reverse > .wp-block-columns { flex-direction: column; flex-wrap: nowrap !important; min-height: 0; }
	.zzp-backdrop__media { padding: 48px 32px 32px; }
	.zzp-backdrop__media .wp-block-image { height: auto; width: 78%; }
	.zzp-backdrop__card { padding: 40px 24px 56px !important; }
}

/* Framed hero: centred title, then a wide photo with the pattern only at its sides */
.zzp-frame { position: relative; isolation: isolate; }
.zzp-frame.is-style-zzp-pattern::before { top: 22%; }
.zzp-frame .wp-block-image { margin: 0 auto; position: relative; z-index: 1; }
.zzp-frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 781px) { .zzp-frame.is-style-zzp-pattern::before { top: 30%; } }

/* Closing call: a quiet card framed by the pattern */
.zzp-closing__card { background: var(--wp--preset--color--surface); position: relative; z-index: 1; }
/* White pause between the framed closing card and the footer, so the two drawings don't run together */
.zzp-closing { margin-bottom: var(--wp--preset--spacing--60) !important; }
main > .zzp-closing:last-child, main > .wp-block-group:last-child > .zzp-closing:last-child { margin-bottom: var(--wp--preset--spacing--60) !important; }

/* Clean card: white with one fine line, no fill */
.zzp-outline { background: transparent; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }

/* Pattern switched off on a block that has one by default */
.zzp-pat-none::before { content: none; }

/* In the Site Editor the panel shows as a section at the end of the page */
.editor-styles-wrapper .zzp-menu-panel { border-top: 1px dashed var(--wp--preset--color--line); }
.editor-styles-wrapper .zzp-menu-panel::before { content: "Menu panel · opens from the Menu button"; display: block; padding: 10px var(--wp--preset--spacing--40); font-size: 12px; letter-spacing: 0.04em; color: var(--wp--preset--color--ink-3); background: var(--wp--preset--color--surface-2); }

/* 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; position: relative; isolation: isolate; }
/* Footer drawing: the destination's line drawing as one fine, light outline on the right, like a signature */
.zzp-footer::before {
	content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 55%; z-index: -1; pointer-events: none;
	background-color: var(--wp--preset--color--on-deep); opacity: 0.32;
	-webkit-mask: var(--zzp-pattern) var(--zzp-footer-mask, right center / auto 135% no-repeat);
	mask: var(--zzp-pattern) var(--zzp-footer-mask, right center / auto 135% no-repeat);
	-webkit-mask-image: var(--zzp-pattern), linear-gradient(90deg, transparent 0%, #000 45%);
	-webkit-mask-composite: source-in; mask-composite: intersect;
}
.zzp-footer .zzp-footer__brand { margin: 0; font-weight: 300; letter-spacing: -0.01em; }
.zzp-footer .zzp-footer__brand a { text-decoration: none; }
.zzp-footer .zzp-footer__base { padding-top: var(--wp--preset--spacing--30); border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.zzp-footer .zzp-footer__base p { margin: 0; }

/* ==========================================================================
   Section spacing (3.9.11) — Shopify-style Top / Bottom padding per section.
   Classes zzp-pt-{px} / zzp-pb-{px} from the editor's Section spacing panel.
   Values scale down on tablets (0.8) and phones (0.6).
   ========================================================================== */
:root { --zzp-pad-scale: 1; }
@media (max-width: 1024px) { :root { --zzp-pad-scale: 0.8; } }
@media (max-width: 600px) { :root { --zzp-pad-scale: 0.6; } }
.zzp-pt-0{--zzp-pt:0px} .zzp-pt-8{--zzp-pt:8px} .zzp-pt-16{--zzp-pt:16px} .zzp-pt-24{--zzp-pt:24px} .zzp-pt-32{--zzp-pt:32px} .zzp-pt-40{--zzp-pt:40px} .zzp-pt-48{--zzp-pt:48px} .zzp-pt-56{--zzp-pt:56px} .zzp-pt-64{--zzp-pt:64px} .zzp-pt-72{--zzp-pt:72px} .zzp-pt-80{--zzp-pt:80px} .zzp-pt-88{--zzp-pt:88px} .zzp-pt-96{--zzp-pt:96px} .zzp-pt-104{--zzp-pt:104px} .zzp-pt-112{--zzp-pt:112px} .zzp-pt-120{--zzp-pt:120px} .zzp-pt-128{--zzp-pt:128px} .zzp-pt-136{--zzp-pt:136px} .zzp-pt-144{--zzp-pt:144px} .zzp-pt-152{--zzp-pt:152px} .zzp-pt-160{--zzp-pt:160px} .zzp-pt-168{--zzp-pt:168px} .zzp-pt-176{--zzp-pt:176px} .zzp-pt-184{--zzp-pt:184px} .zzp-pt-192{--zzp-pt:192px} .zzp-pt-200{--zzp-pt:200px} .zzp-pt-208{--zzp-pt:208px} .zzp-pt-216{--zzp-pt:216px} .zzp-pt-224{--zzp-pt:224px} .zzp-pt-232{--zzp-pt:232px} .zzp-pt-240{--zzp-pt:240px}
.zzp-pb-0{--zzp-pb:0px} .zzp-pb-8{--zzp-pb:8px} .zzp-pb-16{--zzp-pb:16px} .zzp-pb-24{--zzp-pb:24px} .zzp-pb-32{--zzp-pb:32px} .zzp-pb-40{--zzp-pb:40px} .zzp-pb-48{--zzp-pb:48px} .zzp-pb-56{--zzp-pb:56px} .zzp-pb-64{--zzp-pb:64px} .zzp-pb-72{--zzp-pb:72px} .zzp-pb-80{--zzp-pb:80px} .zzp-pb-88{--zzp-pb:88px} .zzp-pb-96{--zzp-pb:96px} .zzp-pb-104{--zzp-pb:104px} .zzp-pb-112{--zzp-pb:112px} .zzp-pb-120{--zzp-pb:120px} .zzp-pb-128{--zzp-pb:128px} .zzp-pb-136{--zzp-pb:136px} .zzp-pb-144{--zzp-pb:144px} .zzp-pb-152{--zzp-pb:152px} .zzp-pb-160{--zzp-pb:160px} .zzp-pb-168{--zzp-pb:168px} .zzp-pb-176{--zzp-pb:176px} .zzp-pb-184{--zzp-pb:184px} .zzp-pb-192{--zzp-pb:192px} .zzp-pb-200{--zzp-pb:200px} .zzp-pb-208{--zzp-pb:208px} .zzp-pb-216{--zzp-pb:216px} .zzp-pb-224{--zzp-pb:224px} .zzp-pb-232{--zzp-pb:232px} .zzp-pb-240{--zzp-pb:240px}
body [class*="zzp-pt-"]:is(.wp-block-group, .wp-block-cover) { padding-top: calc(var(--zzp-pt, 0px) * var(--zzp-pad-scale)) !important; }
body [class*="zzp-pb-"]:is(.wp-block-group, .wp-block-cover) { padding-bottom: calc(var(--zzp-pb, 0px) * var(--zzp-pad-scale)) !important; }
/* A section tucked under the statement panel keeps room for the overlap. */
body .zzp-overlap + .zzp-tucked[class*="zzp-pt-"] { padding-top: calc(var(--zzp-pt, 0px) * var(--zzp-pad-scale) + var(--wp--custom--corner) + 24px) !important; }
/* Backdrop sections stay one screen tall inside the chosen padding. */
body .zzp-backdrop[class*="zzp-pt-"], body .zzp-backdrop[class*="zzp-pb-"] { box-sizing: border-box; }