/* Kamkat 2026: styles that theme.json cannot express. Tokens come from theme.json presets. */

:root {
	--kk-radius: 18px;
	--kk-line: var(--wp--preset--color--line);
}

/* Eyebrow label above section headings */
.kk-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kumquat);
}
.has-garden-background-color .kk-eyebrow,
.has-garden-deep-background-color .kk-eyebrow { color: var(--wp--preset--color--apricot); }
.kk-eyebrow--light { color: #F3D9B8; }

.kk-muted { color: var(--wp--preset--color--muted); }

/* Headings that are links keep the heading colour */
.wp-block-heading a { color: inherit; text-decoration: none; }
.wp-block-heading a:hover { color: var(--wp--preset--color--kumquat); text-decoration: underline; text-underline-offset: 4px; }

/* Top bar */
.kk-topbar a { color: inherit; text-decoration: none; }
.kk-topbar a:hover { text-decoration: underline; }

/* Header */
.kk-header { border-bottom: 1px solid var(--kk-line); }
.kk-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--wp--preset--color--ink); }
.kk-brand img { width: 52px; height: 52px; object-fit: contain; }
.kk-brand__name { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; font-weight: 600; line-height: 1.05; }
.kk-brand__tag { display: block; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.kk-header .wp-block-navigation__responsive-container-open,
.kk-header .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }

/* Hero */
.kk-hero h1 { max-width: 14ch; }
.kk-hero .wp-block-cover__inner-container { width: 100%; max-width: var(--wp--style--global--wide-size); }

