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

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

END <<< ***/




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

/*----------------
Typography
------------------*/
h1, .h1 {
    --kraken-framework-h1-margin: 1.5rem 0;
    --kraken-framework-h1-font-color: var(--kraken-framework-strong-text-color);
    --kraken-framework-h1-font-family: var(--kraken-framework-primary-font-family);
    --kraken-framework-h1-font-size: clamp(2.5rem, 2.4107vw + 2.0714rem, 4rem);
    --kraken-framework-h1-font-line-height: 1;
    --kraken-framework-h1-font-weight: 500;
}

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(2rem, 2.0089vw + 1.6429rem, 3.25rem);
    --kraken-framework-h2-font-line-height: 1.1;
    --kraken-framework-h2-font-weight: 500;
}

h3, .h3 {
    --kraken-framework-h3-margin: 1.25rem 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: clamp(1.75rem, .8036vw + 1.6071rem, 2.25rem);
    --kraken-framework-h3-font-line-height: 1.1;
    --kraken-framework-h3-font-weight: 500;
}

h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
    margin-top:0;
}

p, ul, ol, pre, table, blockquote {
    margin: 1.75rem 0;
}

/* 
WordPress Preset Overrides 
*/
.has-x-large-font-size {
    --wp--preset--font-size--x-large: clamp(2.5rem, 2.4107vw + 2.0714rem, 4rem);
    line-height: 1.1;
}

.has-large-font-size {
    --wp--preset--font-size--large: clamp(2rem, 2.2098vw + 1.6071rem, 3.375rem);
    line-height: 1.1;
}

.has-medium-font-size {
    --wp--preset--font-size--medium: clamp(1.125rem, .4018vw + 1.0536rem, 1.375rem);
}



/*---------------
Links
-----------------*/
a {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}



/*----------------
Buttons
------------------*/
/* 
Solid button variables
*/
.wp-block-button {
    --btn-background: #32373c;
    --btn-border: 0;
    --btn-border-color: transparent;
    --btn-border-radius: 0;
    --btn-padding: calc(1.25em + 2px) calc(2em + 2px);
    --btn-font-size: .875rem;
    --btn-font-color: #ffffff;
    --btn-font-weight: 700;
    --btn-line-height: 1;
    
    --btn-hover-background: #000;
    --btn-hover-border-color: transparent;
    --btn-hover-font-color: #ffffff;

    &.button--green {
        --btn-background: #0c9c49;
        --btn-border-color: #0c9c49;
        --btn-font-color: #fff;
    
        --btn-hover-background: #005f35;
        --btn-hover-border-color: #005f35;
        --btn-hover-font-color: #ffffff;
    }

    &.button--white {
        --btn-background: #fff;
        --btn-border-color: #fff;
        --btn-font-color: #32373c;
    
        --btn-hover-background: #f5f5f5;
        --btn-hover-border-color: #f5f5f5;
        --btn-hover-font-color: #32373c;
    }
}

/* 
Outline button variables
*/
.wp-block-button.button--outline {
    --btn-background: transparent;
    --btn-border: 2px solid;
    --btn-border-color: #32373c;
    --btn-font-color: #32373c;

    --btn-hover-background: #000;
    --btn-hover-border-color: #32373c;
    --btn-hover-font-color: #fff;

    &.button--green {
        --btn-background: transparent;
        --btn-border-color: #0c9c49;
        --btn-font-color: #0c9c49;
    
        --btn-hover-background: #005f35;
        --btn-hover-border-color: #005f35;
        --btn-hover-font-color: #ffffff;
    }

    &.button--white {
        --btn-background: transparent;
        --btn-border-color: #fff;
        --btn-font-color: #fff;
    
        --btn-hover-background: #fff;
        --btn-hover-border-color: #fff;
        --btn-hover-font-color: #32373c;
    }
}

