/*======================================
Theme Name: Divi Child
Theme URI: https://loudcanvas.com
Description: A Child theme of Divi with some basic stylings for our favorite plugins and a shortcode for the year attached.
Version: 1.3.1
Author: Samuel Wood - Loud Canvas Media
Author URI: https://loudcanvas.com
Template: Divi
======================================*/

/*This stylesheet is required by Wordpress to function with the Parent Divi theme.
 * You can alter anything below here. Ready made mobile queries and a table of contents has been
 * created for you. Including basic Gravity Forms styling, :selection styling, and some helper classes.
 * 
 * Happy Coding! 
 * -Samuel Wood
*/

/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */

/*
 * Table of Contents
 * a. Helper Classes
 * 1. Typography
 * 2. Global Elements
 * 3. Modules
 * 4. Page Specific CSS
 * 5. Mobile
 * 
*/

/* Enable Smooth Scrolling */
html, body {
  scroll-behavior: smooth;
  scroll-padding-top: calc(3rem + var(--wp-admin--admin-bar--height));
}

/* 
********
a. Helper Classes
********
*/


.text-right {
    text-align: right;
}

.d-inline {
    display: inline-block;
}

.column-50-sm {
    width: 50%;
    float: left;
    font-size: 16px;
}

@media only screen and (max-width : 450px) {
    .column-50-sm {
        width: 100%;
        float: none;
    }
}

@media only screen and (max-width: 980px) {

    /*Add the mflip class to the custom css of a row to reverse order of elements on mobile*/
    .mflip {
        display: -webkit-flex;
        -webkit-flex-direction: column-reverse;
        display: flex;
        flex-direction: column-reverse !important;
    }

    /*Add the two-columns class on row css to keep modules in two columns on mobile*/
    .two-columns .et_pb_column {
        width: 50% !important;
    }
    
    /*show desktop menu on phone*/
    footer .et_pb_menu__menu {
      display: flex !important;
    }
    footer .et_mobile_nav_menu {
      display: none !important;
    }
}




/* 
********
1. Typography
********
*/

/** Heading Levels 
 * (use classes to style headings w/o breaking proper semantic heading structure) 
 */
 h1,  h2,  h3,  h4,  h5,  h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   font-weight: bold;
   padding-bottom: 0.5em;
   line-height: 1.3em;
   overflow-wrap: normal; /* prevents single words breaking onto multiple lines */
 }
 @media screen and (max-width: 768px) { 
   h1,  h2,  h3,  h4,  h5,  h6,
   .h1, .h2, .h3, .h4, .h5, .h6 {
     text-align: center;
   }
 }
 
 /** Responsive Font Size 
  * (check out this fun tool --> https://chrisburnell.com/clamp-calculator)
  *
  * font-size: clamp( MIN, (SUGGESTED), MAX )
  */
 :is(h1, .h1) {
   font-size: clamp(38px, (5vw + 1rem), 58px);
   text-transform: uppercase;
 }
 :is(h2, .h2) {
   font-size: clamp(26px, (3vw + 1rem), 42px);
 }
 :is(h3, .h3) {
   font-size: clamp(20px, (2vw + 1rem), 26px);
 }
 :is(h4, .h4) {
   font-size: clamp(18px, (1.25vw + 1rem), 20px);
 }
 :is(h5, .h5) {
   font-size: clamp(18px, (1vw + 1rem), 20px);
 }
 :is(h6, .h6) {
   font-size: 18px;
 }
 
 /* Prevent rampant textarea resizing */
 textarea {
   resize: vertical;
 }
 
 /* List Items */
 li::marker {
   color: #2c3e50;
 }
 
 /* Text/Link Selection */
 :is(::selection, ::-moz-selection) {
   background-color: #2c3e50;
   color: #f9f9f9;
 }
 
 a:is(::selection, ::-moz-selection) {
   color: hsl(140, 75%, 75%);
 }
 
 /* Focus States */
 :is(a, button, input, textarea, select, option, datalist):focus-visible {
   outline-color: #2c3e50;
   outline-offset: 0.5rem;
 }
 
 /* Placeholder Text */
 :is(::placeholder, ::-moz-placeholder, ::-webkit-input-placeholder) {
   color: #7d7d7d;
 }
 
 /* Prevent phone numbers & email addresses from wrapping onto multiple lines */
 a[href*="tel:"],
 a[href*="mailto:"] {
   white-space: nowrap;
 }
 
 /* Mega Menu/Divi fix */
 p:empty {
   display: none;
 }
 

