/*
Theme Name: Breakdance Zero Theme Child
Template: breakdance-zero-theme-master
Author: 6P Marketing
Author URI: https://6pmarketing.com/
Description: Child theme for the Breakdance Zero Theme
Version: 1.0.0
*/

:root {
    --6p-red: #d2202f;
    --6p-light-tan: #EDEAE6;
    --6p-black: #1e1e1e;
    --desktop-menu-gap: 15px;
    --6p-corner: 20px;
    --6p-skew: 10.5deg;
    --6p-skew-minus: -10.5deg;
}

/* ======================================== */
/* --- Main Navigation ==================== */
/* ======================================== */

/* --- Admin Log In Specific Class */
body.logged-in.admin-bar {
    .overlay-menu-layout {
        & .breakdance-menu-list {
            /* logo content area on the overlay */
            & > li.overlay-menu-logo-section {
                top: calc(var(--wp-admin--admin-bar--height,0) + var(--desktop-menu-gap));
            }
        }
    }
}

/* --- Menu Icon */
.breakdance-menu-toggle {
    height: 40px;

    .breakdance-menu-toggle-lines {
        &::before {
            left: 2px;
        }
    
        &::after {
            left: -2px;
        }
    }
}

.national-phone-number a span {
    transition: 0.3s ease-in-out;
}

/* --- Desktop Fixed Navigation Layout */
@media (min-width: 1119.02px) {
    body.logged-in.admin-bar {
        #overlay-override.header-main-layout {
            top: calc(var(--wp-admin--admin-bar--height,0) + var(--desktop-menu-gap));
        }
    }
    
    #overlay-override.header-main-layout {
        background: none;
        top: var(--desktop-menu-gap);
        left: -45px;
        max-width: fit-content;

        & .bde-header-builder__container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 30px;
            max-width: fit-content;
            padding: 60px 45px 60px 120px;
            margin-left: 30px;
            min-height: 275px;
        }

        &::before {
            /* background: wheat; */
            background: #fff;
            content: '';
            position: absolute;
            height: 100%;
            width: 100%;
            
            border-radius: 20px;
            transform: skew(var(--6p-skew-minus));
        }
    }
}

/* --- Small Desktop Scale Adjustments */
/* adjusts the desktop menu and layout to account for flyout content */
@media (max-width: 1800px) and (min-width: 1119.02px) {
    #overlay-override.header-main-layout .bde-header-builder__container,
    .overlay-menu-logo-section-offset {
        padding: 60px 30px 60px 90px !important;
    }

    #overlay-override.header-main-layout .bde-header-builder__container,
    .overlay-menu-logo-section-offset {
        padding-left: 60px !important;
    }
}

@media (max-width: 1440px) and (min-width: 1119.02px) {
    /* manual calculation which adjusts the screen size padding to increase */
    body > .breakdance > section > .section-container,
    body > .breakdance > .bde-globalblock > .breakdance > section > .section-container {
        padding-left: clamp(90px, calc(600px + -35vw), 180px) !important;
    }

    /* rule exclusions */
    body > .breakdance > section.footer > .section-container {
        padding-left: 30px !important;
    }

    body > .breakdance > section.full-width-image > .section-container {
        padding-left: 0 !important;
    }
}

/* --- Full Screen Overlay Menu Adjustments */
.overlay-menu-layout {
    & .breakdance-menu-list {
        width: 100vw;

        & > li {
            margin: 0 auto;
            max-width: 450px;
            width: 100%;
        }

        /* logo content area on the overlay */
        & > li.overlay-menu-logo-section {
            position: absolute;
            margin: 0;
            /* max-width: 200px; */
            max-width: fit-content;
            transform: skew(var(--6p-skew-minus));
            left: -45px;
            top: 15px;

            & .overlay-menu-logo-section-offset {
                transform: skew(var(--6p-skew));
                width: fit-content;
            }
        }

        /* top bar within the menu system */
        & > li.breakdance-menu-topbar {
            background-color: #fff;
            max-width: 100%;
            padding: 25px 5%;
        }
    }

    /* close button within the overlay */
    & .custom-close-btn.breakdance-menu-close-button {
        padding: 20px;
        &:before {
            background-color: var(--6p-red);
            height: 5px;
        }

        &:after {
            background-color: var(--6p-red);
            width: 5px;
        }
    }
}

