/*
 * Wallz Kitchen components. Values come from theme.json tokens (--wp--preset--*, --wp--custom--*).
 * One section per component. Units: rem for type and spacing, em for text-relative spacing,
 * % and fr for layout, px for rules and borders.
 */

:root {
	--wk-header: var(--wp--custom--header-height);
	--wk-rule: var(--wp--custom--rule) solid var(--wp--preset--color--ink);
	--wk-space-section: var(--wp--preset--spacing--60);
}

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

body {
	margin: 0;
	background: var(--wp--preset--color--sand) url(img/paper.jpg) top center / 100% auto repeat-y;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { text-underline-offset: 0.15em; }
:where(.wp-block-columns) { gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); }
:where(.wp-block-image) { margin: 0; }
:where(.wp-block-image) img { display: block; width: 100%; }
.wk-skip { position: absolute; left: -999em; }
.wk-skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--wp--preset--color--sand); padding: 0.5em 1em; }

/* ---------- Header ---------- */

.wk-header {
	position: sticky; top: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40);
	min-height: var(--wk-header);
	margin-bottom: calc(-1 * var(--wk-header)); /* Overlays the first section, as on live. */
	padding-inline: 3.33%;
	background: rgb(255 237 208 / 37%);
	transition: background-color 0.6s ease, min-height 0.6s ease;
}
.wk-header.is-stuck {
	min-height: 3.75rem;
	background-color: transparent;
	-webkit-backdrop-filter: saturate(120%) blur(20px);
	backdrop-filter: saturate(120%) blur(20px);
}
.wk-header__logo img { display: block; width: 11.25rem; }
.admin-bar .wk-header { top: var(--wp-admin--admin-bar--height, 0); }

.wk-nav__menu { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.wk-nav__menu a {
	display: block; padding: 0.5em 0.625rem;
	font-family: var(--wp--preset--font-family--display); font-size: 1.3125rem; line-height: 1.4; text-transform: uppercase;
	color: var(--wp--preset--color--ink); text-decoration: none;
	box-shadow: inset 0 calc(-1 * var(--wp--custom--rule)) 0 transparent;
	transition: color 0.2s, box-shadow 0.2s;
}
.wk-nav__menu a:hover,
.wk-nav__menu .current-menu-item > a { color: var(--wp--preset--color--green); box-shadow: inset 0 calc(-1 * var(--wp--custom--rule)) 0 var(--wp--preset--color--green); }
.wk-nav__toggle { display: none; padding: 0.25rem; border: 0; background: none; color: var(--wp--preset--color--ink); cursor: pointer; }
.wk-nav__toggle svg { display: block; width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

@media (max-width: 940px) {
	.wk-nav__toggle { display: block; }
	.wk-nav__menu {
		display: none; position: absolute; inset: 100% 0 auto;
		flex-direction: column; background: rgb(255 237 208 / 89%);
	}
	.wk-nav__menu.is-open { display: flex; }
	.wk-nav__menu a { padding: 0.5rem 1.25rem; font-size: 1.5rem; box-shadow: none; }
	.wk-nav__menu .current-menu-item > a { box-shadow: none; }
}

/* ---------- Sections ----------
 * Every full-width group is a section. Sand sections that follow each other share one gap.
 */

.wk-main > .alignfull,
.wk-main > section.wp-block-group { padding-block: var(--wk-space-section); }
.wk-main > section:not(.has-background) + section:not(.has-background) { padding-top: 0; }
.wk-main > section:first-child:not(.wp-block-cover) { padding-top: calc(var(--wk-header) + var(--wp--preset--spacing--40)); }
.wk-main > section > * + * { margin-top: var(--wp--preset--spacing--50); }

/* Wave: the brushed sand edge at the top of an olive band. */
.is-style-wave { position: relative; }
.is-style-wave::before {
	content: ""; position: absolute; inset: -1px 0 auto; height: 0.75rem;
	background: var(--wp--preset--color--sand);
	-webkit-mask: url(img/wave-brush.svg) center / 100% 100% no-repeat;
	mask: url(img/wave-brush.svg) center / 100% 100% no-repeat;
}

/* ---------- Headings ---------- */

.is-style-ruled::before,
.is-style-ruled::after,
.is-style-underline::after {
	content: ""; display: block; border-top: var(--wk-rule);
}
.is-style-ruled::before { width: min(23rem, 60%); margin: 0 auto 0.5em; }
.is-style-ruled::after { width: 6.25rem; margin: 0.5em auto 0; }
.is-style-underline::after { width: 14.375rem; max-width: 60%; margin-top: 1.5em; }
.has-text-align-center.is-style-underline::after { margin-inline: auto; }
.wk-lead { max-width: 46rem; margin-inline: auto; line-height: 1.5; text-wrap: balance; }

/* Statement: a long sentence used as a heading. FF Prill has capitals only, so long text uses Lato. */
.wp-block-heading.is-style-statement {
	font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--m);
	font-weight: 700; line-height: 1.45; letter-spacing: 0; text-transform: none; text-wrap: pretty;
}
.is-style-statement::after { content: ""; display: block; width: 6.25rem; margin-top: 1em; border-top: var(--wk-rule); }

/* Callout: one sentence lifted out of running text. */
.wk-callout {
	margin-block: 1.75em !important; padding-left: var(--wp--preset--spacing--30);
	border-left: var(--wp--custom--rule) solid var(--wp--preset--color--green);
	font-size: var(--wp--preset--font-size--m); line-height: 1.5; font-weight: 700;
}

/* ---------- Lines above and below (logo band, reviews box) ---------- */

.wp-block-group.is-style-rules { border-block: var(--wk-rule); padding-block: var(--wp--preset--spacing--40); }
.wk-logos { gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); align-items: center; }
.wk-logos > .wp-block-heading { margin: 0; }
.wk-logos .wp-block-image img { width: auto; height: 4.5rem; }

