/*
 * 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: #C8102E;
    --primary-d-1: #9f1926ff;
    --primary-d-2: #751a1eff;
    --primary-d-3: #4f1717ff;
    --primary-l-1: #da5552ff;
    --primary-l-2: #e9837cff;
    --primary-l-3: #f4aca4ff;
    --secondary: #000000;
    --secondary-5: #0000000d;
    --secondary-10: #0000001a;
    --secondary-20: #00000033;
    --secondary-30: #0000004d;
    --secondary-40: #00000066;
    --secondary-50: #00000080;
    --secondary-60: #00000099;
    --secondary-70: #000000b3;
    --secondary-80: #000000cc;
    --secondary-90: #000000e6;
    --secondary-d-1: #2f393fff;
    --secondary-d-2: #000000ff;
    --secondary-d-3: #000000ff;
    --secondary-d-4: #000000ff;
    --secondary-l-1: #303030ff;
    --secondary-l-2: #5e5e5eff;
    --secondary-l-3: #919191ff;
    --secondary-l-4: #c7c7c7ff;
    --neutral-white: #FFFFFFFF;
    --neutral-white-5: #ffffff0d;
    --neutral-white-10: #ffffff1a;
    --neutral-white-20: #ffffff33;
    --neutral-white-30: #ffffff4d;
    --neutral-white-40: #ffffff66;
    --neutral-white-50: #ffffff80;
    --neutral-white-60: #ffffff99;
    --neutral-white-70: #ffffffb3;
    --neutral-white-80: #ffffffcc;
    --neutral-white-90: #ffffffe6;
    --neutral-white-d-1: #c6c6c6;
    --neutral-white-d-2: #919191;
    --neutral-white-d-3: #5e5e5e;
    --neutral-white-d-4: #303030;
    --neutral-white-l-1: #ffffff;
    --neutral-white-l-2: #ffffff;
    --neutral-white-l-3: #ffffff;
    --neutral-white-l-4: #ffffff;
    --neutral-gray: #f5f5f5;
    --neutral-gray-d-1: #bfbfbfff;
    --neutral-gray-d-2: #8c8c8cff;
    --neutral-gray-d-3: #5c5c5cff;
    --neutral-gray-d-4: #2e2e2eff;
    --neutral-gray-l-1: #f7f7f7ff;
    --neutral-gray-l-2: #fafafaff;
    --neutral-gray-l-3: #fafafaff;
    --neutral-gray-l-4: #fcfcfcff;
    --bg-body: hsla(0, 0%, 90%, 1);
    --bg-surface: hsla(0, 0%, 100%, 1);
    --text-body: #313131;
    --text-title: hsla(0, 0%, 0%, 1);
    --border-primary: hsla(0, 0%, 50%, 0.25);
    --shadow-primary: hsla(0, 0%, 0%, 0.15);
    --light: hsl(85, 0%, 100%);
    --light-5: hsla(0, 0%, 100%, 0.05);
    --light-10: hsla(0, 0%, 100%, 0.1);
    --light-20: hsla(0, 0%, 100%, 0.2);
    --light-30: hsla(0, 0%, 100%, 0.3);
    --light-40: hsla(0, 0%, 100%, 0.4);
    --light-50: hsla(0, 0%, 100%, 0.5);
    --light-60: hsla(0, 0%, 100%, 0.6);
    --light-70: hsla(0, 0%, 100%, 0.7);
    --light-80: hsla(0, 0%, 100%, 0.8);
    --light-90: hsla(0, 0%, 100%, 0.9);
    --dark: hsla(0, 0%, 0%, 1);
    --dark-5: hsla(0, 0%, 0%, 0.05);
    --dark-10: hsla(0, 0%, 0%, 0.1);
    --dark-20: hsla(0, 0%, 0%, 0.2);
    --dark-30: hsla(0, 0%, 0%, 0.3);
    --dark-40: hsla(0, 0%, 0%, 0.4);
    --dark-50: hsla(0, 0%, 0%, 0.5);
    --dark-60: hsla(0, 0%, 0%, 0.6);
    --dark-70: hsla(0, 0%, 0%, 0.7);
    --dark-80: hsla(0, 0%, 0%, 0.8);
    --dark-90: hsla(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%;
		}
	}
}