/*
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.4.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 

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


1.0 Global
    1.1 Base
    1.2 Typography
    1.3 Links
    1.4 Buttons
    1.5 Utility Classes

2.0 Header

3.0 Navigation

4.0 Hero Sections / Banners

5.0 Main Content / Layout

6.0 Blog / Posts

7.0 Custom Post Types

8.0 Footer

9.0 Animations 'Cowbell'

10.0 Plugin Customizations

11.0 Custom

12.0 Web Fonts

END <<< ***/




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

/*---------------
1.1 Base
----------------*/
/*
Padding Control 
*/
:root {
    --global-content-edge-padding: var(--kraken-framework-site-padding-left); /* Uses our Kraken padding on Kadence's edge padding */
    /* --global-vw: calc(100vw - (0.5 * var(--scrollbar-offset))); */
}

/* 
WordPress Global Padding 
*/
.has-global-padding {
    padding-right: var(--kraken-framework-site-padding-right); /* Uses our Kraken padding */
    padding-left: var(--kraken-framework-site-padding-left); /* Uses our Kraken padding */
}

/* Mobile Content Padding */
@media only screen and (max-width: 767px) {
    :root {
        --kraken-framework-site-padding-left: 1.5rem!important;
        --kraken-framework-site-padding-right: 1.5rem!important;
    }

    /* Kraken Theme */
    .kraken-entry__header {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .kraken-entry__content {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}




/* 
Breakout Content custom CSS to work with Kraken Framework 
*/
@media (min-width: 1025px) and (max-width: 1440px) {
    .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) - (0px * 2))) / 2)* -1) + -1px);
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .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) - (0px * 2))) / 2)* -1) + -1px);
    }
}





/*---------------
1.2 Typography
----------------*/
.heading-font {
    font-family: var(--kraken-framework-primary-font-family);
}

.body-font {
    font-family: var(--kraken-framework-secondary-font-family);
}

h1, .h1 {
    --kraken-framework-h1-font-size: clamp(2rem, 1.6667vw + 1.6667rem, 3rem);
    --kraken-framework-h1-font-weight: 400;
    --kraken-framework-h1-font-line-height: 1.1;
}

h2, .h2 {
    --kraken-framework-h2-font-size: clamp(2rem, 1.6667vw + 1.6667rem, 3rem);
    --kraken-framework-h2-font-weight: 500;
    --kraken-framework-h2-font-line-height: 1.1;
    --kraken-framework-h2-margin: 4rem 0 0.8rem 0;
}

h3, .h3 {
    --kraken-framework-h3-font-weight: 500;
    --kraken-framework-h3-font-line-height: 1.1;
}

h4, .h4 {
    --kraken-framework-h4-font-weight: 600;
}



/* WP Font Size Presets Overrides */
.has-x-large-font-size {
    font-size: clamp(2.5rem, 2.1991vw + 2.0833rem, 3.75rem)!important;
}
p.has-x-large-font-size {
    line-height: 1.2;
}

.has-large-font-size {
    font-size: clamp(2rem, 1.6667vw + 1.6667rem, 3rem)!important;
}
p.has-large-font-size {
    line-height: 1.3;
}

.has-medium-font-size {
    font-size: clamp(1.125rem, .3467vw + 1.0557rem, 1.333rem)!important;
}
p.has-medium-font-size {
    line-height: 1.3;
}

.has-small-font-size {
    font-size:.842rem!important;
}


/* Typography Spacing */
p + h2,
ul + h2,
ol + h2 {
    margin-top: 3rem;
}








.page-id-12, .page-id-13, .page-id-14, .page-id-15 {
    h1, .h1 {--kraken-framework-h1-font-size: 4.5rem !important;}
}




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

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

/* WP Button Block */
.wp-block-button__link {
    display: flex;
    align-items: center;
    position: relative;
    background-color: transparent;
    border: 2px solid var(--kraken-framework-palette-03);
    padding: 0.2rem 1rem 0.2rem 1rem;
    font-size: 0.889rem;
    color: var(--kraken-framework-palette-03);
    font-weight: 800;
    text-transform: uppercase;
}