/* ---------- Images ---------- */

.is-style-arch img,
.is-style-arch-right img { aspect-ratio: 1; object-fit: cover; }
.is-style-arch img { border-top-left-radius: var(--wp--custom--arch); }
.is-style-arch-right img { border-top-right-radius: var(--wp--custom--arch); }

/* Photos beside text keep a set size and sit against the text column. */
.wp-block-column > .wp-block-image:only-child { max-width: 25rem; margin-inline: auto 0; }
.is-style-wave .wp-block-column > .wp-block-image:only-child { max-width: 19rem; }
@media (max-width: 781px) { .wp-block-column > .wp-block-image:only-child { margin-inline: auto; } }

/* ---------- Buttons ---------- */

.wp-block-button:not(.is-style-link) .wp-element-button { min-width: 21rem; max-width: 100%; box-sizing: border-box; text-align: center; }
.wp-element-button.has-ochre-background-color { color: #fff; }
.wp-element-button.has-ochre-background-color:hover { background-color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-link .wp-element-button {
	padding: 0; background: none; border-radius: 0; color: var(--wp--preset--color--green);
}
.wp-block-button.is-style-link .wp-element-button:hover { background: none; text-decoration: underline; }

/* ---------- Service cards ----------
 * The whole card is one link (the "learn more" link stretched over it) and lifts slightly on hover.
 */

.wk-cards { gap: var(--wp--preset--spacing--40); }
.wp-block-group.is-style-card {
	position: relative;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--custom--shadow);
	text-align: center;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
}
.is-style-card > .wp-block-image { width: 100%; overflow: hidden; border-top-left-radius: var(--wp--custom--arch); }
.is-style-card > .wp-block-image img { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.is-style-card .wp-block-heading { margin: var(--wp--preset--spacing--20) 0 0; }
.is-style-card .is-style-link .wp-element-button { color: var(--wp--preset--color--ink); font-size: 0.875rem; }
.is-style-card .is-style-link .wp-element-button::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.is-style-card:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 4px; }
.is-style-card .is-style-link .wp-element-button:focus-visible { outline: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-block-group.is-style-card:hover { transform: scale(1.03); box-shadow: 0 14px 28px -10px rgb(0 0 0 / 45%); }
	.is-style-card:hover > .wp-block-image img { transform: scale(1.05); }
	.is-style-card:hover .is-style-link .wp-element-button { text-decoration: underline; }
}

/* ---------- Other services (compact cards on service pages) ---------- */

.wk-more-services .wk-cards { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); gap: var(--wp--preset--spacing--30); }
.wk-more-services .wp-block-group.is-style-card { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); }
.wk-more-services .is-style-card .wp-block-heading { font-size: var(--wp--preset--font-size--base); }
@media (max-width: 600px) { .wk-more-services .wk-cards { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Hero ----------
 * A soft sand wash on the left keeps the black logo and script readable over the video.
 */

.wk-hero { align-items: center; }
.wk-hero .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(90deg, rgb(255 234 200 / 72%) 0%, rgb(255 234 200 / 40%) 38%, rgb(255 234 200 / 0%) 65%) !important;
}
.wk-hero .wp-block-cover__inner-container { width: min(75rem, 100%); margin-inline: auto; padding-inline: 8%; }
.wk-hero__title { margin: 0; line-height: 1; }
.wk-hero__title img { display: block; width: min(30rem, 80vw); height: auto; }
.wk-hero__script { margin-top: 0.15em; line-height: 1.2; color: var(--wp--preset--color--ink); }
.wk-hero .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }
@media (max-width: 781px) {
	.wk-hero .wp-block-cover__background { background: linear-gradient(180deg, rgb(255 234 200 / 0%) 20%, rgb(255 234 200 / 65%) 50%, rgb(255 234 200 / 0%) 85%) !important; }
	.wk-hero .wp-element-button { min-width: 0; width: 100%; }
}

