/**
 * Baseline styles for the [ss_contact_form] surface.
 *
 * Same standing as assets/css/booking.css and written to the same rules: this
 * is the portability floor, not the design. The form must be presentable and
 * usable on ANY theme, because a capture that only looks right under one
 * stylesheet is a capture that breaks the day the theme moves.
 *
 * Every rule is wrapped in :where() so its specificity is zero. A theme that
 * styles the same classes wins without ever fighting this file.
 *
 * The visual language is comp-cb ("The Field Guide"): sand and cream plates,
 * ink text, brown accents. Font sizes are rem only. Tap targets stay at 44px
 * or better, and the consent row is deliberately generous because it is the
 * one control on the page a person must be able to hit deliberately and never
 * by accident.
 */

#ss-contact {
	--ssc-sand: #efebdf;
	--ssc-cream: #f4f3ee;
	--ssc-ink: #191818;
	--ssc-brown: #4c453f;
	--ssc-white: #ffffff;
	--ssc-rule: rgba(76, 69, 63, 0.34);
	--ssc-rule-soft: rgba(76, 69, 63, 0.16);
	--ssc-alert: #8a1c0a;
	--ssc-sans: "Poppins", -apple-system, "Helvetica Neue", Arial, sans-serif;
	--ssc-fs-body: 1.125rem;
	--ssc-fs-small: 0.9375rem;
	--ssc-s-2xs: 8px;
	--ssc-s-xs: 12px;
	--ssc-s-sm: 16px;
	--ssc-s-md: 24px;
	--ssc-s-lg: 32px;
}

:where(#ss-contact) :where(.ss-contact__lede) {
	font-size: var(--ssc-fs-body);
	line-height: 1.6;
	max-width: 62ch;
}

:where(#ss-contact) :where(.ss-contact-form) {
	background: var(--ssc-cream);
	border: 1px solid var(--ssc-rule-soft);
	padding: var(--ssc-s-lg);
	margin-top: var(--ssc-s-md);
	color: var(--ssc-ink);
	font-family: var(--ssc-sans);
	font-size: var(--ssc-fs-body);
	line-height: 1.6;
	max-width: 44rem;
}

:where(#ss-contact) :where(.ss-contact-field) {
	margin-bottom: var(--ssc-s-md);
}

:where(#ss-contact) :where(.ss-contact-field label) {
	display: block;
	font-weight: 600;
	margin-bottom: var(--ssc-s-2xs);
}

:where(#ss-contact) :where(.ss-contact-field input),
:where(#ss-contact) :where(.ss-contact-field textarea) {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: var(--ssc-s-xs);
	border: 1px solid var(--ssc-rule);
	background: var(--ssc-white);
	color: var(--ssc-ink);
	font-family: inherit;
	font-size: var(--ssc-fs-body);
	line-height: 1.5;
}

:where(#ss-contact) :where(.ss-contact-field textarea) {
	min-height: 9rem;
	resize: vertical;
}

/* A refused field is marked for everyone, not only for people who can see
   colour: aria-invalid carries it to assistive tech and the message under the
   form names the field in words. */
:where(#ss-contact) :where([aria-invalid="true"]) {
	border-color: var(--ssc-alert);
	border-width: 2px;
}

:where(#ss-contact) :where(.ss-contact-hint) {
	font-size: var(--ssc-fs-small);
	color: var(--ssc-brown);
	margin: var(--ssc-s-2xs) 0 0;
}

:where(#ss-contact) :where(.ss-contact-errors) {
	background: var(--ssc-white);
	border-left: 4px solid var(--ssc-alert);
	padding: var(--ssc-s-sm);
	margin-top: var(--ssc-s-md);
	max-width: 44rem;
}

:where(#ss-contact) :where(.ss-contact-errors p) {
	margin: 0 0 var(--ssc-s-2xs);
	font-size: var(--ssc-fs-small);
}

/* The consent row. Checkbox and sentence sit on one baseline, the sentence
   stays readable at its full length, and the whole label is the hit target. */
:where(#ss-contact) :where(.ss-contact-consent) {
	display: flex;
	gap: var(--ssc-s-xs);
	align-items: flex-start;
	background: var(--ssc-sand);
	padding: var(--ssc-s-sm);
	margin-bottom: var(--ssc-s-md);
}

:where(#ss-contact) :where(.ss-contact-consent input) {
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	flex: 0 0 auto;
}

:where(#ss-contact) :where(.ss-contact-consent label) {
	font-size: var(--ssc-fs-small);
	line-height: 1.55;
	cursor: pointer;
}

:where(#ss-contact) :where(.ss-contact-submit) {
	display: flex;
	gap: var(--ssc-s-md);
	align-items: center;
	flex-wrap: wrap;
}

:where(#ss-contact) :where(.ss-contact-submit .btn) {
	min-height: 44px;
	padding: var(--ssc-s-xs) var(--ssc-s-md);
	border: 1px solid var(--ssc-ink);
	background: var(--ssc-ink);
	color: var(--ssc-white);
	font-family: inherit;
	font-size: var(--ssc-fs-body);
	cursor: pointer;
}

:where(#ss-contact) :where(.ss-contact--done) {
	background: var(--ssc-sand);
	border: 1px solid var(--ssc-rule-soft);
	padding: var(--ssc-s-lg);
	margin-top: var(--ssc-s-md);
	max-width: 44rem;
}

:where(#ss-contact) :where(.ss-contact__done) {
	font-size: var(--ssc-fs-body);
	font-weight: 600;
	margin: 0 0 var(--ssc-s-2xs);
}

:where(#ss-contact) :where(.ss-contact__done-note) {
	font-size: var(--ssc-fs-small);
	color: var(--ssc-brown);
	margin: 0;
}

@media (max-width: 640px) {
	:where(#ss-contact) :where(.ss-contact-form),
	:where(#ss-contact) :where(.ss-contact--done) {
		padding: var(--ssc-s-md);
	}
}