/* ==================================================================
   Contact Form 7, Fox Valley skin
   ------------------------------------------------------------------
   The "Contact Callback" band was an Elementor Form widget; it is now the CF7
   form "Contact Callback (Fox Valley)" rendered through a shortcode widget
   carrying `.fv-cf7-form`.

   This file reproduces, on CF7's markup, exactly what elementor-hero.css did to
   the Elementor form (see its `.fv-insure-form` / `.fv-contact-form` block,    still live, because the Insurance and Newsletter forms remain Elementor
   forms). Values here are copied from those rules so the two form systems look
   identical while they coexist.

   CF7 markup differs from Elementor's in every respect, so nothing could be
   reused:
     Elementor                        CF7
     .elementor-field-textual         input.wpcf7-form-control / textarea
     .elementor-field-group.elementor-error   input.wpcf7-not-valid
     .elementor-button                input.wpcf7-submit
     .elementor-message-success       form.sent      .wpcf7-response-output
     .elementor-message-danger        form.failed    .wpcf7-response-output
     .elementor-help-inline           .wpcf7-not-valid-tip

   The card itself (white, 28px radius, drop shadow) comes from
   `.fv-contact-card > .elementor-widget-wrap` in elementor-hero.css and is
   unaffected by the swap, it lives on the COLUMN, not the widget.
   ================================================================== */

.fv-cf7-form .wpcf7 { margin: 0; }

/* CF7 renders a visually-hidden <p role="status"> block; it must stay in the
   a11y tree but must not occupy layout inside the flex column. */
.fv-cf7-form .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Layout ----
   Design row gap is 14px (Elementor form `row_gap`). CF7 pipes the template
   through wpcf7_autop(), which wraps each control in a <p>; zero those out and
   drive spacing from the flex column instead of fighting <p> margins. */
.fv-cf7-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.fv-cf7-form .wpcf7-form > .hidden-fields-container { display: none; }
.fv-cf7-form .wpcf7-form p { margin: 0; padding: 0; }
/* CF7 wraps every control in an inline <span class="wpcf7-form-control-wrap">.
   Left inline it shrink-to-fits, so `width:100%` on the input resolves against the
   span rather than the field box and the control renders narrow (the newsletter
   email came out 276px inside a 310px slot). Block it everywhere, not just in
   .fv-cf7-field, the newsletter row uses its own wrapper. */
.fv-cf7-form .wpcf7-form-control-wrap { display: block; }

/* First / last name stay side-by-side at EVERY width, the design's name pair is
   a fixed 1fr 1fr row (mirrors the `.fv-contact-form .elementor-field-group-*`
   ≤767 pin in elementor-hero.css). */
.fv-cf7-form .fv-cf7-row--split {
	display: flex;
	gap: 14px;
}
.fv-cf7-form .fv-cf7-row--split > .fv-cf7-field {
	flex: 1 1 50%;
	min-width: 0; /* let the inputs shrink instead of overflowing the card */
}