/* 
********
2. Global Elements 
********
*/

    /*Header*/
    /*Add CSS for collapsible menu items for header
        To use add .first-level to parent menu item
        Add .second-level to child menu item
    
*/
	.et_mobile_menu .first-level > a {
		background-color: transparent;
		position: relative;
	}
	.et_mobile_menu .first-level > a:after {
		font-family: 'ETmodules';
		content: '\4c';
		font-weight: normal;
		position: absolute;
		font-size: 16px;
		top: 13px;
		right: 10px;
	}
	.et_mobile_menu .first-level > .icon-switch:after{
		content: '\4d';
	}
	.second-level {
		display: none;
	}
	.reveal-items {
		display: block;
	}


    /* Mobile Menu - Prevent Overflow / Scroll Lock */
    .et_pb_menu .et_mobile_menu {
        padding: 0;
        /* Full viewport height, minus the height of the menu bar (and wp-admin bar if present) */
        max-height: calc( 100vh - 100px - var(--wp-admin--admin-bar--height, 0px) );
        overflow-y: auto;
    }
    

     /*Yoast SEO Breadcrumb*/

    .yoast_breadcrumb {
        font-size : 14px;
    }

    .yoast_breadcrumb a {
        color: rgba(31,31,31,.4) !important;
        transition : .4s ease all;
    }

    .yoast_breadcrumb a:hover {
        color : #731B36 !important;
    }

    /* Gravity Forms */
    /* Basic styling for the gravity forms plugin */

    /*Hide labels (good for use with placeholders) */
    /*
    .gform_wrapper .top_label .gfield_label,
    .gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
        display: none;
    }
    */


    /*** FIELD STYLING ***/
    .gform_wrapper input[type=text],
    textarea {
        font-size: 18px;
        background: #fff;
        border: none;
        color: #333;
        padding: 10px;
        border-bottom: 3px solid #2c3e50;;
    }

    .gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container input[type=text],
    .gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container select {
        margin: 0px !important;
    }

    .gfield .ginput_container.ginput_recaptcha {
        float: left;
    }

    #gform_wrapper_1 .gform_footer {
        padding: 50px 0 10px 0;
        margin: 16px 0 0 0;
        clear: none !important;
        width: 100%;
    }

    .gform_wrapper.gf_browser_chrome ul.gform_fields li.gfield select {
        border: 0px;
        padding: 5px 0px;
        margin-top: 10px;
        border-bottom: 3px solid #2c3e50;;
    }

    /*** BUTTON STYLING ***/
    .gform_wrapper .gform_footer input.button {
        float: right;
        font-weight: bold;
        background: #fff;
        border: 2px solid #333;
        font-size: 18px;
        color: #333;
        padding: 5px 30px;
        border-radius: 3px;
        cursor: pointer;
        transition: .4s ease all;
    }

    /*** BUTTON HOVER STYLING ***/
    .gform_wrapper .gform_footer input.button:hover {
        background: #731B36;
        color: #fff;
        border: 2px solid transparent;
    }


    /*Footer*/





/* 
********
3. Modules 
********
*/







/* 
********
4. Page Specific CSS 
********
*/




/* 
********
5. Mobile Queries
********
*/


    /*** Responsive Styles Large Desktop And Above ***/
    @media all and (min-width: 1405px) {
        
    }

    /*** Responsive Styles Standard Desktop Only ***/
    @media all and (min-width: 980px) and (max-width: 1405px) {
        
    }

    /*** Responsive Styles Standard Desktop and Up***/
    @media all and (min-width: 980px) {
        
    }

    /*** Responsive Styles Tablet And Below ***/
    @media all and (max-width: 980px) {
        
    }

    /*** Responsive Styles Tablet Only ***/
    @media all and (min-width: 768px) and (max-width: 980px) {
        
    }

    /*** Responsive Styles Smartphone Only ***/
    @media all and (max-width: 767px) {
        
    }

    /*** Responsive Styles Smartphone Portrait ***/
    @media all and (max-width: 479px) {
        
    }