/* ---------- Photo strip ----------
 * Moves slowly on its own (theme.js), can be dragged with a mouse or swiped. Loops endlessly.
 */

.wk-strip { padding-block: var(--wp--preset--spacing--50); }
.wp-block-gallery.has-nested-images.is-style-strip {
	display: flex; flex-wrap: nowrap; gap: var(--wp--preset--spacing--30);
	overflow-x: auto; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.wp-block-gallery.is-style-strip.is-dragging { cursor: grabbing; }
.wp-block-gallery.is-style-strip::-webkit-scrollbar { display: none; }
.wp-block-gallery.has-nested-images.is-style-strip figure.wp-block-image:not(#individual-image) {
	flex: 0 0 clamp(12rem, 18vw, 17.5rem); width: auto; margin: 0;
}
.wp-block-gallery.is-style-strip img { aspect-ratio: 1; object-fit: cover; border-bottom-right-radius: 2rem; pointer-events: none; -webkit-user-drag: none; }

/* ---------- Gallery (grid) ----------
 * Even grid of square crops; the full photo opens in WordPress's lightbox.
 */

.wp-block-gallery.has-nested-images.is-style-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
}
.wp-block-gallery.has-nested-images.is-style-grid figure.wp-block-image:not(#individual-image) {
	width: auto; margin: 0; overflow: hidden; border-radius: var(--wp--custom--radius); box-shadow: var(--wp--custom--shadow);
}
.wp-block-gallery.has-nested-images.is-style-grid figure.wp-block-image img {
	width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-block-gallery.is-style-grid figure.wp-block-image:hover img { transform: scale(1.05); }
}
@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images.is-style-grid { grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--10); }
}

/* ---------- Reviews ---------- */

.wk-review__name { margin: var(--wp--preset--spacing--20) 0 0; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--s); font-weight: 700; letter-spacing: 0.03em; text-transform: none; }
.wk-review__role { font-size: var(--wp--preset--font-size--s); font-weight: 700; }
.wk-review__role:empty { display: none; }

