/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 

/* =Theme customization starts here
------------------------------------------------------- */

/* header content */
.items-in-a-row {
	margin-top: 50px;
	display: flex;
	justify-content: flex-end;
	align-items: center; 
	flex-wrap: wrap;
}
.items-in-a-row .et_pb_module {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center; 
	margin: 0 10px;
}
@media all and (max-width: 980px) {
	.items-in-a-row {
		margin-top: 0;
		justify-content: center;
	}
}

/* main nav highlight current item */
#menu-main-top .current_page_item > a,
#mobile_menu1 .current_page_item > a {
	color: #F97316 !important;
}
#menu-main-top .current_page_item a:after {
	color: black;
}
.current_page_ancestor a:after {
	color: #F97316;
}

/* main nav sub items */
#menu-main-top .sub-menu .current_page_item a,
#mobile_menu1 .sub-menu .current_page_item a {
	color: #F97316 !important;
	font-weight: bold;
}


/* Flex columns (e.g. align buttons to bottom of column) */
@media all and (min-width: 981px) {
	.row-with-flex-columns .et_pb_column  {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		min-height: 560px; /* Adjust as needed */
	}
}


.preferred-hardware .et_pb_main_blurb_image {
	height: 30px;
}

.sticky-blog-post-column {
	/* See 2nd Column Module > Advanced > Scroll Effects in Theme Builder. */
}

/* Center the LHS code on mobile. */
.review-photo-circles .et_pb_code_0 {
	margin: auto !important;
}

.contact-page-map .et_pb_code_inner {
	height: 600px;
}


.benefits-columns img {
	width: 50px !important;
}

.person-row-target p {
	margin-top: 1em;
}

/* buttons appear in a row instead of column */
.buttons-in-row .et_pb_button_module_wrapper {
	display: inline-block;
	margin-right: 20px;
}


/* better layout for small images in rows */
.image-flex-layout {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end; /* Align each row's content to the right */
	gap: 30px;
	padding: 10px;
}

.image-flex-layout img {
	height: 50px;
	object-fit: auto;
	display: inline-block;
}
@media (max-width: 980px) {
	.image-flex-layout {
		justify-content: center;
	}
}




/* Gravity Forms stuff */

/* Contact Form */
#gform_wrapper_1 .gform_submission_error {
	letter-spacing: 1px
}
#gform_wrapper_1 input,
#gform_wrapper_1 textarea {
	border-radius: 5px;
}

/* Commercial and Residential Quote Form */
#gform_wrapper_2 .gform_submission_error,
#gform_wrapper_3 .gform_submission_error {
	color: black;
	letter-spacing: 1px
}
#gform_wrapper_2 h2,
#gform_wrapper_3 h2,
#gform_wrapper_2,
#gform_wrapper_3 {
	color: white;
}
#gform_submit_button_2,
#gform_submit_button_3 {
	background-color: #ffe300;
	color: black;
}
#gform_submit_button_2:hover,
#gform_submit_button_3:hover {
	color: black !important;
}

#gform_wrapper_2 .gfield_label,
#gform_wrapper_3 .gfield_label {
	color: white;
}
#gform_wrapper_2 .gfield_required,
#gform_wrapper_3 .gfield_required {
	color: black;
}
#gform_wrapper_2 input,
#gform_wrapper_3 input,
#gform_wrapper_2 textarea,
#gform_wrapper_3 textarea {
	border-radius: 5px;
	border: none;
}
#gform_wrapper_2 .validation_message,
#gform_wrapper_3 .validation_message {
	color: white;
	font-weight: bold;
	background-color: orange;
}
#gform_wrapper_2 a,
#gform_wrapper_3 a {
	color: gold;
}






/* Make blog Grid view use same height row content (see custom-scripts.js). Seems to work better that CSS Grid. */
.pa-blog-equal-height .pa-auto-height {
    height: auto !important;
}
.pa-blog-equal-height .pa-auto-margin {
    margin-top: 20px !important;
}



/* Reviews Custom Post Type */
.DFG-reviews .entry-title {
	margin-top: 15px;
}
/* Use five stars on all */
.DFG-reviews .entry-title::after {
    content: '\2605 \2605 \2605 \2605 \2605'; 
    display: block;
    font-size: 26px;
    color: orange;
    margin-top: 15px;
    letter-spacing: 2px;

}
.DFG-reviews .et_pb_button {
	background-color: grey !important;
	border: none !important;
}



/* Show play triangle icon on blog grid thumbnails for 'Video' category */
/* Triangle play icon */
.category-video .et_pb_image_container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
   	border-left: 40px solid white;          /* Width of triangle */
    border-top: 25px solid transparent;     /* Height above the point */
    border-bottom: 25px solid transparent;  /* Height below the point */
    transform: translate(-50%, -50%);
    opacity: 0.9;
    z-index: 10;
    pointer-events: none;
}

/* Ensure positioning context */
.category-video .et_pb_image_container {
    position: relative;
}
/* Label: 'Watch Video' shown on hover */
.category-video .et_pb_image_container::before {
    content: 'Watch Video';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 9;
    pointer-events: none;
}

/* Show label when hovering over triangle or image container */
.category-video .et_pb_image_container:hover::before {
    opacity: 1;
}




