/**
 * Divi Child - Custom Styles
 *
 * This file is enqueued after the main style.css.
 * Use it for additional overrides or third-party CSS.
 *
 * @package Divi_Child
 * @since 1.0.0
 */

/* ==========================================================================
   Groll Construction — Fluent Forms Contact Form (dark, transparent)
   Scoped to the wrapper div around the [fluentform id="3"] shortcode in the
   homepage Contact CTA section.
   ========================================================================== */
.groll-contact-form-dark .ff-el-form-control,
.groll-contact-form-dark select.ff-el-form-control,
.groll-contact-form-dark textarea.ff-el-form-control {
	background: transparent !important;
	border: 1px solid rgba(255,255,255,.28) !important;
	color: #fff !important;
	font-family: 'Barlow', sans-serif !important;
	font-size: 13px !important;
	padding: 14px 16px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.groll-contact-form-dark .ff-el-form-control::placeholder {
	color: rgba(255,255,255,.55) !important;
}
.groll-contact-form-dark select.ff-el-form-control option {
	color: #000 !important;
}
.groll-contact-form-dark .ff-el-input--label,
.groll-contact-form-dark .ff-el-input--label label {
	display: none !important;
}
.groll-contact-form-dark .ff-btn,
.groll-contact-form-dark button[type="submit"] {
	background: #c2a578 !important;
	color: #fff !important;
	border: none !important;
	padding: 15px !important;
	font-size: 12px !important;
	letter-spacing: 2px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	width: 100% !important;
	border-radius: 0 !important;
}
.groll-contact-form-dark .ff-el-is-required {
	color: #c2a578 !important;
}

/* ==========================================================================
   Responsive tweaks not covered by Divi's automatic column stacking
   Font-size step-downs for headings/eyebrows are set per-module via Divi's
   own tablet/phone breakpoint attrs in the Visual Builder, not here.
   ========================================================================== */
@media only screen and (max-width: 767px) {
	.groll-contact-form-dark { margin-top: 24px; }
}

/* ==========================================================================
   Groll Construction — Lucide icons are static black-stroke SVGs loaded via
   <img src>, so they can't be recolored with CSS color. Approximate the
   intended gold/white tone with a filter, scoped to where it's needed.
   ========================================================================== */
#process .et_pb_blurb_container img,
#process .et_pb_main_blurb_image img {
	filter: brightness(0) saturate(100%) invert(76%) sepia(28%) saturate(597%) hue-rotate(357deg) brightness(94%) contrast(91%);
}

/* ==========================================================================
   Groll Construction — Featured Homes 6-up grid
   Divi's generic "6 columns present" helper class (.et_block_row_6col) wins
   CSS specificity over the plain .et_pb_column_1_6 rule and forces a 2-3-up
   layout instead of 6-across. Force the intended 6-across flex layout here.
   ========================================================================== */
#portfolio .et_pb_row:last-child {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 14px;
}
#portfolio .et_pb_row:last-child > .et_pb_column {
	width: calc(16.666% - 12px) !important;
	flex: 0 0 calc(16.666% - 12px) !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
}
@media only screen and (max-width: 980px) {
	#portfolio .et_pb_row:last-child { flex-wrap: wrap !important; }
	#portfolio .et_pb_row:last-child > .et_pb_column {
		width: calc(33.333% - 10px) !important;
		flex: 0 0 calc(33.333% - 10px) !important;
	}
}
@media only screen and (max-width: 767px) {
	#portfolio .et_pb_row:last-child > .et_pb_column {
		width: calc(50% - 7px) !important;
		flex: 0 0 calc(50% - 7px) !important;
	}
}

/* ==========================================================================
   Groll Construction — Global header overlay positioning
   Divi's position "origin" attr didn't translate to valid top/left offsets
   (rendered as an invalid "top_left:0px" declaration), so the header had
   position:absolute but no actual anchor. Complete it here.
   ========================================================================== */
.et_pb_section_0_tb_header {
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 9999 !important;
}

/* ==========================================================================
   Groll Construction — nested row-inner grids not laying out horizontally
   (Services 5-icon row, Reviews 3-card row). Force flex layout directly
   rather than relying on Divi's per-column-count helper classes.
   ========================================================================== */
#services .et_pb_row_inner,
#reviews .et_pb_row_inner {
	display: flex !important;
	flex-wrap: wrap !important;
}
#services .et_pb_row_inner > .et_pb_column_inner {
	width: calc(20% - 1px) !important;
	flex: 0 0 calc(20% - 1px) !important;
	margin-right: 0 !important;
}
#reviews .et_pb_row_inner > .et_pb_column_inner {
	width: calc(33.333% - 11px) !important;
	flex: 0 0 calc(33.333% - 11px) !important;
	margin-right: 16px !important;
}
#reviews .et_pb_row_inner > .et_pb_column_inner:last-child {
	margin-right: 0 !important;
}
@media only screen and (max-width: 980px) {
	#services .et_pb_row_inner > .et_pb_column_inner {
		width: calc(33.333% - 8px) !important;
		flex: 0 0 calc(33.333% - 8px) !important;
	}
	#reviews .et_pb_row_inner > .et_pb_column_inner {
		width: calc(50% - 8px) !important;
		flex: 0 0 calc(50% - 8px) !important;
	}
}
@media only screen and (max-width: 767px) {
	#services .et_pb_row_inner > .et_pb_column_inner,
	#reviews .et_pb_row_inner > .et_pb_column_inner {
		width: 100% !important;
		flex: 0 0 100% !important;
		margin-right: 0 !important;
	}
}

/* ==========================================================================
   Groll Construction — Button text colors
   The "module.advanced.text.text.color" attr never produced a CSS rule for
   any button instance (background/border rules generated fine, text color
   didn't). Set explicitly here rather than relying on that attribute path.
   ========================================================================== */
.et_pb_button_0_tb_header,
.et_pb_button_0,
.et_pb_button_1,
.et_pb_button_2,
.et_pb_button_4,
.et_pb_button_5,
.et_pb_button_6,
.et_pb_button_7 {
	color: #ffffff !important;
}
.et_pb_button_0_tb_header:hover,
.et_pb_button_0:hover,
.et_pb_button_1:hover,
.et_pb_button_2:hover,
.et_pb_button_4:hover,
.et_pb_button_5:hover,
.et_pb_button_6:hover,
.et_pb_button_7:hover {
	color: #ffffff !important;
	opacity: .85;
}
.et_pb_button_3 {
	color: #23252a !important;
}
.et_pb_button_3:hover {
	color: #23252a !important;
	opacity: .7;
}

/* ==========================================================================
   Groll Construction — Built With Care 6-cell stat grid not laying out
   as a clean 3-across (wrap to 2 rows) grid. Force flex layout directly,
   same pattern as the Services/Reviews fix above.
   ========================================================================== */
.et_pb_row_inner_1 {
	display: flex !important;
	flex-wrap: wrap !important;
}
.et_pb_row_inner_1 > .et_pb_column_inner {
	width: calc(33.333% - 1px) !important;
	flex: 0 0 calc(33.333% - 1px) !important;
	margin-right: 0 !important;
}
@media only screen and (max-width: 767px) {
	.et_pb_row_inner_1 > .et_pb_column_inner {
		width: 50% !important;
		flex: 0 0 50% !important;
	}
}