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

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

:root {
    /* -- Header -- */
    --kf-header-max-width: 100%;
    --kf-header-padding: 0;
    --kf-header-inner-max-width: 100%;
    --kf-header-inner-padding: 0;
    --kf-header-row-max-width: 100%;

    /* -- Main -- */
    --kf-main-inner-padding-top: var(--kf-page-padding-top);
    --kf-main-inner-padding-bottom: var(--kf-page-padding-bottom);
    --kf-main-inner-padding-left: var(--kf-global-padding-left);
    --kf-main-inner-padding-right: var(--kf-global-padding-right);
    --kf-entry-header-max-width: var(--kf-max-width);
    --kf-entry-content-max-width: var(--kf-max-width);
    --kf-entry-footer-max-width: var(--kf-max-width);

    /* -- Footer -- */
    --kf-footer-max-width: 100%;
    --kf-footer-padding: 0;
    --kf-footer-inner-max-width: 100%;
    --kf-footer-inner-padding: 0;
    --kf-footer-row-max-width: 100%;

    /* -- Card -- */
    --kf-post-padding: 1.5rem;
    --kf-post-border-radius: 0.5rem;

    /* - Post Image - */
    --kf-post-image-border-radius: 0.3rem;
    --kf-post-image-margin: 0 0 1.5rem 0;
    --kf-post-image-padding: 0;

    /* - Excerpt - */
    --kf-post-excerpt-margin: 0 0 1rem 0;
    --kf-post-excerpt-padding: 0;

    /* - Tags - */
    --kf-tag-label-font-size: 0.8rem;
    --kf-tag-label-font-weight: 700;
    --kf-tag-padding: 0.2rem 0.5rem;

    /* - Categories - */
    --kf-categories-padding: 0.2rem 0.5rem;
    --kf-categories-border: 1px solid var(--kf-border);
    --kf-categories-border-radius: 0.5rem;
    --kf-categories-font-size: 0.7rem;
    --kf-categories-line-height: 1.1;

    /* - Single Image - */
    --kf-single-post-image-aspect-ratio: 900 / 506;
    --kf-single-post-image-margin: 1.5rem 0 1.5rem 0;
    --kf-single-post-image-padding: 0;
    --kf-single-post-image-border-radius: 0.3rem;

    /* Post Navigation */
    --kf-post-navigation-padding: 0.3rem 0.9rem;
    --kf-post-navigation-border-radius: 0.3rem;

    /* Address */
    --kf-address-padding: 0.3rem 0;

    /* Phone */
    --kf-phone-padding: 0;

    /* Email */
    --kf-email-padding: 0;

    /* Splash Credit */
    --kf-splash-credit-font-size: 0.8rem;
}

.kf-navigation--mobile {
    /* Navigation */
    --kf-navigation-display: flex;
    --kf-navigation-flex-direction: column;
    --kf-navigation-flex-gap: 1rem;
    --kf-navigation-flex-justify: flex-start;
    --kf-navigation-link-align: flex-start;
    --kf-navigation-link-padding: 0.5rem 0.5rem;
    --kf-navigation-link-margin: 0;

    /* Sub Navigation */
    --kf-navigation-subnav-flex-direction: column;
    --kf-navigation-subnav-flex-justify: flex-start;
    --kf-navigation-subnav-link-align: flex-start;
    --kf-navigation-subnav-flex-gap: 1rem;
    --kf-navigation-subnav-position: relative;
    --kf-navigation-subnav-top: unset;
    --kf-navigation-subnav-left: unset;
    --kf-navigation-subnav-subnav-top: unset;
    --kf-navigation-subnav-subnav-left: unset;
    --kf-navigation-subnav-width: 100%;
    --kf-navigation-subnav-margin: 1rem 0 0 0;
    --kf-navigation-subnav-link-padding: 0.3rem 0.5rem;
    --kf-navigation-subnav-link-margin: 0;
    --kf-navigation-caret: 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");
    --kf-navigation-caret-width: 25px;
    --kf-navigation-caret-height: 25px;
    --kf-navigation-caret-margin: auto;
}

