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

Kraken 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 Custom Classes & Styles

2.0 Header

3.0 Navigation
    3.1 Primary
    3.2 Secondary

4.0 Hero / Page Title

5.0 Main Content / Layout

6.0 Blog / Posts
    6.1 Archive
    6.2 Single

7.0 Custom Post Types

8.0 Footer

9.0 Animations 'Cowbell'

10.0 3rd-Party Plugins

11.0 Kraken Template Pages
    11.1 Privacy Policy
    11.2 Terms of Use
    11.3 Accessibility
    11.4 Site Map

12.0 Web Fonts

END <<< ***/




/*==============================
1.0 GLOBAL
================================*/
/*---------------
1.1 Base
----------------*/

.grecaptcha-badge { visibility: hidden; }

.kraken-logo__image--default, .kraken-logo__image--transparent {height: 64px !important;}
.kraken-logo__image--mobile, .kraken-logo__image--shrink, .kraken-logo__image--shrink-transparent {height: 45px !important;}

/*
Padding Control
*/
    :root {
        --global-content-edge-padding: var(--kraken-framework-site-padding-left); /* Uses our Kraken padding on Kadence's edge padding */
    }

    /* 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: 1rem!important;
            --kraken-framework-site-padding-right: 1rem!important;
        }

        /* Kraken Theme */
        .kraken-entry__content {
            padding-right: 1rem!important;
            padding-left: 1rem!important;
        }
    }


/*---------------
1.2 Typography
----------------*/
h1, .h1{
    --kraken-framework-h1-font-size: clamp(3.4rem, 5vw, 5.5rem);
    --kraken-framework-h1-font-weight: 800;
    --kraken-framework-h1-font-line-height: 1;

    letter-spacing: -.015em;
}

h2, .h2{
    /* --kraken-framework-h2-font-size: clamp(2.6rem, 3.1667vw + 1.9667rem, 4.5rem); */
    --kraken-framework-h2-font-size: clamp(2rem, 1.4815vw + 1.6667rem, 3rem);
    --kraken-framework-h2-font-weight: 800;
    --kraken-framework-h2-font-line-height: 1.1;

    letter-spacing: -.015em;
}

h3, .h3 {
    /* --kraken-framework-h3-font-size: clamp(2.2rem, 1vw + 2rem, 2.8rem); */
    --kraken-framework-h3-font-size: 2rem;
    --kraken-framework-h3-font-weight: 800;
    --kraken-framework-h3-font-line-height: 1.1;

    letter-spacing: -.015em;
}

h4, .h4 {
    --kraken-framework-h4-font-size: 1.5rem;
    --kraken-framework-h4-font-weight: 800;
    line-height: 1.1;
}

/* .home-title {
    font-size: clamp(1rem, 14vw, 9.375rem) !important;
} */

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



.wp-block-kraken-phone-number a, 
.wp-block-kraken-email a {
    color: #ec1c24;
}


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

/*---------------
1.4 Buttons
----------------*/
/*
Default Buttons
*/
.wp-block-button__link {
    border-radius: 0;
    background-color: var(--kraken-framework-accent-color);
    border-color: var(--kraken-framework-accent-color);
    font-weight: 500;
    padding: .75em 1.25em;
}

.wp-block-button__link:hover {
    background-color: #c90211;
    border-color: #c90211;
    color: #ffffff;
}

.btn-white .wp-block-button__link {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--kraken-framework-accent-color);
}

.btn-white .wp-block-button__link:hover {
    background-color: #e8e7e7;
    border-color: #e8e7e7;
}

.btn-black .wp-block-button__link {
    background-color: var(--kraken-framework-accent-alt-color);
    border-color: var(--kraken-framework-accent-alt-color);
    color: #ffffff;
}

.btn-black .wp-block-button__link:hover {
    background-color: #511712;
    border-color: #511712;
    color: #ffffff;
}


/*---------------
1.5 Custom Classes & Styles
----------------*/
b, strong {
    font-weight:800;
}

p b, b p, p strong, strong p {
    font-weight:800;
}

