/**
 * 247 Flood Response — component CSS overrides.
 *
 * Loaded after lp/styles.min.css and lp/responsive.css to:
 *   1. Defeat the theme's UNLAYERED `h1–h6 { font-size: inherit }` reset that
 *      otherwise wins over @layer utilities rules from the LP stylesheet.
 *   2. Provide explicit font-size / font-weight per breakpoint for every
 *      heading inside Flood Response blocks.
 *   3. Map the LP's inline Tailwind utility classes onto Contact Form 7's
 *      rendered markup so the Flood Lead Form has rounded white inputs,
 *      icon padding, and a proper Attach + Submit footer.
 *
 * Enqueued conditionally for pages using the flexible.php template — see
 * aiims_scripts() in functions.php.
 */

 
/* =====================================================================
   1. Heading typography rescue — restores font-size on flood sections
   ===================================================================== */
.flood-hero h1, .flood-hero h2, .flood-hero h3,
.flood-about h2, .flood-about h3,
.flood-services h2, .flood-services h3,
.flood-industrial h2, .flood-industrial h3,
.flood-industrial-form h2, .flood-industrial-form h3,
.flood-process h2, .flood-process h3,
.flood-cta h2, .flood-cta h3,
.footer-wrap h2, .footer-wrap h3 {
	font-size: revert-layer;
	font-weight: revert-layer;
}

/* Re-apply LP's text-size utilities INLINE (specificity + source-order win
   even when revert-layer isn't supported). */