.kf-navigation--hamburger {
    /* Navigation */
    --kf-navigation-display: flex;
    --kf-navigation-flex-direction: column;
    --kf-navigation-flex-gap: 1rem;
    --kf-navigation-flex-justify: flex-start;
    --kf-navigation-link-align: flex-start;
    --kf-navigation-link-padding: 0.5rem 0.5rem;
    --kf-navigation-link-margin: 0;

    /* Sub Navigation */
    --kf-navigation-subnav-flex-direction: column;
    --kf-navigation-subnav-flex-justify: flex-start;
    --kf-navigation-subnav-link-align: flex-start;
    --kf-navigation-subnav-flex-gap: 1rem;
    --kf-navigation-subnav-position: relative;
    --kf-navigation-subnav-top: unset;
    --kf-navigation-subnav-left: unset;
    --kf-navigation-subnav-subnav-top: unset;
    --kf-navigation-subnav-subnav-left: unset;
    --kf-navigation-subnav-width: 100%;
    --kf-navigation-subnav-margin: 1rem 0 0 0;
    --kf-navigation-subnav-link-padding: 0.3rem 0.5rem;
    --kf-navigation-subnav-link-margin: 0;
    --kf-navigation-caret: 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");
    --kf-navigation-caret-width: 25px;
    --kf-navigation-caret-height: 25px;
    --kf-navigation-caret-margin: auto;
}

.kf-navigation--primary {
    /* Navigation */
    --kf-navigation-display: flex;
    --kf-navigation-flex-direction: row;
    --kf-navigation-flex-gap: 1rem;
    --kf-navigation-flex-justify: flex-start;
    --kf-navigation-link-align: center;
    --kf-navigation-link-padding: 0.5rem 0.5rem;
    --kf-navigation-link-margin: 0;

    /* Sub Navigation */
    --kf-navigation-subnav-flex-direction: column;
    --kf-navigation-subnav-flex-justify: flex-start;
    --kf-navigation-subnav-link-align: flex-start;
    --kf-navigation-subnav-flex-gap: 0.5rem;
    --kf-navigation-subnav-position: absolute;
    --kf-navigation-subnav-top: 100%;
    --kf-navigation-subnav-left: 0;
    --kf-navigation-subnav-subnav-top: 0;
    --kf-navigation-subnav-subnav-left: 100%;
    --kf-navigation-subnav-width: 200px;
    --kf-navigation-subnav-margin: 0;
    --kf-navigation-subnav-link-padding: 0.3rem 0.5rem;
    --kf-navigation-subnav-link-margin: 0;
    --kf-navigation-caret: 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");
    --kf-navigation-caret-width: 16px;
    --kf-navigation-caret-height: 16px;
    --kf-navigation-caret-margin: auto;
}

.kf-navigation--secondary {
    /* Navigation */
    --kf-navigation-display: flex;
    --kf-navigation-flex-direction: row;
    --kf-navigation-flex-gap: 1rem;
    --kf-navigation-flex-justify: flex-start;
    --kf-navigation-link-align: center;
    --kf-navigation-link-padding: 0.5rem 0.5rem;
    --kf-navigation-link-margin: 0;

    /* Sub Navigation */
    --kf-navigation-subnav-flex-direction: column;
    --kf-navigation-subnav-flex-justify: flex-start;
    --kf-navigation-subnav-link-align: flex-start;
    --kf-navigation-subnav-flex-gap: 0.5rem;
    --kf-navigation-subnav-position: absolute;
    --kf-navigation-subnav-top: 100%;
    --kf-navigation-subnav-left: 0;
    --kf-navigation-subnav-subnav-top: 0;
    --kf-navigation-subnav-subnav-left: 100%;
    --kf-navigation-subnav-width: 200px;
    --kf-navigation-subnav-margin: 0;
    --kf-navigation-subnav-link-padding: 0.3rem 0.5rem;
    --kf-navigation-subnav-link-margin: 0;
    --kf-navigation-caret: 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");
    --kf-navigation-caret-width: 16px;
    --kf-navigation-caret-height: 16px;
    --kf-navigation-caret-margin: auto;
}

