/*
Theme Name:   Karla Child Theme for Divi
Theme URI:    https://brandandbuildtemplates.me/themes/karla/
Description:  Karla is a Divi child theme ideal for coaches, entrepreneurs, and online educators. Utilising a muted colour palette that’s easy to customise for your brand, Karla features three blog module presets, long form sales page, email challenge sign up, and thank you pages. There is also a slim optin form and many more module presets, making it super simple to add extra pages and style them to match in just a few clicks.
Author:       Brand & Build
Author URI:   https://brandandbuild.me
Template:     Divi
Version:      1.1
*/

/****************/
/*Global styling*/
/****************/

/*Karla Variables*/
/*Edit the values below to change the custom CSS colours sitewide*/
/*You can ignore the three error icons you see below, they are false positives and the CSS is correct*/

:root {
    --bb-karla-light: #f6f4f2;
    --bb-karla-medium: #e5e2d7;
    --bb-karla-dark: #dbded7;
}

/*Back to top*/

.et_pb_scroll_top.et-pb-icon {
    background: var(--bb-karla-dark);
    right: 10px;
    border-radius: 0;
}

/*Link underlines*/

.bb-karla-text-sans a,
.bb-karla-text-script a,
.bb-karla-post-content a,
.bb-karla-comments a:not(.et_pb_button) {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 50%,
        var(--bb-karla-dark) 50%,
        var(--bb-karla-dark) 80%,
        rgba(255, 255, 255, 0) 80%
    );
}

/*Lists*/

.bb-karla-text-sans li::marker,
.bb-karla-post-content li::marker,
.bb-karla-sidebar li::marker {
    color: var(--bb-karla-dark);
    font-weight: 700;
}

/*Global Menu*/

/* Remove padding */
.bb-karla-menu .et-menu-nav > ul ul,
.bb-karla-menu .nav li li,
.bb-karla-menu .et_mobile_menu {
    padding: 0;
}

/* Submenu width */
.bb-karla-menu .nav li ul {
    width: 200px;
}

.bb-karla-menu .nav li.et-reverse-direction-nav li ul {
    right: 200px;
    left: auto;
}

/* Submenu link width */
.bb-karla-menu .nav li li ul {
    top: 20px;
    left: 200px;
}

/* Link padding */
.bb-karla-menu .et-menu-nav > ul ul li.menu-item a,
.et-db #et-boc .bb-karla-menu.et_pb_menu .et-menu-nav > ul ul li.menu-item a {
    padding: 10px 20px;
}

/*Slim Optin*/

/* Form padding */
.bb-karla-optin-slim .et_pb_newsletter_form {
    padding-left: 10px;
}

/* Field container spacing */
.bb-karla-optin-slim .et_pb_newsletter_fields p {
    padding-bottom: 10px;
    margin-right: 10px;
}

/* Field margin */
.bb-karla-optin-slim.et_pb_newsletter .et_pb_newsletter_field,
.bb-karla-optin-slim .et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
    margin-bottom: 0;
}

/* Flex the fields */
.bb-karla-optin-slim .et_pb_newsletter_fields,
.bb-karla-optin-slim .et_pb_newsletter_fields p,
.bb-karla-optin-slim .et_pb_newsletter_button.et_pb_button {
    display: flex;
}

/* Allow field size adjustment */
.bb-karla-optin-slim .et_pb_newsletter_fields p,
.bb-karla-optin-slim .et_pb_newsletter_button.et_pb_button {
    flex: 1 1 auto;
}

