/* ============================================================
   Gemini OB/GYN — Contact Us page template
   Loaded only for template-contact.php. Relies on tokens and
   shared classes (.container, .btn, .section-head) from style.css.
   ============================================================ */

/* ----------------------------------------------------------
   1. Hero banner — 200px, dark image + overlay, Trajan title
---------------------------------------------------------- */
.contact-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 280px;
	overflow: hidden;
	background: var(--c-band-dark);
	isolation: isolate;
}
.contact-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.contact-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.26);
	z-index: -1;
}
.contact-hero__inner { text-align: center; }
.contact-hero__title {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: var(--fs-h1);            /* up to 60px */
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-on-dark);
}

/* ----------------------------------------------------------
   2. Send a Message — heading + two-column CF7 form
---------------------------------------------------------- */
.contact-form-section {
	padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3.5rem);
	background: var(--c-bg);
}
.contact-form-section__head { margin-bottom: 2.5rem; }
.contact-form-section__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(1.25rem, 3vw, 27px);   /* 20 → 27px */
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #424242;
}
.contact-form-section__title {
	margin: 0 0 1rem;
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 5vw, 45px);    /* 30 → 45px */
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: #424242;
	font-variant-caps: all-small-caps;
}
.contact-form-section__intro {
	margin: 0 auto;
	max-width: 680px;
	font-family: var(--ff-body);
	font-size: clamp(1.1875rem, 2.5vw, 22px);
	line-height: 1.55;
	color: #424242;
}
.contact-form-section__placeholder {
	text-align: center;
	color: var(--c-ink-muted);
	font-style: italic;
}

/* ---- Contact Form 7 layout & controls -------------------- */
/* Two-column grid: form fields (left) + consent/notice (right) */
.cf7-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}
.cf7-col { min-width: 0; }
.cf7-col--fields { display: flex; flex-direction: column; gap: 1.25rem; }

/* Field block: label above control */
.cf7-field { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.contact-form-section .wpcf7-form p { margin: 0; }
.contact-form-section .wpcf7-form .wpcf7-form-control-wrap { display: block; }
.cf7-field > label,
.cf7-label {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: clamp(1.125rem, 2vw, 22px);
	line-height: 1.25;
	color: #2D2D41;                     /* Figma "Dark Blue" */
}

/* Inputs / selects / textarea — black 1px outline, 5px radius */
.contact-form-section .wpcf7-form input[type="text"],
.contact-form-section .wpcf7-form input[type="email"],
.contact-form-section .wpcf7-form input[type="tel"],
.contact-form-section .wpcf7-form input[type="url"],
.contact-form-section .wpcf7-form input[type="number"],
.contact-form-section .wpcf7-form select,
.contact-form-section .wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #000;
	border-radius: var(--radius-sm);
	background: #fff;
	padding: 1rem 1.1rem;
	font-family: var(--ff-body);
	font-size: 20px;
	line-height: 1.4;
	color: #2D2D41;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-form-section .wpcf7-form input::placeholder,
.contact-form-section .wpcf7-form textarea::placeholder {
	color: #2D2D41;
	opacity: 0.5;
}
.contact-form-section .wpcf7-form select {
	height: 67px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 3.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Ccircle cx='13.8821' cy='13.8821' r='13.382' transform='rotate(90 13.8821 13.8821)' stroke='black'/%3E%3Cpath d='M19.8607 10.8826L13.9026 16.8815L7.90367 10.8826' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	background-size: 28px 28px;
}
.contact-form-section .wpcf7-form textarea { min-height: 171px; resize: vertical; padding: 30px 50px; }
.contact-form-section .wpcf7-form input:focus,
.contact-form-section .wpcf7-form select:focus,
.contact-form-section .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 2px rgba(167, 138, 92, 0.25);
}

/* Helper text under a field */
.cf7-help {
	font-family: var(--ff-body);
	font-size: 17px;
	line-height: 1.4;
	color: var(--c-body);
	opacity: 0.7;
}

