/*
Theme Name:   Karla Child Theme for Divi
Theme URI:    https://brandandbuildtemplates.me/themes/karla/
Description:  A Child Theme for Divi
Author:       Brand & Build
Author URI:   https://brandandbuild.me
Template:     Divi
Version:      1.0
*/

/****************/
/*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: #c6a9a9;
    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-medium) 50%,
        var(--bb-karla-medium) 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*/


/*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;
}