/* List (Guestbook): full reviews in two balanced columns, each opened by a large quotation mark. */
.wp-block-query:not(.is-style-slider) .wp-block-post-template {
	columns: 2 22rem; column-gap: clamp(2rem, 5vw, 5rem); margin: 0; padding: 0; list-style: none;
}
.wp-block-query:not(.is-style-slider) .wp-block-post { break-inside: avoid; margin-bottom: var(--wp--preset--spacing--50); }
.wp-block-query:not(.is-style-slider) .wp-block-post::before {
	content: "“"; display: block; height: 0.55em; margin-bottom: 0.15em;
	font-family: var(--wp--preset--font-family--display); font-size: 5rem; line-height: 1; color: var(--wp--preset--color--olive);
}
.wp-block-query:not(.is-style-slider) .wp-block-post-content { font-style: italic; }
.wp-block-query:not(.is-style-slider) .wp-block-post-content > * + * { margin-top: 0.75em; }
.wp-block-query:not(.is-style-slider) .wk-review__name::before { content: ""; display: block; width: 3rem; margin-bottom: var(--wp--preset--spacing--20); border-top: var(--wk-rule); }

/* Slider (Home): short quotes, one at a time, dots added by the script. */
.wp-block-query.is-style-slider .wp-block-post-template {
	display: flex; margin: 0; padding: 0; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.wp-block-query.is-style-slider .wp-block-post-template::-webkit-scrollbar { display: none; }
.wp-block-query.is-style-slider .wp-block-post { flex: 0 0 100%; scroll-snap-align: start; padding-inline: var(--wp--preset--spacing--30); box-sizing: border-box; }
.wp-block-query.is-style-slider .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--m); }
.wp-block-query.is-style-slider .wp-block-post-excerpt__excerpt { margin: 0; }
.wk-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--wp--preset--spacing--40); }
.wk-dots button { width: 0.5rem; height: 0.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--wp--preset--color--ink); opacity: 0.25; cursor: pointer; }
.wk-dots button[aria-current] { opacity: 1; }

/* Single review page */
.wk-review blockquote { margin: 0; font-style: italic; }
.wk-review cite { display: block; margin-top: 1em; font-style: normal; font-weight: 700; }

/* ---------- Quote ----------
 * One quote style for the whole site: display type, no border, closed by a short rule.
 * Beside an arched photo it is the editorial quote on About.
 */

.wp-block-quote { margin: 0; padding: 0; border: 0; }
.wp-block-quote p {
	font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--l);
	line-height: 1.3; text-transform: uppercase; text-wrap: balance;
}
.wp-block-quote::after { content: ""; display: block; width: 6.25rem; margin-top: var(--wp--preset--spacing--30); border-top: var(--wk-rule); }
.wk-quote { padding-block: var(--wp--preset--spacing--50); }
.wk-quote .wp-block-columns { align-items: center; gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 781px) {
	.wk-quote .wp-block-quote { text-align: center; }
	.wk-quote .wp-block-quote::after { margin-inline: auto; }
	.wk-quote .wp-block-column > .wp-block-image:only-child { max-width: min(18rem, 80%); }
}

/* ---------- Text columns ---------- */

.wk-prose { margin-inline: auto; }
.wk-prose > * + *, .wp-block-column > p + p { margin-top: 1em; }
.wp-block-column > * + * { margin-top: var(--wp--preset--spacing--30); }
.wk-plain { padding: calc(var(--wk-header) + var(--wp--preset--spacing--40)) var(--wp--preset--spacing--30) var(--wk-space-section); }
.wk-plain > * + * { margin-top: 1em; }
.wk-plain > * { max-width: 40rem; margin-inline: auto; font-size: var(--wp--preset--font-size--s); }
.wk-plain > h1 { font-size: var(--wp--preset--font-size--xl); }
.wk-plain > h2 { margin-top: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--m); line-height: 1.3; }
.wk-plain > h1 + p { margin-top: var(--wp--preset--spacing--10); }

/* ---------- Contact dialog ---------- */