/* Consent column — checkbox rows + notice */
.cf7-col--consent { display: flex; flex-direction: column; gap: 1.5rem; }
.cf7-col--consent p { margin: 0; }
.cf7-consent,
.contact-form-section .wpcf7-form .cf7-consent .wpcf7-list-item {
	font-family: var(--ff-body);
	font-size: 17px;
	line-height: 1.7;
	color: #424242;
	margin: 0;
}
/* CF7 wraps each option as: .wpcf7-list-item > label > (input + .wpcf7-list-item-label).
   Flex the <label> so wrapped text aligns under the first line (hanging indent). */
.cf7-consent .wpcf7-list-item { display: block; margin: 0; }
.cf7-consent label { display: flex; align-items: flex-start; gap: 0.85rem; margin: 0; }
.cf7-consent .wpcf7-list-item-label { padding-left: 0; }

/* Custom checkbox sizing (CF7 renders native checkboxes) */
.contact-form-section .wpcf7-form .cf7-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin-top: 0.1rem;
	border: 1px solid #000;
	border-radius: var(--radius-sm);
	background: #fff;
	cursor: pointer;
	position: relative;
}
.contact-form-section .wpcf7-form .cf7-consent input[type="checkbox"]:checked {
	background: #000;
}
.contact-form-section .wpcf7-form .cf7-consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 5px;
	width: 7px;
	height: 13px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.cf7-subhead {
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.4;
	color: #424242;
}

/* "Important Notice" — header bar + scrollable body, uniform beige tint */
.cf7-notice {
	border: 1px solid #000;
	border-radius: var(--radius-sm);
	background: transparent;            /* body stays transparent */
	overflow: hidden;                   /* clip body scroll to rounded corners */
}
.cf7-notice__title {
	position: relative;
	margin: 0;
	padding: 1.35rem 3rem 1.35rem 1.25rem;
	background: rgba(203, 191, 186, 0.25);   /* tint on the header only */
	border-bottom: 1px solid #000;      /* divider when expanded */
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	color: #424242;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
/* Collapsed: no divider under the header */
.cf7-notice.is-collapsed .cf7-notice__title { border-bottom: 0; }
/* Circular arrow icon (matches Figma) — up when open, down when collapsed */
.cf7-notice__title::after {
	content: "";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	width: 28px;
	height: 28px;
	transform: translateY(-50%) rotate(0);
	transition: transform 0.25s var(--ease);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Ccircle cx='13.8821' cy='13.8821' r='13.382' transform='rotate(-90 13.8821 13.8821)' stroke='black'/%3E%3Cpath d='M8.59473 13.9149L14.1827 8.3269L20.1816 14.3258' stroke='black' stroke-linecap='round'/%3E%3Cpath d='M14.1636 8.93757L14.1636 19.4371' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cf7-notice.is-collapsed .cf7-notice__title::after { transform: translateY(-50%) rotate(180deg); }
.cf7-notice__body {
	max-height: 440px;
	overflow-y: auto;
	padding: 1.25rem;
	font-family: var(--ff-body);
	font-size: 15px;
	line-height: 1.6;
	color: #424242;
}
.cf7-notice.is-collapsed .cf7-notice__body { display: none; }
.contact-form-section .wpcf7-form .cf7-notice__body p { margin: 0 0 1.4em; }
.contact-form-section .wpcf7-form .cf7-notice__body p:last-child { margin-bottom: 0; }

/* Submit button
   This is an <input type="submit">, so its label is an attribute value, not a
   text node: it CANNOT wrap. The button therefore has one intrinsic width — at
   20px/0.06em plus 2rem of side padding, "Submit Appointment Request" measures
   463px — and whenever the column it sits in is narrower than that, something
   has to give. Two separate breakages came out of that (both fixed in §6):

     • 901–1080px, while .cf7-grid is still two columns, the consent column is
       only 403–463px wide, so the button overflowed it — at 912px it stuck out
       60px past the column and was clipped by the viewport edge.
     • Below ~480px the button is width:100%, so it stops overflowing and the
       LABEL clips instead: at 390px the text needed 431px in a 350px box.

   `max-width: 100%` stops it ever escaping its column; §6 then shrinks the type
   so the label fits inside what remains. `display: inline-flex` is inert on an
   input (a form control lays out its own value) — kept only because it is
   harmless and the class is shared with anchor-based buttons. */
.contact-form-section .wpcf7-form .cf7-submit,
.contact-form-section .wpcf7-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-width: 260px;
	margin-top: 2rem;
	padding: 1.1rem 2rem;
	background: #000;
	color: #fff;
	border: 0;
	border-radius: var(--radius-sm);
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s var(--ease);
}
.contact-form-section .wpcf7-form input[type="submit"]:hover { background: var(--c-headline); }
/* Sits in the consent (second) column, below the notice — left-aligned,
   intrinsic width (not stretched by the flex column). */
.contact-form-section .wpcf7-form .cf7-col--consent .cf7-submit { align-self: flex-start; }
.contact-form-section .wpcf7-form .cf7-submit-wrap { text-align: left; }

/* CF7 response/validation messages
   global.js moves this div from the end of the form to the top of it and puts
   focus on it, because CF7 renders the thank-you and every error into the last
   element of a two-screen form and never scrolls to it — the message was there
   all along and simply never on screen. Since it now leads the form it has to
   read as a status banner rather than a stray line of text. CF7 ships only a
   border-colour change per state (blue/green/orange/yellow/red); a filled panel
   with text dark enough to pass on it carries much further. The cue that does
   not depend on colour at all is the message wording itself. */
.contact-form-section .wpcf7 form .wpcf7-response-output {
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	border-width: 2px;
	border-radius: var(--radius-sm);
	font-family: var(--ff-body);
	font-size: 18px;
	line-height: 1.5;
}
.contact-form-section .wpcf7 form.sent .wpcf7-response-output {
	border-color: #1f7a3d;
	background: #f1f8f3;
	color: #14532d;                 /* measured 8.44:1 on #f1f8f3 */
}
/* Every non-success status CF7 defines: invalid, unaccepted, payment-required,
   spam, failed, aborted. */
.contact-form-section .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-section .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form-section .wpcf7 form.payment-required .wpcf7-response-output,
.contact-form-section .wpcf7 form.spam .wpcf7-response-output,
.contact-form-section .wpcf7 form.failed .wpcf7-response-output,
.contact-form-section .wpcf7 form.aborted .wpcf7-response-output,
.contact-form-section .wpcf7 form .wpcf7-response-output--timeout {
	border-color: #b32d2e;
	background: #fdf2f2;
	color: #8a1f20;                 /* measured 8.34:1 on #fdf2f2 */
}
/* The div is focused programmatically, so it needs a focus ring of its own —
   it is not something the visitor tabbed to and the outline is the only cue
   that the page moved them here. */
.contact-form-section .wpcf7 form .wpcf7-response-output:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}
/* The timeout fallback is written into the div by global.js while the form is
   still data-status="submitting", so no state class applies to it. */