.kf-navigation--footer {
    /* Navigation */
    --kf-navigation-display: flex;
    --kf-navigation-flex-direction: column;
    --kf-navigation-flex-gap: 0.5rem;
    --kf-navigation-flex-justify: center;
    --kf-navigation-link-align: center;
    --kf-navigation-link-padding: 0.3rem 0;
    --kf-navigation-link-margin: 0;

    /* Sub Navigation */
    --kf-navigation-subnav-flex-direction: column;
    --kf-navigation-subnav-flex-justify: flex-start;
    --kf-navigation-subnav-link-align: flex-start;
    --kf-navigation-subnav-flex-gap: 0.5rem;
    --kf-navigation-subnav-position: absolute;
    --kf-navigation-subnav-top: 100%;
    --kf-navigation-subnav-left: 0;
    --kf-navigation-subnav-subnav-top: 0;
    --kf-navigation-subnav-subnav-left: 100%;
    --kf-navigation-subnav-width: 200px;
    --kf-navigation-subnav-margin: 0;
    --kf-navigation-subnav-link-padding: 0.3rem 0.5rem;
    --kf-navigation-subnav-link-margin: 0;
    --kf-navigation-caret: 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");
    --kf-navigation-caret-width: 16px;
    --kf-navigation-caret-height: 16px;
    --kf-navigation-caret-margin: auto;
}

.kf-navigation--legal {
    /* Navigation */
    --kf-navigation-display: flex;
    --kf-navigation-flex-direction: column;
    --kf-navigation-flex-gap: 0.5rem;
    --kf-navigation-flex-justify: center;
    --kf-navigation-link-align: center;
    --kf-navigation-link-padding: 0.3rem 0.5rem;
    --kf-navigation-link-margin: 0;

    /* Sub Navigation */
    --kf-navigation-subnav-flex-direction: column;
    --kf-navigation-subnav-flex-justify: flex-start;
    --kf-navigation-subnav-link-align: flex-start;
    --kf-navigation-subnav-flex-gap: 0.5rem;
    --kf-navigation-subnav-position: absolute;
    --kf-navigation-subnav-top: 100%;
    --kf-navigation-subnav-left: 0;
    --kf-navigation-subnav-subnav-top: 0;
    --kf-navigation-subnav-subnav-left: 100%;
    --kf-navigation-subnav-width: 200px;
    --kf-navigation-subnav-margin: 0;
    --kf-navigation-subnav-link-padding: 0.3rem 0.5rem;
    --kf-navigation-subnav-link-margin: 0;
    --kf-navigation-caret: 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");
    --kf-navigation-caret-width: 16px;
    --kf-navigation-caret-height: 16px;
    --kf-navigation-caret-margin: auto;
}

.kf-header {
    /* Phone */
    --kf-phone-padding: 0 0.3rem 0 0;

    /* Email */
    --kf-email-padding: 0 0 0 0.3rem;
}

.kf-footer {
    /* Address */
    --kf-address-padding: 0.3rem 0;

    /* Phone */
    --kf-phone-padding: 0.3rem 0;

    /* Email */
    --kf-email-padding: 0.3rem 0;
}

@media (min-width: 992px) {
    :root {
        /* Splash Credit */
        --kf-splash-credit-font-size: 0.8rem;
    }

    .kf-navigation--footer {
        /* Navigation */
        --kf-navigation-flex-justify: flex-start;
        --kf-navigation-flex-gap: 0;
    }

    .kf-navigation--legal {
        /* Navigation */
        --kf-navigation-display: flex;
        --kf-navigation-flex-direction: row;
        --kf-navigation-flex-justify: flex-start;
        --kf-navigation-flex-gap: 1rem;
        --kf-navigation-link-padding: 0.5rem 0.5rem;
    }
}








