/* ==========================================================================
   Custom Home Improvements: Divi Theme Options > Custom CSS
   --------------------------------------------------------------------------
   1. Variables
   2. Base
   3. Header (home header + CTA)
   4. Navigation (dropdowns, carets, mobile menu)
   5. Top marquee banner
   6. Forms (shared fields, Gravity Forms, Contact Form 7)
   7. Divi modules (toggles)
   8. Blog posts
   9. Plugins (Project Map, Roof Gallery)
   10. Responsive
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
	/* Brand */
	--red: #ee4c25;
	--red-dark: #d9431d;
	--blue: #293076;
	--grey: #f4f4f4;
	--white: #ffffff;

	/* Form fields */
	--field-border: #c9ced6;
	--field-border-focus: #8f99a8;
	--field-text: #222222;
	--field-placeholder: #a4abb5;
	--field-select-text: #6f7782;
	--field-radius: 7px;

	/* Marquee */
	--marquee-bg: var(--blue);
	--marquee-fg: var(--white);
	--marquee-accent: var(--white);
	--marquee-speed: 28s;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
	background: var(--white);
}

#page-container {
	overflow-x: hidden;
}


/* ==========================================================================
   3. HEADER (home header + CTA)
   ========================================================================== */

/* CTA button once the header is stuck to the top */
#page-container #main-home-header.et_pb_sticky_module.et_pb_sticky--top #header-cta {
	background-color: var(--red);
	color: var(--white) !important;
	border-color: var(--red);
}

#page-container #main-home-header.et_pb_sticky_module.et_pb_sticky--top #header-cta:hover {
	background-color: transparent;
	color: var(--red) !important;
}

/* CTA on internal pages */
#page-container #main-home-header #header-cta.internal:hover {
	background-color: var(--red);
}


/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */

/* --- Dropdown panel ------------------------------------------------------ */
.et-menu li ul {
	width: 360px;
	padding: 4px 6px;
	top: calc(100% + 8px);
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 7px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);

	/* Fade/slide in */
	opacity: 0;
	transform: translateY(5px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.et-menu li:hover > ul {
	opacity: 1;
	transform: translateY(0);
}

/* --- Dropdown items ------------------------------------------------------ */
.et-menu li ul li {
	margin: 0;
	padding: 0;
	line-height: 1.1;
}

.et-menu li ul.sub-menu li {
	display: block;
	width: 100%;
	float: none;
}

.et-menu li ul li a {
	display: block;
	width: auto;
	padding: 6px 12px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.18;
	color: #2b2b2b;
	white-space: nowrap;
	background: transparent;
}

.et-menu li ul li a:hover {
	background: rgba(0, 0, 0, 0.045);
	color: #111111;
}

/* --- Hide all menu carets / arrows (desktop + mobile) -------------------- */
.menu-item-has-children > a:after,
.et-menu .menu-item-has-children:after,
.et-menu .menu-item-has-children > a .et_mobile_menu_arrow,
.et_mobile_menu .menu-item-has-children .et_mobile_menu_arrow {
	display: none !important;
	content: none !important;
}

/* --- Mobile menu --------------------------------------------------------- */
.et_pb_menu_1_tb_header.et_pb_menu .et_mobile_menu,
.et_pb_menu_1_tb_header.et_pb_menu .et_mobile_menu ul {
	background-color: var(--white) !important;
	margin-top: 15px;
}

/* Hamburger icon colour on internal pages */
.internal-menu .et_pb_menu_2_tb_header .mobile_nav .mobile_menu_bar:before {
	color: var(--blue);
}


/* ==========================================================================
   5. TOP MARQUEE BANNER
   ========================================================================== */
.marquee {
	position: relative;
	overflow: hidden;
	padding: 10px 0;
	background: var(--marquee-bg);
	color: var(--marquee-fg);
	white-space: nowrap;
}

/* Fade the edges so text doesn't hard-clip */
.marquee::before,
.marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 48px;
	z-index: 2;
	pointer-events: none;
}

.marquee::before {
	left: 0;
	background: linear-gradient(to right, var(--marquee-bg), transparent);
}

.marquee::after {
	right: 0;
	background: linear-gradient(to left, var(--marquee-bg), transparent);
}

.marquee__track {
	display: inline-flex;
	align-items: center;
	animation: marquee-scroll var(--marquee-speed) linear infinite;
	will-change: transform;
}

.marquee:hover .marquee__track {
	animation-play-state: paused !important;
}

.marquee__group {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.marquee__item {
	display: inline-flex;
	align-items: center;
	padding: 0 2rem;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
}

a.marquee__item:hover,
a.marquee__item:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.marquee__item:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
	border-radius: 2px;
}

.marquee__item strong {
	margin-right: 0.4em;
	font-weight: 700;
	color: var(--marquee-accent);
}

.marquee__divider {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--marquee-accent);
	opacity: 0.8;
}

