/* ---------------------------------------------------------------------------
   LWD Radon — theme-owned styles.

   Two parts:
   1. The site's Customizer CSS, carried over verbatim from the `custom_css`
      post that belonged to the Divi theme. WordPress keys Customizer CSS to
      the active theme, so it would not have followed the theme switch.
   2. Layout normalisation for the Gravity Forms markup that replaced Divi's
      contact-form module. Colours, fonts and sizing are NOT set here — those
      are generated per page into assets/page-<id>.css directly from Divi's
      own declarations, so the forms inherit the original treatment.
   --------------------------------------------------------------------------- */

/* ---- 1. Customizer CSS carried over from the Divi theme (verbatim) ---- */
h1.review-us{
	font-size: 38px;
    font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif;
}
.online_review .tab-content {
	display:none;
}
.online_review .tab-open {
	display:block;
}
.online_review .tab-title.active-tab .far{
	color: #af002f;
}
.smiley-icon .et_pb_column {
    display: flex;
    gap: 20px;
}
input#gform_submit_button_1 {
    background-color: #b10b31;
    border-radius: 0;
}
input#gform_submit_button_1:hover {
	background-color: rgba(193,62,51,0.9)!important;
}
#nav-home a.logo{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 150px;
    background-color: #fefefe;
    box-shadow: 0 1px 5px rgba(0,0,0,.4);
    border-radius: 5px;
    padding: 15px;
	transition-duration: .3s;
	transition-property: all;
    transition-timing-function: ease-in-out;
    width: 270px;
}
#nav-home a.logo img {
    width: 170px;	
}
#nav-home a.logo:hover {
	filter: brightness(0.95);
}
.tab-content .et_pb_column{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

/* WP 6.6+ link underline fix */
:root :where(a:where(:not(.wp-element-button))) { text-decoration: none; }

/* ---- 2. Gravity Forms layout normalisation ---- */

/* Divi's contact form was full-bleed inside its module; match that. */
.et_pb_contact_form_container .gform_wrapper { margin: 0; }
.et_pb_contact_form_container .gform_wrapper form { margin: 0; }

/* Labels were hidden in the Divi original (placeholder-only fields). */
.et_pb_contact_form_container .gform_wrapper .gfield_label { display: none; }

/* Column layout is PER FORM, matching what Divi rendered before the swap:
   only the sitewide footer "Contact Us" form (id 2) put Name and Email side by
   side. The hero quote/estimate forms (3, 4, 5) were single-column stacked.
   Applying a 2-column grid to all of them was a visible regression on
   /air-radon-testing/ and /water/. */
.et_pb_contact_form_container .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	/* Measured off the Divi original before the swap: 13px between stacked rows,
	   14px between the two columns of the footer form. These must be PIXELS - a
	   percentage row-gap resolves against the grid's block size, which rendered
	   as 8px and made every form look tighter than the original. */
	column-gap: 14px;
	row-gap: 13px;
}
.et_pb_contact_form_container .gform_wrapper .gfield { grid-column: 1 / -1; }

/* Form 2 only: Name | Email Address on one row, message full width. */
#gform_wrapper_2 .gform_fields { grid-template-columns: repeat(2, 1fr); }
#gform_wrapper_2 .gfield { grid-column: span 1; }
#gform_wrapper_2 .gfield:has(textarea) { grid-column: 1 / -1; }

.et_pb_contact_form_container .gform_wrapper input[type="text"],
.et_pb_contact_form_container .gform_wrapper input[type="email"],
.et_pb_contact_form_container .gform_wrapper input[type="tel"],
.et_pb_contact_form_container .gform_wrapper textarea {
	width: 100%;
	border: none;
	border-radius: 0;
	padding: 16px;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}
.et_pb_contact_form_container .gform_wrapper textarea { min-height: 150px; }

.et_pb_contact_form_container .gform_wrapper .gform_footer {
	padding: 0;
	margin: 7px 0 0;
	text-align: right;
}
.et_pb_contact_form_container .gform_wrapper input[type="submit"],
.et_pb_contact_form_container .gform_wrapper button.gform_button {
	cursor: pointer;
	width: auto;
	-webkit-appearance: none;
	appearance: none;
}