.wk-dialog { width: min(62.5rem, 92vw); max-height: 92vh; padding: 0; border: 0; background: #FDF6E9; color: var(--wp--preset--color--ink); }
.wk-dialog::backdrop { background: rgb(251 196 108 / 38%); }
.wk-dialog[open] { animation: wk-fade-in 0.4s ease; }
.wk-dialog__inner { display: grid; grid-template-columns: 1fr 1fr; }
.wk-dialog__inner > img { width: 100%; height: 100%; max-height: 92vh; object-fit: cover; }
.wk-dialog__body { padding: 3em 3em 4em; }
.wk-dialog__body h2 { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--xl); }
.wk-dialog__close { position: absolute; top: 0.25rem; right: 0.75rem; z-index: 1; padding: 0; border: 0; background: none; font-size: 3rem; line-height: 1; color: #0F1319; cursor: pointer; }
@media (max-width: 767px) {
	.wk-dialog__inner { grid-template-columns: 1fr; }
	.wk-dialog__inner > img { display: none; }
	.wk-dialog__body { padding: 3em 1.5em 2em; }
}
.wk-dialog .jet-form-builder-row { margin-bottom: 0.75rem; }
.wk-dialog input:not([type=checkbox]):not([type=submit]), .wk-dialog textarea {
	width: 100%; box-sizing: border-box; padding: 0.7em 0.9em;
	border: 1px solid rgb(10 10 10 / 35%); border-radius: var(--wp--custom--radius); background: #fff; font: inherit; font-size: var(--wp--preset--font-size--s);
}
.wk-dialog textarea { min-height: 7rem; }
.wk-dialog .jet-form-builder__submit {
	width: 100%; padding: 0.95em 2em; border: 0; border-radius: var(--wp--custom--radius); cursor: pointer;
	background: var(--wp--preset--color--green); color: var(--wp--preset--color--cream);
	font: 700 var(--wp--preset--font-size--s)/1.4 var(--wp--preset--font-family--body); text-transform: lowercase;
}
.wk-dialog .jet-form-builder__submit:hover { background: var(--wp--preset--color--ink); }

/* ---------- Footer ---------- */

.wk-footer {
	padding: var(--wp--preset--spacing--50) 8% var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream);
	font-size: var(--wp--preset--font-size--xs); line-height: 1.6; letter-spacing: 0.06em;
}
.wk-footer a { color: inherit; text-decoration: none; }
.wk-footer a:hover { color: #fff; text-decoration: underline; }
.wk-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40); }
.wk-footer__brand img { display: block; width: 11.25rem; filter: invert(93%); }
.wk-footer__tagline { margin: 0.1em 0 0; font-family: var(--wp--preset--font-family--script); font-size: 2rem; line-height: 1.2; letter-spacing: 0; }
.wk-footer__menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.wk-footer__menu a { font-family: var(--wp--preset--font-family--display); font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.04em; }
.wk-footer__cta {
	padding: 0.7em 1.6em; border: 1px solid currentColor; border-radius: var(--wp--custom--radius);
	font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--s); font-weight: 700; text-transform: lowercase;
}
.wk-footer__cta:hover { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--ink) !important; text-decoration: none !important; }
.wk-footer__credit { margin: var(--wp--preset--spacing--50) 0 0; padding-top: var(--wp--preset--spacing--20); border-top: 1px solid rgb(232 231 226 / 20%); opacity: 0.8; }
@media (max-width: 781px) {
	.wk-footer { padding-inline: var(--wp--preset--spacing--30); }
	.wk-footer__top { flex-direction: column; align-items: flex-start; }
}

/* ---------- Fade-in ----------
 * Below the fold: theme.js adds .wk-fade, starts loading the photo early, and reveals once it is ready.
 * The hero animates with CSS alone, so it never waits for the script.
 */

@keyframes wk-fade-in { from { opacity: 0; } }
@keyframes wk-rise { from { opacity: 0; translate: 0 0.75rem; } }
@media (prefers-reduced-motion: no-preference) {
	.js .wk-fade { opacity: 0; translate: 0 0.75rem; transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease; }
	.js .wk-fade.is-in { opacity: 1; translate: none; }
	.wk-hero__title, .wk-hero__script, .wk-hero .wp-block-buttons { animation: wk-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
	.wk-hero__script { animation-delay: 0.12s; }
	.wk-hero .wp-block-buttons { animation-delay: 0.24s; }
}