/*======================================
Theme Name: Lead Yourself Youth Child Theme by Rob Hurwich
Theme URI: https://www.hscooperative.com/
Description: Divi Child Theme
Author: Rob Hurwich
Author URI: https://www.hscooperative.com/
Author Email: rob@hscooperative.com
Template: Divi
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

 /* ===== NOTES ==================================================================
 * 
 * NOTE - the CSS that allows for the different color logo on scroll-down top nav menu is in the Divi theme options > custom CSS area.  I added it to the theme file here and it stopped working, and when I added it back there it started working.  so there it is.  
 * 
 * =============================================================================== */

/*add your custom CSS below this line*/


/* for testimonial modules, to have circle image on right of text */
.image-on-right .et_pb_blurb_content {
  position: relative;
  padding-right: 75px; /* Adjust as needed based on the image size */
}

.image-on-right .et_pb_main_blurb_image {
  position: absolute;
  right: 30px;
  top: -15px;
}
/* END, for testimonial modules, to have circle image on right of text */


/* CSS for WPForms Contact Form */
/* 1 & 2 & 3: Style the Submit Button */
#wpforms-submit-455 {
    background-color: #ee4e14; /* Set button background color */
    color: #ffffff; /* Set button text color */
    font-family: 'Codec Pro Bold', sans-serif; /* Set the font. Replace 'sans-serif' with the fallback font you'd like. */
    font-size: 16px; /* Set font size */
	padding: 15px; /* Add padding */
    letter-spacing: 1.5px; /* Add letter spacing */
}

/* 4: Style the Input Placeholders */
.wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
    color: #005c96 !important;
}
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #005c96 !important;
    opacity: 1 !important;
}
.wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #005c96 !important;
    opacity: 1 !important;
}
.wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #005c96 !important;
}
.wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
    color: #005c96 !important;
}
.wpforms-container ::placeholder {
    color: #005c96 !important;
}

/* 5 & 6: Style the Fields */
#wpforms-455-field_1,
#wpforms-455-field_2,
#wpforms-455-field_3 {
    border-radius: 36px; /* Round corners */
    border: 1px solid #ee4e14; /* Set border style */
}

@media screen and (max-width: 600px) {
    .wpforms-one-half {
        width: 100% !important;
        float: none !important;
    }
    .wpforms-one-half:not(.wpforms-first) {
        margin-left: 0 !important;
    }
}

#wpforms-455-field_1:focus,
#wpforms-455-field_2:focus,
#wpforms-455-field_3:focus {
    outline: none !important;
    border: 1px solid #4281bf !important;
}
/* END CSS for WPForms Contact Form */


/* To make the background color of mobile dropdown menu white */
@media (max-width: 980px) {
    .et_mobile_menu {
        background-color: white !important; /* replace '#yourColor' with your desired color */
    }
}
/* END make the background color of mobile dropdown menu white */


/* To make toggle text fade out effect on 'team bios' (along with the JS snippet in code module on each page that it's on*/

/*collpse and set the height of the toggle text*/
.pa-toggle-text .et_pb_text_inner {
	max-height: 250px;
	transition: max-height 0.3s ease-out;
	overflow: hidden;
}

/* Additional CSS for mobile view to have a different max height of text*/
@media only screen and (max-width: 600px) { /* This targets devices with widths up to 768px (typical breakpoint for tablets and mobile phones) */
	.pa-toggle-text .et_pb_text_inner {
		max-height: 300px; /* Adjust this value as needed */
	}
}
/*add gradient to the collapsed text*/

.pa-toggle-text .et_pb_text_inner:after {
	content: "";
	display: inline-block;
	position: absolute;
	pointer-events: none;
	height: 100px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(0deg, #fff 10%, transparent);
}

/*style the expand text link*/
.pa-toggle-text .pa-text-expand-button {
	padding: 0.5em;
	text-align: left;
	color: #4281bf!important;
}

/*change the curor to a pointed when hovering over the expand text link*/
.pa-toggle-text .pa-text-expand-button span {
	cursor: pointer;
}

/*define the font family for the toggle icon*/
.pa-toggle-text .pa-text-expand-button .pa-text-toggle-icon {
	font-family: ETMODULES, "sans-serif";
}

/*set the max height and transition of the expanded toggle*/
.pa-toggle-text .pa-text-toggle-expanded {
	max-height: 3000px;
	transition: max-height 0.3s ease-in;
}

/*hide the gradient when the toggle is expanded*/
.pa-toggle-text .pa-text-toggle-expanded.et_pb_text_inner:after {
	background: none;
}
/* END To make toggle text fade out effect in "team bios' (along with the JS snippet in code module on each page that it's on*/


/* To make the scrolling side menu on Resources page have stacked vertical menu items */
.custom-vertical-menu li {
    display: block !important;
    width: 100% !important;
}

.custom-vertical-menu a {
    display: block !important;
}
/* END To make the scrolling side menu on Resources page have stacked vertical menu items */


/* to style the download button on the audio module.  from here: https://www.peeayecreative.com/how-to-add-a-download-button-icon-to-the-divi-audio-module/ */

.pa-audio-download .et_audio_container {
	position: relative;
}

.pa-audio-download-button {
	position: absolute;
	right: 15px;
	bottom: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pa-audio-download-button:before {
	content: "\e092";
	font-family: ETMODULES;
	color: #fff;
	font-size: 18px;
	position: relative;
	left: -10px;
	font-weight: bold;
}

@media only screen and (max-width: 767px) {
    .pa-audio-download-button {
        bottom: 65px; /* or adjust as needed */
    }
}
/* END to style the download button on the audio module. */  

/* To hide the footer on the contact page */
.page-id-1253 .et-l.et-l--footer {
    display: none;
}
/* END To hide the footer on the contact page */