/* ---- Fields (design inputStyle) ---- */
.fv-cf7-form input[type="text"],
.fv-cf7-form input[type="email"],
.fv-cf7-form input[type="tel"],
.fv-cf7-form input[type="date"],
.fv-cf7-form select,
.fv-cf7-form textarea {
	box-sizing: border-box;
	width: 100%;
	font-family: var(--font-body, "Hanken Grotesk"), sans-serif;
	font-size: 15px;
	line-height: 1.5;
	padding: 13px 15px;
	border: 1.5px solid var(--ink-200, #DCE3E9);
	border-radius: 8px;
	background: #fff;
	color: var(--ink-800, #1F3140);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fv-cf7-form input::placeholder,
.fv-cf7-form textarea::placeholder {
	color: var(--ink-400, #92A2AE);
	opacity: 1;
}
.fv-cf7-form input:focus,
.fv-cf7-form select:focus,
.fv-cf7-form textarea:focus {
	border-color: var(--navy-600, #2A6098);
	box-shadow: var(--focus-ring, 0 0 0 3px rgba(31, 78, 121, 0.30));
	outline: none;
}

/* Native select: strip the UA chrome and draw the design's chevron, so it sits
   at the same height as the text inputs. The Elementor select rendered ~7px
   taller than its neighbours (56 vs 49) because it kept the UA control height,    a wart, not a design intent (the design has ONE inputStyle), so it is not
   reproduced here. */
.fv-cf7-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7E8D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
}
/* first_as_label leaves the placeholder option selected with an empty value,    grey it to read as a placeholder, like the other fields' ::placeholder. */
.fv-cf7-form select:has(option[value=""]:checked) { color: var(--ink-400, #92A2AE); }
.fv-cf7-form select option { color: var(--ink-800, #1F3140); }
.fv-cf7-form textarea {
	height: 180px;
	resize: vertical;
	display: block;
}

/* Invalid field, clay border, matching the Elementor `.elementor-error` rule.
   The `.wpcf7` hop + element are needed to beat THIS FILE'S OWN base field rule:
   `.fv-cf7-form input[type="text"]` is (0,2,1) (the attribute selector counts as a
   class), so a plain `.fv-cf7-form .wpcf7-not-valid` (0,2,0) loses and the field
   kept its grey border while flagged invalid. This is (0,3,1). */
.fv-cf7-form .wpcf7 input.wpcf7-not-valid,
.fv-cf7-form .wpcf7 textarea.wpcf7-not-valid {
	border-color: #C4553D;
}
.fv-cf7-form .wpcf7 input.wpcf7-not-valid:focus,
.fv-cf7-form .wpcf7 textarea.wpcf7-not-valid:focus {
	border-color: #C4553D;
	box-shadow: 0 0 0 3px rgba(196, 85, 61, 0.22);
}

/* Inline per-field error, small clay text, no panel (design behaviour). */
.fv-cf7-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: #A6543A;
}

/* ---- Consent checkbox ---- */
.fv-cf7-form .fv-cf7-consent {
	font-size: 13px;
	color: var(--ink-600, #4C6172);
	line-height: 1.5;
}
.fv-cf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.fv-cf7-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
}
.fv-cf7-form .wpcf7-acceptance input[type="checkbox"] {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--navy-700, #1F4E79);
	cursor: pointer;
}

/* ---- Submit (design primary lg pill) ----
   `input.wpcf7-submit[type="submit"]` is load-bearing. Elementor's Theme Style
   kit sets `.elementor-kit-5 input[type="submit"]{font-size:15px;padding:12px 22px}`
   in the generated post-5.css, that is (0,2,1), which out-ranks a plain
   `.fv-cf7-form .wpcf7-submit` (0,2,0) and flattened the pill to the global button
   size. Adding the element + attribute takes this to (0,3,1) and it wins outright,
   without !important. Same trap the direction switcher hit with `.elementor-kit-5
   button` (see direction-switcher.css). */
.fv-cf7-form .fv-cf7-actions { position: relative; }
.fv-cf7-form input.wpcf7-submit[type="submit"] {
	font-family: var(--font-body, "Hanken Grotesk"), sans-serif;
	background: var(--navy-700, #1F4E79);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 16px 32px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(20, 34, 46, 0.07);
	transition: background-color 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}
.fv-cf7-form input.wpcf7-submit[type="submit"]:hover {
	background: var(--navy-800, #163A5C);
	color: #fff;
	transform: translateY(-1px);
	filter: brightness(1.05);
}
.fv-cf7-form input.wpcf7-submit[type="submit"]:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 3px rgba(31, 78, 121, 0.30));
}
.fv-cf7-form input.wpcf7-submit[type="submit"]:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

/* CF7's spinner is `visibility:hidden` until submit, but it still RESERVES
   ~34px of inline space next to the button. The Elementor forms had no spinner,
   so that space silently ate the layout: on the newsletter's fixed 460px row it
   squeezed the email field from 303px to 276px, and on the full-width insurance
   submit it wraps to its own line. Taking it out of flow keeps the design's
   geometry exactly while preserving the loading affordance, it now fades in over
   the button's right edge. */
.fv-cf7-form .fv-cf7-actions,
.fv-cf7-form .fv-cf7-news-actions { position: relative; }
.fv-cf7-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 16px;
	margin: 0;
	transform: translateY(-50%);
}

/* ---- Response panels ----
   CF7 prints ONE .wpcf7-response-output per form and signals the state with a
   class on the <form> (init / sent / failed / aborted / invalid / unaccepted /
   spam / payment-required). Elementor instead printed a different element per
   state, so each CF7 state is mapped onto the matching design panel below.
   CF7's default red 2px border is removed on all of them. */
/* The `.wpcf7 form` hop is load-bearing: CF7's own styles.css ships
   `.wpcf7 form .wpcf7-response-output { border: 2px solid #00a0d2 }` at (0,2,1),
   which out-ranks a plain `.fv-cf7-form .wpcf7-response-output` (0,2,0) and would
   leave a stray blue 2px box around every panel. This is (0,3,1). The per-state
   rules below are already (0,3,0) and clear CF7's (0,2,1) state colours. */
.fv-cf7-form .wpcf7 form .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 16px 20px;
	border: 0;
	border-radius: 12px;
	font-size: 14.5px;
	line-height: 1.5;
	background-repeat: no-repeat;
}
/* init has no message, CF7 keeps the node in the DOM; don't let it show. */
.fv-cf7-form .wpcf7-form.init .wpcf7-response-output,
.fv-cf7-form .wpcf7-form.resetting .wpcf7-response-output { display: none; }

/* SUCCESS, sage panel + check-circle, with the design's bold intro line.
   Mirrors `.fv-contact-form .elementor-message-success` (which set its own
   ::before intro of 'Thank you for reaching out.'). */
.fv-cf7-form .wpcf7-form.sent .wpcf7-response-output {
	background-color: var(--success-bg, #E6F2EC);
	color: #2F6A52;
	padding: 20px 22px 20px 58px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E8E6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.09'/%3E%3C/svg%3E");
	background-position: 22px 21px;
	background-size: 24px 24px;
}
.fv-cf7-form .wpcf7-form.sent .wpcf7-response-output::before {
	content: 'Thank you for reaching out.';
	display: block;
	font-weight: 700;
	font-size: 15px;
	color: #256048;
	margin-bottom: 4px;
}

/* WARNING, validation / unaccepted consent. Honey panel from the design's
   --warning tokens: a form the user can fix is not the same as a send failure,
   and colors_and_type.css ships the tone for exactly this. */
.fv-cf7-form .wpcf7-form.invalid .wpcf7-response-output,
.fv-cf7-form .wpcf7-form.unaccepted .wpcf7-response-output,
.fv-cf7-form .wpcf7-form.payment-required .wpcf7-response-output {
	background-color: var(--warning-bg, #FBF1DF);
	color: #8A5D14;
	padding: 16px 20px 16px 52px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C98A2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
	background-position: 20px 16px;
	background-size: 22px 22px;
}

/* ERROR, send failed / aborted / spam. Clay panel + alert icon, copied from
   `.fv-insure-form .elementor-message-danger`. */
.fv-cf7-form .wpcf7-form.failed .wpcf7-response-output,
.fv-cf7-form .wpcf7-form.aborted .wpcf7-response-output,
.fv-cf7-form .wpcf7-form.spam .wpcf7-response-output {
	background-color: #FBEDE9;
	color: #A6543A;
	padding: 16px 20px 16px 52px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4553D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
	background-position: 20px 16px;
	background-size: 22px 22px;
}

/* Design behaviour: the success panel REPLACES the form
   (cf. `.fv-insure-form form.elementor-form:has(+ .elementor-message-success)`).
   CF7 keeps the fields mounted, so hide every child except the response. */
.fv-cf7-form .wpcf7-form.sent > *:not(.wpcf7-response-output) { display: none; }
.fv-cf7-form .wpcf7-form.sent { gap: 0; }

/* ==================================================================
   Variant: Insurance Verification  (.fv-cf7-insure)
   Was the Elementor "Insurance Verification" widget. Inherits everything
   above; only the full-width submit and the HIPAA caption differ.
   ================================================================== */

/* The design's submit spans the card (measured 416px = the form's full width). */
.fv-cf7-insure input.wpcf7-submit[type="submit"] { width: 100%; }

/* HIPAA caption, was an Elementor `html` field styled by
   `.fv-insure-form .elementor-field-type-html`. */
.fv-cf7-insure .fv-cf7-note {
	text-align: center;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ink-500, #6B7E8D);
}

/* ==================================================================
   Variant: Newsletter  (.fv-cf7-news)
   Was the Elementor "Newsletter" widget: ONE inline row, pill email field +
   navy pill button, both exactly 54px, the pair centred at 460px. Reproduces
   `.fv-news-form` in elementor-hero.css (incl. its 54px height pin).
   ================================================================== */
.fv-cf7-news .wpcf7-form { gap: 0; }
.fv-cf7-news .fv-cf7-news-row {
	display: flex;
	gap: 10px;                 /* measured: 460 = 303 + 10 + 147 */
	max-width: 460px;
	margin: 0 auto;
}
.fv-cf7-news .fv-cf7-news-field { flex: 1 1 auto; min-width: 0; }
.fv-cf7-news .fv-cf7-news-actions { flex: 0 0 auto; }

/* Pill field, 54px tall, vertical padding removed so the fixed height centres
   the text (same trick as the Elementor rule). */
.fv-cf7-news input[type="email"] {
	height: 54px;
	padding: 0 20px;
	font-size: 15.5px;
	border-radius: 999px;
}
.fv-cf7-news input.wpcf7-submit[type="submit"] {
	height: 54px;
	min-height: 54px;
	padding: 0 32px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Newsletter success is NOT a panel, the design shows centred sage text in
   place of the form (`.fv-news-form .elementor-message-success`). */
.fv-cf7-news .wpcf7-form.sent .wpcf7-response-output {
	background: none;
	background-image: none;
	padding: 0;
	margin-top: 18px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	color: var(--sage-800, #3E5F52);
}
.fv-cf7-news .wpcf7-form.sent .wpcf7-response-output::before { content: none; }

/* On the sand band the validation/error panels would otherwise sit full-bleed;
   keep them to the form's own measure. */
.fv-cf7-news .wpcf7-form .wpcf7-response-output {
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}