/*
 * 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: #2E7091;
    --primary-d-1: #285871;
    --primary-d-2: #214254;
    --primary-d-3: #1a2d38;
    --primary-d-4: #131b20;
    --primary-l-1: #5e8ca6;
    --primary-l-2: #85a7bc;
    --primary-l-3: #adc3d2;
    --primary-l-4: #d8e2e9;
    --secondary: #1E2D45;
    --secondary-d-1: #1a2537;
    --secondary-d-2: #171e2c;
    --secondary-d-3: #131720;
    --secondary-d-4: #0b0e14;
    --secondary-l-1: #475166;
    --secondary-l-2: #707889;
    --secondary-l-3: #a0a5b1;
    --secondary-l-4: #cfd2d8;
    --base-light: #FFFFFF;
    --base-light-d-1: #c7c7c7;
    --base-light-d-2: #919191;
    --base-light-d-3: #5e5e5e;
    --base-light-d-4: #303030;
    --base-dark: #1F1F1F;
    --base-dark-d-1: #1a1a1a;
    --base-dark-d-2: #141414;
    --base-dark-d-3: #0f0f0f;
    --base-dark-d-4: #080808;
    --base-dark-l-1: #454545;
    --base-dark-l-2: #707070;
    --base-dark-l-3: #9e9e9e;
    --base-dark-l-4: #cccccc;
    --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);
    --accent: #ECCF57;
    --accent-d-1: #b9a246;
    --accent-d-2: #867637;
    --accent-d-3: #594e27;
    --accent-d-4: #2f2a18;
    --accent-l-1: #f2d778;
    --accent-l-2: #f7e29c;
    --accent-l-3: #fbebbc;
    --accent-l-4: #fef5dd;
    --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%;
		}
	}
}