@media (max-width: 1024px) {}

@media (min-width: 1119.02px) {
/* @media (min-width: 1023px) { */
    #overlay-override .overlay-menu-layout {
        & .breakdance-menu-list {
            width: 100vw;
            /* code was used before to center the menu */
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;

            & > li {
                margin: 0 auto 0 350px;
            }

            & > li.overlay-menu-logo-section {
                margin: 0;
            }
    
            /* top bar within the menu system */
            & > li.breakdance-menu-topbar {
                display: none !important;
            }
        }
    }
}

@media (max-width: 767px) {
    .overlay-menu-layout {
        & .breakdance-menu-list {
            & > li {
                padding-left: 5%;
                padding-right: 5%;
            }
        }

        .breakdance-menu-link-arrow::after {
            font-size: 24px !important;
        }

    }
}  

@media (max-width: 479px) {
    .overlay-menu-layout {
        & .breakdance-menu-list {
            & > li {
                padding-left: 7%;
                padding-right: 7%;
            }

            & > li.breakdance-menu-topbar {
                padding-left: 7%;
                padding-right: 7%;
            }
        }
    }
}  

/* ======================================== */
/* --- Homepage =========================== */
/* ======================================== */
.homepage-intro-hero-section {
    overflow: hidden;
}

@media (min-width: 1024.02px) {
    .homepage-intro-hero-section .bde-code-block {
        align-items: center !important;
    }
    .homepage-intro-hero-section .case-grid {
        margin-left: 15vw;
    }
}

/* ======================================== */
/* --- Body =============================== */
/* ======================================== */