.wp-block-button__link:hover {
    background-color: var(--kraken-framework-palette-03);
    color: #fff;
    cursor: pointer;
}
/* adds the icon to the button */
.wp-block-button__link::after {
    margin-left: 15px;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c23e3d' d='M256 8C119 8 8 119 8 256s111 248 248 248s248-111 248-248S393 8 256 8m144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12z'/%3E%3C/svg%3E");
}
/* changes icon color on hover */
.wp-block-button__link:hover::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M256 8C119 8 8 119 8 256s111 248 248 248s248-111 248-248S393 8 256 8m144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12z'/%3E%3C/svg%3E");
}

.btn-popup {
    color: #ffffff;
    background-color: #c23e3d;
    padding: 5px 15px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
}
.pum-container {
    padding: 35px !important;
    border: 8px solid #0c474c !important;
}

@media only screen and (max-width: 600px) {
    .btn-popup {font-size: 0.8rem !important;}
}


/*---------------
1.5 Utility Classes
----------------*/
/* 
WP Image Block Overrides 
*/
.wp-block-image {
    margin: 0;
}

.heading-font {
    font-family: var(--kraken-framework-primary-font-family);
}

.body-font {
    font-family: var(--kraken-framework-secondary-font-family);
}




/*==============================
2.0 HEADER
================================*/

/* Header Styles. */
.kraken-header {

    /* Standard Header */
    --kraken-framework-header-row-height-top: 0;
    --kraken-framework-header-row-padding-main: 1.75rem var(--kraken-framework-site-padding-right) .5rem var(--kraken-framework-site-padding-left);
    
    /* Shrink Header Colors */
    --kraken-framework-header-row-shrink-height-top: 0;

    /* Transparent Header */
    --kraken-framework-header-default-transparent-background: transparent;
    --kraken-framework-default-transparent-nav-font-color: var(--kraken-framework-palette-02);
    --kraken-framework-default-transparent-nav-font-hover-color: #ffffff;
    --kraken-framework-default-transparent-nav-font-active-color: #ffffff;
    --kraken-framework-default-transparent-nav-font-focus-color: #ffffff;

    /* Solid Header */
    /* --kraken-framework-header-main-background: var(--kraken-framework-palette-01); */

    /* Mobile Header */
    --kraken-framework-header-default-mobile-background: var(--kraken-framework-palette-01);

    /* Header Col Inner Styles. */
    .kraken-col-inner__row {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
    }

    .kraken-toggle-mobile__bar {
        background: #ffffff;
    }
    .kraken-toggle-mobile--is-open .kraken-toggle-mobile__bar {
        background: var(--kraken-framework-palette-01);
    }
}

.body--solid .kraken-header .kraken-header__row--main {
        background-image: url("https://www.parkeroptometry.ca/wp-content/uploads/2025/09/tiled-brand-watermark.svg");
        background-size: 85px auto;
        background-position: center top;
        background-repeat: repeat;
        background-color: var(--kraken-framework-palette-01);
    }



/*
Styling for watermark to display in header when page scrolls
- Because watermark is a background image that fades in, it needs to be a pseudo element, otherwise it won't fade
*/
.body--transparent .kraken-header .kraken-header__inner.kraken-header__inner--desktop {
    position: relative;
    transition: background-color 0.5s ease-in-out;

    .kraken-header__row.kraken-header__row--main {
        position: relative;
        z-index: 1;
    }
}

.body--transparent .kraken-header .kraken-header__inner.kraken-header__inner--desktop::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--kraken-framework-palette-01);
    background-image: url("https://www.parkeroptometry.ca/wp-content/uploads/2025/09/tiled-brand-watermark.svg");
    background-size: 85px auto;
    background-position: center top;
    background-repeat: repeat;
    opacity: 0; /* start invisible */
    transition: opacity 0.5s ease-in-out;
    pointer-events: none; /* don’t block clicks */
}

.is-scrolling .body--transparent .kraken-header .kraken-header__inner.kraken-header__inner--desktop::before {
    opacity: 1; /* fade in */
}


.body--solid .kraken-header .kraken-phone-number {
    --kraken-framework-phone-number-color: #fff;
    --kraken-framework-phone-number-hover-color: var(--kraken-framework-palette-02);
    --kraken-framework-phone-number-focus-color: var(--kraken-framework-palette-02);
}

