/*
Theme Name: K Komfort Custom Theme
Description: Child theme of Divi 5
Author: Suburban Webworks LLC
Author URI: https://suburbanwebworks.com/
Template: Divi
Version: 1.0.0
*/

/* Mobile menu panel */
#mobile_menu1 {
    width: 92vw;
    left: calc(-43vw);
    top: 40px;
    border-bottom: 3px solid #2DA008;
    /* Rounded bottom-right corner */
    border-bottom-right-radius: 30px;
    border-top-left-radius: 30px;
    box-shadow: 6px 4px 9px -2px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 6px 4px 9px -2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 6px 4px 9px -2px rgba(0, 0, 0, 0.25);

    /* Animation */
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.27s ease,
        transform 0.27s ease,
        visibility 0s linear 0.27s;
}

/* Visible state when menu is opened */
.mobile_nav.opened #mobile_menu1 {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.27s ease,
        transform 0.27s ease,
        visibility 0s linear 0s;
}

/* Hamburger/close icon animation */
.mobile_menu_bar::before {
    display: inline-block;
    transition:
        transform 0.27s ease,
        opacity 0.27s ease;
}

/* Replace hamburger with close icon and animate */
.mobile_nav.opened .mobile_menu_bar::before {
    content: "×";
    transform: rotate(90deg) scale(1.1);
}

/* Optional hover effect */
.mobile_menu_bar:hover::before {
    transform: scale(1.05);
}



/* DESKTOP MENU OVERRIDES */
@media (min-width: 981px) and (max-width: 1167px) {
    #header>* {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        row-gap: 15px;
    }

    #header .et_pb_column--with-menu {
        width: 100% !important;
    }
}

