/*
Theme Name:     Raven
Theme URI:      https://brandandbuild.me/product/raven-kadence
Template:       kadence
Author:         Brand & Build
Author URI:     https://brandandbuild.me
Description:    Raven is a feminine child theme for the free Kadence theme by Kadence WP. Featuring a muted colour palette that's simple to change to match your brand, Raven is ideal for coaches, entrepreneurs, and online educators. As well as a long form sales page and email challenge sign up page, Raven comes with access to a blocks cloud library containing over 50 prestyled sections from the theme, so it's simple to create new pages and drop in only the sections you need.
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

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

:root {
    --bb-raven-divider-1: url('/wp-content/themes/raven-for-kadence/starter/assets/divider1.svg');
    --bb-raven-divider-2: url('/wp-content/themes/raven-for-kadence/starter/assets/divider2.svg');
    --bb-raven-hex-mask: url('/wp-content/plugins/kadence-blocks/dist/assets/images/masks/hexagon.svg');
    --bb-raven-archive-pretext: 'Now Viewing';
}

/*Scrollbar styling*/

html {
    scrollbar-color: var(--global-palette3) var(--global-palette9);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--global-palette3);
    border-radius: 0;
}

::-webkit-scrollbar-track {
    background: var(--global-palette9);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: var(--global-palette3);
    opacity: 1;
}

/* Menu */

/* Hide the desktop menu and show mobile */
@media all and (min-width: 1025px) {
    #mobile-header.site-mobile-header-wrap {
        display: block;
    }
    #main-header .site-header-upper-wrap {
        display: none;
    }
}

/* Hide browser scroll bar on mobile menu */
#mobile-drawer.popup-drawer.active .drawer-inner {
    overflow: hidden;
}

/* Add scrollbar to mobile menu container */
#mobile-drawer.popup-drawer .drawer-content {
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

#mobile-drawer.popup-drawer .drawer-content .site-header-item {
    max-height: -webkit-max-content;
    max-height: -moz-max-content;
    max-height: max-content;
}

#mobile-drawer .sub-menu.show-drawer {
    padding-left: 0;
}

/* Add large 'Menu' word to background */
.bb-raven-menu-letters {
    position: absolute;
    z-index: -1;
    width: 100vw;
    left: 0;
    height: 100vh;
    top: 10%;
}

/* Style the search modal */
#search-drawer.popup-drawer .drawer-inner input.search-field {
    border: none;
    border-bottom: 2px solid var(--global-palette1);
    border-radius: 0;
    box-shadow: none !important;
}

#search-drawer.popup-drawer .drawer-inner input.search-field:focus {
    border-color: var(--global-palette2);
}

/* Footer */

/* Remove container padding */
.site-top-footer-wrap .site-container {
    padding: 0;
}

/* Hero sections */

/* Divider overlap on hero sections */
@media all and (min-width: 1025px) {
    .bb-raven-divider-with-image .kt-row-layout-bottom-sep {
        z-index: 10;
    }
}

/* Large background letters */

.kt-inside-inner-col {
    position: relative;
}

/* All letters */
.bb-raven-background-letter {
    font-size: 30vw;
    position: absolute;
    z-index: -1;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

/* Center aligned letters */
.bb-raven-background-letter.center {
    left: 0;
    right: 0;
    margin: auto !important;
}

.bb-raven-background-letter:not(.center):not(.small) {
    top: 15%;
}

/* Smaller version for numbers */
.bb-raven-background-letter.small {
    font-size: 15vw;
    transform: translateY(-25%);
}

/* Letter sizing for mobile */
@media all and (max-width: 768px) {
    .bb-raven-background-letter {
        font-size: clamp(18rem, 40vw, 40vw);
    }
    .bb-raven-background-letter.small {
        font-size: clamp(10rem, 15vw, 15vw);
    }
}

/* Home hero */
.bb-raven-home-hero {
    position: relative;
}

/* Blog & Archives */

/* Archive titles pre-text */

.archive .post-archive-title:before,
.search-results .search-archive-title:before,
.blog .post-archive-title:before {
    content: var(--bb-raven-archive-pretext);
    color: var(--global-palette4);
    font-family: var(--global-body-font-family);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.archive .archive-description {
    margin-top: 30px;
}

/* Add hero and post dividers */
.blog .entry-hero:after,
.archive .entry-hero:after,
.search-results .entry-hero:after,
.single-post .entry-hero:after,
.bb-raven-blog.wide.blog-landing article.loop-entry:nth-child(even)::after,
.single-post .comments-area:after,
.bb-raven-blog.wide.blog-landing article.loop-entry:nth-child(even)::before,
.single-post .comments-area:before {
    width: 100%;
    height: 100px;
    right: 0;
    left: 0;
    position: absolute;
    display: flex;
}

/* Position dividers */

/* Bottom */
.blog .entry-hero:after,
.archive .entry-hero:after,
.search-results .entry-hero:after,
.single-post .entry-hero:after,
.bb-raven-blog.wide.blog-landing article.loop-entry:nth-child(even)::after,
.single-post .comments-area:after {
    content: var(--bb-raven-divider-2);
    align-items: flex-end;
    bottom: 0;
}

/* Top */
.bb-raven-blog.wide.blog-landing article.loop-entry:nth-child(even)::before,
.single-post .comments-area:before {
    content: var(--bb-raven-divider-1);
    align-items: flex-start;
    top: 0;
}

/* Blog & archives */

/* Hero section padding */
.blog .entry-hero .entry-hero-container-inner,
.archive .entry-hero .entry-hero-container-inner,
.search-results .entry-hero .entry-hero-container-inner {
    padding: 100px 0 200px;
}

/* Post item padding */
#archive-container article {
    padding: 50px 0;
}

/* Post content sizing & position*/
#archive-container article.loop-entry .entry-content-wrap {
    padding: 2rem;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#archive-container article.loop-entry .post-thumbnail {
    align-self: center;
}

