/*
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
------------------*/
body {font-size: 1.3rem;}

.kraken-content {overflow-x: hidden;}

h1.kraken-title {margin-top: 0;}

h1, .h1 {
    --kraken-framework-h1-margin: 0;
    --kraken-framework-h1-font-weight: 200;
    --kraken-framework-h1-font-size: clamp(3.2rem, 5vw, 4.5rem);
}

h2, .h2 {
    --kraken-framework-h2-margin: 1.25rem 0 0 0;
    --kraken-framework-h2-font-weight: 200; 
    --kraken-framework-h2-font-size: clamp(3.2rem, 4vw, 3.5rem);
}

:root {
    --kraken-framework-base-line-height: 1.2;
    --wp--preset--font-size--large: 32px;
}

@media only screen and (max-width: 767px){
    :root {
        --wp--preset--font-size--large: 28px;
    }
}

.page-id-14 h2,
.page-id-12 h2, 
.page-id-13 h2 {font-size: 40px; margin-top: 20px;}




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


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

.wp-block-button__link  {
    position: relative;
    padding: 20px 35px;
    font-weight: bold;
    color: #000000;
    background: linear-gradient(to right, #c2b59b, #ef3e46); /* border gradient */
    border-radius:40px;
    border: none;
    cursor: pointer;
    z-index: 1;
    font-size: 1.2rem;
}

.wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: #ffffff; /* inner button background */
    border-radius: 36px; /* 30px (outer) - 4px (border thickness) */
    z-index: -1;
}

.btn-biege .wp-block-button__link::before {
    background: #ece8e0;
}

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




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


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

.kraken-header {
    --kraken-framework-header-row-height-top: 0;
    --kraken-framework-header-row-shrink-height-top: 0;
    --kraken-framework-header-transparent-main-background: transparent;
    --kraken-framework-header-main-background: #ffffff;
    --kraken-framework-header-transparent-shrink-main-background: #ffffff;
    --kraken-framework-header-transparent-scroll-up-main-background: #ffffff;
    --kraken-framework-header-transparent-scroll-down-main-background: #ffffff;
    --kraken-framework-header-shrink-main-background: #ffffff;
    /* border-bottom: 1px solid #ffffff; */

    .kraken-social-media {
        --kraken-framework-social-button-border-radius: 30px;
        --kraken-framework-social-button-focus-color: #2b3034;
        --kraken-framework-social-button-color: #2b3034;
        --kraken-framework-social-button-hover-color: #2b3034;
        --kraken-framework-social-button-hover-background-color: #ffffff;
        --kraken-framework-social-button-hover-color: #2b3034;
    
        margin-left: 40px;
    
        svg{
            margin-top: 9px;
            width: 34px !important;
            height: auto !important;
            margin-left: -5px;
        }
    }

    .kraken-header__col--end {flex: 3;}
    
}

.is-scrolling .kraken-header .kraken-social-media,
.body--solid .kraken-header .kraken-social-media {
    --kraken-framework-social-button-color: #ffffff;
    --kraken-framework-social-button-background-color: var(--kraken-framework-accent-color);
    --kraken-framework-social-button-hover-background-color: var(--kraken-framework-accent-alt-color);
    --kraken-framework-social-button-hover-color: #ffffff;
}




.kraken-header {
    position: relative;
}
  
.kraken-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    border-bottom: 1px solid #ffffff;
    transition: width 0.3s ease;
}

@media only screen and (max-width: 1200px) and (min-width: 996px)  {
    .kraken-header::after {
        width: 60%;
    }
}

@media only screen and (max-width: 995px) {
    .kraken-header::after {
        width: 100%;
    }
}




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

.kraken-navigation--mobile {
    --kraken-framework-nav-drawer-width: 65%;
}

.is-scrolling .body--transparent .kraken-navigation--primary {
        --kraken-framework-nav-link-font-color: #000000;
}




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

.site-hero {

    .kadence-column63_2fa340-ba > .kt-inside-inner-col:before {
        opacity: 1 !important;
    }

    .kb-section-has-overlay >.kt-inside-inner-col:before {
        opacity: 1 !important;
    }

}

.alignfull>.kt-row-layout-inner>.kt-row-column-wrap, .alignfull>.kt-row-column-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



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

body:not(.home, .page-id-11) .kraken-main__inner {
    background-image: url('https://www.nstatimcprimarycare.ca/wp-content/uploads/2025/04/background-feather.svg');
    background-size: 400px 865px;
    background-position: top left;
    background-repeat: no-repeat;
}
 
.page-id-11 .kraken-main__inner {
    background-image: url('https://www.nstatimcprimarycare.ca/wp-content/uploads/2025/04/contact-bg-watermark.png');
    background-size: auto;
    background-position: top right;
    background-repeat: no-repeat;
}

.kraken-main__inner .kraken-phone-number__link,
.kraken-main__inner .kraken-address__item,
.kraken-main__inner .kraken-email__link,
.contact-section p.has-medium-font-size {
    font-size: 1.25rem;
    line-height: 1.3;
}

.kraken-address {
    --kraken-framework-address-text-transform: none;
}

.contact-section p.has-medium-font-size {padding: 0; margin: 0;}

.rounded-img-section .kt-inside-inner-col {
    box-shadow: inset 0 0 0 1px white;
}

/* .rounded-img-section {
    margin-right: 0 !important;
} */

@media only screen and (max-width: 767px){
    .contact-section .kraken-phone-number__link {padding: 0px;}
}


