/* ==========================================================================
   Contact Us page (page-templates/template-contact-us.php) — loaded on
   this page only (inc/contact-us.php). Shared field styles (.form-field,
   .form-grid, .form-note, .hp-field, .choice-legend, .map-wrap) come from
   components/forms.css.
   Hover colours: contact rows — phone saffron · WhatsApp green · email
   gold · address terracotta · hours dusk blue. Topic chips — General
   green · Programs saffron · Stay dusk blue · Feedback mauve. Quick
   Answers rotate green / saffron / gold / terracotta / dusk blue.
   ========================================================================== */
#contact-form { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---- Two-column card: green details panel + message form ---- */
.cu-wrap {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	max-width: 1100px;
	margin: 0 auto;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

/* ---- Details panel ---- */
.cu-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 44px 38px;
	color: #fff;
	background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}
/* Soft gold ring and a faint Om in the corners. */
.cu-panel::before {
	content: '';
	position: absolute;
	right: -90px;
	bottom: -90px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	border: 38px solid rgba(201, 162, 75, 0.16);
	z-index: -1;
}
.cu-panel::after {
	content: 'ॐ';
	position: absolute;
	top: 18px;
	right: 26px;
	font-size: 4.5rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.07);
	z-index: -1;
}
.cu-panel .eyebrow { color: #f0d9a4; }
.cu-panel h2 { color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 0 0 10px; }
.cu-panel-intro { margin: 0 0 24px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); }