/* GF validation + reCAPTCHA notice, kept legible on both the light and dark forms. */
.et_pb_contact_form_container .gform_wrapper .gfield_required { opacity: .75; }
.et_pb_contact_form_container .gform_wrapper .gform_validation_errors,
.et_pb_contact_form_container .gform_wrapper .validation_message {
	font-size: 14px;
	line-height: 1.5;
}
.et_pb_contact_form_container .gform_wrapper .gform_fields .gfield_description { font-size: 13px; }

@media (max-width: 767px) {
	.et_pb_contact_form_container .gform_wrapper .gform_fields,
	#gform_wrapper_2 .gform_fields { grid-template-columns: 1fr; }
	.et_pb_contact_form_container .gform_wrapper .gfield,
	#gform_wrapper_2 .gfield { grid-column: 1 / -1; }
}

/* ---- 3. Map embed that replaced the Divi map module ---- */
.lwd-map-embed { line-height: 0; }
.lwd-map-embed iframe { width: 100%; border: 0; display: block; }

/* ---- 4. Mobile navigation ----
   Divi built the mobile menu in JS from the desktop list. assets/nav.js does the
   same; these rules match Divi's own .et_mobile_menu presentation. */
#et_mobile_nav_menu { display: none; }
@media (max-width: 980px) {
	#et_mobile_nav_menu { display: block; }
	#top-menu-nav { display: none; }
}
.et_mobile_menu { display: none; }
.et_mobile_menu.is-open { display: block; }

/* ---- 5. Neutralise Divi's scroll-animation system ----
   Divi hid animated elements at opacity:0 and its JavaScript revealed them on scroll.
   That JavaScript is gone, so anything still carrying an animation class would stay
   invisible forever - which is exactly how the hero form and the Our Services blurbs
   disappeared. Content must never depend on script to be visible. */
.et_animated,
[class*="et_pb_animation_"] {
	opacity: 1 !important;
	animation: none !important;
}

/* ---- 6. Match Divi's exact field geometry ----
   Measured on the live site before the swap: inputs 61px tall (16px padding, 15px
   text, 28.5px line-height), textareas 150px, submit 53px - identical on both the
   light hero form and the dark footer form. Gravity Forms' own theme stylesheet
   still loads and would otherwise size these itself, hence !important. */
.et_pb_contact_form_container .gform_wrapper input[type="text"],
.et_pb_contact_form_container .gform_wrapper input[type="email"],
.et_pb_contact_form_container .gform_wrapper input[type="tel"],
.et_pb_contact_form_container .gform_wrapper textarea {
	box-sizing: border-box !important;
	padding: 16px !important;
	font-size: 15px !important;
	line-height: 28.5px !important;
}
.et_pb_contact_form_container .gform_wrapper input[type="text"],
.et_pb_contact_form_container .gform_wrapper input[type="email"],
.et_pb_contact_form_container .gform_wrapper input[type="tel"] {
	height: 61px !important;
}
.et_pb_contact_form_container .gform_wrapper textarea {
	height: 150px !important;
	min-height: 150px !important;
	resize: vertical;
}
.et_pb_contact_form_container .gform_wrapper input[type="submit"],
.et_pb_contact_form_container .gform_wrapper button.gform_button {
	min-height: 53px !important;
}

/* Google requires the reCAPTCHA notice to stay visible when the badge is hidden,
   so it is kept - but it must be READABLE. Gravity Forms ships it as #666 and the
   earlier .85 opacity here made it worse: measured 2.35:1 on the hero form and
   2.11:1 on the footer form, where WCAG AA wants 4.5:1 for text this size.
   Every form on this site sits on a dark or saturated ground, so a near-white
   notice clears AA comfortably on all of them. */
.et_pb_contact_form_container .gform_wrapper .recaptcha_text,
.et_pb_contact_form_container .gform_wrapper .grecaptcha-notice,
.et_pb_contact_form_container .gform_wrapper [class*="recaptcha"] {
	color: rgba(255, 255, 255, 0.88) !important;
	opacity: 1;
	font-size: 13px;
	line-height: 1.5;
}
.et_pb_contact_form_container .gform_wrapper .recaptcha_text a,
.et_pb_contact_form_container .gform_wrapper [class*="recaptcha"] a {
	color: #ffffff !important;
	text-decoration: underline;
}