/* 
Solid button styling
*/
.wp-block-button  {
    position: relative;

    &:before {
        content: '';
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        background: var(--btn-hover-background);
    }

    &:after {
        content: '';
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        transform-origin: right;
        transform: scaleX(1);
        transition: transform 0.3s ease;
        background: var(--btn-background);
    }

    &:hover {
        
        &:after {
            transform-origin: right;
            transform: scaleX(0);
            z-index: 0;
        }
    }

    .wp-block-button__link.wp-element-button {
        background: transparent;
        border: var(--btn-border);
        border-radius: var(--btn-border-radius);
        padding: var(--btn-padding);
        color: var(--btn-font-color);
        font-family: inherit;
        font-size: var(--btn-font-size);
        font-style: italic;
        font-weight: var(--btn-font-weight);
        line-height: var(--btn-line-height);
        margin: 0;
        text-decoration: none;
        position: relative;
        z-index: 2;

        &:hover {
            border-color: var(--btn-hover-border-color);
            color: var(--btn-hover-font-color);
        }
    }

}

/* 
Outline button styling
*/
.wp-block-button.button--outline  {

    &:before {
        content: '';
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        transform-origin: left;
        transform: scaleX(0);
        transition: transform 0.3s ease;
        background: var(--btn-hover-background);
    }

    &:after {
        content: none;
    }

    &:hover {
        
        &:before {
            transform-origin: left;
            transform: scaleX(1);
            z-index: 0;
        }
    }

    .wp-block-button__link.wp-element-button {
        background: transparent;
        border: var(--btn-border);
        border-color: var(--btn-border-color);
        border-radius: var(--btn-border-radius);
        color: var(--btn-font-color);
        font-family: inherit;
        font-size: var(--btn-font-size);
        font-style: normal;
        font-weight: var(--btn-font-weight);
        line-height: var(--btn-line-height);
        padding: var(--btn-padding);
        margin: 0;
        text-decoration: none;
        position: relative;
        z-index: 2;
        
        &:hover {
            border-color: var(--btn-hover-border-color);
            color: var(--btn-hover-font-color);
        }
    }
}



/*----------------
Utility Classes
------------------*/
strong, .strong {
    font-weight: 600;
}

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

.hero-subpage span {
    color :pink!important;
}

.block img {
    display:block;
}

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


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

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

.kraken-header {

    /* Standard Header */
    --kraken-framework-header-row-height-top: 0;
    --kraken-framework-header-row-height-main: 130px;
    
    .kraken-header__row-inner--main {
        --kraken-framework-header-row-padding-main: 1rem var(--kraken-framework-site-padding-right) 0.5rem var(--kraken-framework-site-padding-left);
    
        .kraken-header__col--end {
            align-items: flex-end;
        }
    }

    .custom__header--nav-contact {
        display: flex;
        align-items: center;
        gap: 1rem
    }

}

.body--transparent {

    .kraken-header__row--main {
            --kraken-framework-header-transparent-main-background: rgba(0,0,0,0.4);
        }
}

/*-- Social Icons (solid header) --*/
.kraken-social-media--header {
    --kraken-framework-social-button-color: #fff;
    --kraken-framework-social-button-background-color: #231f20;
    --kraken-framework-social-button-hover-color: #fff;
    --kraken-framework-social-button-hover-background-color: var(--kraken-framework-accent-color);
    --kraken-framework-social-button-focus-color: var(--kraken-framework-accent-color);
    --kraken-framework-social-button-focus-background-color: transparent;
    --kraken-framework-social-button-border-color: transparent;
    --kraken-framework-social-button-border-hover-color: transparent;
    --kraken-framework-social-button-border-focus-color: transparent;
    --kraken-framework-social-button-border-radius: 50px;
    --kraken-framework-social-button-width: 25px;
    --kraken-framework-social-button-height: 25px;
    --kraken-framework-social-button-padding: 0.2rem;

    .kraken-social-media__link--Facebook svg {
        width: 15px!important;
        height: 15px!important;
    }
}

/*-- Social Icons (transparent header) --*/
.body--transparent {

    .kraken-social-media--header {
        --kraken-framework-social-button-color: #231f20;
        --kraken-framework-social-button-background-color: #fff;
        --kraken-framework-social-button-hover-color: #231f20;
        --kraken-framework-social-button-hover-background-color: var(--kraken-framework-accent-color);
        --kraken-framework-social-button-focus-color: var(--kraken-framework-accent-color);
        --kraken-framework-social-button-focus-background-color: transparent;
        --kraken-framework-social-button-border-color: transparent;
        --kraken-framework-social-button-border-hover-color: transparent;
        --kraken-framework-social-button-border-focus-color: transparent;
        --kraken-framework-social-button-border-radius: 50px;
        --kraken-framework-social-button-width: 25px;
        --kraken-framework-social-button-height: 25px;
        --kraken-framework-social-button-padding: 0.2rem;

        .kraken-social-media__link--Facebook svg {
            width: 15px!important;
            height: 15px!important;
        }
    }
}

