/*
 * Hermitage Reservations & Enquiries — front-end form styles.
 * Uses the active theme's design tokens (--wp--preset--color/…/font-size/…/spacing)
 * so the forms inherit the Hermitage palette, type and spacing. Falls back to
 * safe values if a token is unavailable.
 */

.hn-res {
	--hn-surface: var(--wp--preset--color--surface, #ffffff);
	--hn-surface-warm: var(--wp--preset--color--surface-warm, #f6f1e7);
	--hn-ink: var(--wp--preset--color--ink, #2b2b26);
	--hn-muted: var(--wp--preset--color--text-muted, #5c5a52);
	--hn-heading: var(--wp--preset--color--heading, #22331f);
	--hn-brand: var(--wp--preset--color--brand, #2f4a2f);
	--hn-brand-dark: var(--wp--preset--color--brand-dark, #22331f);
	--hn-accent: var(--wp--preset--color--accent, #c65d21);
	--hn-accent-hover: var(--wp--preset--color--accent-hover, #a94c17);
	--hn-line: var(--wp--preset--color--line, #d9d2c4);
	--hn-focus: var(--wp--preset--color--focus, #c65d21);
	--hn-error: #a3281d;
	/* Accessible burnt-orange for small "required"/note text (brand accent fails AA at small sizes). */
	--hn-req: #8a3c0d;

	--hn-gap: var(--wp--preset--spacing--md, 1.25rem);
	--hn-gap-sm: var(--wp--preset--spacing--sm, 0.75rem);

	max-width: 40rem;
	color: var(--hn-ink);
	font-family: var(--wp--preset--font-family--body, inherit);
}

.hn-res *,
.hn-res *::before,
.hn-res *::after {
	box-sizing: border-box;
}

/* Let every group and field shrink below content width (200% text / 320px). */
.hn-res-field,
.hn-res-fieldset,
.hn-res-grid,
.hn-res-radio,
.hn-res-radio label {
	min-width: 0;
}

/* Break long words so text wraps rather than overflowing at 200% text / 320px. */
.hn-res,
.hn-res label,
.hn-res legend,
.hn-res p,
.hn-res li,
.hn-res .hn-res-hint,
.hn-res-radio__title,
.hn-res-radio__desc {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/*
 * This stylesheet only loads on pages that contain a Hermitage form, so these
 * page-scoped rules let the surrounding notice/CTA panels wrap cleanly at 200%
 * text on a 320px screen without affecting any other page.
 */
.entry-content p,
.entry-content li {
	overflow-wrap: anywhere;
}
.entry-content .wp-block-button__link {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Fieldsets / groups */
.hn-res-form {
	display: flex;
	flex-direction: column;
	gap: var(--hn-gap);
	margin: 0;
}

.hn-res-fieldset {
	border: 1px solid var(--hn-line);
	border-radius: 8px;
	padding: var(--hn-gap);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hn-gap-sm);
	min-width: 0;
}

.hn-res-fieldset > legend {
	font-family: var(--wp--preset--font-family--display, inherit);
	color: var(--hn-heading);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	padding: 0 0.4em;
	font-weight: 600;
}

/* Fields */
.hn-res-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.hn-res-field > label,
.hn-res-fieldset > legend {
	font-weight: 600;
	color: var(--hn-heading);
}

.hn-res-req {
	color: var(--hn-req);
	font-weight: 600;
	font-size: 0.85em;
}

.hn-res-opt {
	color: var(--hn-muted);
	font-weight: 400;
	font-size: 0.85em;
}

.hn-res-hint {
	color: var(--hn-muted);
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	line-height: 1.4;
}

.hn-res input[type="text"],
.hn-res input[type="email"],
.hn-res input[type="tel"],
.hn-res input[type="number"],
.hn-res input[type="date"],
.hn-res select,
.hn-res textarea {
	width: 100%;
	max-width: 100%;
	min-width: 0; /* Allow native date/number inputs to shrink at 200% text / 320px. */
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--hn-ink);
	background: var(--hn-surface);
	border: 1.5px solid var(--hn-line);
	border-radius: 6px;
	line-height: 1.4;
}

.hn-res textarea {
	min-height: 3.5rem;
	resize: vertical;
}

.hn-res input:focus,
.hn-res select:focus,
.hn-res textarea:focus,
.hn-res button:focus,
.hn-res a:focus {
	outline: 3px solid var(--hn-focus);
	outline-offset: 2px;
	border-color: var(--hn-brand);
}

.hn-res [aria-invalid="true"] {
	border-color: var(--hn-error);
}

/* Two-column grouping on wider screens; single column on mobile */
.hn-res-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hn-gap-sm);
}

@media (min-width: 600px) {
	.hn-res-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Radio cards for reservation type */
.hn-res-radio {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	border: 1.5px solid var(--hn-line);
	border-radius: 6px;
	padding: 0.75rem;
	background: var(--hn-surface);
}

.hn-res-radio:has(input:checked) {
	border-color: var(--hn-brand);
	background: var(--hn-surface-warm);
}

.hn-res-radio input[type="radio"] {
	margin-top: 0.25rem;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.hn-res-radio label {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	cursor: pointer;
}

.hn-res-radio__title {
	font-weight: 600;
	color: var(--hn-heading);
}

.hn-res-radio__desc {
	color: var(--hn-muted);
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	line-height: 1.4;
}

/* Date-filtered options: a service the chosen date does not allow.
   Marked by text as well as by tone, never by colour alone. */
.hn-res-radio.is-unavailable {
	border-style: dashed;
	background: transparent;
}

.hn-res-radio.is-unavailable .hn-res-radio__title,
.hn-res-radio.is-unavailable .hn-res-radio__desc {
	color: var(--hn-muted);
}

.hn-res-radio.is-unavailable label {
	cursor: default;
}

.hn-res-radio__unavailable {
	font-weight: 400;
	font-style: italic;
}

/* Live region announcing which options the chosen date allows. */
.hn-res-status:empty {
	display: none;
}

.hn-res-status {
	margin: 0.6rem 0 0;
	padding: 0.6rem 0.75rem;
	border-left: 3px solid var(--hn-brand);
	background: var(--hn-surface-warm);
	color: var(--hn-ink);
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	line-height: 1.5;
}

/* Consent */
.hn-res-consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	color: var(--hn-ink);
}

.hn-res-consent input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin-top: 0.15rem;
	flex: 0 0 auto;
}

.hn-res-fixednote {
	color: var(--hn-req);
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: 600;
}

/* Submit button — mirrors the theme's primary button feel */
.hn-res-submit {
	align-self: flex-start;
	min-height: 48px;
	padding: 0.7rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--surface, #fff);
	background: var(--hn-brand);
	border: 2px solid var(--hn-brand);
	border-radius: 6px;
	cursor: pointer;
	font-family: inherit;
}

.hn-res-submit:hover {
	background: var(--hn-brand-dark);
	border-color: var(--hn-brand-dark);
}

.hn-res-submit[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.hn-res-note {
	color: var(--hn-muted);
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	margin: 0;
}

/* Field-level + summary errors */
.hn-res-fielderror {
	color: var(--hn-error);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
}

.hn-res-summary {
	border: 2px solid var(--hn-error);
	background: #fcf1ef;
	border-radius: 6px;
	padding: var(--hn-gap-sm) var(--hn-gap);
	margin-bottom: var(--hn-gap);
}

.hn-res-summary__title {
	font-weight: 700;
	color: var(--hn-error);
	margin: 0 0 0.4rem;
}

.hn-res-summary ul {
	margin: 0;
	padding-left: 1.2rem;
}

.hn-res-summary a {
	color: var(--hn-error);
}

/* Honeypot — visually hidden but not display:none (some bots skip hidden) */
.hn-res-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Success panel */
.hn-res-success {
	border: 1px solid var(--hn-line);
	border-left: 5px solid var(--hn-brand);
	background: var(--hn-surface-warm);
	border-radius: 8px;
	padding: var(--hn-gap) var(--hn-gap);
}

.hn-res-success__title {
	margin-top: 0;
	color: var(--hn-heading);
	font-family: var(--wp--preset--font-family--display, inherit);
}

.hn-res-success__ref strong {
	color: var(--hn-brand);
}

.hn-res-success__warn {
	color: var(--hn-error);
	font-weight: 600;
}

.hn-res-success__contact {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.hn-res-backlink {
	display: inline-block;
	margin-top: 0.5rem;
	font-weight: 600;
	color: var(--hn-brand);
}

/* Wedding enquiry — small additions (reuses all .hn-res tokens above). */
.hn-res-intro {
	color: var(--hn-muted);
	font-size: var(--wp--preset--font-size--small, 0.95rem);
	line-height: 1.5;
	margin: 0;
}

.hn-res-checkline {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	font-weight: 400;
	color: var(--hn-ink);
}

.hn-res-checkline input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	margin: 0;
}

.hn-res-checkline label {
	font-weight: 400;
	color: var(--hn-ink);
}

/* Softened, still-readable state when a flexible date is chosen (JS enhancement). */
.hn-res-field.is-date-flexible input[type="date"] {
	opacity: 0.55;
}