/* Custom blog categories */

/* Image scale */
.bb-raven-blog-category img {
    transition: all 0.3s ease;
}

.bb-raven-blog-category img:hover {
    transform: scale(1.1);
}

/* Change grid sizing */
.bb-raven-blog.wide article.loop-entry {
    grid-template-columns: 1fr 1fr !important;
    grid-gap: 0;
    position: relative;
}

/* Styling for alternate posts */
.bb-raven-blog.wide.blog-landing article.loop-entry:nth-child(even) {
    background: var(--global-palette8);
    padding: 150px 0;
}

#archive-container article.loop-entry {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media all and (min-width: 1025px) {
    /* Post item image placement */
    .bb-raven-blog.wide.blog-landing
        article.loop-entry:nth-child(even)
        .post-thumbnail,
    #archive-container article.loop-entry:nth-child(even) .post-thumbnail {
        grid-column: 2 / 3;
        grid-row: 1 / 1;
    }
    /* Post item content placement */
    .bb-raven-blog.wide.blog-landing
        article.loop-entry:nth-child(even)
        .entry-content-wrap,
    #archive-container article.loop-entry:nth-child(even) .entry-content-wrap {
        grid-column: 1 / 2;
        grid-row: 1 / 1;
    }
    .bb-raven-blog.wide.blog-landing
        article.loop-entry:nth-child(even)
        .post-thumbnail-inner {
        padding: 2vw 8vw 2vw 0;
    }
    .bb-raven-blog.wide.blog-landing
        article.loop-entry:nth-child(odd)
        .post-thumbnail-inner {
        padding: 2vw 0 2vw 8vw;
    }
    .bb-raven-blog.wide article.loop-entry .post-thumbnail-inner {
        padding: 4vw 0 4vw 8vw;
    }
}

/* Stack on mobile */
.bb-raven-blog.wide article.loop-entry .entry-content-wrap {
    padding: 4vw 8vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Content alignment & Spacing */
.bb-raven-blog.wide article.loop-entry .entry-content-wrap *,
#archive-container article.loop-entry .entry-content-wrap * {
    text-align: center;
}
.bb-raven-blog.wide article.loop-entry .entry-title {
    margin-bottom: 30px;
}
.bb-raven-blog.wide article.loop-entry .entry-content-wrap .entry-meta,
#archive-container article.loop-entry .entry-content-wrap .entry-meta {
    justify-content: center;
}

/* Style category links */
.bb-raven-blog.wide article.loop-entry .entry-content-wrap .entry-taxonomies a {
    letter-spacing: 0.2em;
    font-weight: 600;
}

/* Remove surplus margin */
.bb-raven-blog.wide article.loop-entry .entry-content-wrap .entry-summary,
.bb-raven-blog.wide article.loop-entry .entry-content-wrap .entry-summary,
#archive-container article.loop-entry .entry-content-wrap .entry-summary,
#archive-container article.loop-entry .entry-content-wrap .entry-summary p p {
    margin-top: 0;
}

/* Read more styling */
.bb-raven-blog.wide article.loop-entry .entry-content-wrap a.post-more-link {
    font-weight: 600;
    letter-spacing: 0.2em;
}