.contact-form-section .wpcf7 form .wpcf7-response-output--timeout {
	display: block;
}
.contact-form-section .wpcf7-not-valid-tip {
	font-family: var(--ff-body);
	font-size: 15px;
}

/* ----------------------------------------------------------
   3. Office + embedded map
   Reuses the homepage's `.office-map` section (styled in style.css)
   and its data — no Contact-specific styles needed here.
---------------------------------------------------------- */

/* ----------------------------------------------------------
   4. Testimonial strip
---------------------------------------------------------- */
.contact-testimonial {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	background: var(--c-bg);
	text-align: center;
}
.contact-testimonial__inner {
	max-width: 860px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.contact-testimonial__stars {
	display: inline-flex;
	gap: 0.35rem;
	color: var(--c-star);
}
.contact-testimonial__quote {
	margin: 0;
	font-family: var(--ff-body);
	font-size: clamp(1.1875rem, 2.4vw, 22px);
	line-height: 1.5;
	color: #2D2D41;                     /* Figma "Dark Blue" */
	font-style: normal;
}
.contact-testimonial__author {
	margin: 0;
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 22px;
	color: var(--c-card-dark);
}

/* ----------------------------------------------------------
   5. Schedule band — beige, centered
---------------------------------------------------------- */
.contact-schedule {
	padding: clamp(3rem, 5vw, 4.5rem) 0;
	background: #E4DEDB;
	text-align: center;
}
.contact-schedule__inner {
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}
.contact-schedule__title {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 5vw, 45px);
	line-height: 1.1;
	color: #424242;
	text-wrap: balance;                 /* wrap gracefully; never overflow */
}
.contact-schedule__body {
	margin: 0;
	max-width: 860px;
	font-family: var(--ff-body);
	font-size: clamp(1.1875rem, 2.6vw, 24px);
	line-height: 1.3;
	color: #424242;
}
.contact-schedule__btn {
	background: #fff;
	border-color: #fff;
	color: #000;
	border-radius: var(--radius-sm);
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.04em;
	padding: 0.85rem 2.25rem;
	font-variant-caps: all-small-caps;
	text-transform: none;
	max-width: 100%;                    /* never exceed the container */
}
.contact-schedule__btn:hover {
	background: var(--c-headline);
	border-color: var(--c-headline);
	color: #fff;
}

