/*
 * File Name: site-style.css
 * Description: Site-specific CSS overrides and customizations for Fence & Deck Marketers Child Theme.
 * Author: FDM Development Team
 * Note: This file is intended for layout adjustments, utility classes, and per-site custom styles.
 */

:root {
    --primary: #6D8496;
    --primary-d-1: #6D8496;
    --primary-d-2: #547996;
    --primary-d-3: #3E7096;
    --primary-d-4: #196CAD;
    --primary-l-1: #A5C3DB;
    --primary-l-2: #B0CEE6;
    --primary-l-3: #C0DDF5;
    --primary-l-4: #D1EBFF;
    --secondary: #8FA892;
    --secondary-l-1: #97BA9C;
    --secondary-l-2: #B7D7BB;
    --secondary-l-3: #D4F7D8;
    --secondary-l-4: #E2FAE5;
    --accent: #69826C;
    --accent-l-1: #83A286;
    --accent-l-2: #A0C6A4;
    --accent-l-3: #ADD4B2;
    --accent-l-4: #D5FFDA;
    --base-light: #C5BDB0;
    --base-light-d-1: #E9E0D0;
    --base-light-d-2: #FCF6EB;
    --base-light-d-3: #FFFBF3;
    --base-light-d-4: #FFFBF6;
    --base-dark: #797979;
    --base-dark-l-1: #9F9F9F;
    --base-dark-l-2: #CBCBCB;
    --base-dark-l-3: #E8E8E8;
    --base-dark-l-4: #F7F7F7;
    --heading-text-d: var(--base-dark);
    --body-text-d: var(--base-dark-l-1);
    --heading-text-l: var(--base-light);
    --body-text-l: var(--base-light);
    --background-l-1: var(--base-light);
    --background-l-2: rgba(255, 252, 243, 0.5);
    --background-d-1: var(--secondary);
    --background-d-2: var(--secondary-d-1);
    --neutral-light: rgba(255, 255, 255, 1);
    --neutral-light-5: rgba(255, 255, 255, 0.05);
    --neutral-light-10: rgba(255, 255, 255, 0.1);
    --neutral-light-20: rgba(255, 255, 255, 0.2);
    --neutral-light-30: rgba(255, 255, 255, 0.3);
    --neutral-light-40: rgba(255, 255, 255, 0.4);
    --neutral-light-50: rgba(255, 255, 255, 0.5);
    --neutral-light-60: rgba(255, 255, 255, 0.6);
    --neutral-light-70: rgba(255, 255, 255, 0.7);
    --neutral-light-80: rgba(255, 255, 255, 0.8);
    --neutral-light-90: rgba(255, 255, 255, 0.9);
    --neutral-dark: rgba(0, 0, 0, 1);
    --neutral-dark-5: rgba(0, 0, 0, 0.05);
    --neutral-dark-10: rgba(0, 0, 0, 0.1);
    --neutral-dark-20: rgba(0, 0, 0, 0.2);
    --neutral-dark-30: rgba(0, 0, 0, 0.3);
    --neutral-dark-40: rgba(0, 0, 0, 0.4);
    --neutral-dark-50: rgba(0, 0, 0, 0.5);
    --neutral-dark-60: rgba(0, 0, 0, 0.6);
    --neutral-dark-70: rgba(0, 0, 0, 0.7);
    --neutral-dark-80: rgba(0, 0, 0, 0.8);
    --neutral-dark-90: rgba(0, 0, 0, 0.9);
    --transition-default: 0.25s ease;
}