@keyframes marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}


/* ==========================================================================
   6. FORMS
   ========================================================================== */

/* --- Shared text fields (Gravity Forms + Contact Form 7) ----------------- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea,
.wpcf7 .wpcf7-form-control-wrap input,
.wpcf7 .wpcf7-form-control-wrap select {
	width: 100% !important;
	height: 36px !important;
	padding: 6px 12px !important;
	border: 1px solid var(--field-border) !important;
	border-radius: var(--field-radius) !important;
	background-color: var(--white) !important;
	color: var(--field-text) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	outline: none !important;
}

/* --- Gravity Forms (applies to every GF form on the site) ---------------- */
.gform_wrapper {
	margin: 0 !important;
}

/* Hide field labels and the "* indicates required fields" note */
.gform_wrapper .gfield_label,
.gform_wrapper .gform_required_legend {
	display: none !important;
}

/* Tight field layout */
.gform_wrapper .gform_fields {
	row-gap: 6px !important;
}

.gform_wrapper .gfield {
	margin: 0 0 6px 0 !important;
	padding: 0 !important;
}

.gform_wrapper .ginput_container {
	margin: 0 !important;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: var(--field-placeholder) !important;
	opacity: 1 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
}

.gform_wrapper select {
	color: var(--field-select-text) !important;
}

.gform_wrapper textarea {
	height: 70px !important;
	resize: vertical;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: var(--field-border-focus) !important;
	box-shadow: 0 0 0 1px rgba(143, 153, 168, 0.25) !important;
}

/* Submit */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	margin: 10px 0 0 0 !important;
	padding: 0 !important;
}

.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
	margin-top: 8px !important;
	padding: 12px 24px !important;
	border: none !important;
	border-radius: 9px !important;
	background-color: var(--red) !important;
	color: var(--white) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover {
	background-color: var(--red-dark) !important;
}

/* --- Contact Form 7 ------------------------------------------------------ */
.wpcf7 .wpcf7-form-control-wrap input,
.wpcf7 .wpcf7-form-control-wrap select {
	margin: 10px 0;
}

.wpcf7 .wpcf7-submit {
	padding: 7px 20px;
	border-width: 2px !important;
	border-color: var(--red);
	border-radius: var(--field-radius);
	background-color: var(--red);
	color: var(--white) !important;
	font-family: 'Kanit', Helvetica, Arial, Lucida, sans-serif !important;
	font-size: 16px;
	box-shadow: none !important;
}


/* ==========================================================================
   7. DIVI MODULES
   ========================================================================== */

/* Toggles: less space between and inside */
.et_pb_toggle {
	margin-bottom: 5px !important;
}

.et_pb_toggle_title {
	padding: 2px 0 !important;
}


/* ==========================================================================
   8. BLOG POSTS
   ========================================================================== */

/* Full-width content area on single posts */
body.post-template-default #main-content .container {
	width: 100%;
	max-width: 100%;
	padding-top: 0;
}


/* ==========================================================================
   9. PLUGINS
   ========================================================================== */

/* --- Project Map (single project page) ----------------------------------- */
#single-map-section.single-map #zigitul-map {
	border-radius: 15px !important;
	min-height: 480px;
	height: 600px;
}

#single-map-section.single-map .zigitul-container {
	height: auto;
}

/* --- Roof Gallery (home page) -------------------------------------------- */
.home-before-after-gallery .rrg-filters-foot {
	display: none;
}


/* ==========================================================================
   10. RESPONSIVE (largest to smallest)
   ========================================================================== */

/* --- 1600px and up ------------------------------------------------------- */
@media (min-width: 1600px) {
	#main-home-header .et_pb_menu_1_tb_header.et_pb_menu ul li a {
		font-size: 18px !important;
	}
}

/* --- 1400px and down ----------------------------------------------------- */
@media (max-width: 1400px) {
	#main-home-header .et_pb_column.et_pb_column_3_4.et_pb_column_2_tb_header {
		width: 80%;
		margin: 0;
		padding: 0;
	}

	#home-nav.et_pb_menu ul li a {
		font-size: 1.1vw;
	}
}

/* --- 1250px and down ----------------------------------------------------- */
@media (max-width: 1250px) {
	#main-home-header .et_pb_menu__wrap {
		justify-content: flex-start !important;
	}

	body #page-container #main-home-header .et_pb_button_0_tb_header {
		font-size: 14px;
	}

	.et_pb_menu_0_tb_header.et_pb_menu ul li a {
		letter-spacing: 0;
	}

	.et_pb_menu .et-menu > li {
		padding-left: 9px;
		padding-right: 9px;
	}

	.et_pb_social_media_follow li a.icon:before {
		width: 24px;
		height: 24px;
		line-height: 24px;
		font-size: 14px;
	}
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.marquee {
		overflow-x: auto;
	}

	.marquee__track {
		animation: none;
	}
}