/*
Theme Name:   Kraken Framework Child
Theme URI:    https://www.splashmg.ca
Description:  Kraken Framework is a foundational theme designed to help create WordPress websites with a strong focus on speed, efficiency, and optimization.
Author:       Splash Media Group Inc.
Author URI:   https://www.splashmg.ca
Template:     kraken-framework
Version:      3.3.0
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
Copyright: (c) Splash Media Group
Tags: blog,accessibility-ready,custom-menu,featured-images,footer-widgets,theme-options,translation-ready
Text Domain: kraken-framework
*/



/*** >>> TABLE OF CONTENTS 

0.0 Break Points
    xs: 478px
    sm: 767px
    md: 991px
    lg: 1280px
    xl: 1440px
    xxl: 1920px


1.0 Global
    1.1 Typography
    1.2 Links
    1.3 Buttons
    1.4 Utility Classes

2.0 Header & Navigation
    2.1 Header
    2.2 Navigation

3.0 Hero Section & Banners

4.0 Main Content & Layout

5.0 Blog & Post Styles

6.0 Custom Post Types

7.0 Footer

8.0 Animations 'Cowbell'

9.0 3rd-Party Plugins

10.0 Custom

11.0 Web Fonts

END <<< ***/




/*==============================
1.0 GLOBAL
================================*/


/*----------------
Typography
------------------*/

h1 {
    --kraken-framework-h1-font-weight: 400;
}

h2 {
    --kraken-framework-h2-font-weight: 400;
}

/*---------------
Links
-----------------*/

/*----------------
Buttons
------------------*/

/* Default */
.wp-block-button__link {
    background-color: transparent;
    border-radius: none;
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    position: relative;

    &:after {
        content: ">";
        width: 18px;
        height: 18px;
        margin-left: 10px;
        transition: .3s ease-in-out;
        display: inline-block;
        position: absolute;
        top: 11px;
    }
    &:hover{
        &::after{
            margin-left: 15px;
        }
    }
}

.custom-btn-white {
    .wp-block-button__link {
        color: #fff !important;
    }
}

/* Call to Action */

#kraken-element-1212 .wp-block-button__link {
    color: #ffffff !important;

    &:hover{
        color: #ffffff !important;
    }
}

/* Left Aligned Buttons */
.btn-left .wp-block-button__link {padding-left: 0;}


/*----------------
Utility Classes
------------------*/

.wp-block-image {
    margin: 0;
}



/*==============================
2.0 HEADER & NAVIGATION
================================*/

/*---------------
Header
-----------------*/

.kraken-header {

    /* Top Bar */
    --kraken-framework-header-row-height-top: 0;
    --kraken-framework-header-row-shrink-height-top: 0;

    .kraken-header__col--middle {
        justify-content: left;
        flex: 2;
    }

    .kraken-social-media__link--Instagram svg, .kraken-social-media__link--Facebook svg {
        color: #000000;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
        width: 13px;
        height: 14px;
    }

    .kraken-social-media__link--Instagram {
        background: transparent;
        background-color: transparent;
        border: none;
    }

}


/*---------------
Navigation
-----------------*/ 


    

/*==============================
3.0 HERO SECTION & BANNERS
================================*/




/*==============================
4.0 MAIN CONTENT & LAYOUT
================================*/

/*----------------
Kadence Blocks
------------------*/

/* Breakout Content */
@media (min-width: 1025px) and (max-width: 1439px) {
    .kb-row-layout-wrap.custom-breakout-left > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(1) {
        margin-inline-start: calc((((var(--global-vw, 100vw) -(var(--kraken-framework-max-width) -(16px* 2))) / 2)* -1) + -1px);
    }
}

@media (min-width: 1025px) and (max-width: 1439px) {
    .kb-row-layout-wrap.custom-breakout-right > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) {
        margin-inline-end: calc((((var(--global-vw, 100vw) -(var(---kraken-framework-max-width) -(16px* 2))) / 2)* -1) + -1px);
    }
}

.kb-row-layout-wrap.custom-breakout-left > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(1) figure,
.kb-row-layout-wrap.custom-breakout-right > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) figure {
    height: 100%;

    img {
        box-sizing: border-box;
        height: 100%;
        /* max-width: 100%; */
        vertical-align: bottom;
        object-fit: cover;
    }
}


/* Call to Action */

.call-to-action {
    border-top: 2px solid #f6f6f6;
    border-bottom: 2px solid #f6f6f6;
    background-image: url(https://www.michaelsjewellers.ca/wp-content/uploads/2024/08/taylor-cta-bg-v3-mobile.webp);
    background-size: auto 150%;
    background-repeat: no-repeat;
    background-position: 15% center;
}

@media only screen and (max-width: 1200px) and (min-width: 768px)  {
    .call-to-action {
        background-image: url(https://www.michaelsjewellers.ca/wp-content/uploads/2024/08/taylor-cta-bg-v3.webp) !important;
        background-size: contain !important;
        background-position: -20% 15% !important;
    }
}

@media screen and (min-width: 1201px) {
    .call-to-action {
        background-image: url(https://www.michaelsjewellers.ca/wp-content/uploads/2024/08/taylor-cta-bg-v3.webp) !important;
        background-size: 60% auto !important;
        background-position: left 25% !important;
    }
}





/*==============================
7.0 FOOTER
================================*/

.kraken-footer {
    background-image: url(https://www.michaelsjewellers.ca/wp-content/uploads/2024/08/bg-footer.png);
    background-repeat: repeat;
    background-size: auto;
    border-top: 1px solid rgba(171, 184, 195, 0.6);

    .kraken-footer__spacer {
        min-height: 35px;
    }

    .kraken-footer__heading {text-transform: uppercase;}

    .kraken-address__heading {
        font-size: 1rem;
        text-transform: uppercase;
        font-weight: 700;
    }

    .menu-item {
        text-transform: uppercase;
        padding: 0.4rem 0;
    }

    .kraken-social-media__link--Instagram svg, .kraken-social-media__link--Facebook svg {
        color: #000000;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
        width: 13px;
        height: 14px;
    }

    .kraken-social-media__link--Instagram {
        background: transparent;
        background-color: transparent;
        border: none;
    }

}

@media only screen and (max-width: 991px){
    .kraken-footer__col--01 nav ul {justify-content: center;}
    .kraken-footer__col--04 .kraken-logo__image--footer {margin: 0 auto;}
}




/*==============================
8.0 ANIMATION 'COWBELL'
================================*/




/*==============================
10.0 CUSTOM
================================*/

.grecaptcha-badge { visibility: hidden;}