.body--transparent .kraken-header .kraken-phone-number {
    --kraken-framework-phone-number-color: #fff;
    --kraken-framework-phone-number-hover-color: var(--kraken-framework-palette-02);
    --kraken-framework-phone-number-focus-color: var(--kraken-framework-palette-02);
}

.is-scrolling .kraken-header .kraken-phone-number {
    --kraken-framework-phone-number-color: #fff;
    --kraken-framework-phone-number-hover-color: var(--kraken-framework-palette-02);
    --kraken-framework-phone-number-focus-color: var(--kraken-framework-palette-02);
}


/*==============================
3.0 NAVIGATION
================================*/

.kraken-navigation {
    --kraken-framework-default-mobile-nav-font-color: var(--kraken-framework-regular-text-color);
    --kraken-framework-default-mobile-nav-font-hover-color: #000000;
    --kraken-framework-default-mobile-nav-font-active-color: #000000;
    --kraken-framework-default-mobile-nav-font-focus-color: #000000;
    --kraken-framework-default-transparent-nav-font-hover-color: var(--kraken-framework-palette-02);
    --kraken-framework-default-transparent-nav-font-active-color: var(--kraken-framework-palette-02);
    --kraken-framework-default-transparent-nav-font-focus-color: var(--kraken-framework-palette-02);
}

.body--solid .kraken-navigation--primary {
    --kraken-framework-nav-link-font-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-link-font-hover-color: var(--kraken-framework-palette-02);
    --kraken-framework-nav-link-font-active-color: var(--kraken-framework-palette-02);
    --kraken-framework-nav-link-font-focus-color: var(--kraken-framework-palette-02);

    --kraken-framework-nav-sub-link-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-hover-color: #ffead3;
    --kraken-framework-nav-sub-link-background-active-color: var(--kraken-framework-palette-02);
    --kraken-framework-nav-sub-link-background-focus-color: var(--kraken-framework-palette-02);
}

.body--transparent .kraken-navigation--primary {
    --kraken-framework-default-transparent-nav-font-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-default-transparent-nav-font-hover-color: var(--kraken-framework-palette-02);
    --kraken-framework-default-transparent-nav-font-active-color: var(--kraken-framework-palette-02);
    --kraken-framework-default-transparent-nav-font-focus-color: var(--kraken-framework-palette-02);

    --kraken-framework-nav-sub-link-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-hover-color: #ffead3;
    --kraken-framework-nav-sub-link-background-active-color: var(--kraken-framework-palette-02);
    --kraken-framework-nav-sub-link-background-focus-color: var(--kraken-framework-palette-02);
}

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

.kraken-navigation--secondary {
        --kraken-framework-nav-link-font-color: #ffffff;
        --kraken-framework-nav-link-font-hover-color: var(--kraken-framework-palette-02);
        --kraken-framework-nav-link-font-active-color: var(--kraken-framework-palette-02);
        --kraken-framework-nav-link-font-focus-color: var(--kraken-framework-palette-02);
    }





/*==============================
4.0 HERO SECTIONS / BANNERS
================================*/
/* 
Custom Page Title using Kraken Element
*/
/* This stops the background image from shifting over due to the container its in */
.kraken-element {
    .alignfull.custom-page-title {
        margin-left: auto;
        margin-right: auto;
    }
}



/*==============================
5.0 MAIN CONTENT / LAYOUT
================================*/

@media only screen and (max-width: 768px) {
    .home-hero .wp-block-buttons-is-layout-flex {justify-content: center;}
}


/* Image Block Cover Styles */
.image-bg-cover {
    figure {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        display: inline-block;
        margin-bottom: 0;

        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

    }

}


/* Image Masking */
.mask-img-po {
    display: block;
    margin: 0px auto;
}
  
