/* ============================================================
   CONTACT US PAGE (template-contact.php) — home-page look & feel
   ============================================================ */
.kk-contact-hero { background: var(--kk-black); text-align: center; padding: 260px 40px 70px; }
.kk-contact-hero-inner { max-width: 760px; margin: 0 auto; }
.kk-contact-hero .kk-hero-eyebrow { justify-content: center; margin-bottom: 22px; }
.kk-contact-hero .kk-h1 { color: #F7F1E6; font-size: clamp(34px, 5vw, 64px); line-height: 1.05; }
.kk-contact-hero .kk-p { margin: 20px auto 0; max-width: 620px; }
.kk-contact.kk-location { padding-top: 50px; }
.kk-contact .kk-loc-info > .kk-hero-eyebrow { display: inline-flex; margin-bottom: 6px; }
.kk-contact-map { padding: 0; }                 /* let the iframe fill it */
.kk-contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* --- Contact form --- */
.kk-contact-form .kk-h3 { color: #F7F1E6; margin: 8px 0 22px; }
.kk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kk-form { display: flex; flex-direction: column; gap: 16px; }
.kk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kk-field { display: flex; flex-direction: column; gap: 8px; }
.kk-field > span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-gold); font-weight: 600; }
.kk-field input,
.kk-field textarea {
	font-family: var(--font-body); font-size: 15px; color: var(--fg1);
	background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-md);
	padding: 13px 16px; width: 100%;
	transition: border-color var(--dur-fast), background var(--dur-fast);
}
.kk-field input:focus,
.kk-field textarea:focus { outline: none; border-color: var(--kk-gold-light); background: rgba(28,26,21,.7); }
.kk-field textarea { resize: vertical; min-height: 120px; }
/* Validation states — styled to the site, only after the user interacts. */
.kk-field input:user-invalid,
.kk-field select:user-invalid,
.kk-field textarea:user-invalid { border-color: #e0736d; background: rgba(190,60,60,.10); }
.kk-field input:user-valid,
.kk-field select:user-valid,
.kk-field textarea:user-valid { border-color: rgba(169,127,45,.55); }
/* Inline "This field is required." message — hidden until the field is invalid. */
.kk-field-error { display: none; color: #e0736d; font-size: 13px; font-weight: 400; margin-top: -2px; }
.kk-field input:user-invalid ~ .kk-field-error,
.kk-field select:user-invalid ~ .kk-field-error,
.kk-field textarea:user-invalid ~ .kk-field-error { display: block; }
.kk-form .kk-btn { align-self: flex-start; margin-top: 6px; }
/* Form submit button ("Send Message" / "Send Request"): hover matches the banner
 * button — transparent fill, gold text + border, no lift. */
.kk-form .kk-btn-primary:hover {
	background: transparent;
	color: var(--kk-gold-light);
	border-color: var(--kk-gold);
	box-shadow: none;
	transform: none;
}
.kk-form-note { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); font-size: 14px; margin-bottom: 18px; }
.kk-form-note i { width: 18px; height: 18px; flex: none; }
.kk-form-ok  { background: rgba(27,153,139,.14); border: 1px solid rgba(27,153,139,.5); color: #7fd9c9; }
.kk-form-err { background: rgba(190,60,60,.16); border: 1px solid rgba(190,60,60,.5); color: #e6a6a6; }

/* Date input — match the text inputs. */
.kk-field input[type="date"] {
	font-family: var(--font-body); font-size: 15px; color: var(--fg1);
	background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-md);
	padding: 13px 16px; width: 100%; appearance: none; -webkit-appearance: none;
	transition: border-color var(--dur-fast), background var(--dur-fast);
}
.kk-field input[type="date"]:focus { outline: none; border-color: var(--kk-gold-light); background: rgba(28,26,21,.7); }
.kk-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg); cursor: pointer; }

/* Number field (party size) — hide the grey OS spinner, add site-coloured
 * up/down stepper buttons. */
.kk-num { position: relative; }
.kk-field .kk-num-input { -moz-appearance: textfield; appearance: textfield; padding-right: 44px; }
.kk-num-input::-webkit-outer-spin-button,
.kk-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kk-num-btns { position: absolute; top: 5px; right: 6px; bottom: 5px; display: flex; flex-direction: column; gap: 3px; }
.kk-num-btns button {
	flex: 1 1 0; min-height: 0; width: 30px; display: grid; place-items: center; padding: 0;
	background: none; border: 0; color: var(--kk-gold); cursor: pointer;
	transition: color var(--dur-fast);
}
.kk-num-btns button:hover { color: var(--kk-gold-light); }
.kk-num-btns i { width: 12px; height: 12px; }
.kk-field:has(.kk-num-input:user-invalid) > .kk-field-error { display: block; }

/* Custom dropdown (Event Type) — fully CSS-styled in site colours, so the open
 * list uses a gold highlight instead of the OS-blue native one. Backed by a
 * hidden input for submission + JS-driven required validation. */