@media (min-width: 981px) {
   

    nav li ul {
        width: 340px !important;
        border-top-left-radius: 50px;
        border-bottom-right-radius: 50px;
        border-top: 3px solid #2da008 !important;
        border-bottom: 3px solid #2da008 !important;
        box-shadow: -11px -12px 4px -3px rgba(0, 0, 0, 0.09);
        -webkit-box-shadow: -11px -12px 4px -3px rgba(0, 0, 0, 0.09);
        -moz-box-shadow: -11px -12px 4px -3px rgba(0, 0, 0, 0.09);
    }

    .et-menu li li a {
        width: 300px !important;
        border-top-left-radius: 25px;
        border-bottom-right-radius: 25px;

    }

    .et-menu li a:hover {
        color: #bc1204 !important;
    }

    .et-menu li li a:hover {
        background-color: #efefef;
        color: #bc1204 !important;
    }


    /* Hero Unit stsyels */

    #hero_image_column {
        display: block;
    }


    .trust-bar-section {
        z-index: -1 !important;
    }

    /* Reviews Stars Styles */
    .z3HNkc .gTPtFb {
        color: #fbbc04;
        clip-path: polygon(6px 0, 4.31px 3.98px, 0 4.34px, 3.28px 7.18px, 2.29px 11.4px, 6px 9.16px, 9.71px 11.4px, 8.72px 7.18px, 12px 4.34px, 7.69px 3.98px, 6px 0, 20px 0, 18.31px 3.98px, 14px 4.34px, 17.28px 7.18px, 16.29px 11.4px, 20px 9.16px, 23.71px 11.4px, 22.72px 7.18px, 26px 4.34px, 21.69px 3.98px, 20px 0, 34px 0, 32.31px 3.98px, 28px 4.34px, 31.28px 7.18px, 30.29px 11.4px, 34px 9.16px, 37.71px 11.4px, 36.72px 7.18px, 40px 4.34px, 35.69px 3.98px, 34px 0, 48px 0, 46.31px 3.98px, 42px 4.34px, 45.28px 7.18px, 44.29px 11.4px, 48px 9.16px, 51.71px 11.4px, 50.72px 7.18px, 54px 4.34px, 49.69px 3.98px, 48px 0, 62px 0, 60.31px 3.98px, 56px 4.34px, 59.28px 7.18px, 58.29px 11.4px, 62px 9.16px, 65.71px 11.4px, 64.72px 7.18px, 68px 4.34px, 63.69px 3.98px, 62px 0);
        display: inline-block;
        width: 68px;
        height: 11.4px;
    }



    /* core values module styles */



    /* Stacked image border treatment */

    .stacked-image-container {
        position: relative;
        display: inline-block;
        width: 100%;
        /* Allows the container to scale fluidly with its parent */

        /* Percentage border-radius creates responsive, organic leaf shapes. 
       Adjust the 15% value up or down to change the intensity of the curve.
    */
        border-radius: 15% 0 15% 0;

        /* Keeps the base image at the bottom of this component's stack */
        z-index: 5;
    }

    .stacked-image-container img {
        display: block;
        width: 100%;
        height: auto;
        /* Maintains the image's natural aspect ratio */
        border-radius: 15% 0 15% 0;
        z-index: 4;
    }

    /* Middle Layer (Sits right over the image) */
    .stacked-image-container::before {
        content: "";
        position: absolute;

        /* Responsive shifts based on percentage of container height/width */
        top: -6%;
        left: -1.5%;
        width: 100%;
        height: 100%;
        background: #efefef;
        border-radius: 20% 0 20% 0;
        transform: rotate(-1.5deg);

        /* Sits directly above the base image */
        z-index: 3;

        /* Ensures the pseudo-element doesn't block mouse clicks/taps on the image */
        pointer-events: none;
    }

    /* Top Layer (Sits at the very top of the stack) */
    .stacked-image-container::after {
        content: "";
        position: absolute;

        /* Doubled the negative percentages to push this shape furthest out */
        top: -10%;
        left: -3%;
        width: 100%;
        height: 100%;
        background: #f7f7f7;
        border-radius: 20% 0 20% 0;
        transform: rotate(-5deg);

        /* Sits on the very top, overlapping everything else */
        z-index: 2;
        pointer-events: none;
    }



    /* Offer card container */
    .offer-card,
    .offer-card .et_pb_module_inner {
        /* Targets Divi's internal wrapper */
        position: relative;
        overflow: visible !important;
        /* Prevents the shape from being cut off */
    }

    /* Rotated accent background shape */
    .offer-card:after {
        content: "";
        position: absolute;

        /* Responsive shifts based on percentage of container height/width */
        top: -3%;
        left: -5%;
        width: 100%;
        height: 100%;
        background: #efefef;
        border-radius: 100px 0 100px 0;
        transform: rotate(-3deg);

        /* Drops it safely behind the card background */
        z-index: -1;

        /* Ensures the pseudo-element doesn't block mouse clicks/taps on the card buttons */
        pointer-events: none;
    }

    /* Warranty Carousel Styles */
    /* 1. The main module wrapper */
    /* Main Module Wrapper */
    .warranty-carousel,
    .testimonial-carousel,
    .certificate-carousel {
        overflow: visible !important;
    }

    /* Inner Container (Holds the Track) */
    .warranty-carousel .et_pb_group_carousel_container,
    .testimonial-carousel .et_pb_group_carousel_container,
    .certificate-carousel .et_pb_group_carousel_container {
        overflow: visible !important;
        padding: 0 15px !important;
        /* Shorthand for top/bottom 0, left/right 15px */
        margin: 0 -15px !important;
        /* Shorthand for top/bottom 0, left/right -15px */
    }

    /* Slide Track (Handles the Javascript Animation & Stretch) */
    .warranty-carousel .et_pb_group_carousel_track,
    .testimonial-carousel .et_pb_group_carousel_track,
    .certificate-carousel .et_pb_group_carousel_track {
        overflow: visible !important;
        width: 100% !important;
        display: flex !important;
    }

    /* Individual Slides (Controls the gap between cards) */
    .warranty-carousel .et_pb_group_carousel_slide,
    .testimonial-carousel .et_pb_group_carousel_slide,
    .certificate-carousel .et_pb_group_carousel_slide {
        padding: 0 30px !important;
        /* Change 30px to adjust the space between your slides */
        box-sizing: border-box !important;
    }


    /* --- ESA TABLE --- */
    .esa-table-container {
        box-sizing: border-box;
        width: 100%;
        max-width: 1200px;
        background: #ffffff;
        padding: 20px;
        border-radius: 100px 0;
        /* Kept your custom border-radius */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: #1e293b;
    }

    /* Force border-box for all children elements inside the container */
    .esa-table-container * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    /* --- Table Styling (Desktop Viewport) --- */
    .esa-comparison-table {
        width: 100%;
        border-collapse: separate;
        text-align: center;
        border: none !important;
        border-spacing: 0px;
    }

    .esa-comparison-table th:not(:first-child) {
        color: #2da008 !important;
        font-family: 'Roboto Serif';
        font-size: 1.1rem;
        font-weight: 700 !important;
        font-style: italic;
        padding: 14px;
    }

    .esa-comparison-table th:nth-child(1) {
        /* font-family: 'Roboto Serif'; */
        font-size: 1.1rem;
        font-weight: 700 !important;
        font-style: italic;
        color: #2d2d2d !important;
        text-align: center;
    }

    .esa-comparison-table th.esa-feature-header {
        background-color: transparent;
        color: transparent;
        pointer-events: none;
    }

    .esa-comparison-table td {
        padding: 12px;
        font-size: 0.95rem;
    }

    .esa-comparison-table td.esa-feature-name {
        background-color: #ffffff;
        color: #2d2d2d;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        /* Changed from a rigid 30% to a flexible constraint */
        width: 25%;
        max-width: 280px;
    }

    .esa-comparison-table tbody tr:nth-child(odd) {
        background-color: #fafbff;
    }

    .esa-comparison-table tbody tr:nth-child(even) td:not(.esa-feature-name) {
        background-color: #ffffff;
    }

    /* Checkmarks and Empty states */
    .esa-check {
        color: #2da008;
        font-weight: bold;
        font-size: 1.3rem;
        text-align: center;
    }

    /* Investment Rows */
    .esa-investment-row td {
        font-weight: 700;
        font-size: 1.05rem;
        color: #002d62;
    }

    .esa-investment-row td.esa-feature-name {
        color: #2da008;
    }

    .esa-investment-row:nth-child(even) td.esa-feature-name {
        background-color: #2da008 !important;
        color: #ffffff;
    }

    .esa-investment-row:nth-child(odd) td:not(.esa-feature-name) {
        background-color: #ffffff !important;
        color: #2da008;
        text-align: center;
    }

    .esa-investment-row td:not(.esa-feature-name) {
        background-color: #2da008 !important;
        color: #ffffff;
        text-align: center;
    }

    /* Footer / Footnotes */
    .esa-asterisk {
        font-size: 0.8rem;
        vertical-align: super;
    }

    .esa-table-footer {
        margin-top: 15px;
        margin-left: 20px;
        font-size: 8px;
        color: #2d2d2d;
        line-height: 1.5;
    }


    /* --- Responsive Breakpoints --- */

    /* 1. iPad 10th Gen Viewport */
    @media screen and (max-width: 1024px) {

        .esa-comparison-table th,
        .esa-comparison-table td {
            padding: 10px 6px;
            font-size: 0.9rem;
        }

        .esa-comparison-table th:nth-child(1) {
            font-size: 0.9rem;
        }


        .esa-comparison-table td.esa-feature-name {
            /* Allowed the feature name column to compress dynamically down to its contents */
            width: auto !important;
            max-width: 200px;
        }
    }

    /* 2. iPhone 16 & Mobile Viewports (Redone to strictly keep original table structure) */
    @media screen and (max-width: 640px) {

        /* Retained for safety, though layout should fit without scrolling now */
        .esa-table-container {
            padding: 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border-radius: 50px 0;
        }

        .esa-comparison-table {
            display: table !important;
            width: 100% !important;
            min-width: 100% !important;
            table-layout: auto !important;
        }


        .esa-comparison-table thead {
            display: table-header-group !important;
        }

        .esa-comparison-table tbody {
            display: table-row-group !important;
        }

        .esa-comparison-table tr {
            display: table-row !important;
        }

        /* Target headers and data columns holding checkmarks/prices to collapse them */
        .esa-comparison-table th:not(.esa-feature-header),
        .esa-comparison-table td:not(.esa-feature-name) {
            width: 1% !important;
            white-space: nowrap !important;
            padding: 6px 3px !important;
            font-size: 9px !important;
        }

        .esa-comparison-table th:nth-child(1) {
            font-size: 9px;
        }

        /* Force tiny typography and compact padding for the text column */
        .esa-comparison-table th.esa-feature-header {
            display: table-cell !important;
        }

        .esa-comparison-table td.esa-feature-name {
            display: table-cell !important;
            width: auto !important;
            max-width: none !important;
            /* Let mobile use all leftover fluid space */
            font-size: 10px !important;
            line-height: 1.1;
            padding: 6px 4px !important;
            background-color: transparent !important;
        }

        .esa-check {
            font-size: 0.85rem !important;
        }

        .esa-investment-row td {
            font-size: 9px !important;
        }

        /* Ensure structural background choices stay intact */
        .esa-comparison-table tbody tr:nth-child(odd) td.esa-feature-name {
            background-color: #f1f5f9 !important;
        }

    }



    /* Footer Styles */

    .footer-top {
        position: relative;
        z-index: 2;
    }

    .footer-bottom {
        position: relative;
        z-index: 0;
    }