/* Wrap the fields */
.bb-karla-optin-slim .et_pb_newsletter_fields {
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Align the button */
.bb-karla-optin-slim .et_pb_newsletter_button.et_pb_button {
    justify-content: center;
    align-items: center;
}

/* Field margin on mobile */
@media all and (max-width: 980px) {
    .bb-karla-optin-slim .et_pb_newsletter_fields p {
        margin-bottom: 10px;
    }
}

/*Call Out Slider*/

/* Remove dots radius */
.bb-karla-callout .et-pb-controllers a {
    border-radius: 0;
}

/* ***** */
/* Pages */
/* ***** */

/*Challenge & Thanks Pages*/

/* Flex the blurbs */
.bb-karla-left-blurb .et_pb_blurb_container {
    display: flex;
}

/* Position the title */
.bb-karla-left-blurb .et_pb_module_header {
    display: flex;
    align-items: center;
    padding-bottom: 0;
    margin-left: -40px;
    width: 100px;
}

/* Scale the image */
.bb-karla-image-fit .et_pb_image_wrap {
    height: 100%;
}

.bb-karla-image-fit img {
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
}

/*Blog layouts*/

/*Blog Grid*/

/* Set the grid sizing */
.bb-karla-blog-grid .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    grid-gap: 50px;
}

@media all and (min-width: 1200px) {
    .bb-karla-blog-grid .et_pb_ajax_pagination_container {
        grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    }
}

/* Flex the posts */
.bb-karla-blog-grid .et_pb_post {
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-bottom: 0;
    background: var(--bb-karla-light);
    box-shadow: 0px 0px 0px 10px #ffffff;
}

/* Remove image spacing */
.bb-karla-blog-grid .entry-featured-image-url {
    margin: -20px -20px 20px -20px;
}

/* Make pagination fullwidth */
.bb-karla-blog-grid .et_pb_ajax_pagination_container div {
    grid-column: 1 / -1;
}

/*Blog Inline*/

/* Set inline layout */
@media all and (min-width: 768px) {
    /* Post min height */
    .bb-karla-blog-inline .et_pb_post {
        min-height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Size the image */
    .bb-karla-blog-inline .entry-featured-image-url {
        width: 40%;
        position: absolute;
        margin-bottom: 0;
        height: 100%;
    }
    .bb-karla-blog-inline .entry-featured-image-url img {
        -o-object-fit: cover;
        object-fit: cover;
        height: 100%;
    }
    /* Position the content */
    .bb-karla-blog-inline .entry-title,
    .bb-karla-blog-inline .post-meta,
    .bb-karla-blog-inline .post-content {
        margin-left: calc(40% + 50px);
    }
}

/*Single Posts*/

/* First letter dropcap */
.bb-karla-post-content > p:first-of-type::first-letter {
    font: 100 4.1rem/2.1rem 'Quentin', Helvetica, Arial, Lucida, sans-serif;
    text-transform: uppercase;
    padding: 0 0.32rem 0 0;
    margin: -0.8rem 0.37rem 0 0.37rem;
    float: left;
}

/*Sidebar*/

/* Widget list padding */
.bb-karla-sidebar ul {
    padding: 0 0 0 1em !important;
}

/* Widget list style */
.bb-karla-sidebar ul li {
    list-style-type: square !important;
    margin-bottom: 0.3em;
}

/*Comments*/

/* Make fields fullwidth */
.bb-karla-comments #commentform input {
    width: 100%;
}

.bb-karla-comments #commentform input#wp-comment-cookies-consent {
    width: auto;
}


@font-face {
  font-family: 'Quentinfont';
  src: url('fonts/Quentin.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}



.bb-karla-text-script h1, 
.bb-karla-text-script h2,
.bb-karla-text-script h3,
.bb-karla-text-script h4,
.et_pb_testimonial_0.et_pb_testimonial .et_pb_testimonial_author, .et_pb_testimonial_1.et_pb_testimonial .et_pb_testimonial_author, .et_pb_testimonial_2.et_pb_testimonial .et_pb_testimonial_author, .et_pb_testimonial_3.et_pb_testimonial .et_pb_testimonial_author, .et_pb_testimonial_4.et_pb_testimonial .et_pb_testimonial_author, .et_pb_testimonial_5.et_pb_testimonial .et_pb_testimonial_author,
.et_pb_blurb_container h3.et_pb_module_header span,
.et_pb_blurb_container h2.et_pb_module_header span,
.et_pb_text_3:before {
  font-family: 'Quentinfont', sans-serif!important;
}