/* ========================================== */
/*                    ROOT                    */
/* ========================================== */

:root {
    /* -- Spacing -- */
    /* --global-content-edge-padding: var(--kraken-framework-site-padding-left); */


    /* -- Typography -- */
    /* ---------------- */
    --font-size-small: clamp(.875rem, .2083vw + .8333rem, 1rem) !important;
    --font-size-medium: clamp(1.125rem, .2083vw + 1.0833rem, 1.25rem) !important;
    --font-size-large: clamp(1.5rem, .8333vw + 1.3333rem, 2rem) !important;
    --font-size-x-large: clamp(2.25rem, .4167vw + 2.1667rem, 2.5rem) !important;

    --lh-small: 1.3;
    --lh-medium: 1.3;
    --lh-large: 1.3;
    --lh-x-large: 1.3;


    /* -- Header Variables -- */
    /* ---------------------- */
    /* --header-transparent-background-color: rgba(0,0,0,0);
    --header-transparent-background-color-scroll: rgba(255,255,255,1); */


    /* -- Navigation Variables -- */
    /* -------------------------- */
    /* Transparent Primary */  
    /* --navigation-primary-transparent-font-color: rgba(0,0,0,1);
    --navigation-primary-transparent-scroll-font-color: rgba(0,0,0,1); */
  
    /* - Legal - */
    /* --navigation-legal-font-desktop-size: 0.675rem;
    --navigation-legal-font-color: white;
    --navigation-legal-font-hover-color: white;
    --navigation-legal-font-focus-color: white;
    --navigation-legal-font-active-color: white; */

    /* -Splash Credit Styles - */
    /* .kraken-splash-credit {
    --kraken-framework-credit-color: white;
    --kraken-framework-credit-hover-color: white;
    --kraken-framework-credit-logo-fill: #8e8e8e;
    } */


    /* -- Footer Variables -- */
    /* --footer-background: #232323;
    --footer-color: #fff; */
}





/* ========================================== */
/*                 TYPOGRAPHY                 */
/* ========================================== */
h1, .h1 {
    --kraken-framework-h1-margin: .5rem 0;
    --kraken-framework-h1-font-color: var(--kraken-framework-strong-text-color);
    --kraken-framework-1-font-family: var(--kraken-framework-primary-font-family);
    --kraken-framework-h1-font-size: clamp(2.25rem, 2.5926vw + 1.6667rem, 4rem);
    --kraken-framework-h1-font-line-height: 1.3;
    --kraken-framework-h1-font-weight: 600;
}

h2, .h2 {
    --kraken-framework-h2-margin: 1.5rem 0;
    --kraken-framework-h2-font-color: var(--kraken-framework-strong-text-color);
    --kraken-framework-h2-font-family: var(--kraken-framework-primary-font-family);
    --kraken-framework-h2-font-size: clamp(1.75rem, .9259vw + 1.5833rem, 2.25rem);
    --kraken-framework-h2-font-line-height: 1.3;
    --kraken-framework-h2-font-weight: 600;
}

h3, .h3 {
    --kraken-framework-h3-margin: 1.5rem 0;
    --kraken-framework-h3-font-color: var(--kraken-framework-strong-text-color);
    --kraken-framework-h3-font-family: var(--kraken-framework-primary-font-family);
    --kraken-framework-h3-font-size: 1.125rem;
    --kraken-framework-h3-font-line-height: 1.3;
    --kraken-framework-h3-font-weight: 600;
}

h4, .h4 {
    --kraken-framework-h4-margin: 1.5rem 0;
    --kraken-framework-h4-font-color: var(--kraken-framework-strong-text-color);
    --kraken-framework-h4-font-family: var(--kraken-framework-primary-font-family);
    --kraken-framework-h4-font-size: 1rem;
    --kraken-framework-h4-font-line-height: 1.3;
    --kraken-framework-h4-font-weight: 600;
}