.flood-services .our-process .text-white.md\:text-\[80px\],
.flood-industrial .text-\[\#163546\].md\:text-\[80px\],
.flood-process .text-\[\#163546\].md\:text-\[80px\] {
	font-size: clamp(40px, 6vw, 80px);
}

@media (min-width: 768px) {
	.flood-services h2.md\:text-\[80px\],
	.flood-industrial h2.md\:text-\[80px\],
	.flood-process h2.md\:text-\[80px\] { font-size: 80px; }
	.flood-cta h2.md\:text-\[70px\] { font-size: 70px; }
	.flood-cta h2.md\:text-\[80px\] { font-size: 80px; }
	.flood-about h2.md\:text-\[64px\] { font-size: 64px; }
	.flood-services h2.md\:text-\[64px\] { font-size: 64px; }
}

@media (min-width: 601px) and (max-width: 767px) {
	.flood-services h2.sm\:text-\[70px\],
	.flood-industrial h2.sm\:text-\[70px\],
	.flood-process h2.sm\:text-\[70px\] { font-size: 70px; }
	.flood-cta h2.sm\:text-\[65px\] { font-size: 65px; }
	.flood-about h2.sm\:text-\[58px\] { font-size: 58px; }
}

@media (max-width: 600px) {
	.flood-services h2.text-\[60px\],
	.flood-industrial h2.text-\[60px\],
	.flood-process h2.text-\[60px\],
	.flood-cta h2.text-\[60px\] { font-size: 60px; }
	.flood-about h2.text-\[50px\] { font-size: 50px; }
}

/* Hero h1 (banner-title) */
.flood-hero h1.banner-title { font-size: 50px; line-height: 1.1; }
@media (min-width: 601px) { .flood-hero h1.banner-title { font-size: 50px; } }
@media (min-width: 768px) { .flood-hero h1.banner-title { font-size: 65px; } }
@media (min-width: 1024px) { .flood-hero h1.banner-title { font-size: 75px; } }

/* Hero contact-card h2 (60 Minute Response Time) */
.flood-hero .contact-us-wrap h2 { font-size: 30px; }
@media (min-width: 601px) { .flood-hero .contact-us-wrap h2 { font-size: 40px; } }

/* Industrial form section title (Need Emergency Flood Response…?) */
.flood-industrial-form .text > p:nth-of-type(1) { font-size: 55px; line-height: 1; }
@media (min-width: 601px) { .flood-industrial-form .text > p:nth-of-type(1) { font-size: 60px; } }
@media (min-width: 768px) { .flood-industrial-form .text > p:nth-of-type(1) { font-size: 70px; } }

/* Hero highlight cards (Residential & Commercial / Insurance Approved / etc.) */
.flood-hero .banner-highlight-item h3 { font-size: 26px; line-height: 1; }
@media (min-width: 768px) { .flood-hero .banner-highlight-item h3 { font-size: 32px; } }

/* Service cards */
.flood-services .glide__slide h3 { font-size: 24px; line-height: 1; }
@media (min-width: 601px) { .flood-services .glide__slide h3 { font-size: 28px; } }
@media (min-width: 768px) { .flood-services .glide__slide h3 { font-size: 32px; } }

/* Process step titles (5-step carousel) */
.flood-process .stepsn-wrap h3 { font-size: 20px; line-height: 1; }
@media (min-width: 768px) { .flood-process .stepsn-wrap h3 { font-size: 24px; } }

/* Our Process 3-step inside trust card */
.flood-services .stepsli h3 { font-size: 24px; line-height: 1; }
@media (min-width: 601px) { .flood-services .stepsli h3 { font-size: 28px; } }
@media (min-width: 768px) { .flood-services .stepsli h3 { font-size: 32px; } }

/* About specialists */
.flood-about .specialist_highlights .text p { font-size: 18px; }
@media (min-width: 601px) { .flood-about .specialist_highlights .text p { font-size: 20px; } }
@media (min-width: 768px) { .flood-about .specialist_highlights .text p { font-size: 24px; } }

/* Bold weight rescue (theme reset sets font-weight: inherit) */
.flood-hero h1, .flood-hero h2, .flood-hero h3,
.flood-about h2, .flood-about h3,
.flood-services h2, .flood-services h3,
.flood-industrial h2, .flood-industrial h3,
.flood-industrial-form p,
.flood-process h2, .flood-process h3,
.flood-cta h2, .flood-cta h3 { font-weight: 700; }
.flood-services .glide__slide h3,
.flood-process .stepsn-wrap h3,
.flood-hero .banner-highlight-item h3 { font-weight: 800; }

/* =====================================================================
   2. CF7 form styling — Flood Lead Form (Industrial) + Hero Quick Quote
   ===================================================================== */
.flood-industrial-form .wpcf7-form .form-steps-wrapper,
.cformwrap .wpcf7-form .form-steps-wrapper {
	width: 100%;
	position: relative;
}
.flood-industrial-form .wpcf7-form .form-step,
.cformwrap .wpcf7-form .form-step {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	flex-direction: row;
    flex-wrap: wrap;
}
.flood-industrial-form .wpcf7-form .formctrl,
.cformwrap .wpcf7-form .formctrl {
	display: flex;
	flex-direction: column;
}
.flood-industrial-form .wpcf7-form .formctrl > .wpcf7-form-control-wrap,
.flood-industrial-form .wpcf7-form .formctrl > .wpcf7-form-control,
.cformwrap .wpcf7-form .formctrl > .wpcf7-form-control-wrap,
.cformwrap .wpcf7-form .formctrl > .wpcf7-form-control {
	width: 100%;
}

/* === Step wizard transitions (hero quick-quote 2-step form) ===
 * Two competing JS controllers live on this form:
 *   1. Theme's js/script.min.js — uses style.cssText="opacity:0;…;visibility:hidden;…"
 *      to hide inactive steps.
 *   2. LP main.js — uses style.opacity / .pointerEvents / .position only.
 *
 * When the active step changes, one controller may overwrite the other's
 * visibility setting, leaving the active step with `visibility: hidden`.
 * The selectors below force visibility based on the opacity inline-style,
 * so whichever script ran last, the visible step actually shows. */
.cformwrap .wpcf7-form .form-step.step-content-1,
.cformwrap .wpcf7-form .form-step.step-content-2 {
	transition: opacity 0.3s ease-in-out;
}
.cformwrap .wpcf7-form .form-step.step-content-2 {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
}
/* If a step has opacity:1 in its inline style, force visibility:visible. */
.cformwrap .form-step[style*="opacity: 1"],
.cformwrap .form-step[style*="opacity:1"] {
	visibility: visible !important;
}
/* If a step has opacity:0 in its inline style, hide it from the layout. */
.cformwrap .form-step[style*="opacity: 0"],
.cformwrap .form-step[style*="opacity:0"] {
	visibility: hidden !important;
	pointer-events: none !important;
}

@media (min-width: 1024px) {
	.flood-industrial-form .wpcf7-form .formctrl.lg\:flex-\[1_0_28\%\] { flex: 1 0 28%; }
	.flood-industrial-form .wpcf7-form .formctrl.lg\:flex-\[1_0_13\%\] { flex: 1 0 13%; }
	.flood-industrial-form .wpcf7-form .formctrl.lg\:flex-\[1_0_25\%\] { flex: 1 0 25%; }
}
.flood-industrial-form .wpcf7-form .formctrl.flex-\[1_0_68\%\] { flex: 1 0 68%; }

/* Rounded white input boxes (Industrial form) */
.flood-industrial-form .inputfrm {
	display: block;
	width: 100%;
	height: 100%;
	padding: 1rem 1.6rem;
	background-color: #FFF;
	border: 1px solid rgba(0, 0, 0, 0.11);
	border-radius: 16px;
	outline: none;
	font-size: 14px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.7);
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
}
@media (min-width: 601px) {
	.flood-industrial-form .inputfrm { font-size: 16px; }
}
.flood-industrial-form .inputfrm::placeholder {
	color: rgba(0, 0, 0, 0.33);
}
.flood-industrial-form select.inputfrm {
	color: rgba(0, 0, 0, 0.33);
	background-position: left 1rem center, 1rem center;
}
.flood-industrial-form textarea.inputfrm {
	min-height: 8rem;
	resize: vertical;
}
.flood-industrial-form .inputfrm.bg-icon {
	padding-left: 2.6rem;
}