:is(main#content, body){
    /* Utility Classes */
    .text-block-0 p:last-of-type{
        margin-block-end: 0;
    }

    .padded{
        padding-left: 1rem;
        border-left: .25rem solid var(--primary);
    }

    .btn-link{
        p:last-of-type{
            a{
                color: var(--heading-text);
                font-weight: 700;
                text-decoration: none;
                text-transform: capitalize;
                position: relative;
                font-family: sans-serif;
                letter-spacing: 0.5px;
                
                &::after{
                    content: "›";
                    color: var(--primary);
                    font-size: 1.1em;
                    margin-left: 0.5em;
                    transition: transform var(--transition-default);
                    display: inline-block;
                }
                
                &:hover::after{
                    transform: translateX(5px);
                }

                &::before{
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: -.3em;
                    height: 3px;
                    width: 0%;
                    background-color: var(--primary);
                    transition: width 0.3s ease;
                }

                &:hover::before{
                    width: 92%;
                }
            }
        }
    }

    .clickable-card{
        *{
            position: static;
            transition: color var(--transition-default);
        }

        h3 a::before,
        h4 a::before{
            content: '';
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }

        &:hover{
            h3,
            h4{
                color: var(--primary-l-1);
            }
        }
    }

    .clickable-title{
        h3,
        h4{
            position: relative;

            a{
                position: relative;
                display: inline-block;
                text-decoration: none;
                color: inherit;
            }

            a::before{
                content: "";
                position: absolute;
                left: 0;
                bottom: -.2em;
                height: 3px;
                width: 0%;
                background-color: var(--primary-l-2);
                transition: width 0.3s ease;
            }

            a:hover::before{
                width: 92%;
            }

            a::after{
                content: "›";
                color: var(--primary-l-2);
                font-size: 1.1em;
                margin-left: 0.5em;
                transition: transform .25s ease;
                display: inline-block;
            }

            a:hover::after{
                transform: translateX(5px);
            }
        }
    }

    .img-pad-right{
        isolation: isolate;
        
        img{
            border: 2px solid var(--primary) !important;
        }

        &::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            inset: 0;
            border-radius: var(--radius-xs);
            background-color: var(--primary);
            transform: translateX(.5rem) translateY(.5rem);
            z-index: -1;
        }
    }

    .img-pad-left{
        isolation: isolate;

        img{
            border: 2px solid var(--primary) !important;
        }

        &::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            inset: 0;
            border-radius: var(--radius-xs);
            background-color: var(--primary);
            transform: translateX(-0.5rem) translateY(.5rem);
            z-index: -1;
        }
    }
}

:is(main#content, body){
    .clickable-service-card{
        *{
            position: static;
            transition: all var(--transition-default);
        }

        h3 a::before,
        h4 a::before{
            content: '';
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }

        img {
            clip-path: polygon(0 0, 100% 0, 100% 22rem, 0 100%);
        }

        &:hover{
            h3,
            h4{
                color: var(--primary);
            }

            img {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
        }
    }

    .clickable-service-card-parent:hover .clickable-service-card:not(:hover) img {
        filter: brightness(0.7);
    }

    .cta-buttons .elementor-icon-wrapper{
        transform: rotate(0deg);
		transition: .25s ease;
    }

    .cta-buttons .elementor-icon-wrapper .elementor-icon{
        background-color: var(--primary-d-1);
		color: var(--neutral-light);
    }

    .cta-buttons .elementor-widget-heading{
        color: var(--heading-text);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
        position: relative;

        span{
            position: relative;
            display: inline-block;
            text-decoration: none;
            color: inherit;
        }

        span::before{
            content: "";
            position: absolute;
            left: 0;
            bottom: -.55em;
            height: 3px;
            width: 0%;
            background-color: var(--primary-d-1);
            transition: width 0.3s ease;
        }

        span::after{
            content: "›";
            color: var(--primary-d-1);
            font-size: 1.2em;
            margin-left: 0.3em;
            transition: transform .25s ease;
            display: inline-block;
        }
    }

    .cta-buttons:hover .elementor-icon-wrapper{
        transform: rotate(20deg);
    }

    .cta-buttons:hover .elementor-icon-wrapper .elementor-icon{
        background-color: var(--primary-d-1);
    }

    .cta-buttons:hover .elementor-widget-heading{
        span::before{
            width: 92%;
        }

        span:hover::after{
            transform: translateX(5px);
        }
    }

    /* CTA buttons inverted */
    .cta-buttons-invert .elementor-icon-wrapper{
        transform: rotate(0deg);
		transition: .25s ease;
    }
    
    .cta-buttons-invert .elementor-icon-wrapper .elementor-icon{
        background-color: var(--primary);
		color: var(--neutral-light);
    }

    .cta-buttons-invert .elementor-widget-heading{
        color: var(--neutral-light);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
        position: relative;

        span{
            position: relative;
            display: inline-block;
            text-decoration: none;
            color: inherit;
        }

        span::before{
            content: "";
            position: absolute;
            left: 0;
            bottom: -.55em;
            height: 3px;
            width: 0%;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }

        span::after{
            content: "›";
            color: var(--primary);
            font-size: 1.2em;
            margin-left: 0.3em;
            transition: transform .25s ease;
            display: inline-block;
            transform: translateX(0);
        }
    }

    .cta-buttons-invert:hover .elementor-icon-wrapper{
        transform: rotate(20deg);
    }

    .cta-buttons-invert:hover .elementor-icon-wrapper .elementor-icon{
        background-color: var(--primary);
    }

    .cta-buttons-invert:hover .elementor-widget-heading{
        span::before{
            width: 92%;
        }

        span:hover::after{
            transform: translateX(5px);
        }
    }

    .floating-button{
		min-width: 0 !important;

		a{
			width: 100%;
		}
	}
}