/*   
    Theme Name:        Elementor Hello Theme Child
    Theme URI:         https://alivetothrive.focusonthefamily.com
    Description:       Alive to Thrive "LMS" child theme
    Author:            Focus on the Family
    Author URI:        https://focusonthefamily.com
    Template:          hello-elementor
    Version:           1.0.0
    Text Domain:       hello-elementor-child
*/

/*-----------------------------------
    SET SOME DEFAULTS FOR ELEMENTOR  
------------------------------------*/

body, html {
  -webkit-font-smoothing: subpixel-antialiased; /* Improve font clarity */
  margin: 0;
  padding: 0;
  font-size: 18px;
}
    /* Tablet */
    @media screen and (max-width: 1025px) {
        body, html  {
            font-size: 18px;
        }
    }
    /* Mobile */
    @media screen and (max-width: 768px) {
        body, html  {
            font-size: 17px;
        }
    }

/* Clear out link text-decoration states. We want more granular control over this. */
a,
a:hover,
a:focus {
    text-decoration: none;
}



/*-----------------------------------
    SPACING
 ------------------------------------*/

/* The following spacing styles give Elementor sections some default breathing room across device sizes. It is possible to half or zero out the top and bottom padding by using the p-half or p-zero class for the section class inside of the Elementor editor. It is possible to override these settings within Elementor by changing the padding in their editor as normal.
*/

/* Set the default padding for a section widget */
.elementor-section {
    padding: 75px 50px;
}

@media screen and (max-width: 1025px) {
    .elementor-section {
        padding: 50px 50px;
    }
}

@media screen and (max-width: 768px) {
    .elementor-section {
        padding: 50px 7%;
    }
}


/* Half padding options */
.elementor-section.p-half {
    padding-top: 30px;
    padding-bottom: 30px;
}
.elementor-section.p-half-bottom {
        padding-bottom: 30px;
}
.elementor-section.p-half-top {
        padding-top: 30px;
}
    /* Half on Tablets */
    @media only screen and (max-width: 1023px) and (min-width: 650px) {
        .elementor-section.p-half {
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .elementor-section.p-half-bottom {
            padding-bottom: 20px;
        }
        .elementor-section.p-half-top {
            padding-top: 20px;
        }
    }
    /* Half on Mobile */
    @media only screen and (max-width: 649px) {
        .elementor-section.p-half {
            padding-top: 15px;
            padding-bottom: 15px;
        }
        .elementor-section.p-half-bottom {
            padding-bottom: 15px;
        }
        .elementor-section.p-half-top {
            padding-top: 15px;
        }
    }

/* Zero padding options */
.elementor-section.p-zero {
    padding-top: 0px;
    padding-bottom: 0px;
}
.elementor-section.p-zero-bottom {
        padding-bottom: 0px;
}
.elementor-section.p-zero-top {
        padding-top: 0px;
}





/*-----------------------------------
    Lesson
 ------------------------------------*/

/* Setting some typography defaults. These can be overruled in Elementor. */
 
.content h3, 
.content h4, 
.content h5, 
.content h6 {
    color: #686868;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 1.75rem;
}

.content h2,
h2#accordion-title {
    color: #1B4663;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Don't need the top margin for this lesson questions heading */
h2#accordion-title {
    margin-top: 0;
}

.content h1 { font-size: 1.9rem; }
    /* Tablet */
    @media only screen and (max-width: 1023px) and (min-width: 650px) {
        .content h1 { font-size: 1.7rem; }
    }
    /* Mobile */
     @media only screen and (max-width: 649px) {
         .content h1 { font-size: 1.5rem; }
    }

.content h2, h2#accordion-title { font-size: 1.6rem; }
    /* Tablet */
    @media only screen and (max-width: 1023px) and (min-width: 650px) {
        .content h2, h2#accordion-title { font-size: 1.5rem; }
    }
    /* Mobile */
     @media only screen and (max-width: 649px) {
         .content h2, h2#accordion-title { font-size: 1.3rem; }
    }

.content h3 { font-size: 1.35rem; }
    /* Tablet */
    @media only screen and (max-width: 1023px) and (min-width: 650px) {
        .content h3 {  }
    }
    /* Mobile */
     @media only screen and (max-width: 649px) {
         .content h3 {  }
    }


.content p,
.content ul li,
.content ol li {
    line-height: 1.65rem;
}
    /* Tablet */
    @media screen and (max-width: 1025px) {
        .content p,
        .content ul li,
        .content ol li {
            line-height: 1.6rem;
        }
    }
    /* Mobile */
    @media screen and (max-width: 768px) {
        .content p,
        .content ul li,
        .content ol li {
            font-size: .95rem;
            line-height: 1.5rem;
        }
    }

.content ul,
.content ol {
    margin-bottom: 1rem;
}

.content li {
    margin-bottom: .5rem;
}

.content p a,
.content li a,
.content h2 a,
.content h3 a,
.content h4 a,
.content h5 a,
.content h6 a {
    color: #cc7038;
    text-decoration: underline !important;
    transition: 0.3s;
}
.content p a:hover,
.content li a:hover,
.content h2 a:hover,
.content h3 a:hover,
.content h4 a:hover,
.content h5 a:hover,
.content h6 a:hover {
    color: #377baa;
}

/* No margin above first element inside a lesson. This zeroes out top margin spacing on elements like H tags so we don't end up with a lot of extra space at the beginning of a lesson. */
.content .elementor-widget-container :first-child {
    margin-top: 0 !important;
}

.content hr.wp-block-separator {
    margin: 0;
    background-color: transparent;
    margin-bottom: 2rem;
    margin-top: 2rem;
    border-style: dotted;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-style: dotted;
    border-width: 0 0 2px 0;
    border-color: #cd9352;
}

/* Style Elementor Gutenberg embeds */
.content .elementor-location-single {
    margin-top: 1.75rem;
    margin-bottom: 1.5rem;
}

.content .lesson-footnotes {
	font-size: .8rem;
}