#archive-container article.loop-entry .entry-content-wrap a.post-more-link {
    font-weight: 600;
    letter-spacing: 0.2em;
}

.bb-raven-blog.wide article.loop-entry .entry-content-wrap .more-link-wrap {
    color: var(--global-palette5);
}

/* Hide default arrows */
.bb-raven-blog.wide
    article.loop-entry
    .entry-content-wrap
    a.post-more-link
    .kadence-svg-iconset,
#archive-container
    article.loop-entry
    .entry-content-wrap
    a.post-more-link
    .kadence-svg-iconset,
.single-post .post-navigation-sub small span {
    display: none;
}

/* Add custom arrows */
.bb-raven-blog.wide
    article.loop-entry
    .entry-content-wrap
    a.post-more-link:after,
.bb-raven-text-button a:after,
#archive-container
    article.loop-entry
    .entry-content-wrap
    a.post-more-link:after,
.bb-raven-text-button a:after,
.single-post .nav-next .post-navigation-sub small:after,
.single-post .nav-previous .post-navigation-sub small:before,
.single-post .comment-reply-link:after {
    content: '\2192';
    display: inline-block;
    margin-left: 5px;
    font-size: 20px;
    transition: transform 0.3s ease;
}

.single-post .nav-previous .post-navigation-sub small:before {
    content: '\2190';
    margin-left: 0px;
    margin-right: 5px;
}

/* Animate on hover */
.bb-raven-blog.wide
    article.loop-entry
    .entry-content-wrap
    a.post-more-link:hover:after,
.bb-raven-text-button a:hover:after,
#archive-container
    article.loop-entry
    .entry-content-wrap
    a.post-more-link:hover:after,
.bb-raven-text-button a:hover:after,
.single-post .nav-next:hover .post-navigation-sub small:after,
.single-post .comment-reply-link:hover:after {
    transform: translateX(10px);
}

.single-post .nav-previous:hover .post-navigation-sub small:before {
    transform: translateX(-10px);
}

/* Tablet position adjustments */
@media all and (max-width: 1024px) {
    .bb-raven-blog.wide article.loop-entry,
    #archive-container article.loop-entry {
        grid-template-columns: 1fr !important;
    }
    .bb-raven-blog.wide article.loop-entry .post-thumbnail-inner,
    #archive-container article.loop-entry .post-thumbnail-inner {
        padding: 0 100px;
    }
    .bb-raven-blog.wide article.loop-entry .entry-content-wrap,
    #archive-container article.loop-entry .entry-content-wrap {
        padding: 50px 100px 0px;
    }
    .bb-raven-blog.wide.blog-landing article.loop-entry:nth-child(even)::after {
        display: flex;
        align-items: flex-end;
    }
    .bb-raven-blog.wide.blog-landing article.loop-entry:nth-child(even) {
        padding: 100px 0;
    }
    .bb-raven-blog.wide.blog-landing article.loop-entry:nth-child(odd) {
        padding: 30px 0 0;
    }
}

/* Mobile position adjustments */
@media all and (max-width: 767px) {
    .bb-raven-blog.wide article.loop-entry .post-thumbnail-inner {
        padding: 0 30px;
    }

    #archive-container article.loop-entry .post-thumbnail-inner {
        padding: 0;
    }
    .bb-raven-blog.wide article.loop-entry .entry-content-wrap {
        padding: 50px 30px 0;
    }
    #archive-container article.loop-entry .entry-content-wrap {
        padding: 50px 0 0;
    }
}

/* Add dividing lines */
#archive-container
    article.loop-entry
    .entry-content-wrap
    .category-links.term-links::after,
.single-post .entry-taxonomies:after,
.single-post .entry-related-carousel .entry-title::after,
.bb-raven-blog.wide
    article.loop-entry
    .entry-content-wrap
    .category-links.term-links::after,
.archive .archive-title:before,
.search-results .search-title:before,
.blog .archive-title:before {
    content: '';
    position: relative;
    width: 100px;
    height: 2px;
    background: var(--global-palette1);
    display: block;
    margin: 30px auto;
}

.single-post .entry-taxonomies:after {
    margin: 30px auto 20px;
}

/* Post nav */
.single-post .post-navigation-sub small {
    margin-bottom: 0.5em;
    color: var(--global-palette4);
    letter-spacing: 0.2em;
}

.single-post .nav-links > div:hover *,
.single-post .comment-reply-link:hover {
    color: var(--global-palette1);
}

.single-post .post-navigation .nav-previous::after {
    width: 2px;
    background: var(--global-palette1);
}

/* Numbered page nav styling */
.navigation.pagination .nav-links {
    display: flex;
}