/*-- Social Icons (transparent header when scrolling) --*/
.is-scrolling {

    .body--transparent {

        .kraken-social-media--header {
            --kraken-framework-social-button-color: #fff;
            --kraken-framework-social-button-background-color: #231f20;
            --kraken-framework-social-button-hover-color: #fff;
            --kraken-framework-social-button-hover-background-color: var(--kraken-framework-accent-color);
            --kraken-framework-social-button-focus-color: var(--kraken-framework-accent-color);
            --kraken-framework-social-button-focus-background-color: transparent;
            --kraken-framework-social-button-border-color: transparent;
            --kraken-framework-social-button-border-hover-color: transparent;
            --kraken-framework-social-button-border-focus-color: transparent;
            --kraken-framework-social-button-border-radius: 50px;
            --kraken-framework-social-button-width: 25px;
            --kraken-framework-social-button-height: 25px;
            --kraken-framework-social-button-padding: 0.2rem;
    
            .kraken-social-media__link--Facebook svg {
                width: 15px!important;
                height: 15px!important;
            }
        }
    }
}



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

.kraken-navigation--mobile {
    --kraken-framework-nav-link-padding: 0.5rem 0;
    --kraken-framework-nav-link-font-size: 1.75rem;
    --kraken-framework-nav-link-font-weight: 700;
    --kraken-framework-nav-link-font-line-height: 1.2;
    --kraken-framework-nav-link-font-color: white;
    --kraken-framework-nav-link-font-hover-color: white;
    --kraken-framework-nav-link-font-active-color: #e3ddd8;
    --kraken-framework-nav-link-font-focus-color: #e3ddd8;
    --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-drawer-background-color: var(--kraken-framework-accent-color);
}

.kraken-navigation--primary {
    --kraken-framework-nav-link-padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    --kraken-framework-nav-link-font-weight: 400;
    --kraken-framework-nav-link-font-color: #462d26;
    --kraken-framework-nav-sub-link-font-color: #462d26;
}


/*-- Transparent Menu. --*/
.body--transparent {
    .kraken-navigation--primary {
        --kraken-framework-nav-link-padding: 0.25rem 0.5rem 0.25rem 0.5rem;
        --kraken-framework-nav-link-font-weight: 400;
    }
}


/*-- Transparent Menu Is Scrolling. --*/
.is-scrolling {
    .body--transparent {
        .kraken-navigation--primary {
            --kraken-framework-nav-link-font-weight: 400;
        }
     }
}


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


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

main .kraken-address {
    --kraken-framework-address-font-weight: 400;
    --kraken-framework-address-heading-font-weight: 700;
    --kraken-framework-address-font-size: 1rem;
    --kraken-framework-address-line-height: 1.8;
}

main .kraken-email {
    --kraken-framework-email-link-font-size: 1rem;
    --kraken-framework-email-font-line-height: 1.3;
    font-weight: 700;
}

main .kraken-phone-number {
    --kraken-framework-phone-number-font-size: 1rem;
    --kraken-framework-phone-number-font-line-height: 1.3;
    font-weight: 700;
}


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


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


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