.smart-slider-bullet-list li {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* --- Buttons */
/* adds custom effects to primary buttons */
.breakdance .button-atom--primary,
.breakdance .button-atom--secondary {
    span {
        transition: 300ms ease-in-out;
    }

    &:after {
        transition: 300ms ease-in-out !important;
        opacity: 0;
        width: 0 !important;
        margin: 0 !important;
    }

    &:hover {
        transform: skew(var(--6p-skew-minus));


        span {
            transform: skew(var(--6p-skew));
        }

        &:after {
            transform: skew(var(--6p-skew));
            opacity: 1;
            margin-left: 12px !important;
            margin-right: 4px !important;
            width: 18px !important;
        }
    }
}

/* --- Hero Sections ====================== */
.internal-hero-section {
    overflow-x: hidden;

    .internal-hero-section-content {
        border-radius: 20px;
        position: relative;
        transform: skew(var(--6p-skew-minus));
        padding: 15px 15px 15px 90px;
        left: -90px;
        
        & > * {
            transform: skew(var(--6p-skew));
        }

        /* extending the background asset */
        &::after {
            content: '';
            background: var(--6p-red);
            height: 100%;
            width: 100vw;
            position: absolute;
            right: -50vw;
            transform: skew(var(--6p-skew));
            z-index: -100;
        }

        /* adding the visual content */
        &::before {
            content: '';
            height: 250px;
            width: 100%;
            position: absolute;
            bottom: 0;
            right: -775px;
            background: url(https://6pmarketing.com/wp-content/uploads/2025/03/Hero-Header-Bubble-Asset-Red.png) bottom left no-repeat;
            background-size: contain;
            transform: skew(var(--6p-skew));
            z-index: -50;
        }
    }

    .internal-hero-section-content.tan-hero-section::after {
        background: var(--6p-light-tan);
    }
    
    .internal-hero-section-content.tan-hero-section::before  {
        background: url(https://6pmarketing.com/wp-content/uploads/2025/03/Hero-Header-Bubble-Asset-Tan.png) bottom left no-repeat;
    }
}

@media (min-width: 1920px) {
    .internal-hero-section  {
        .internal-hero-section-content {
            &::after {
                width: 55vw;
            }
        }
    }
}

@media (max-width: 1599px) {
    .internal-hero-section {
        .internal-hero-section-content {
            padding-left: 60px;
            left: 20px;
        }
    }
}

@media (max-width: 1024px) {
    /* resizing the internal hero section */
    .internal-hero-section .internal-hero-section-content::before {
        width: 900px;
        right: -315px;
    }
}

@media (max-width: 767px) {
     /* resizing the internal hero section */
    .internal-hero-section .internal-hero-section-content::before {
        width: 700px;
        right: -420px;
    }
}

/* --- 50/50 Split Section ================ */
/* variables for the split sections */
:root {
    --standard-pad-space: 25px;
    --split-section-pad-space: calc((100vw - var(--bde-section-width)) * 0.5 + var(--standard-pad-space));
}

@media (max-width: 1230px) {
  :root {
    --split-section-pad-space: var(--bde-section-horizontal-padding);
    --standard-pad-space: var(--bde-section-horizontal-padding);
  }
}

/* *Note: This code was attempting to convert a column width to a decimal which is not possbile with just CSS / JS is needed to make this run correctly  */
/* :root {
    --deci-column-width: calc(var(--column-width) / 100);
    --pad-fix: calc((100vw - var(--bde-section-width)) * var(--deci-column-width) + 30px);
} */

@media (min-width: 1119.02px) {
    .split-section {
        min-height: 500px;

        .split-column-image {
            img {
                clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
            }

            /* for custom french section */
            img.custom-hero-image-french {
                clip-path: none;
                padding: 0 !important;
            }
        }

        .split-column-image.bde-column:first-child {
            img {
                clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
            }
        }
    }
}

/* classes to create the split section layout */
.split-section {
    .split-column-content.bde-column {
        padding: 60px var(--standard-pad-space);
        padding-right: var(--split-section-pad-space);
    }

    .split-column-content.bde-column:first-child {
        padding: 60px var(--standard-pad-space);
        padding-left: var(--split-section-pad-space);
    }
    
    .split-column-image {
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        img.custom-hero-image-french {
            object-position: bottom left;
            padding: 0 5%;
        }
    }
}

/* --- Simple CTA Section ================= */
.simple-cta-section {
    transform: skew(var(--6p-skew-minus));
    
    .simple-cta-content {
        transform: skew(var(--6p-skew));
    }
}

/* ======================================== */
/* --- Case Study Listing Grid ============ */
/* ======================================== */

/* prevents overflow of all sections */
.bde-section {
	overflow-x: hidden;
}

.case-study-listing-grid .bde-loop {
    display: grid;
}

.case-study-listing-grid {
    article {
        display: block;
        position: relative;
    }
}

@media (min-width: 780.02px) {
    .case-study-listing-grid {
        
        /* grid */
        .bde-loop {
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        /* visual angle pieces */
        article {
            &:nth-child(odd) {
                &::before {
                    content: '';
                    background: var(--6p-light-tan);
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    z-index: 0;
                    border-radius: var(--6p-corner);
                    left: calc(-100% + -1em);
                    transform: skew(var(--6p-skew-minus));
                }
            }
    
            &:nth-child(even) {
                &::before {
                    content: '';
                    background: var(--6p-light-tan);
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    z-index: 0;
                    border-radius: var(--6p-corner);
                    right: calc(-100% + -1em);
                    transform: skew(var(--6p-skew-minus));
                }
            }
        }
        
        /* individual case study items */
        .case-study-listing-grid-item {
            transform: skew(var(--6p-skew-minus));
            border-radius: var(--6p-corner);
            overflow: hidden;

            a .text-wrap {
                position: absolute;
                top: 100%;
                transform: translateY(100%);
                background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.75));
                transition: ease-in-out .3s;
                padding: 2rem 1rem 1rem 1rem;
                width: 100%;
                
                * {
                    transition: ease-in-out .3s;
                    color: white !important;
                }
            }
          
        .img-wrap {
            img {
                position: relative;
                left: -10%;
                max-width: unset;
                object-fit: cover;
                transform: skew(var(--6p-skew));
                height: 120%;
                width: 120%;
            }
        }   

        &:hover {
            a .text-wrap {
                transform: translateY(-100%);
                    * {
                        transform:  skew(var(--6p-skew));
                    }
                }
            }
        }
    }
}

@media (max-width: 780px) {
    .case-study-listing-grid-section .section-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .case-study-listing-grid {
        .bde-loop {
            gap: 3rem;
        }
    
        .case-study-listing-grid-item {
            .case-study-listing-grid-item-mobile-accent {
                &::before {
                    content: '';
                    background: var(--6p-light-tan);
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    z-index: 0;
                    border-radius: var(--6p-corner);
                    left: calc(-85% + -1em);
                    transform: skew(var(--6p-skew-minus));
                }
            }
            
            .img-wrap {
                width: 100%;
                display: block;
                transform: skew(-10.5deg);
                border-radius: var(--6p-corner);
                overflow: hidden;
                right: -15%;
                aspect-ratio: 2/1;
                /* margin-bottom: 15px; */
            
                img {
                    position: relative;
                    transform: skew(var(--6p-skew));
                    top: -5%;
                    left: -5%;
                    display: block;
                    max-width: unset;
                    height: 110%;
                    width: 110%;
                    object-fit: cover;
                }
            }
        }

        .text-wrap {
            padding: 15px 15px 0 calc(15% + 15px);
        }
    }
}


/* ======================================== */
/* --- Filter Fields ====================== */
/* ======================================== */
.breakdance .wpgb-facet>fieldset:last-child {
    margin-bottom: 15px;
}

/* --- Team Filters ======================= */
/* all buttons */
.filter-button-options .wpgb-facet ul .wpgb-button {
    border-radius: 6px;
    padding: 10px 12px 14px 12px;
    
    span.wpgb-button-label {
        font-size: 18px;
        line-height: 1em;
        padding: 0;
    }
}

.filter-button-options .wpgb-facet ul .wpgb-button:not([aria-pressed=true]) {
    border-color: var(--6p-light-tan);

    &:hover,
    &:focus {
        border-color: var(--6p-red) !important;
    }
}

/* active button */
.filter-button-options .wpgb-facet .wpgb-button[aria-pressed=true] {
    background-color: var(--6p-red);
    border-color: var(--6p-red);
    color: #fff;
}

/* ======================================== */
/* --- Insights =========================== */
/* ======================================== */

/* --- Pagination ========================= */
.wpgb-loading {
    opacity: 0.5;
}

.custom-pagination .wpgb-facet {
    .wpgb-pagination-facet {
        text-align: center;
    }

    .wpgb-pagination {
        li {
            height: auto;
        }

        li a,
        li a:hover {
            border: 1px solid var(--6p-light-tan);
            font-size: 18px;
            padding: 4px 15px;
            border-radius: 4px;
        }

        li a {
            transition: 0.25s ease-in-out;
        }

        li a:hover,
        li a[aria-current] {
            background-color: var(--6p-red);
            color: #fff;
        }
    }
}

/* ======================================== */
/* --- Gravity Forms ====================== */
/* ======================================== */

/* button styles */
body .gform_wrapper .gform_footer input[type=submit] {
    background-color: var(--6p-red) !important;
    color: #fff !important;
    font-family: 'trade-gothic-next', sans-serif;
    font-weight: 500 !important;
    font-size: 20px !important;
    line-height: 1em !important;
    text-decoration: none !important;
    border: 1px solid var(--6p-red) !important;
    border-radius: 6px !important;
    cursor: pointer;
    padding: 10px 12px 14px 12px !important;
    position: relative;
    transition: 300ms ease-in-out !important;
    width: 100%;
}
    /* Hover effect on the button */
    body .gform_wrapper .gform_footer input[type="submit"]:hover{
        background-color: #fff !important;
        color: var(--6p-black) !important;
    }

/* modify the gap between fields */
.gform-theme--foundation .gform_fields {
    row-gap: 15px !important;
}

/* modify fields/fonts to match the theme */
body .gform_wrapper .gform_body {
    font-size: 18px;

    /* labels */
    .gfield_label {
        font-size: 18px;
    }
    
    .gform-field-label--type-sub,
    .gfield_required_text,
    .gfield_validation_message {
        font-size: 14px;
    }

    /* inputs */
    input {
        font-size: 18px;
    }
}

/* --- QUICK PATCH >>> NEED TO ADD TO CORRECT LOCATION */
.case-grid {
    & .more {
        a {
            transition: 0.3s ease-in-out;
            svg {
                transition: 0.3s ease-in-out;
                position: relative;
                left: 0;
                
                path {
                    transition: 0.3s ease-in-out;
                }
            } 
        }
        
        a:hover {
            background: var(--6p-red);
            color: #fff;

            svg {
                left: 5px;

                path {
                    fill: #fff !important;
                }
            }
        }
    }
}