.cu-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 4px; }
.cu-item {
	--cu-accent: var(--color-secondary);
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 -12px;
	padding: 12px;
	border-radius: var(--radius-md);
	transition: background var(--transition), transform var(--transition);
}
.cu-item--whatsapp { --cu-accent: #25d366; }
.cu-item--email    { --cu-accent: var(--color-gold); }
.cu-item--address  { --cu-accent: var(--accent-terracotta); }
.cu-item--hours    { --cu-accent: var(--accent-dusk-blue); }

.cu-icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.14);
	transition: background var(--transition), border-color var(--transition), transform 450ms ease, box-shadow var(--transition);
}
.cu-icon svg { width: 21px; height: 21px; }
.cu-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cu-item-label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	transition: color var(--transition);
}
.cu-item-value { font-size: 0.95rem; color: #fff; overflow-wrap: anywhere; }
.cu-item-value a {
	color: #fff;
	padding-bottom: 1px;
	background-image: linear-gradient(var(--cu-accent), var(--cu-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: background-size 300ms ease;
}
.cu-item-value a[href^="tel:"] { white-space: nowrap; }
.cu-item:hover,
.cu-item:focus-within { background: rgba(255, 255, 255, 0.07); transform: translateX(6px); }
.cu-item:hover .cu-icon,
.cu-item:focus-within .cu-icon {
	background: var(--cu-accent);
	border-color: var(--cu-accent);
	transform: rotate(-8deg) scale(1.08);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}
.cu-item:hover .cu-item-label,
.cu-item:focus-within .cu-item-label { color: var(--cu-accent); }
.cu-item-value a:hover,
.cu-item-value a:focus-visible { background-size: 100% 2px; }

/* Social buttons fill with each network's own colour. */
.cu-social {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.cu-social-label { margin-right: 4px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); }
.cu-social a {
	--cu-social: var(--color-secondary);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.cu-social a svg { width: 19px; height: 19px; }
.cu-social .cu-social-facebook { --cu-social: #1877f2; }
.cu-social .cu-social-youtube  { --cu-social: #ff0000; }
.cu-social .cu-social-tiktok   { --cu-social: #000; }
.cu-social .cu-social-tiktok:hover,
.cu-social .cu-social-tiktok:focus-visible { box-shadow: -2px 2px 0 #25f4ee, 2px -2px 0 #fe2c55; }
.cu-social .cu-social-instagram {
	--cu-social: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
/* A gradient can't be a border colour — use Instagram's pink for the edge. */
.cu-social .cu-social-instagram:hover,
.cu-social .cu-social-instagram:focus-visible { border-color: #d6249f; }
.cu-social a:hover,
.cu-social a:focus-visible {
	background: var(--cu-social);
	border-color: var(--cu-social);
	transform: translateY(-4px) rotate(8deg);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

/* "Ready to book?" link to the Booking Form — turns saffron on hover. */
.cu-book {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
	padding: 14px 18px;
	border-radius: var(--radius-md);
	color: #fff;
	background: rgba(201, 162, 75, 0.14);
	border: 1px dashed rgba(240, 217, 164, 0.5);
	transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.cu-book-text strong { display: block; font-size: 0.95rem; }
.cu-book-text small { display: block; font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); transition: color var(--transition); }
.cu-book-arrow { margin-left: auto; font-size: 1.2rem; transition: transform var(--transition); }
.cu-book:hover,
.cu-book:focus-visible {
	color: #fff;
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	border-style: solid;
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.cu-book:hover small,
.cu-book:focus-visible small { color: #fff; }
.cu-book:hover .cu-icon,
.cu-book:focus-visible .cu-icon { background: #fff; color: var(--color-secondary-dark); transform: rotate(-8deg); }
.cu-book:hover .cu-book-arrow,
.cu-book:focus-visible .cu-book-arrow { transform: translateX(5px); }

/* ---- Message form ---- */
.cu-form { padding: 44px 42px; }
.cu-form-head h3 { margin: 0 0 4px; font-size: 1.5rem; }
.cu-form-head p { margin: 0 0 22px; font-size: 0.88rem; color: var(--color-text-light); }
/* No fill-mode, so the result message is never held invisible if the animation can't run. */
.cu-status { animation: cu-pop 450ms ease; }

/* Topic chips — each its own colour; the chosen one fills in. */
.cu-topics { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.cu-topic-list { display: flex; flex-wrap: wrap; gap: 10px; }
.cu-topic {
	--chip: var(--color-primary);
	--chip-tint: rgba(47, 93, 80, 0.08);
	position: relative;
	cursor: pointer;
}
.cu-topic--programs { --chip: var(--color-secondary);  --chip-tint: rgba(217, 138, 61, 0.12); }
.cu-topic--stay     { --chip: var(--accent-dusk-blue); --chip-tint: rgba(107, 127, 158, 0.14); }
.cu-topic--feedback { --chip: var(--accent-mauve);     --chip-tint: rgba(156, 107, 138, 0.14); }
/* The real radio stays in the page for keyboards and screen readers. */
.cu-topic input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.cu-topic span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 2px solid var(--color-border);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-primary-dark);
	background: var(--color-surface);
	transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.cu-topic span::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--chip);
	transition: background var(--transition), transform var(--transition);
}
.cu-topic:hover span {
	border-color: var(--chip);
	background: var(--chip-tint);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}
.cu-topic:hover span::before { transform: scale(1.35); }
.cu-topic input:checked + span {
	color: #fff;
	background: var(--chip);
	border-color: var(--chip);
	box-shadow: 0 6px 16px var(--chip-tint);
}
.cu-topic input:checked + span::before { background: #fff; }
.cu-topic input:focus-visible + span { outline: 2px solid var(--chip); outline-offset: 3px; }

/* Fields: gold on hover, red with a short message when something's missing. */
.cu-form .form-field input:hover,
.cu-form .form-field textarea:hover { border-color: var(--color-gold); }
.cu-form .form-field.is-invalid input,
.cu-form .form-field.is-invalid textarea {
	border-color: var(--color-error);
	box-shadow: 0 0 0 4px rgba(179, 69, 47, 0.1);
}
.cu-error { display: none; margin-top: -2px; font-size: 0.78rem; color: var(--color-error); }
.form-field.is-invalid .cu-error { display: block; }
.cu-optional { font-weight: 400; color: var(--color-text-light); }
.cu-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cu-count {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--color-text-light);
	transition: color var(--transition);
}
.cu-count.is-near { font-weight: 600; color: var(--color-secondary-dark); }

/* Submit: arrow slides on hover, spinner while sending. */
.cu-submit { padding-top: 15px; padding-bottom: 15px; }
.cu-submit::after { content: '→'; transition: transform var(--transition); }
.cu-submit:hover::after { transform: translateX(5px); }
.cu-submit.is-sending { pointer-events: none; opacity: 0.85; }
.cu-submit.is-sending::after {
	content: '';
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cu-spin 700ms linear infinite;
}
.cu-privacy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 14px 0 0;
	font-size: 0.8rem;
	text-align: center;
	color: var(--color-text-light);
}
.cu-privacy svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-primary); }

/* ---- Quick Answers — a colour bar slides down, the + turns into × ---- */
.cu-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.cu-faq-item {
	--faq: var(--color-primary);
	position: relative;
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.cu-faq-item:nth-child(5n+2) { --faq: var(--color-secondary); }
.cu-faq-item:nth-child(5n+3) { --faq: var(--color-gold); }
.cu-faq-item:nth-child(5n+4) { --faq: var(--accent-terracotta); }
.cu-faq-item:nth-child(5n+5) { --faq: var(--accent-dusk-blue); }
.cu-faq-item::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: var(--faq);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 350ms ease;
}
.cu-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	color: var(--color-primary-dark);
}
.cu-faq-item summary::-webkit-details-marker { display: none; }
.cu-faq-item summary:focus-visible { outline: 2px solid var(--faq); outline-offset: -2px; border-radius: var(--radius-md); }
.cu-faq-icon {
	position: relative;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-bg-alt);
	transition: background var(--transition), transform 350ms ease;
}
.cu-faq-icon::before,
.cu-faq-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 2px;
	background: var(--faq);
	transition: background var(--transition);
}
.cu-faq-icon::after { transform: rotate(90deg); }
.cu-faq-item:hover { border-color: var(--faq); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cu-faq-item:hover::before,
.cu-faq-item[open]::before { transform: scaleY(1); }
.cu-faq-item[open] { border-color: var(--faq); }
.cu-faq-item:hover .cu-faq-icon,
.cu-faq-item[open] .cu-faq-icon { background: var(--faq); }
.cu-faq-item:hover .cu-faq-icon::before,
.cu-faq-item:hover .cu-faq-icon::after,
.cu-faq-item[open] .cu-faq-icon::before,
.cu-faq-item[open] .cu-faq-icon::after { background: #fff; }
.cu-faq-item[open] .cu-faq-icon { transform: rotate(45deg); }
.cu-faq-answer { padding: 0 24px 20px; color: var(--color-text-light); }
.cu-faq-answer p { margin: 0; }
.cu-faq-answer a {
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-color: var(--color-secondary);
	text-underline-offset: 3px;
}
.cu-faq-answer a:hover { color: var(--color-secondary-dark); }

@keyframes cu-spin { to { transform: rotate(360deg); } }
@keyframes cu-pop {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* ---- Tablet & mobile: form first, details panel below ---- */
@media (max-width: 960px) {
	.cu-wrap { grid-template-columns: 1fr; }
	.cu-form { order: -1; }
}
@media (max-width: 640px) {
	.cu-panel,
	.cu-form { padding: 30px 20px; }
	.cu-faq-item summary { padding: 18px; }
	.cu-faq-answer { padding: 0 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.cu-item, .cu-icon, .cu-social a, .cu-book, .cu-book-arrow,
	.cu-topic span, .cu-faq-item, .cu-faq-item::before, .cu-faq-icon, .cu-status { transition: none; animation: none; }
	.cu-item:hover, .cu-item:focus-within, .cu-item:hover .cu-icon, .cu-social a:hover,
	.cu-book:hover, .cu-book:hover .cu-icon, .cu-topic:hover span, .cu-faq-item:hover { transform: none; }
	.cu-submit.is-sending::after { animation-duration: 2s; }
}