/* Booking bar */
.kk-booking-wrap { position: relative; z-index: 2; margin-top: -72px !important; }
.kk-booking {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	align-items: stretch;
	background: #fff;
	border-radius: var(--kk-radius);
	box-shadow: var(--wp--preset--shadow--card);
	padding: 0.875rem;
}
.kk-booking label { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1.375rem; border-right: 1px solid var(--kk-line); }
.kk-booking label:nth-of-type(3) { border-right: 0; }
.kk-booking label span { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.kk-booking input, .kk-booking select { border: 0; background: transparent; font: inherit; font-size: 1.125rem; color: var(--wp--preset--color--ink); padding: 0.25rem 0; min-height: 36px; }
.kk-booking button,
.kk-form button {
	border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 1.0625rem;
	color: #fff; background: var(--wp--preset--color--kumquat);
	border-radius: 12px; padding: 0 2.125rem; min-height: 64px;
	transition: background-color 0.2s ease;
}
.kk-booking button:hover, .kk-form button:hover { background: var(--wp--preset--color--kumquat-dark); }
.kk-booking button:focus-visible, .kk-form button:focus-visible { outline: 2px solid var(--wp--preset--color--garden); outline-offset: 3px; }
.kk-booking--stack { grid-template-columns: minmax(0, 1fr); box-shadow: none; padding: 0; gap: 0.75rem; }
.kk-booking--stack label { border: 1px solid #CFC5B3; border-radius: 10px; padding: 0.5rem 0.875rem; }
.kk-booking--stack label:nth-of-type(3) { border-right: 1px solid #CFC5B3; }
.kk-booking--stack button { border-radius: 999px; min-height: 52px; }
.kk-booking-note { text-align: center; }

/* Cards */
.kk-card { background: #fff; border-radius: var(--kk-radius); overflow: hidden; height: 100%; }
.kk-card .wp-block-post-featured-image img,
.kk-card > .wp-block-image img { border-radius: 0; }
.kk-card__body { padding: 1.625rem 1.75rem 1.875rem; }
.kk-card__meta { border-top: 1px solid var(--kk-line); padding-top: 1rem; margin-top: 0.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.9375rem; }
.kk-card__meta p { margin: 0; }
.kk-card .wp-block-post-title a { text-decoration: none; }
.kk-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.kk-card { position: relative; }
.kk-card a:focus-visible { outline: none; }
.kk-card:focus-within { outline: 2px solid var(--wp--preset--color--kumquat); outline-offset: 3px; }

/* Arched photo pair in the intro */
.kk-photo-pair { position: relative; min-height: 600px; }
.kk-photo-pair .kk-arch { position: absolute; right: 0; top: 0; width: 78%; margin: 0; }
.kk-photo-pair .kk-arch img { width: 100%; height: 470px; object-fit: cover; border-radius: 220px 220px 18px 18px; }
.kk-photo-pair .kk-inset { position: absolute; left: 0; bottom: 0; width: 46%; margin: 0; }
.kk-photo-pair .kk-inset img { width: 100%; height: 300px; object-fit: cover; border-radius: 18px; border: 8px solid var(--wp--preset--color--limestone); }

.kk-arch-solo img { height: 520px; border-radius: 220px 220px 18px 18px; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }

.kk-stat { font-family: var(--wp--preset--font-family--display); font-size: 3rem; line-height: 1; color: var(--wp--preset--color--garden); margin: 0; }
.kk-stat-label { font-size: 0.875rem; color: var(--wp--preset--color--muted); margin: 0.375rem 0 0; }

/* Fixed-height images in grids */
.kk-fit img { width: 100%; object-fit: cover; }
.kk-h-340 img { height: 340px; }
.kk-h-300 img { height: 300px; }
.kk-h-280 img { height: 280px; }
.kk-h-230 img { height: 230px; }

/* Amenity list with line icons */
.kk-amenities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.375rem 1.75rem; }
.kk-amenities li { display: flex; align-items: center; gap: 0.875rem; }
.kk-amenities li::before {
	content: ""; flex: none; width: 26px; height: 26px; background: var(--wp--preset--color--apricot);
	-webkit-mask: var(--kk-icon) center / contain no-repeat; mask: var(--kk-icon) center / contain no-repeat;
}
.kk-ic-ac      { --kk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h20M12 2v20M20 16l-4-4 4-4M4 8l4 4-4 4M16 4l-4 4-4-4M8 20l4-4 4 4'/%3E%3C/svg%3E"); }
.kk-ic-fire    { --kk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.15.43-2.29 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E"); }
.kk-ic-wifi    { --kk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Ccircle cx='12' cy='20' r='1'/%3E%3C/svg%3E"); }
.kk-ic-kitchen { --kk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2M7 2v20M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3zm0 0v7'/%3E%3C/svg%3E"); }
.kk-ic-car     { --kk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='7' rx='2'/%3E%3Cpath d='M5 11l2-5h10l2 5M7 18v2M17 18v2'/%3E%3C/svg%3E"); }
.kk-ic-bag     { --kk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.kk-ic-bell    { --kk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.kk-ic-shield  { --kk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.kk-ic-tree    { --kk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-7M17 8a5 5 0 0 0-10 0 4 4 0 0 0 1 7.9h8A4 4 0 0 0 17 8z'/%3E%3C/svg%3E"); }
.kk-ic-tv      { --kk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2'/%3E%3Cpath d='m17 2-5 5-5-5'/%3E%3C/svg%3E"); }
.kk-ic-check   { --kk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.kk-amenities--light li::before { background: var(--wp--preset--color--garden); }
.kk-amenities--one { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }

/* Chips */
.kk-chips .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 1px solid #CFC5B3; font-weight: 500; padding: 0.6rem 1.25rem; }
.kk-chips .wp-block-button__link:hover { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }

/* Reviews */
.kk-review { background: #fff; border: 1px solid var(--kk-line); border-radius: var(--kk-radius); padding: 1.875rem; height: 100%; }
.kk-stars { color: #C2560F; letter-spacing: 4px; font-size: 1.25rem; margin: 0; }
.kk-review blockquote, .kk-review .kk-quote { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; line-height: 1.35; margin: 0; }

/* Forms */
.kk-form { display: flex; flex-direction: column; gap: 1.125rem; background: #fff; border: 1px solid var(--kk-line); border-radius: var(--kk-radius); padding: clamp(1.25rem, 3vw, 2.125rem); }
.kk-form label { display: flex; flex-direction: column; gap: 0.375rem; font-weight: 600; font-size: 0.9375rem; }
.kk-form input, .kk-form textarea { font: inherit; font-weight: 400; color: var(--wp--preset--color--ink); border: 1px solid #CFC5B3; border-radius: 10px; padding: 0.8rem 0.875rem; min-height: 48px; box-sizing: border-box; background: #fff; }
.kk-form input:focus, .kk-form textarea:focus { outline: 2px solid var(--wp--preset--color--kumquat); outline-offset: 1px; border-color: transparent; }
.kk-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.kk-form button { align-self: flex-start; border-radius: 999px; min-height: 50px; background: var(--wp--preset--color--garden); }
.kk-form button:hover { background: var(--wp--preset--color--garden-deep); }
.kk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kk-notice { padding: 0.875rem 1.125rem; border-radius: 10px; font-weight: 600; }
.kk-notice--ok { background: #E3EFE3; color: #1F4B2A; }
.kk-notice--err { background: #FBE4DC; color: #7E2A09; }

.kk-map iframe { width: 100%; height: 320px; border: 0; border-radius: var(--kk-radius); display: block; }

/* Footer */
.kk-footer a { color: #C9C3B4; text-decoration: none; }
.kk-footer a:hover { color: #fff; text-decoration: underline; }
.kk-social { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }

/* Suite page */
.kk-gallery .wp-block-image img { height: 100%; object-fit: cover; }
.kk-sticky { position: sticky; top: 1.5rem; }
.kk-facts { border-top: 1px solid var(--kk-line); }
.kk-facts > .wp-block-group { border-bottom: 1px solid var(--kk-line); padding: 1rem 0; }

/* Mobile action bar */
.kk-mobile-bar { display: none; }
@media (max-width: 781px) {
	.kk-mobile-bar {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0.625rem;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
		background: #fff; border-top: 1px solid var(--kk-line); box-shadow: 0 -6px 20px rgba(30, 36, 31, 0.08);
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
	}
	.kk-mobile-bar a { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 999px; font-weight: 700; text-decoration: none; }
	.kk-mobile-bar .kk-call { border: 1px solid var(--wp--preset--color--garden); color: var(--wp--preset--color--garden); }
	.kk-mobile-bar .kk-book { background: var(--wp--preset--color--kumquat); color: #fff; }
	body { padding-bottom: 80px; }

	.kk-booking { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.625rem; }
	.kk-booking label { border: 1px solid #CFC5B3 !important; border-radius: 10px; padding: 0.5rem 0.75rem; }
	.kk-booking label:nth-of-type(3) { grid-column: 1 / -1; }
	.kk-booking button { grid-column: 1 / -1; min-height: 52px; border-radius: 999px; }
	.kk-booking-wrap { margin-top: -32px !important; }
	.kk-hide-mobile { display: none !important; }
	.kk-topbar .alignwide > p:first-child { display: none; }
	.kk-topbar .alignwide { justify-content: center !important; }
	.kk-photo-pair { min-height: 0; }
	.kk-photo-pair .kk-arch, .kk-photo-pair .kk-inset { position: static; width: 100%; }
	.kk-photo-pair .kk-inset { display: none; }
	.kk-photo-pair .kk-arch img { height: 380px; border-radius: 160px 160px 18px 18px; }
	.kk-amenities { grid-template-columns: minmax(0, 1fr); }
	.kk-form__row { grid-template-columns: minmax(0, 1fr); }
	.kk-h-340 img, .kk-h-300 img { height: 240px; }
	.kk-arch-solo img { height: 380px; border-radius: 160px 160px 18px 18px; }
	.kk-sticky { position: static; }
}

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