.kk-field-select, .kk-field-date { position: relative; }
.kk-select, .kk-datepick { position: relative; }
.kk-select-trigger, .kk-date-trigger {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	font-family: var(--font-body); font-size: 15px; color: var(--fg1); text-align: left;
	background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-md);
	padding: 13px 16px; cursor: pointer;
	transition: border-color var(--dur-fast), background var(--dur-fast);
}
.kk-select-trigger:hover, .kk-date-trigger:hover { border-color: rgba(169,127,45,.55); }
.kk-select.is-open .kk-select-trigger,
.kk-datepick.is-open .kk-date-trigger,
.kk-select-trigger:focus-visible, .kk-date-trigger:focus-visible { outline: none; border-color: var(--kk-gold-light); background: rgba(28,26,21,.7); }
.kk-select-trigger i, .kk-date-trigger i { width: 16px; height: 16px; flex: none; color: var(--kk-gold); }
.kk-select-trigger i { transition: transform var(--dur-fast); }
.kk-select.is-open .kk-select-trigger i { transform: rotate(180deg); }
.kk-select-value[data-empty="true"], .kk-date-value[data-empty="true"] { color: var(--fg3); }
.kk-select-list {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5;
	list-style: none; margin: 0; padding: 6px; max-height: 250px; overflow-y: auto;
	background: var(--kk-charcoal); border: 1px solid var(--glass-border); border-radius: var(--r-md);
	box-shadow: 0 24px 60px rgba(0,0,0,.5); display: none;
}
.kk-select.is-open .kk-select-list { display: block; animation: kkFade var(--dur-fast) ease both; }
.kk-select-list li {
	padding: 11px 14px; border-radius: var(--r-sm); cursor: pointer; font-size: 15px; color: var(--fg1);
	transition: background var(--dur-fast), color var(--dur-fast);
}
.kk-select-list li:hover { background: rgba(250,216,122,.12); color: var(--kk-gold-light); }
.kk-select-list li[aria-selected="true"] { background: var(--kk-gold-light); color: #1a1305; font-weight: 600; }
/* Error state (JS toggles .kk-invalid on the field). */
.kk-field-select.kk-invalid .kk-select-trigger { border-color: #e0736d; background: rgba(190,60,60,.10); }
.kk-field-select.kk-invalid .kk-field-error { display: block; }

/* Custom date picker (Event Date) — calendar in site colours, gold highlight
 * instead of the OS-blue native picker. Same hidden-input + JS-validation model. */
.kk-date-pop {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; width: 300px; max-width: 100%;
	background: var(--kk-charcoal); border: 1px solid var(--glass-border); border-radius: var(--r-md);
	box-shadow: 0 24px 60px rgba(0,0,0,.5); padding: 14px; display: none;
}
.kk-datepick.is-open .kk-date-pop { display: block; animation: kkFade var(--dur-fast) ease both; }
.kk-date-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kk-date-title { font-weight: 600; color: var(--fg1); font-size: 15px; }
.kk-date-nav {
	width: 32px; height: 32px; display: grid; place-items: center; flex: none;
	background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--fg1); cursor: pointer;
	transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.kk-date-nav:hover { border-color: var(--kk-gold-light); background: rgba(250,216,122,.1); color: var(--kk-gold-light); }
.kk-date-nav i { width: 16px; height: 16px; }
.kk-date-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.kk-date-dow span { text-align: center; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--kk-gold); font-weight: 600; padding: 4px 0; }
.kk-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kk-date-cell {
	aspect-ratio: 1 / 1; display: grid; place-items: center; border: 1px solid transparent; background: transparent;
	color: var(--fg1); font-family: var(--font-body); font-size: 14px; border-radius: var(--r-sm); cursor: pointer;
	transition: background var(--dur-fast), color var(--dur-fast);
}
.kk-date-cell.is-empty { cursor: default; }
.kk-date-cell:not(.is-empty):not(.is-disabled):hover { background: rgba(250,216,122,.12); color: var(--kk-gold-light); }
.kk-date-cell.is-today { border-color: var(--line); }
.kk-date-cell.is-selected { background: var(--kk-gold-light); color: #1a1305; font-weight: 600; border-color: var(--kk-gold-light); }
.kk-date-cell.is-disabled { color: var(--fg3); opacity: .4; cursor: not-allowed; }
.kk-field-date.kk-invalid .kk-date-trigger { border-color: #e0736d; background: rgba(190,60,60,.10); }
.kk-field-date.kk-invalid .kk-field-error { display: block; }

/* Site-coloured scrollbars for every scrollable area inside the popups
 * (the modal itself, the dropdown lists and the calendar) — gold thumb on a
 * faint track instead of the OS default. */
.kk-modal-dialog, .kk-select-list, .kk-date-pop, .kk-modal .kk-form textarea {
	scrollbar-width: thin;
	scrollbar-color: var(--kk-gold) rgba(250,216,122,.08);
}
.kk-modal-dialog::-webkit-scrollbar,
.kk-select-list::-webkit-scrollbar,
.kk-date-pop::-webkit-scrollbar,
.kk-modal .kk-form textarea::-webkit-scrollbar { width: 9px; height: 9px; }
.kk-modal-dialog::-webkit-scrollbar-track,
.kk-select-list::-webkit-scrollbar-track,
.kk-date-pop::-webkit-scrollbar-track,
.kk-modal .kk-form textarea::-webkit-scrollbar-track { background: rgba(250,216,122,.06); border-radius: 999px; }
.kk-modal-dialog::-webkit-scrollbar-thumb,
.kk-select-list::-webkit-scrollbar-thumb,
.kk-date-pop::-webkit-scrollbar-thumb,
.kk-modal .kk-form textarea::-webkit-scrollbar-thumb { background: var(--kk-gold); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.kk-modal-dialog::-webkit-scrollbar-thumb:hover,
.kk-select-list::-webkit-scrollbar-thumb:hover,
.kk-date-pop::-webkit-scrollbar-thumb:hover,
.kk-modal .kk-form textarea::-webkit-scrollbar-thumb:hover { background: var(--kk-gold-light); }

/* ---- Event-booking modal (Plan Your Event popup) ---- */
.kk-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.kk-modal.is-open { display: block; }
.kk-modal-overlay { position: absolute; inset: 0; background: rgba(8,7,5,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: kkFade var(--dur-fast) ease both; }
.kk-modal-dialog {
	position: relative; z-index: 1; margin: auto;
	width: min(560px, calc(100vw - 40px));
	max-height: calc(100vh - 60px); overflow-y: auto;
	top: 50%; transform: translateY(-50%);
	background: var(--kk-charcoal); border: 1px solid var(--glass-border);
	border-radius: var(--r-lg); box-shadow: 0 40px 100px rgba(0,0,0,.6);
	padding: 38px 38px 34px; animation: kkPop var(--dur-base) ease both;
}
.kk-modal-dialog .kk-h3 { margin: 6px 0 22px; }
.kk-modal-x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center;
	background: var(--glass); border: 1px solid var(--line); border-radius: 999px; color: var(--fg1); cursor: pointer;
	transition: border-color var(--dur-fast), background var(--dur-fast); }
.kk-modal-x:hover { border-color: var(--kk-gold-light); background: rgba(250,216,122,.1); }
.kk-modal-x i { width: 18px; height: 18px; }
@keyframes kkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kkPop { from { opacity: 0; transform: translateY(-46%); } to { opacity: 1; transform: translateY(-50%); } }
@media (max-width: 560px) {
	.kk-modal-dialog { padding: 30px 22px 26px; top: 0; transform: none; margin-top: 24px; margin-bottom: 24px; max-height: calc(100vh - 48px); }
	@keyframes kkPop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* --- Left = details (address + hours on one line) + map; right = form.
 *     Columns are equal height, and the map fills the left column down to
 *     where the form ends (so the map bottom lines up with the form bottom). */
.kk-contact .kk-loc-grid { align-items: stretch; }
.kk-contact .kk-loc-info { display: flex; flex-direction: column; }
.kk-contact .kk-loc-rows { display: grid; grid-template-columns: 1fr; }
.kk-contact .kk-loc-info .kk-map { margin-top: 28px; flex: 1 1 auto; height: auto; min-height: 240px; }

/* Desktop (≥1025px) layout per the sketch: details (Address left + Phone/Hours
 * right) over a full-width Map, with the Form in the right column. */
@media (min-width: 1025px) {
	.kk-contact .kk-loc-grid { grid-template-columns: 1.4fr 1fr; }
	.kk-contact .kk-loc-rows { grid-template-columns: 1fr 1fr; column-gap: 36px; row-gap: 18px; align-items: start; }
	.kk-contact .kk-loc-rows > :first-child { grid-column: 1; grid-row: 1 / span 2; } /* Address spans the left sub-column */
}

/* Contact responsive — hero top padding tracks the shrinking nav logo;
 * below 1024 the grid stacks and the map becomes a fixed-height block. */
@media (max-width: 1536px) { .kk-contact-hero { padding-top: 220px; } }
@media (max-width: 1440px) { .kk-contact-hero { padding-top: 200px; } }
@media (max-width: 1280px) { .kk-contact-hero { padding-top: 170px; } }
@media (max-width: 1024px) { .kk-contact-hero { padding: 150px 22px 40px; } .kk-contact.kk-location { padding-top: 30px; } .kk-contact .kk-loc-info { display: block; } .kk-contact .kk-loc-info .kk-map { flex: none; height: 360px; min-height: 0; } }
@media (max-width: 640px)  { .kk-form-row { grid-template-columns: 1fr; } .kk-contact .kk-loc-rows { grid-template-columns: 1fr; } }
@media (max-width: 480px)  { .kk-contact-hero { padding: 120px 20px 36px; } .kk-contact-hero .kk-h1 { font-size: 28px; } .kk-contact .kk-loc-info .kk-map { height: 280px; } }