h5, .h5 {
    --kraken-framework-h5-margin: 1.5rem 0;
    --kraken-framework-h5-font-color: var(--kraken-framework-strong-text-color);
    --kraken-framework-h5-font-family: var(--kraken-framework-primary-font-family);
    --kraken-framework-h5-font-size: 1rem;
    --kraken-framework-h5-font-line-height: 1.3;
    --kraken-framework-h5-font-weight: 600;
}

h6, .h6 {
    --kraken-framework-h6-margin: 1.5rem 0;
    --kraken-framework-h6-font-color: var(--kraken-framework-strong-text-color);
    --kraken-framework-h6-font-family: var(--kraken-framework-primary-font-family);
    --kraken-framework-h6-font-size: 1rem;
    --kraken-framework-h6-font-line-height: 1.3;
    --kraken-framework-h6-font-weight: 600;
}


/* h1 + h2 {
    margin-top:.25rem;
} */

strong {
    font-weight: 700;
}




/* ========================================== */
/*                   SPACING                  */
/* ========================================== */
/* body .has-global-padding {
    padding-right: var(--kraken-framework-site-padding-right);
    padding-left: var(--kraken-framework-site-padding-left);
}
@media only screen and (max-width: 767px) {
    :root {
        --kraken-framework-site-padding-right: 1.5rem !important;
        --kraken-framework-site-padding-left: 1.5rem !important;
    }
} */






/* ========================================== */
/*                     BODY                   */
/* ========================================== */