/* Hero quick-quote form variant (gray flat inputs, no border) */
.cformwrap .inputfrm {
	/* display: block;
	width: 100%;
	height: 100%;
	padding: 1rem 1.2rem;
	background-color: rgba(217, 217, 217, 0.46);
	border: none;
	border-radius: 0;
	outline: none;
	font-weight: 500;
	color: #163546;
	font-size: 16px;
	font-family: inherit; */
	appearance: none;
	-webkit-appearance: none;
}
@media (min-width: 601px) {
	.cformwrap .inputfrm { font-size: 18px; }
}
.cformwrap .inputfrm::placeholder { color: #B2B2B2; }
.cformwrap select.inputfrm, .cformwrap textarea.inputfrm {
	/* color: #163546; */
}
.cformwrap textarea.inputfrm {
	min-height: 6rem;
	resize: vertical;
}
.cformwrap .formctrl {  }

/* Hero form navigation (Back / Next Step / Submit Enquiry Now) */
.cformwrap .form-navigation {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	margin-top: 1rem;
}
.cformwrap .form-navigation .frmsbtnwrap {
	flex: 1;
	/* background-color: #163546; */
	border-radius: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cformwrap .form-navigation .frmsbtnwrap > button,
.cformwrap .form-navigation .frmsbtnwrap > label,
.cformwrap .form-navigation .frmsbtnwrap input[type="submit"] {
	background: transparent;
	color: #fff;
	border: none;
	/* padding: 1rem 1.75rem; */
	font-weight: 700;
	font-size: 16px;
	width: 100%;
	cursor: pointer;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}
@media (min-width: 768px) {
	.cformwrap .form-navigation .frmsbtnwrap input[type="submit"],
	.cformwrap .form-navigation .frmsbtnwrap > button { font-size: 20px; }
}
.cformwrap .form-navigation .back-btn {
	background: transparent;
	color: #163546;
	border: 2px solid #163546;
	border-radius: 84px;
	padding: 1rem 1.75rem;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.cformwrap .form-navigation .back-btn:hover {
	background: #163546;
	color: #fff;
}
.cformwrap .form-navigation .back-btn.hidden,
.cformwrap .form-navigation label.hidden,
.cformwrap .form-navigation button.hidden { display: none; }

/* Attach button — pill with paperclip icon on the left */
.flood-industrial-form .frmsbtnwrap label[for="file2"] {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem 1rem 3rem;
	background-color: #FFF;
	background-repeat: no-repeat;
	background-position: 1rem center;
	background-size: 20px;
	border: 1px solid rgba(0, 0, 0, 0.11);
	border-radius: 16px;
	cursor: pointer;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.7);
	width: auto;
}
@media (min-width: 601px) {
	.flood-industrial-form .frmsbtnwrap label[for="file2"] { font-size: 16px; }
}
.flood-industrial-form .frmsbtnwrap label[for="file2"] input[type="file"] {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

/* Submit button — large dark navy pill that fills remaining width */
.flood-industrial-form .form-navigation {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding-top: 1rem;
}
.flood-industrial-form .frmsbtnwrap {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.flood-industrial-form .frmsbtnwrap label[for="bsubmit2"] {
	flex: 1;
	background-color: #163546;
	border-radius: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.flood-industrial-form .frmsbtnwrap input[type="submit"],
.flood-industrial-form .wpcf7-form input[type="submit"] {
	background: transparent;
	color: #fff;
	padding: 1rem 1.75rem;
	font-weight: 700;
	font-size: 16px;
	width: 100%;
	border: none;
	cursor: pointer;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}
@media (min-width: 768px) {
	.flood-industrial-form .frmsbtnwrap input[type="submit"] { font-size: 20px; }
}
@media (max-width: 767px) {
	.flood-industrial-form .frmsbtnwrap {
		flex-direction: column;
		align-items: stretch;
	}
}

/* CF7 validation / response messages */
.flood-industrial-form .wpcf7-not-valid-tip,
.cformwrap .wpcf7-not-valid-tip {
	display: block;
	/* margin-top: 0.25rem; */
	font-size: 12px;
	color: #D42A2A;
	position: absolute;
}
.flood-industrial-form .wpcf7-response-output,
.cformwrap .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-size: 14px;
}

/* LP-style inline validation tips (populated by main.js via the
   CF7 ↔ LP validation bridge). */
.cformwrap .frmerror {
	display: none !important;
}
.cformwrap .frmerror,
.flood-industrial-form .frmerror {
	display: block;
	margin-top: 0.25rem;
	font-size: 12px;
	font-weight: 500;
	color: #D42A2A;
	line-height: 1.2;
	min-height: 1em;
}

/* Red outline on invalid required fields. */
.cformwrap .berror,
.cformwrap .required.berror,
.flood-industrial-form .berror {
	outline: 1px solid #D42A2A;
	box-shadow: 0 0 0 3px rgba( 212, 42, 42, 0.12 );
}
.cformwrap .erron,
.flood-industrial-form .erron {
	position: relative;
}

.sec3 .container-large-1 {
	z-index: 2;
}
.sec3 .banimg picture {
    top: 24rem;
	z-index: 1;
}

@media (max-width: 1114px) {
	.sec3 .banimg picture {
		top: -8rem;
	}
}

@media (max-width: 1024px) {
	.sec3 .banimg picture {
		top: 48rem;
	}
	.banimg picture img {
		height: 114%;
	}
}
@media (max-width: 600px) {
	.sec3 .banimg picture {
		top: 30rem;
	}
	.banimg picture img {
		height: 145%;
	}
}