.kraken-footer {
    --kraken-framework-footer-background: #e3ddd8;
    background-image: url(https://www.talonpointcamp.ca/wp-content/uploads/2025/04/brand-logo-top-left.svg);
    background-size: 40% auto;
    background-position: left top;
    background-repeat: no-repeat;

    .kraken-footer__row-inner--flex {
        display: block;

        @media (min-width: 991px) {
            display: flex;
        }

        &.kraken-footer__row-inner--main {
            padding-bottom: 2rem;
            border-bottom: 1px solid var(--kraken-framework-accent-alt-color);
        }
    }

    .kraken-footer__col--01 {
        flex: auto;
        width: 100%;
    }

    .kraken-footer__col--02 {
        display: flex;
        flex-direction: column;
        justify-content: end;
        flex: auto;
        width: 100%;

        .kraken-footer__row-inner--custom {

            .kraken-footer__col--01 {
                width: 100%;
            }

            .kraken-footer__col--02 {
                width: 100%;
            }

            .kraken-navigation--extra-01 {
                margin: 0 auto;
            }

        }
    }

    @media (min-width: 991px) {
        .kraken-footer__col--01 {
            flex: auto;
            width: 50%;
        }
    
        .kraken-footer__col--02 {
            flex: auto;
            width: 50%;

            .kraken-footer__row-inner--custom {

                .kraken-footer__col--01 {
                    display: flex;
                    flex-direction: column;
                    justify-content: end;
                    width: 40%;
                    margin-bottom: 0;
                }
    
                .kraken-footer__col--02 {
                    display: flex;
                    flex-direction: column;
                    justify-content: end;
                    width: 60%;
                    margin-bottom: 0;
                }

                .kraken-navigation--extra-01 {
                    margin: 0;
                }
    
            }
        }
    }

    .kraken-col-inner__row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1rem;

        &.kraken-col-inner__row--no-flex {
            display: block;
        }

        &.kraken-col-inner__row--align-end {
            justify-content: center;
        }
    }

    @media (min-width: 991px) {
        .kraken-col-inner__row {
            
            &.kraken-col-inner__row--align-end {
                justify-content: flex-end;
            }
        }
    }

    .kraken-social-media--footer {
        --kraken-framework-social-button-color: #e3ddd8;
        --kraken-framework-social-button-background-color: #000;
        --kraken-framework-social-button-hover-color: #e3ddd8;
        --kraken-framework-social-button-hover-background-color: var(--kraken-framework-accent-alt-color);
        --kraken-framework-social-button-focus-color: var(--kraken-framework-offwhite-color);
        --kraken-framework-social-button-focus-background-color: var(--kraken-framework-accent-alt-color);
        --kraken-framework-social-button-border-color: transparent;
        --kraken-framework-social-button-border-hover-color: transparent;
        --kraken-framework-social-button-border-focus-color: transparent;
        --kraken-framework-social-button-border-size: 0;
        --kraken-framework-social-button-border-radius: 50px;
        --kraken-framework-social-button-width: 40px;
        --kraken-framework-social-button-height: 40px;
        --kraken-framework-social-button-padding: 0.2rem;

        margin-bottom: 1rem;

        .kraken-social-media__link--Facebook svg {
            width: 28px!important;
            height: 28px!important;
        }

        .kraken-social-media__link--Instagram svg {
            width: 35px!important;
            height: 35px!important;
        }

        .kraken-social-media__link--LinkedIn svg {
            width: 35px!important;
            height: 35px!important;
        }
    }

    h2, .h2 {
        display: block;
        width: 100%;
        --kraken-framework-h2-margin: 0;
        --kraken-framework-h2-font-color: #fff;
        --kraken-framework-h2-font-family: var(--kraken-framework-primary-font-family);
        --kraken-framework-h2-font-size: clamp(2rem, 4vw, 3.4rem);
        --kraken-framework-h2-font-line-height: 1.4;
        --kraken-framework-h2-font-weight: 400;
        font-style:italic;
    }

    p {
        display: block;
        width: 100%;
        
    }

    .kraken-navigation__list .menu-item a {
        --kraken-framework-nav-link-font-color: var(--kraken-framework-accent-alt-color);
    }


    /* Address */
    .kraken-address__list {
        --kraken-framework-address-font-size: 1rem;
        --kraken-framework-address-line-height: 1.6;
    }

    /* Phone Number */
    .kraken-phone-number {
        display: inline-block;

        .kraken-phone-number__link {
            padding: 0;
            --kraken-framework-phone-number-color: var(--kraken-framework-accent-alt-color);
            --kraken-framework-phone-number-font-size: 1rem;
            --kraken-framework-phone-number-font-line-height: 1.6;
            text-decoration: none;
            transition: color 200ms ease-in-out;
    
            &:hover {
                --kraken-framework-phone-number-hover-color: var(--kraken-framework-accent-color);
            }
    
            &:focus {
                color: var(--kraken-framework-accent-color);
            }
    
            &:focus-visible {
                outline: solid 2px var(--kraken-framework-accessability-color-color);
                outline-offset: 2px;
                visibility: visible;
                opacity: 1;
            }
        }
    }

    .kraken-navigation--extra-01 {
        width: 100%;
        --kraken-framework-nav-link-padding: 0.2rem 0;
        --kraken-framework-nav-link-font-size: 1rem;
        --kraken-framework-nav-link-font-weight: 400;
        --kraken-framework-nav-link-font-line-height: 1.6;
        --kraken-framework-nav-link-font-color: #fff;
        --kraken-framework-nav-link-font-hover-color: var(--kraken-framework-accent-color);
        --kraken-framework-nav-link-font-active-color: var(--kraken-framework-accent-alt-color);
         --kraken-framework-nav-link-font-focus-color: var(--kraken-framework-accent-alt-color);
    }

    @media (min-width: 767px) {
        .kraken-navigation--extra-01 {
            width: calc((100% - 1rem) / 2);
        }
    }

    @media (min-width: 991px) {
        .kraken-navigation--extra-01 {
            width: calc((100% - 3rem) / 4);
        }
    }

    .kraken-footer__row-inner--bottom {

        .kraken-footer__col--align-start {
            flex-basis: 50%;
        }

        .kraken-footer__col--align-end {
            display:block;
            width: 100%;
        }

        @media (min-width: 991px) {
            .kraken-footer__col--align-end {
                display:flex;
                flex-basis: 50%;
            }
        }

        .kraken-navigation__list .menu-item a {
            --kraken-framework-nav-link-font-size: .675rem;
        }

        .custom-copyright {
            font-size: .675rem;
            color: ar(--kraken-framework-accent-alt-color);

            &:hover {
                color:ar(--kraken-framework-accent-color);
            }
        }

        .kraken-splash-credit {
            margin-left: 1rem;
            gap: .5rem;
            --kraken-framework-credit-color: var(--kraken-framework-accent-alt-color);
            --kraken-framework-credit-hover-color: var(--kraken-framework-accent-alt-color);
            --kraken-framework-credit-logo-fill: var(--kraken-framework-accent-alt-color);

            .kraken-splash-credit__text {
                font-size: .675rem;
            }
        }

    }
}