/*----------------
Kadence Blocks
------------------*/
/*
Row Block
*/
@media (min-width: 1025px) and (max-width: 1474px) {
    .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: 1474px) {
    .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);
    }
}



/*==============================
5.0 BLOG & POST STYLES
================================*/


/*-----------------
Kraken Teams
-------------------*/

.kt-listing__inner {
    box-shadow: 2px 2px 10px rgb(185, 185, 185);
}

h1.kt-teams-heading {margin-bottom: 25px;}

.kt-teams-wrapper {padding-bottom: 4rem;}

.single-kraken-teams .kt-teams-wrapper {padding-top: 4rem;}


/*==============================
6.0 CUSTOM POST TYPES
================================*/





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

/* Footer Styles. */
.kraken-footer {
    --kraken-framework-footer-background: #000000;
    --kraken-framework-footer-color: #ffffff;

    background-image: url("https://www.nstatimcprimarycare.ca/wp-content/uploads/2025/04/emblem-watermark.png");
    background-size: auto 100%;
    background-position: -10% 50%;
    background-repeat: no-repeat;

    .kraken-email__link, .kraken-phone-number__link {
        color: #ffffff !important;
        text-decoration: underline;
    }

    .kraken-address {
        --kraken-framework-address-font-size: 1rem;
        --kraken-framework-address-text-transform: none;
    }
    .kraken-navigation--extra-01 {--kraken-framework-nav-link-font-size: 1rem;}

    .footer-address-row {
        display: flex;
        gap: 4rem;
        margin-top: 50px;
    
        .company-address, .footer-menu {width: 50%;}
        
    }

    h2 {
        font-weight: 100; 
        color: var(--kraken-framework-palette-01);
        font-size: 2.2rem;
        margin-top: 15px !important;
        margin-bottom: 20px;
    }

    h3 {
        color: #ffffff;
        font-size: 1.2rem;
        margin-top: 2rem;
        margin-bottom: 0;
    }
    p.hours{margin-top: 0; font-size: 1rem;}

    .kraken-navigation__list .menu-item a {color: #ffffff;}
    .kraken-navigation__list .menu-item a:hover {color: var(--kraken-framework-accent-color);}

    .kraken-social-media {
        --kraken-framework-social-button-border-radius: 30px;
        --kraken-framework-social-button-focus-color: #000000;
        --kraken-framework-social-button-color: #000000;
        --kraken-framework-social-button-hover-color: #000000;
        --kraken-framework-social-button-hover-background-color: #ffffff;
    
        margin-top: 40px;
    
        svg{
            margin-top: 9px;
            width: 34px !important;
            height: auto !important;
            margin-left: -5px;
        }
    }

}

.kraken-navigation--legal .kraken-navigation__list .menu-item a{color:#fff;}

.kraken-navigation--legal .kraken-navigation__list .menu-item a:hover{color: var(--kraken-framework-accent-color);}


.kraken-splash-credit {
    --kraken-framework-credit-color: #fff;
    --kraken-framework-credit-hover-color: var(--kraken-framework-accent-color);
    --kraken-framework-credit-logo-fill: #fff;
}

.kraken-footer__row--top {
    border-bottom: 2px solid var(--kraken-framework-palette-01);
    --kraken-framework-footer-row-padding-top: 1rem;

    .kraken-footer__col--01 {
        margin-bottom: 0;
        margin-top: 1rem;
    }
}

.kraken-footer__row--bottom {border-top: 2px solid var(--kraken-framework-palette-01);}

.kraken-footer__row--main {
    --kraken-framework-footer-row-padding-main: 3rem var(--kraken-framework-site-padding-right) 3rem var(--kraken-framework-site-padding-left);
}


.button-footer {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%);
}


@media only screen and (max-width: 991px) {

    .kraken-footer {
        background-image: url("https://www.nstatimcprimarycare.ca/wp-content/uploads/2025/04/emblem-watermark-mobile.png");
        background-size: auto 75%;
        background-position: bottom left;
    }

    .kraken-footer__col--01 h2 {
        margin-bottom: 50px;
    }
    .button-footer {
        margin-bottom: 50px;
    }

    .kraken-footer__row--top {min-height: 250px;}

}

@media (min-width: 991px) {
    .kraken-social-media--footer .kraken-social-media__list {
        justify-content: flex-end;
    }
}




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





/*==============================
9.0 3RD-PARTY PLUGINS
================================*/


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


/*----------------
Gravity Forms
------------------*/





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

/*---------------
Call Outs (4 boxes on homepage)
-----------------*/
.custom-callout {

    &.custom-callout-overlay-salmon {
        --custom-callout-overlay-color: rgba(239, 62, 70, 1);
    }

    position: relative; /* This ensures the hover effect works on the parent container */
    
    .wp-block-kadence-column {
      z-index: 2 !important;
    }
  
    figure.custom-callout-img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      margin-bottom: 0 !important;
      
      img {
        object-fit: cover;  /* Ensures the image covers the container */
        width: 100%;
        height: 100%;
        transition: transform 0.5s ease-out; /* Smooth transition for scaling */
        transform: scale(1); /* Set initial scale to 1 */
      }
    }
  
    figure.custom-callout-img::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--custom-callout-overlay-color); /* Green overlay */
      mix-blend-mode: multiply;
      pointer-events: none;
      z-index: 1; /* Make sure overlay is above the image */
    }
  
    /* Apply zoom effect when the parent container is hovered */
    &:hover figure.custom-callout-img img {
      transform: scale(1.05); /* Slightly enlarge the image */
    }
}