.example-mask-po {
    mask-image: url(https://www.parkeroptometry.ca/wp-content/uploads/2025/09/po-mask-shape.svg);
    mask-mode: alpha;
    mask-repeat: no-repeat;
    mask-size: 90%;
    mask-position: center;
    width: 100%;
}




/* Image Masking */
.logo-mask-section a  {
    text-decoration: none;
}

.logo-mask-section:hover .logo-mask-image img  {
    transform: scale(1.25); /* Slightly enlarge the image */
}

.logo-mask-image {
    display: block;
    margin: 0px auto;
}

.logo-mask-image img {
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.5s ease-out;
    transform: scale(1);
    width: 100%;
}
  
.logo-mask {
    mask-image: url(https://www.parkeroptometry.ca/wp-content/uploads/2025/09/po-mask-shape.svg);
    mask-mode: alpha;
    mask-repeat: no-repeat;
    mask-size: 90%;
    mask-position: center;
    width: 100%;
}


body:not(.home) {

    .kraken-main__inner {
        background-image: url(https://www.parkeroptometry.ca/wp-content/uploads/2025/09/parker-outline-bg-watermark.webp);
        background-size: contain;
        background-position: 0% 100%;
        background-attachment: scroll;
        background-repeat: no-repeat;
    }

}



/*==============================
6.0 BLOG / POSTS
================================*/



/*==============================
7.0 CUSTOM POST TYPES
================================*/



/*==============================
8.0 FOOTER
================================*/

.kraken-footer {
    --kraken-framework-footer-background: var(--kraken-framework-palette-01);
    --kraken-framework-footer-borders: #578083;
    --kraken-framework-footer-phone-color: var(--kraken-framework-palette-02);
    --kraken-framework-footer-phone-hover-color: #e3ac7e;
    --kraken-framework-footer-navigation-link-color: #ffffff;
    --kraken-framework-footer-navigation-link-hover-color: var(--kraken-framework-palette-02);
    --kraken-framework-footer-navigation-link-focus-color: var(--kraken-framework-palette-02);
    --kraken-framework-footer-legal-navigation-link-color: #ffffff;
    --kraken-framework-footer-legal-navigation-link-hover-color: var(--kraken-framework-palette-02);
    --kraken-framework-footer-legal-navigation-link-focus-color: var(--kraken-framework-palette-02);
    --kraken-framework-footer-splash-credit: #ffffff;

    background-image: url("https://www.parkeroptometry.ca/wp-content/uploads/2025/09/tiled-brand-watermark.svg");
    background-repeat: repeat;
    background-position: center top;
    background-size: auto;

    .kraken-footer__row--top {
        border-bottom: 1px solid var(--kraken-framework-footer-borders);
        padding: 3rem auto;

        .kraken-footer__row-inner--top {
            align-items: center;

            .kraken-footer__col {
                margin-bottom: 0;
            }
        }
    }

    .kraken-footer__row--bottom {
        border-top: 1px solid var(--kraken-framework-footer-borders);
    }

    /* .kraken-footer__row--main {
        --kraken-framework-footer-row-padding-main: 1.5rem 0 3rem 0;
    } */

    h2 {
        font-weight: 600;
        font-size: 2.125rem;
        font-style: italic;
    }

    h2.footer-h2-small {
        font-size: 1.2rem;
        font-style: normal;
        margin-bottom: 0;
        color: #ffffff;
        font-family: var(--kraken-framework-secondary-font-family);
    }

    .kraken-phone-number__link {
        --kraken-framework-phone-number-color: var(--kraken-framework-footer-phone-color);
        --kraken-framework-phone-number-font-size: 2.6rem;
        font-weight: 400;
        line-height: 1;
        padding: 0;

        &:hover {
            --kraken-framework-phone-number-hover-color: var(--kraken-framework-footer-phone-hover-color);
        }
    }

    .footer-nav,
    .footer-address {
        width: 50%;
    }

    .footer-address-row {
        display: flex;
        gap: 4rem;
        margin-top: 20px;
        border-top: 1px solid var(--kraken-framework-footer-borders);
        padding-top: 30px;

        .kraken-address__item {color: #ffffff;}
    }

    .kraken-navigation--extra-01 {

        --kraken-framework-nav-link-padding: 0.3rem 0;

        .kraken-navigation__list {
            .menu-item {
                a {
                    --kraken-framework-nav-link-font-color: var(--kraken-framework-footer-navigation-link-color);
                    --kraken-framework-nav-link-font-weight: 400;

                    &:hover {
                        --kraken-framework-nav-link-font-hover-color: var(--kraken-framework-footer-navigation-link-hover-color);
                    }

                    &:focus {
                        --kraken-framework-nav-link-font-focus-color: var(--kraken-framework-footer-navigation-link-hover-color);
                    }
                }
            }
        }

    }

    .kraken-navigation--legal {
        .kraken-navigation__list {
            .menu-item {
                a {
                    --kraken-framework-nav-link-font-color: var(--kraken-framework-footer-legal-navigation-link-color);

                    &:hover {
                        --kraken-framework-nav-link-font-hover-color: var(--kraken-framework-footer-legal-navigation-link-hover-color);
                    }

                    &:focus {
                        --kraken-framework-nav-link-font-focus-color: var(--kraken-framework-footer-legal-navigation-link-hover-color);
                    }
                }
            }
        }
    }

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

    .acknowledgement {color: #ffffff;}

    .hours {
        color: var(--kraken-framework-palette-02);
        margin-top:15px;
        position: relative;
        padding-top: 1px;
        p {font-size: 0.9rem;}
    }

    .hours::before{
        content: '';
        position:absolute;
        top:-1px;
        left: 0;
        height: 1px;
        width: 25px;
        background-color: #ffffff;
    }

    .kraken-social-media__link--Facebook, .kraken-social-media__link--facebook {
        --kraken-framework-a-font-color: var(--kraken-framework-palette-02);
        path:nth-of-type(2){fill: var(--kraken-framework-palette-01);}
    }

    .kraken-social-media__link--Instagram, .kraken-social-media__link--instagram {
        background-color: var(--kraken-framework-palette-02);
        padding: 0;
        transition: background-color 100ms ease-out !important;
        svg {width: 20px;}
        path{fill: var(--kraken-framework-palette-01);}
    }

    .kraken-social-media__link--Instagram:hover, .kraken-social-media__link--instagram:hover {
        background-color: var(--kraken-framework-accent-alt-color);
    }
    
}

@media (max-width: 990px) {
    .hours::before{
        left: 50%!important;
        transform: translateX(-50%)!important;}
}

@media (min-width: 990px) {
    .kraken-footer {
        .kraken-logo--footer {
            display: block;
        }

        .kraken-footer__row--top {
            padding: 2rem 0;
            margin: 0rem var(--kraken-framework-site-padding-right);
        }

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

        .kraken-phone-number__link {
            --kraken-framework-phone-number-font-size: 3rem;
        }

        .kraken-social-media--footer {
            .kraken-social-media__list {
                justify-content: flex-end;
            }
        }
    }
}

@media only screen and (max-width: 990px) {
    .kraken-logo--footer {
        display: block;
        margin: 0 auto;
    }
}



/*==============================
9.0 ANIMATIONS
================================*/


/* HOVER - SPOTLIGHT */

.spotlight-unblur-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: url("https://www.parkeroptometry.ca/wp-content/uploads/2025/09/eye-magnifying-glass-icon.svg") 16 16, url("https://splashdev.ca/parkeroptometry/wp-content/uploads/2025/09/eye-magnifying-glass-icon.png") 16 16, auto;
}

.background-blurred,
.background-clear {
    position: absolute;
    top: 0;
    left:0;
    inset: 0;
    background-image: url('https://www.parkeroptometry.ca/wp-content/uploads/2025/09/young-girl-eye-exam-1.webp');
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.background-blurred {
    filter: blur(10px);
    z-index: 1;
}

.background-clear {
    clip-path: circle(0% at 50% 50%);
    z-index: 2;
    transition: none;
}

.spotlight-content {
    z-index: 3;
    padding: 1rem !important;
    max-width: 900px !important;

    h2 {text-shadow: 0 0 10px rgba(255,255,255,1);}
    p {text-shadow: 0 0 10px rgba(255,255,255,1);}

    .spotlight-content-section > .kt-inside-inner-col {
        display: flex;
        justify-content: space-around;
    }
    
}



/*==============================
10.0 PLUGIN CUSTOMIZATIONS
================================*/

@media only screen and (max-width: 768px) {
    h2.kt-categories__title {text-align: center !important;}
    .kt-teams-wrapper__inner--archive {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}


/*==============================
11.0 CUSTOM
================================*/



/*==============================
11.0 WEB FONTS
================================*/