/* WP Font Size Presets Overrides */
/* .has-x-large-font-size {font-size: clamp(2.5rem, 5vw + 1.5rem, 5.5rem) !important;} */
.has-x-large-font-size {font-size: clamp(2.25rem, 2.5926vw + 1.6667rem, 4rem) !important; line-height: 1.2;}
/* .has-large-font-size {font-size: clamp(2rem, 2.0833vw + 1.5833rem, 3.25rem) !important;} */
.has-large-font-size {font-size: clamp(1.375rem, .4444vw + 1.275rem, 1.675rem) !important;}
.has-medium-font-size {font-size:1.375rem !important;}
.has-small-font-size {font-size: .866rem !important;}

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

/* Top line (usually above intro heading) */
.custom-page-title-hero h1 {
    position: relative;
    padding-top: 1.25rem;
}

.custom-page-title-hero h1::before {
    content: "";
    position: absolute;
    background-color: var(--kraken-framework-accent-color);
    width: 20%;
    height: 7px;
    top: 0;
    left: 0;
}

/* Custom breakout column adjustment for Kadence two-column layouts */
      @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);
          }
      }


.js-count-wrapper {
  display: inline-flex;
  align-items: baseline;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}

/* Animated number */
.js-count {
  color: #231f20;

  /* keep width constant so the + never shifts */
  display: inline-block;
  min-width: 2ch;          /* fits up to two digits */
  text-align: right;

  /* make each digit the same width */
  font-variant-numeric: tabular-nums;   /* modern */
  font-feature-settings: "tnum" 1, "lnum" 1; /* broader fallback */
}

/* Static plus sign */
.js-plus {
  color: #ec1c24;
  margin-left: 0.1em;      /* small, consistent gap */
}




/*==============================
2.0 HEADER
================================*/
.kraken-header__row-inner--main {
    --kraken-framework-header-row-padding-main: 1rem var(--kraken-framework-site-padding-right) 1rem var(--kraken-framework-site-padding-left);
}

/* 
Code for the 'Stacked Header' Gist 
*/
.kraken-header {
    /* Standard Header */
    --kraken-framework-header-row-height-top: 0;
    --kraken-framework-header-main-background: #ffffff;
    
    /* Shrink Header Colors */
    --kraken-framework-header-row-shrink-height-top: 0;

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

    .kraken-social-media {
        --kraken-framework-social-button-width: 20px;
        --kraken-framework-social-button-height: 20px;
        display: flex;

        .kraken-social-media__link--LinkedIn {
            padding: 4px;
            background-color: #000000;
            border-radius: 4px;
        }
        .kraken-social-media__link--LinkedIn:hover, .kraken-social-media__link--LinkedIn:focus {
            background-color: var(--kraken-framework-accent-color);
        }

        .kraken-social-media__link--Facebook {
            color: #000000;
        }
        .kraken-social-media__link--Facebook:hover,  .kraken-social-media__link--Facebook:focus {
            color: var(--kraken-framework-accent-color);
        }
    }

}


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

/*===============
  Navigation Styles
===============*/
.kraken-navigation {
    --kraken-framework-default-desktop-nav-font-size:1.125rem;
    --kraken-framework-default-desktop-nav-font-weight:700;
    background-color: var(--kraken-framework-nav-background-color);
}