body:not(.home) {
    background-image: url(https://www.wdny.ca/wp-content/uploads/2026/03/bg-body.svg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

/* --- Subpage Title --- */
body:not(.home) .page-title {
    /* margin-top: clamp(
        .5rem,
        calc(.5rem + (16rem - .5rem) * ((100vw - 300px) / (1920px - 300px))),
        16rem
    ) !important; */
    margin-bottom: 4rem;

    p {
        color: #a12b2a;
        font-weight: 600;
        position: relative;
        text-transform: uppercase;
        letter-spacing: 1px;

        &:before {
            position: absolute;
            content: '';
            width: 50px;
            height:5px;
            background: linear-gradient(90deg, #8dc63f 0%, #00a9ff 100%);
            top: 0;
            left: 0;
            transform: translateY(-20px);
        }
    }

    h1 {
        margin-block-start: 0 !important;
    }
}







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

.body--transparent .kf-header {
  .kf-header__row {
    &.kf-header__row--top,
    &.kf-header__row--main,
    &.kf-header__row--bottom { 
      background-color: var(--kraken-framework-solid-header-bottom-background);
      color: var(--kraken-framework-solid-header-bottom-color);
    }
  }
}






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

.kf-footer {
    background-color: #232323;
    background-image: url(https://www.wdny.ca/wp-content/uploads/2026/03/bg-footer.svg);
    background-position: 70% top;
    background-repeat: no-repeat;
    background-size: 900px;
    font-size:.9rem;
    color: #fff;
}

.kf-footer .kf-list .kf-list__item {
    font-size:.9rem;
    color: #fff;
    line-height: 1.6;
}

/* .kraken-footer .kraken-phone-number {
    --kraken-framework-phone-number-color: #ffffff;
    --kraken-framework-phone-number-hover-color: #cecece;
    --kraken-framework-phone-number-focus-color: #cecece;
    --kraken-framework-phone-number-font-size: 0.9rem;
}

.kraken-footer .kraken-email {
    --kraken-framework-email-link-color: #ffffff;
    --kraken-framework-email-link-hover-color: #cecece;
    --kraken-framework-email-link-focus-color: #cecece;
    --kraken-framework-email-link-font-size: 0.9rem;
}

.kraken-address {
    --kraken-framework-address-font-size: 0.9rem;
} */




/* =========================================== */
/*                   BUTTONS                   */
/* =========================================== */

/* =========================================
   Gradient Outline Button for WordPress
   - Transparent button
   - 4px rounded gradient outline
   - Black text by default
   - White text modifier available
   - Works whether the custom class is added to:
     1) the Button block wrapper (.wp-block-button), or
     2) the inner link (.wp-block-button__link)
   ========================================= */


/* =========================================
   Base button
   ========================================= */

.wp-block-button.gradient-outline-btn .wp-block-button__link,
.wp-block-button__link.gradient-outline-btn {

    --gradient-outline-btn-border-width: 4px;
    --gradient-outline-btn-radius: 999px;
    --gradient-outline-btn-gradient: linear-gradient(90deg, #8dc63f 0%, #00a9ff 100%);
    --gradient-outline-btn-text-color: #000;

    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;

    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 1.25em 2.5em !important;
    border-radius: var(--gradient-outline-btn-radius) !important;

    color: var(--gradient-outline-btn-text-color) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1.2;

    cursor: pointer;
    overflow: hidden;

    transition:
        background 0.35s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


/* =========================================
   Gradient outline ring
   ========================================= */

.wp-block-button.gradient-outline-btn .wp-block-button__link::before,
.wp-block-button__link.gradient-outline-btn::before {

    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--gradient-outline-btn-border-width);
    background: var(--gradient-outline-btn-gradient);
    pointer-events: none;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}


/* =========================================
   Hover / focus / active
   ========================================= */

.wp-block-button.gradient-outline-btn .wp-block-button__link:hover,
.wp-block-button__link.gradient-outline-btn:hover {

    background: var(--gradient-outline-btn-gradient) !important;
    background-color: transparent !important;
    color: var(--gradient-outline-btn-text-color) !important;
    text-decoration: none !important;
}

.wp-block-button.gradient-outline-btn .wp-block-button__link:focus-visible,
.wp-block-button__link.gradient-outline-btn:focus-visible {

    outline: 2px solid rgba(0, 169, 255, 0.45);
    outline-offset: 3px;
}

.wp-block-button.gradient-outline-btn .wp-block-button__link:active,
.wp-block-button__link.gradient-outline-btn:active {

    transform: translateY(1px);
}


/* =========================================
   Text color modifiers
   ========================================= */

.wp-block-button.gradient-outline-btn.gradient-outline-btn--text-black .wp-block-button__link,
.wp-block-button__link.gradient-outline-btn.gradient-outline-btn--text-black {

    --gradient-outline-btn-text-color: #000;
}

.wp-block-button.gradient-outline-btn.gradient-outline-btn--text-white .wp-block-button__link,
.wp-block-button__link.gradient-outline-btn.gradient-outline-btn--text-white {

    --gradient-outline-btn-text-color: #fff;
}


/* =========================================
   Optional radius modifiers
   ========================================= */

.wp-block-button.gradient-outline-btn.gradient-outline-btn--radius-md .wp-block-button__link,
.wp-block-button__link.gradient-outline-btn.gradient-outline-btn--radius-md {

    --gradient-outline-btn-radius: 12px;
}

.wp-block-button.gradient-outline-btn.gradient-outline-btn--radius-pill .wp-block-button__link,
.wp-block-button__link.gradient-outline-btn.gradient-outline-btn--radius-pill {

    --gradient-outline-btn-radius: 999px;
}














/* =========================================== */
/*                PAGE SPECIFIC                */
/* =========================================== */

/* ----------------
Homepage 
------------------- */
.groupeee {
    position: relative;

    @media (min-width: 1025px) {
      position: absolute;
      top:0;
      right:0;
      bottom: 0;
      left: 0;
    }
}


.homepage-hero-wrap {
    position: relative;

    .homepage-hero-content-wrap {
        display: block;
        align-items: center;
        

        /* @media (min-width: 1025px) {
            display: flex;
            align-items: start;
            position: absolute;
            top:0;
            right:0;
            bottom: 0;
            left: 0;
            height: 100%;
        } */

        .homepage-hero-content-inner-wrap {
          width: 100%;

            position: relative; /* NEW */

            

            @media (min-width: 1025px) {
              position: absolute; /* NEW */
            }
        }
    }

}

/* --- Heading styles for the H1 created with HTML Block --- */
h1.homepage-h1 {
    margin-bottom: 1rem;
    text-align: right;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: normal;

    span.small-text {
        display: block;
        color: #a12b2a;
    }

    span.gradient-text {
        font-size: clamp(4rem, 11.8812vw + -3.3663rem, 10rem);
        text-transform: uppercase;
        line-height: .8;

        background: linear-gradient(90deg, #8dc63f 0%, #00a9ff 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* Address/Hours styles for the p within the Homepage Hero */
.hero-address-hours {
        font-size: clamp(.8rem, .5vw + .7rem, 1rem) !important;
    }

@media screen and (min-width: 2220px) {
   .hero-address-hours {
        font-size: 18px !important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .homepage-hero-wrap {
    min-height: 100px !important;
  }
}


/* --- Feature CTA --- */
.feature-cta {
    position: relative;
    padding-top: 2em;
    padding-bottom: 2em;
}

.feature-cta::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 800px;
    height: 2px;
    background: linear-gradient(to right, #8dc63f, #00a9ff);
}

.feature-cta-image-stack {
    position: relative;
    width: 100%;
}

.feature-cta-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity .35s ease;
}

.feature-cta-image.is-active {
    opacity: 1;
    position: relative;
}

.feature-cta-image img {
    border: 20px solid #fff;
    border-radius: 50%;
}









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

/* =========================================================
   STANDALONE BOTTOM MASK — SIMPLE / EXPLICIT
   Use this for a single section with only a bottom mask.

   WHAT THIS VERSION DOES
   ---------------------------------------------------------
   1. The mask does NOT tile.
   2. Supports different native mask heights (ex: 100, 450).
   3. The mask will never grow taller than the indicated max.
   4. The mask can scale down responsively.
   5. When scaling down, the mask is allowed to squash and
      does NOT need to preserve its original aspect ratio.
   ========================================================= */

/* Wrapper */
.wp-mask-stack {
  position: relative;
  overflow: visible;
}

.wp-mask-stack__sections {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: visible !important;

  /* --------------------------------
     MASK DIMENSIONS
     --------------------------------
     Native SVG size reference only.
     Width is mainly informational here.
     Height is used as the maximum rendered height.
  */
  --mask-image-width: 2560;
  --mask-image-height: 100;

  /* --------------------------------
     RENDER CONTROLS
     --------------------------------
     The mask is rendered once only, centered at the bottom.

     Width:
     - never larger than the SVG's intended width
     - shrinks with the container

     Height:
     - never taller than the intended max height
     - scales down responsively
     - can squash independently of width
  */
  --mask-render-width: min(calc(var(--mask-image-width) * 1px), 100cqw);

  /* Max allowed rendered height */
  --mask-height-max: calc(var(--mask-image-height) * 1px);

  /* Responsive height control
     --------------------------------
     This is intentionally NOT proportional.
     It allows the mask to squash down on smaller viewports.

     Default behaviour:
     - grows with container width
     - tops out at native height
     - can compress below native ratio
  */
  --mask-height-fluid: calc(100cqw * (var(--mask-image-height) / var(--mask-image-width)));

  /* Final rendered height
     --------------------------------
     Never exceeds native height.
     Can scale down responsively.
  */
  --mask-height: min(var(--mask-height-max), var(--mask-height-fluid));
}

/* Optional size presets
   --------------------------------
   These set the maximum height cap.
*/
.wp-mask-stack__sections.mask-size-100 {
  --mask-image-height: 100;
}

.wp-mask-stack__sections.mask-size-450 {
  --mask-image-height: 450;
}

/* --------------------------------
   OPTIONAL HEIGHT TUNING PRESETS
   --------------------------------
   Use these if you want more or less vertical squash.
   They override the default fluid height behaviour.
*/

/* Slight squash */
.wp-mask-stack__sections.mask-squash-soft {
  --mask-height-fluid: clamp(60px, 12cqw, calc(var(--mask-image-height) * 1px));
}

/* Medium squash */
.wp-mask-stack__sections.mask-squash-medium {
  --mask-height-fluid: clamp(60px, 16cqw, calc(var(--mask-image-height) * 1px));
}

/* Stronger squash */
.wp-mask-stack__sections.mask-squash-strong {
  --mask-height-fluid: clamp(60px, 20cqw, calc(var(--mask-image-height) * 1px));
}

/* Base section */
.wp-mask-section {
  position: relative;
  overflow: visible !important;
  margin: 0 !important;
  --mask-bottom-image: none;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
}

/* Shape files
   --------------------------------
   Existing 2560 x 100 shapes
*/
.mask-shape-bottom-1 {
  --mask-bottom-image: url("https://www.wdny.ca/wp-content/themes/kraken-framework-child/assets/images/mask-shape-bottom-1-2560.svg");
}

.mask-shape-bottom-2 {
  --mask-bottom-image: url("https://www.wdny.ca/wp-content/themes/kraken-framework-child/assets/images/mask-shape-bottom-2-2560.svg");
}

.mask-shape-bottom-3 {
  --mask-bottom-image: url("https://www.wdny.ca/wp-content/themes/kraken-framework-child/assets/images/mask-shape-bottom-3-2560.svg");
}

.mask-shape-bottom-4 {
  --mask-bottom-image: url("https://www.wdny.ca/wp-content/themes/kraken-framework-child/assets/images/mask-shape-bottom-4-2560.svg");
}

/* Example:
   If you add a new 2560 x 450 SVG, use a class like this:

.mask-shape-bottom-5 {
  --mask-bottom-image: url("https://www.wdny.ca/wp-content/themes/kraken-framework-child/assets/images/mask-shape-bottom-5-2560x450.svg");
}
*/

.mask-shape-bottom-5 {
  --mask-bottom-image: url("https://www.wdny.ca/wp-content/themes/kraken-framework-child/assets/images/mask-shape-bottom-1-2560x450.svg");
}

/* =========================================================
   BOTTOM MASK ONLY
   - single non-tiling image
   - bottom centered
   ========================================================= */

.mask-box-bottom-only {
  padding-bottom: var(--mask-height);

  mask-image:
    linear-gradient(
      black 0,
      black calc(100% - var(--mask-height)),
      transparent calc(100% - var(--mask-height))
    ),
    var(--mask-bottom-image);

  mask-repeat: no-repeat, no-repeat;
  mask-position: top left, bottom center;
  mask-size:
    100% 100%,
    var(--mask-render-width) var(--mask-height);

  -webkit-mask-image:
    linear-gradient(
      black 0,
      black calc(100% - var(--mask-height)),
      transparent calc(100% - var(--mask-height))
    ),
    var(--mask-bottom-image);

  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: top left, bottom center;
  -webkit-mask-size:
    100% 100%,
    var(--mask-render-width) var(--mask-height);
}








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




/* Legal Pages - Padding Top and Bottom */

/* .page-id-12, .page-id-13, .page-id-14, .page-id-15 {
    .kraken-main {
        padding-top:clamp(0.5rem, calc(.5rem + (16rem - .5rem) * ((100vw - 300px) / (1920px - 300px))), 16rem) !important;
        padding-bottom: 6rem !important;
    }
}

.page-id-12, .page-id-13, .page-id-14, .page-id-15 {
    .kraken-main {
        h1 {position: relative;}
    }
}

.page-id-12, .page-id-13, .page-id-14, .page-id-15 {
    .kraken-main {
        h1::before {
            content: "Legal";
            position: absolute;
            top: -23px;
            left: 0;
            color: #a12b2a;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 1rem;
        }

        h1::after {
            position: absolute;
            content: '';
            width: 50px;
            height: 5px;
            background: linear-gradient(90deg, #8dc63f 0%, #00a9ff 100%);
            top: -23px;
            left: 0;
            transform: translateY(-20px);
        }
    }
} */