.navigation.pagination .nav-links .page-numbers {
    border-radius: 0;
    font-weight: 600;
}

.navigation.pagination .nav-links .page-numbers:hover {
    border-color: var(--global-palette3);
    background: var(--global-palette3);
    color: var(--global-palette9);
}

/* Single posts */

/* Title padding */
.single-post .post-title {
    padding-bottom: 12%;
}

/* Section spacing */
.single-post .entry-hero {
    margin-bottom: 50px;
}

.single-post .kadence-thumbnail-position-behind {
    margin-bottom: 0px;
}

.single-post .post-thumbnail-inner {
    padding: 30px;
}

/* Remove content box shadow */
.single-post .entry.single-entry,
.single-post .entry-related .entry.loop-entry {
    box-shadow: none;
}

/* Drop caps */
.single-post .has-drop-cap:not(:focus)::first-letter {
    font-family: var(--global-heading-font-family);
    color: var(--global-palette3);
    background: var(--global-palette8);
    font-weight: inherit;
    padding: 0.25em;
    margin: 0.1em 0.125em 0 0;
}

/* List items */
.single-post li::marker {
    color: var(--global-palette1);
    font-weight: 600;
}

/* Block quotes */
.single-post blockquote {
    background: var(--global-palette8);
    padding: 1em 1.5em;
    border-left: 2px solid var(--global-palette1);
    font-weight: 600;
    font-size: 110%;
}

/* Links */
.single-post p a {
    font-weight: 500;
}

/* Author box */
.single-post .entry-author-style-center .entry-author-avatar::before,
.single-post .entry-author-style-center .entry-author-avatar::after {
    height: 2px;
    background: var(--global-palette1);
}

.single-post .entry-author-style-center {
    border-bottom: 2px solid var(--global-palette1);
}

/* Avatar clipping mask */
.single-post .entry-author-style-center .entry-author-avatar img,
.single-post .comment-author img.avatar {
    border-radius: 0;
    -webkit-mask-image: var(--bb-raven-hex-mask);
    -webkit-mask-size: auto;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Author names */
.single-post .entry-author-style-center .author-name,
.single-post .comment-author .fn {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--global-palette4);
}

/* Related posts */

/* Spacing & alignment */
.single-post .entry-related {
    padding-top: 100px;
}

.single-post .entry-related-title {
    text-align: center;
    margin-bottom: 30px;
}

.single-post .entry-related .entry.loop-entry .entry-content-wrap {
    text-align: center;
}

.single-post .entry-related .loop-entry .entry-meta {
    justify-content: center;
}

/* Title font size */
.single-post .entry-related-carousel .entry-title {
    font-size: xx-large;
}

/* Style the dots */
.single-post .splide .splide__pagination__page,
.single-post .splide .splide__pagination__page.is-active {
    background: var(--global-palette1);
}

/* Comments */

/* Comment section sizing */
.single-post .comments-area {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--global-palette8);
    padding: 200px 0;
}

.single-post .comments-title,
.single-post .comment-respond,
.single-post .comment-list {
    max-width: var(--global-content-narrow-width);
    margin: 0 auto;
    padding: 0 var(--global-content-edge-padding);
}

.single-post .comments-title {
    margin-bottom: 50px;
}

/* Titles alignment */
.single-post .comments-title,
.single-post .comment-reply-title {
    text-align: center;
}

/* Comment dividers */
.single-post .comment-body {
    border-bottom: 2px solid var(--global-palette9);
}

/* Reply link styling */
.single-post .comment-reply-link {
    border: none;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--global-palette4);
    letter-spacing: 0.2em;
    font-size: 70%;
}

/* Comment form */

/* Form spacing */
.single-post .comment-respond {
    padding-top: 50px;
}

/* Content alignment */
.single-post .comment-respond .logged-in-as {
    text-align: center;
}

/* Field styling */
.single-post .comment-form textarea,
.single-post .comment-form input:not(.submit) {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--global-palette1);
    border-radius: 0;
}

.single-post .comment-form textarea:focus,
.single-post .comment-form input:focus {
    border-color: var(--global-palette2);
    box-shadow: none;
}

/* Search blocks */

.bb-raven-search-block.wp-block-search.wp-block-search__button-inside
    .wp-block-search__inside-wrapper {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--global-palette1);
    border-radius: 0;
}

.bb-raven-search-block.wp-block-search input {
    background: transparent;
}

.bb-raven-search-block.wp-block-search input:focus {
    box-shadow: none;
}

.bb-raven-search-block.wp-block-search .wp-block-search__button {
    border: none;
}