/* --- Primary ------------- */
.kraken-navigation--primary {
    --kraken-framework-nav-display: flex;
    --kraken-framework-nav-gap: 1rem;
    --kraken-framework-nav-background-color: transparent;
    --kraken-framework-menu-item-padding: 0;
    --kraken-framework-menu-item-margin: 0;
    --kraken-framework-nav-link-justify: flex-start;
    --kraken-framework-nav-link-padding: var(--kraken-framework-default-desktop-nav-padding);
    --kraken-framework-nav-link-margin:0;
    --kraken-framework-nav-link-font-size: var(--kraken-framework-default-desktop-nav-font-size);
    --kraken-framework-nav-link-font-weight: var(--kraken-framework-default-desktop-nav-font-weight);
    --kraken-framework-nav-link-font-line-height: var(--kraken-framework-default-desktop-nav-line-height);
    --kraken-framework-nav-link-font-color: var(--kraken-framework-default-desktop-nav-font-color);
    --kraken-framework-nav-link-font-hover-color: var(--kraken-framework-default-desktop-nav-font-hover-color);
    --kraken-framework-nav-link-font-active-color: var(--kraken-framework-default-desktop-nav-font-active-color);
    --kraken-framework-nav-link-font-focus-color: var(--kraken-framework-default-desktop-nav-font-focus-color);
    --kraken-framework-nav-link-background-color: transparent;
    --kraken-framework-nav-link-background-hover-color: transparent;
    --kraken-framework-nav-link-background-active-color: transparent;
    --kraken-framework-nav-link-background-focus-color: transparent;
    --kraken-framework-nav-sub-pos: absolute;
    --kraken-framework-nav-sub-pos-top: -999em;
    --kraken-framework-nav-sub-pos-left: -999em;
    --kraken-framework-nav-sub-width: 200px;
    --kraken-framework-nav-sub-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-sub-menu-item-padding: 0;
    --kraken-framework-sub-menu-item-margin: 0;
    --kraken-framework-nav-sub-link-padding: var(--kraken-framework-default-desktop-sub-nav-padding);
    --kraken-framework-nav-sub-link-font-size: var(--kraken-framework-default-desktop-sub-nav-font-size);
    --kraken-framework-nav-sub-link-font-weight: var(--kraken-framework-default-desktop-sub-nav-font-weight);
    --kraken-framework-nav-sub-link-line-height: var(--kraken-framework-default-desktop-sub-nav-line-height);
    --kraken-framework-nav-sub-link-font-color: var(--kraken-framework-regular-text-color);
    --kraken-framework-nav-sub-link-font-hover-color:  var(--kraken-framework-accent-color);
    --kraken-framework-nav-sub-link-font-active-color: var(--kraken-framework-accent-color);
    --kraken-framework-nav-sub-link-font-focus-color: var(--kraken-framework-accent-color);
    --kraken-framework-nav-sub-link-background-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-hover-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-active-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-link-background-focus-color: var(--kraken-framework-offwhite-color);
    --kraken-framework-nav-sub-indicator-pos-type: relative;
    --kraken-framework-nav-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-indicator-pos-right: unset;
    --kraken-framework-nav-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-indicator-width: 16px;
    --kraken-framework-nav-sub-indicator-height: 16px;
    --kraken-framework-nav-sub-sub-link-padding: 0.3rem 0.5rem;
    --kraken-framework-nav-sub-sub-pos-top: 0;
    --kraken-framework-nav-sub-sub-pos-left: 100%;
    --kraken-framework-nav-sub-sub-indicator-pos-type: absolute;
    --kraken-framework-nav-sub-sub-indicator-pos-top: unset;
    --kraken-framework-nav-sub-sub-indicator-pos-right: 0;
    --kraken-framework-nav-sub-sub-indicator-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kraken-framework-nav-sub-sub-indicator-width: 16px;
    --kraken-framework-nav-sub-sub-indicator-height: 16px;
    z-index: z('kraken-navigation-primary');
}


.kraken-navigation--secondary {
    --kraken-framework-nav-gap: 1rem;
    --kraken-framework-nav-link-font-size: .875rem;
    --kraken-framework-nav-link-font-weight: 700;
}


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

