/*
Theme Name: Kadence Child
Theme URI: https://www.mobileframe.com
Description: Kadence Child Theme for MobileFrame Blog
Author: MobileFrame
Author URI: https://www.mobileframe.com
Template: kadence
Version: 1.0.0
*/

@import url("../kadence/style.css");

body, html {font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;}

/* body.home .entry-hero-container-inner,
body.blog .entry-hero-container-inner {
    background-image: url('https://blogbackend.mobileframe.com/wp-content/themes/kadence-child/images/developer6b.avif') !important;
} */
body.home .entry-hero-container-inner,
body.blog .entry-hero-container-inner {
    background-image: var(--hero-bg-image, url('https://blogbackend.mobileframe.com/wp-content/themes/kadence-child/images/developer6b.avif')) !important;
}

body.single-post.no-featured-image .entry-hero-container-inner {
    background-image: var(--hero-bg-image, url('https://blogbackend.mobileframe.com/wp-content/themes/kadence-child/images/ready-to-run.avif')) !important;
}

body.category-news .entry-hero-container-inner {
    background-image: url('https://blogbackend.mobileframe.com/wp-content/themes/kadence-child/images/mobileframe-news2.avif') !important;
}

/* @ example of using a tag-based class and CSS varible to set hero image */
/* body.tag-customer-wins {
    --hero-bg-image: url('https://blogbackend.mobileframe.com/wp-content/themes/kadence-child/images/developer6b.avif');
} */

/* body.single-post.no-featured-image .entry-hero-container-inner {
    background-image: url('https://blogbackend.mobileframe.com/wp-content/themes/kadence-child/images/ready-to-run.avif') !important;
} */

.content-area {margin-bottom: 0 !important; margin-top: 3rem !important;}

/* @ Fluid heading sizes to match main site's responsive scaling approach (inside posts) */
h1, .h1 { font-size: clamp(1.75rem, 1.525rem + 3.3vw, 4rem)!important;}
h2, .h2 { font-size: clamp(1.425rem, 1.2rem + 2.1vw, 2.75rem)!important; }
h3, .h3 { font-size: clamp(1.275rem, 1.15rem + 1.5vw, 2.25rem)!important; }
h4, .h4 { font-size: clamp(1.1rem, 1rem + 0.9vw, 1.5rem)!important; }
h5, .h5 { font-size: clamp(1rem, 0.95rem + 0.5vw, 1.25rem)!important; }
h6, .h6 { font-size: 1rem !important; }

/* @ Adjust header font-size for article listings, similar posts, share button, etc. */
#archive-container > li > article > div > header > h2 {font-size: 32px !important;}
div.sharedaddy h3.sd-title {font-size: 9pt !important}
h2#related-posts-title {font-size: 32px !important}
h3.entry-title {font-size: 28px !important}
body.home .hero-container.site-container h1, body.category-news .hero-container.site-container h1 {font-size: clamp(2.5rem, 1.75rem + 3.3vw, 5rem)!important;}

/* Adjust tagline font size */
.archive-description p {
    font-size: 140%;
    max-width: 550px;
    margin: auto;
}

/* @ Set max-width & apply text shadow for heading in the hero */
.content-width-narrow .content-container.site-container, .content-width-narrow .hero-container.site-container {
    max-width: 1000px !important;}
#inner-wrap > section > div > div.hero-container.site-container > header > h1 {
    text-shadow: 1px 1px 2px rgba(0,0,0,.7);
}

/* @ Give cards for listing articles a border-radius */
.kadence-posts-list .entry-list-item {border-radius: 10px; border: 1px solid rgba(0,0,0,0.1);}
.kadence-posts-list .entry-list-item article.entry {border-radius: 10px;}
.wp-site-blocks .post-thumbnail .post-thumbnail-inner {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

/* @ Fix the similar posts cards and carousel width */
.splide__slide > article > a {padding-bottom: 40% !important;} /* reduce size of image thumbnail */
.splide__slide > article > a > div > img {height: 150px !important;} /* reduce size of image thumbnail */
div.entry-related-inner.content-container.site-container {max-width: 60vw !important;} /* keep similar posts section from going off page */

/* @ Center the pagination navigation */
nav.navigation.pagination {text-align: center;}

/* @ Fix pullquote quotation */
.wp-block-pullquote blockquote {padding: 2em 3m !important;}
.wp-block-pullquote blockquote::before {color: rgba(128, 128, 128, 0.4) !important; left: -30px !important;} /* fix open-quote color to work on any bg */
.wp-block-pullquote blockquote::after {font-size: 200px; line-height: 40px; font-family: sans-serif; color: rgba(128, 128, 128, 0.4); z-index: 0; position: absolute; right: -30px; content: close-quote; bottom: 0px; }

/* @ Footer styles */
footer {-webkit-font-smoothing: auto !important; color: #a9abac !important; padding-top: 1rem;}
.site-middle-footer-inner-wrap {padding-top: 0px !important; }
.site-top-footer-inner-wrap {padding-bottom: 10px !important; }
footer h4 {color:#a9abac !important; text-align: left; margin-bottom: 0.5rem}
footer ul {font-weight: 500 !important}
footer ul > li > a {color:#a9abac !important; text-decoration: none !important;}
footer ul > li > a:hover {color: #fff !important; }
.list-unstyled {list-style:none; margin-top:0; text-align:left; margin-left:0; padding-left:0 !important}
footer .list-unstyled {font-size: 0.9rem; line-height: 1.75; }

body.content-title-style-above .post-hero-section .entry-hero-container-inner {background-attachment: fixed; }

/* IOS avoids parallax problem and also avoids hero-hover issues */
@media screen and (pointer: coarse), screen and (hover: none) {
    body.home .entry-hero-container-inner, body.blog .entry-hero-container-inner, html body .entry-hero-container-inner {background-attachment: scroll !important; background-size: cover !important;}
}

@supports (-webkit-touch-callout: none) {
    .entry-hero-container-inner {
        background-attachment: scroll !important;
        background-size: cover !important;
    }
}

.post-thumbnail-inner.small-image img {
    object-fit: contain !important;
    background-color: #fff;
    padding: 1rem;
}