/* Show play triangle icon on Image Module with "video-thumbnail" class (not the blog thumbnails above). */
.video-thumbnail::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 40px solid white;          /* Width of triangle */
    border-top: 25px solid transparent;     /* Height above the point */
    border-bottom: 25px solid transparent;  /* Height below the point */
    transform: translate(-50%, -50%);
    opacity: 0.9;
    z-index: 10;
    pointer-events: none;
}
/* Ensure positioning context */
.video-thumbnail {
    position: relative;
}
/* Label: 'Watch Video' shown on hover */
.video-thumbnail::before {
    content: 'Watch Video';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.9rem;
    padding: 16px 12px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 9;
    pointer-events: none;
}
/* Show label when hovering */
.video-thumbnail:hover::before {
    opacity: 1;
}




/* Quote iframe Code Module resisizing */
/*
.quote-iframe-code * {
	height: 1900px
}
@media all and (max-width: 1192px) {
	.quote-iframe-code * {
		height: 2800px
	}
}
@media all and (max-width: 787px) {
	.quote-iframe-code * {
		height: 5500px
	}
}
*/

/* display company logos better on main Packages page */
.responsive-image-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 680px) {
	.responsive-image-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 300px) {
	.responsive-image-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}
.responsive-image-grid a {
	border: solid silver 1px;
	border-radius: 10px;
	padding: 10px 20px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.responsive-image-grid img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	display: block;
	transition: opacity 0.3s ease;
}
.responsive-image-grid img:hover {
	opacity: 0.7;
	cursor: pointer;
}


/* blog read more buttons */
.more-link.et_pb_button {
	margin-top: 20px;
	display: inline-block;
	text-transform: capitalize;
}

/* make the footer menu appear as a column */
.et_pb_menu.wpmad-footer-menu .et_pb_menu__menu nav ul {
  flex-direction: column;
  row-gap: 0px;
  margin: 0 !important;
}
.et_pb_menu.wpmad-footer-menu .et_pb_menu__menu ul li {
  display: block!important;
  margin: 0 !important;
  padding: 0 !important;
}
.et_pb_menu.wpmad-footer-menu .et_pb_menu__menu ul li a {
  display: block;
  padding: 10px 0 !important;
}
@media (max-width: 980px) {
  .et_pb_menu.wpmad-footer-menu .et_pb_menu__wrap {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .et_pb_menu.wpmad-footer-menu .et_pb_menu__menu {
    display: flex !important;
  }
  .et_pb_menu.wpmad-footer-menu .et_mobile_nav_menu {
    display: none !important;
  }
}


/* Woocommerce */
.header-cart-contents {
	font-weight: bold;
}
.header-cart-contents:before {
    font-family: 'ETmodules';
    content: '\e07a';
    margin-right: 8px;
    font-size: 16px;
}


/* woocommerce product */
.single-product .product_title {
	font-weight: bold;
	font-size: 40px;
}
.single-product #main-content .woocommerce-Price-amount {
	color: #f97316;
	font-weight: bold;
	margin-bottom: 20px !important;
	display: inline-block;
}
.single-product .product_meta a {
	color: #f97316;
}

/* woocommerce products loop */
.products .woocommerce-loop-product__title {
	font-weight: bold;
	font-size: 24px !important;
}
.products .woocommerce-Price-amount  {
	font-weight: bold !important;
	color: #f97316 !important;
	font-size: 20px;
}
.woocommerce-product-short-description {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}
.woocommerce-product-short-description img {
	width: 80px !important;
	display: inline-block !important;
}
.add_to_cart_button,
.read-more-button {
	color: white !important;
	font-size: 14px !important;
	margin-right: 10px !important;
}
@media (max-width: 500px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		display: flex;
		flex-direction: column;
	}
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		width: 100% !important;
		margin: 0 0 30px;
	}
}
.woocommerce ul.products li.product:hover .et_overlay:before {
	color: orange !important; 
}
.add_to_cart_button:after,
.read-more-button:after{
	font-size: 22px !important;
}
.add_to_cart_button.added:after,
.add_to_cart_button.loading:after {
	font-size: 13px !important;
	right: 10px;
	bottom: 10px;
}
.et_overlay {
	display: none;
}

/* Woocommerce Description & Additional Info when stacked. */
/*
.product-data-stacked {
	margin-top: 2em;
	border: solid 1px #eee;
	padding: 20px;
	margin-bottom: 50px;
	border-radius: 10px;
}
.product-data-stacked .product-section {
    margin-bottom: 2.5em;
}
.product-data-stacked .product-section h2 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}
*/


/* Woocommerce single Product Description when stacked under the main Summary. */
.product-info-inline {
    margin-top: 2rem;
}
.product-info-inline .product-section {
    margin-bottom: 1.5rem;
}
.product-info-inline .product-section h2 {
    font-size: 30px;
    margin-bottom: 0.5rem;
}



/* Woocommerce products single column view on phone. */
@media all and (max-width: 500px) {
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li.product, .et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li.product, .et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li.product, .et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li.product, .et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li.product, .et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li.product {
		width: 100% !important;
		margin-right: 0 !important;
	}
}


/* Target WooCommerce zoom icon overlay and make it appear the top nav dropdown z-index. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  z-index: 1 !important; /* Lower than your nav menu */
}


/* Put a border around the thumbnail images on product archive pages. */
.post-type-archive-product .attachment-woocommerce_thumbnail {
	border: solid 1px silver !important;
}


/* Woocommerce message colour (default is blue background with white text). */
.woocommerce-notices-wrapper .woocommerce-message {
	background: none !important;
	border: solid 2px orange !important;
	color: #ff7109 !important;
}