/* ==========================================================================
   Forms — the booking/enquiry form (template-parts/booking-form.php)
   and the Contact page's info cards & map.
   ========================================================================== */
/* Links to #booking (e.g. "Book Now" → /contact/#booking) land with the
   form's heading clear of the sticky header. */
#booking { scroll-margin-top: calc(var(--header-h) + 12px); }

/* minmax(0, 1fr) + min-width:0 stop the longest course name in the
   "Program of Interest" list from making every field wider than the phone
   screen (the fields used to stick out past the right edge). */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; min-width: 0; }
.form-field input, .form-field select, .form-field textarea { min-width: 0; max-width: 100%; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.85rem; font-weight: 600; color: var(--color-primary-dark); }
.form-field input, .form-field select, .form-field textarea {
	padding: 13px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
	background: var(--color-surface); color: var(--color-text); transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
	border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(47, 93, 80, 0.12); outline: none;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; }
.form-note { font-size: 0.85rem; padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; }
.form-note.success { background: #e6f0ea; color: var(--color-primary-dark); border: 1px solid #b9d6c6; }
.form-note.error { background: #fbe9e4; color: var(--color-error); border: 1px solid #f0c3b6; }

.contact-info-card { display: flex; gap: 16px; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); }
.contact-info-card .icon-badge { margin-bottom: 0; flex-shrink: 0; }
.contact-info-card h3 { font-size: 1rem; margin-bottom: 4px; }
.contact-info-card p { margin: 0; color: var(--color-text-light); font-size: 0.92rem; }
.contact-info-card a { color: var(--color-primary); font-weight: 600; }
/* Keep the four cards equal width: without min-width:0 the long email
   address stretches its grid column and squeezes the others. */
.contact-info-card, .contact-info-card > div:last-child { min-width: 0; }
.contact-info-card a[href^="tel:"] { white-space: nowrap; }
.contact-info-card a[href^="mailto:"] { overflow-wrap: anywhere; }
/* Four-across only happens above 1180px (see responsive/tablet.css), where
   each card is too narrow for icon + text side by side — stack the icon on
   top there so the email address fits without breaking mid-word. */
@media (min-width: 1181px) {
	.grid-4 > .contact-info-card { flex-direction: column; gap: 14px; }
}

/* ==========================================================================
   Booking form (template-parts/booking-form.php): request type, start /
   finish dates, guests and room preference. Behaviour in
   assets/js/booking-form.js.
   Hover colours: Check Availability green · Book Now saffron ·
   Shared Room dusk blue · Private Room terracotta · date and guest
   fields gold.
   ========================================================================== */
.booking-form {
	max-width: 760px;
	margin: 0 auto;
	padding: 36px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}
.choice-group { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.choice-legend {
	display: block;
	padding: 0;
	margin-bottom: 10px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-primary-dark);
}
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice-card {
	--choice: var(--color-primary);
	--choice-tint: rgba(47, 93, 80, 0.08);
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 40px 14px 14px;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.choice-card--booking { --choice: var(--color-secondary);      --choice-tint: rgba(217, 138, 61, 0.1); }
.choice-card--shared  { --choice: var(--accent-dusk-blue);     --choice-tint: rgba(107, 127, 158, 0.12); }
.choice-card--private { --choice: var(--accent-terracotta);    --choice-tint: rgba(201, 120, 79, 0.12); }
/* The real radio stays in the page for keyboards and screen readers. */
.choice-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choice-icon {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--choice-tint);
	color: var(--choice);
	transition: background var(--transition), color var(--transition), transform 400ms ease;
}
.choice-icon svg { width: 22px; height: 22px; }
.choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-text strong { font-size: 0.95rem; color: var(--color-primary-dark); transition: color var(--transition); }
.choice-text small { font-size: 0.78rem; line-height: 1.35; color: var(--color-text-light); }
/* Tick badge on the chosen card. */
.choice-card::after {
	content: '✓';
	position: absolute;
	top: 50%;
	right: 12px;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
	background: var(--choice);
	transform: scale(0);
	transition: transform 250ms ease;
}
.choice-card:hover {
	border-color: var(--choice);
	background: var(--choice-tint);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}
.choice-card:hover .choice-icon { background: var(--choice); color: #fff; transform: rotate(-6deg); }
.choice-card:hover .choice-text strong { color: var(--choice); }
.choice-card.is-checked,
.choice-card:has(input:checked) {
	border-color: var(--choice);
	background: var(--choice-tint);
	box-shadow: 0 0 0 3px var(--choice-tint);
}
.choice-card.is-checked::after,
.choice-card:has(input:checked)::after { transform: scale(1); }
.choice-card.is-checked .choice-icon,
.choice-card:has(input:checked) .choice-icon { background: var(--choice); color: #fff; }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--choice); outline-offset: 3px; }

/* Date + guest fields */
.booking-form .form-field input[type="date"],
.booking-form .form-field select { cursor: pointer; }
.booking-form .form-field input[type="date"]:hover,
.booking-form .form-field select:hover { border-color: var(--color-gold); }
.booking-form input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.65; transition: opacity var(--transition); }
.booking-form input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.booking-stay {
	grid-column: 1 / -1;
	margin: -4px 0 18px;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	background: rgba(201, 162, 75, 0.12);
	border: 1px dashed rgba(201, 162, 75, 0.6);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--color-primary-dark);
}
.booking-stay[hidden] { display: none; }
.field-hint { margin-top: -2px; font-size: 0.76rem; color: var(--color-text-light); }

/* ---- "I agree to the Terms & Conditions and Privacy Policy" tick box.
   The real checkbox stays in the page (so it can be tabbed to and so the
   browser's "please tick this box" message points at it) but is hidden
   behind the drawn square .consent-box. ---- */
.form-consent { margin: 4px 0 18px; }
.consent-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-bg-alt);
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition);
}
.consent-check:hover { border-color: var(--color-primary-light); }
.consent-check input {
	position: absolute;
	width: 20px;
	height: 20px;
	margin: 0;
	opacity: 0;
	/* The label already forwards every click to this checkbox. Without this,
	   a click that landed on the box itself toggled it twice (label + input)
	   and the tick never appeared. */
	pointer-events: none;
}
.consent-box {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 6px;
	border: 2px solid var(--color-primary);
	background: var(--color-surface);
	transition: background var(--transition), border-color var(--transition);
}
.consent-box::after {
	content: '';
	display: block;
	width: 5px;
	height: 10px;
	margin: 1px auto 0;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform var(--transition);
}
.consent-check input:checked ~ .consent-box { background: var(--color-primary); }
.consent-check input:checked ~ .consent-box::after { transform: rotate(45deg) scale(1); }
.consent-check input:focus-visible ~ .consent-box { box-shadow: 0 0 0 3px rgba(47, 93, 80, 0.3); }
.consent-check.is-checked,
.consent-check:has(input:checked) { border-color: var(--color-primary); background: rgba(47, 93, 80, 0.07); }
.consent-text { font-size: 0.88rem; color: var(--color-text); line-height: 1.5; }
.consent-text a { color: var(--color-primary-dark); font-weight: 600; text-decoration: underline; }
.consent-text a:hover { color: var(--color-secondary-dark); }
.consent-required { color: var(--accent-terracotta); font-weight: 700; }