/* ----------------------------------------------------------
   6. Responsive
---------------------------------------------------------- */
@media (max-width: 900px) {
	.cf7-grid { grid-template-columns: 1fr; }
}

/* Submit label has to fit the column it lands in — see the note on the base
   rule. 20px/0.06em/2rem needs 463px, and the consent column is only 403px at
   912px wide, so from here down the type and padding step back to 16px/0.03em/
   1rem, which needs ~311px and clears the narrowest column the layout produces
   (350px at a 390px viewport) with room to spare. min-width goes too: a 260px
   floor on a button that must fit a 350px box is just another way to overflow.

   Applied from 1100px rather than 1080px so the fix starts comfortably above the
   width where the overflow actually begins, instead of on top of it. */
@media (max-width: 1100px) {
	.contact-form-section .wpcf7-form .cf7-submit,
	.contact-form-section .wpcf7-form input[type="submit"] {
		min-width: 0;
		padding: 1rem;
		font-size: 16px;
		letter-spacing: 0.03em;
	}
}

@media (max-width: 560px) {
	/* 50px side padding is too much on narrow screens */
	.contact-form-section .wpcf7-form textarea { padding: 20px 24px; }
	.contact-form-section .wpcf7-form .cf7-submit,
	.contact-form-section .wpcf7-form input[type="submit"] { width: 100%; min-width: 0; }
}

@media (max-width: 410px) {
	/* Shrink the CTA so it fits within the viewport on small phones */
	.contact-schedule__btn {
		font-size: 18px;
		padding: 0.85rem 1.25rem;
		letter-spacing: 0.02em;
	}
	/* One more step down for the submit label. 16px/1rem still overran a 320px
	   column by 3px at a 360px viewport — the narrowest phones in use. 15px with
	   0.02em tracking and 0.85rem padding needs ~285px, so it clears 320px and
	   holds down to a 320px viewport. */
	.contact-form-section .wpcf7-form .cf7-submit,
	.contact-form-section .wpcf7-form input[type="submit"] {
		font-size: 15px;
		padding: 0.95rem 0.85rem;
		letter-spacing: 0.02em;
	}
}

/* Last step, for 320px-class viewports (iPhone SE 1st gen, Fold outer screen).
   The column there is 280px and 15px/0.02em still overran it by 17px. Tracking
   goes to almost nothing at this size — it is what costs the most width per
   character on a 26-character uppercase label, and it buys the least. */
@media (max-width: 375px) {
	.contact-form-section .wpcf7-form .cf7-submit,
	.contact-form-section .wpcf7-form input[type="submit"] {
		font-size: 14px;
		padding: 0.9rem 0.7rem;
		letter-spacing: 0.01em;
	}
}

/* ---- Required-field indicator ----------------------------
   The controls already carry aria-required="true", so the requirement is
   exposed to assistive tech — but there was nothing on screen to see. WCAG 3.3.2
   wants the instruction available to everyone, so the asterisk is visual only
   (aria-hidden) and the legend at the top of the column spells it out once
   rather than repeating "required" into every field's accessible name. */
.cf7-req {
	/* #B3261E on white measures 4.83:1 — colour is a reinforcement here, never
	   the only cue, since the asterisk glyph itself carries the meaning. */
	color: #B3261E;
	font-weight: 700;
	margin-left: 0.15em;
}
.cf7-legend {
	font-family: var(--ff-body);
	font-size: 17px;
	line-height: 1.4;
	color: var(--c-body);
	margin: 0;
}
.cf7-legend .cf7-req { margin-left: 0; margin-right: 0.15em; }