/*==============================
8.0 ANIMATION 'COWBELL'
================================*/
/*---------------
Animated line for top menu items
-----------------*/
.kraken-navigation__list > .menu-item::before {
    content: '';
    position: absolute;
    background-color: #0c9c49;
    width: 2px;
    height: 100%;
    bottom: 0;
    left: -7px;
    transform: scaleY(0); /* Initially hide the line */
    transform-origin: bottom; /* Set origin to bottom for the scale */
    transition: transform 0.3s ease; /* Animate the transformation */
}

.kraken-navigation__list > .menu-item:hover::before,
.kraken-navigation__list > .menu-item.current-menu-item::before {
    transform: scaleY(1); /* Show the line on hover or when active */
}




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

/*----------------
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);
    }
}


/*----------------
Gravity Forms
------------------*/
.gform-theme--framework {

    &.gform_wrapper {

        .gfield_label {
            /* color: #fff; */
            font-size: 1.125rem;
            font-weight: 700;;
        }
    }
}

#gform_submit_button_1 {
    background-color: transparent;
    border: 2px solid #0c9c49;
    font-size: .875rem;
    font-weight: 700;
    color: #0c9c49;
    padding: calc(1.25em + 2px) calc(2em + 2px);
    border-radius: 0;
    margin-top: 25px;
}

#gform_submit_button_1:hover {
    background-color: #005f35;
    border: 2px solid #005f35;
    color: #fff;
} 



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

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

    &.custom-callout-overlay-green {
        --custom-callout-overlay-color: rgba(12, 156, 73, 1);
    }

    &.custom-callout-overlay-black {
        --custom-callout-overlay-color: rgba(0, 0, 0, 0.6);
    }

    &.custom-callout-overlay-blue {
        --custom-callout-overlay-color: rgba(0, 113, 187, 1);
    }

    &.custom-callout-overlay-red {
        --custom-callout-overlay-color: rgba(176, 17, 23, 1);
    }

    position: relative; /* This ensures the hover effect works on the parent container */
    
    .wp-block-kadence-column {
      z-index: 2 !important;
    }
  
    figure {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      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 */
        transform: scale(1); /* Set initial scale to 1 */
      }
    }
  
    figure::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 img {
      transform: scale(1.05); /* Slightly enlarge the image */
    }
}