/* Submit follows the chosen request: green = Check Availability, saffron = Book Now. */
.booking-submit::after { content: '→'; transition: transform var(--transition); }
.booking-submit:hover::after { transform: translateX(4px); }
.booking-submit.is-availability { background: var(--color-primary); }
.booking-submit.is-availability:hover { background: var(--color-primary-dark); }
.booking-note { margin: 12px 0 0; text-align: center; font-size: 0.8rem; color: var(--color-text-light); }

@media (max-width: 640px) {
	/* 16px stops iPhones zooming in when a field is tapped. */
	.form-field input, .form-field select, .form-field textarea { font-size: 16px; }
	.booking-form { padding: 24px 18px; }
	.choice-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.choice-card, .choice-card::after, .choice-icon { transition: none; }
	.choice-card:hover, .choice-card:hover .choice-icon { transform: none; }
}

/* ---- Contact info cards: brand-colour hover, each card its own colour
   (Address green, Phone saffron, Email gold, Opening Hours sage). A top
   bar sweeps in, the card lifts, the icon badge fills and tilts, the title
   takes the colour and phone/email links get a saffron underline. ---- */
.contact-info-card {
	--card-accent: var(--color-primary);
	--card-text: var(--color-primary);
	position: relative;
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.contact-info-card:nth-child(4n+2) { --card-accent: var(--color-secondary); --card-text: var(--color-secondary-dark); }
.contact-info-card:nth-child(4n+3) { --card-accent: var(--color-gold); --card-text: #9a7a2e; }
.contact-info-card:nth-child(4n+4) { --card-accent: var(--color-primary-light); --card-text: var(--color-primary-light); }
.contact-info-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--card-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 350ms ease;
}
.contact-info-card .icon-badge { transition: background var(--transition), color var(--transition), transform 450ms ease, box-shadow var(--transition); }
.contact-info-card h3 { transition: color var(--transition); }
.contact-info-card:hover,
.contact-info-card:focus-within {
	transform: translateY(-6px);
	border-color: var(--card-accent);
	box-shadow: 0 18px 40px rgba(43, 38, 32, 0.14);
}
.contact-info-card:hover::before,
.contact-info-card:focus-within::before { transform: scaleX(1); }
.contact-info-card:hover .icon-badge,
.contact-info-card:focus-within .icon-badge {
	background: var(--card-accent);
	color: #fff;
	transform: rotate(-8deg) scale(1.08);
	box-shadow: 0 8px 18px rgba(43, 38, 32, 0.18);
}
.contact-info-card:hover h3,
.contact-info-card:focus-within h3 { color: var(--card-text); }
.contact-info-card a {
	padding-bottom: 1px;
	background-image: linear-gradient(var(--color-secondary), var(--color-secondary));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: color var(--transition), background-size 300ms ease;
}
.contact-info-card a:hover,
.contact-info-card a:focus-visible { color: var(--color-secondary-dark); background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) {
	.contact-info-card,
	.contact-info-card::before,
	.contact-info-card .icon-badge { transition: none; }
	.contact-info-card:hover,
	.contact-info-card:focus-within,
	.contact-info-card:hover .icon-badge { transform: none; }
}

.map-wrap { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }
.map-wrap iframe { display: block; width: 100%; height: 420px; border: 0; }