.kraken-footer {
    --kraken-framework-footer-background: var(--kraken-framework-palette-03);
    background-image: url("https://www.datoff.com/wp-content/uploads/2025/07/footer-watermark-thick-scaled.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 0% 100%;
    padding-top: 75px;
    padding-bottom: 75px;

    .kraken-navigation__list .menu-item a {
        font-size: 0.9rem;
    }

    .kraken-social-media--footer {

        .kraken-social-media__list {
            gap: 1rem;

            .kraken-social-media__link--LinkedIn {
                padding: 4px;
                background-color: #000000;
                border-radius: 4px;
            }
            .kraken-social-media__link--LinkedIn:hover, .kraken-social-media__link--LinkedIn:focus {
                background-color: var(--kraken-framework-accent-color);
            }

            .kraken-social-media__link--Facebook {
                color: #000000;
            }
            .kraken-social-media__link--Facebook:hover,  .kraken-social-media__link--Facebook:focus {
                color: var(--kraken-framework-accent-color);
            }
        }

    }

    .kraken-navigation--extra-01 {
            --kraken-framework-nav-link-padding: 0.5rem 0;
            --kraken-framework-nav-link-font-weight: 700;
    }

}

.kraken-footer__col--01 {flex:2;}
.kraken-logo__image--footer {margin-bottom: 25px;}

@media only screen and (max-width: 991px) {
    .kraken-logo__image--footer {
        margin: 0 auto 25px auto;
    }
}


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

/*
Homepage Projects Area
*/
.projects-heading-outer > .kt-inside-inner-col {
    background-color: #f5f5f5;
}

.projects-heading .kt-inside-inner-col:after {
    content: "";
    display: block;
    position: absolute;
    top: 0%;
    height: 100%;
    width: 100vw;
    background-color: #f5f5f5;
    /* right: calc(100% + 1.5rem); */
    right: 100%;
    z-index: 10;
}

@media only screen and (max-width: 767px) {
    .projects-heading-outer > .kt-inside-inner-col {
        background-color: transparent;
    }

    .projects-heading .kt-inside-inner-col:after {
        background-color: transparent;
    }
}


/*--------------------
Homepage Call Out
----------------------*/
.custom-callout {
    --custom-callout-overlay-color: rgba(0, 0, 0, 0.4);

    position: relative; /* This ensures the hover effect works on the parent container */
    
    .wp-block-kadence-column {
      z-index: 2 !important;
    }

    .wp-block-image.projects-callout-datoff-icon {
        margin: 1rem;
    }
  
    /*
    image used in background 
    */
    figure.project-cta-background-image {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transition: filter 0.75s ease;
      overflow: hidden;
      
      img {
        object-fit: cover;  /* Ensures the image covers the container */
        width: 100%;
        height: 100%;
        transition: transform 0.5s ease-out; /* Smooth transition for scaling */
        filter: grayscale(100%);
        transform: scale(1); /* Set initial scale to 1 */
      }
    }
  
    /* Apply effects on hover */
    &:hover figure.project-cta-background-image img {
        transform: scale(1.05); /* Slightly enlarge the image */
        filter: grayscale(0%); /* Zoom effect */
    }

    /* overlay */
    figure.project-cta-background-image::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--custom-callout-overlay-color); /* black overlay */
        mix-blend-mode: multiply;
        pointer-events: none;
        z-index: 1; /* Make sure overlay is above the image */
    }
}






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

/*-----------------
Kadence Blocks
------------------*/
/*
Testimonials Block
*/
.kt-testimonial-media-inner-wrap .kadence-testimonial-image-intrisic {
	padding-bottom: 0 !important;
	height: auto !important;
}

.kt-testimonial-media-inner-wrap .kt-testimonial-image {
	background-size: auto !important;
	height: auto !important;
	position: relative !important;
}

.kt-testimonial-title {
    font-size: clamp(1.8rem, 2.3077vw + 1.3385rem, 2.8rem);
    line-height: 1.1;
}

.kt-testimonial-meta-wrap {margin-top: 25px !important;}

@media only screen and (max-width: 767px) {
    .kt-testimonial-content {font-size: 0.9rem;}
    .kt-testimonial-meta-wrap {flex-direction: column !important;}
    .kt-testimonial-meta-name-wrap {
        text-align: center !important;
        margin-top: 10px;
    }
}

/*-----------------
Gravity Forms
------------------*/
.ginput_container input, .ginput_container textarea {
    border-radius: 0 !important;
    border-color: #e5e9e9 !important;
    background-color: #f1f2f2 !important;
}
input.gfield-choice-input {border-color: #ec1c24 !important;}
input.gform_button {
    border-radius: 0 !important;
    background-color: #ec1c24 !important;
    font-weight: 700 !important;
    font-style: italic !important;
    padding: 10px 30px !important;
}


/*------------------
Homepage Hero
--------------------*/
.homepage-hero_text {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.75rem, 9.5833vw + -.1667rem, 7.5rem);
    color: #fff;
    font-weight: 800;
    line-height: 1.1;
}

.homepage-hero_text--red {
    display: inline-block;
    background-color: #ec1c24;
    padding: 0 0.1em .025em;
    line-height: 1;
}

.image-bg-cover-row {height: 100%;}

.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-full-width, 
.image-full-width img {
    width:100%;
}




/*==============================
11.0 KRAKEN TEMPLATE PAGES
================================*/

/*---------------
Privacy
-----------------*/
.page-template-tp-privacy-policy {

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.25rem;
    }

}

/*---------------
Terms
-----------------*/
.page-template-tp-terms-of-use {

    h2 {
        font-size: 1.75rem;
    }

        h3 {
        font-size: 1.25rem;
    }
}

/*---------------
Accessibility
-----------------*/
.page-template-tp-accessibility-statement {

    h2 {
        font-size: 1.75rem;
    }
}

/*---------------
Site Map
-----------------*/




/*==============================
12.0 WEB FONTS
================================*/