/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */



:root {
	--scaler: 3.3vw;
    --ei-radius: 10px;
    --ei-horizontal-content-margin: max(calc((100vw - var(--theme-normal-container-max-width)) / 2), calc((100vw - var(--theme-container-width)) / 2));
    --ei-pagination-dots-size: 15px;
    --ei-pagination-dots-color: var(--theme-palette-color-2);
    --ei-pagination-dots-color--active: var(--theme-palette-color-1);
}

/*  */
.kt-inside-inner-col:has(figure:first-child) {
    overflow: hidden;
}

#header a.ct-button {
	font-size: clamp(11px, var(--scaler), var(--theme-font-size));
	white-space: nowrap;
}

/* small menus in the topmost header */
.small ul.menu {
    gap: 20px;
    margin-top: 2px;
    --theme-list-indent: 0px;
    li a {
        font-size: clamp(0.75em, 0.9em, 1.1vw);
    }
}

@media (min-width:900px) {
    .ei-arrow-right {
        white-space: nowrap;
    }
    .ei-arrow-right::after {
        content: '';
        display: inline-block;
        height: 1em;
        width: 1em;
        background: linear-gradient(45deg, var(--theme-palette-color-2) 50%, transparent 50%, transparent 100%);
        transform: rotateZ(-135deg);
        vertical-align: sub;
    }
}

.vertical ul.menu, ul.vertical {
    display: flex;
    flex-direction: column;
    padding-inline-start: 0px;
    list-style: none;
    row-gap: 10px;
}

.ei-fancy {
    font-family: timberline;
    font-weight: 100;
    font-size: clamp(45px, 10vw,130px)!important;
    color: #EDE7E7;
    margin-bottom: clamp(-85px, -7vw,-33px);
    --theme-content-spacing: -85px;
    margin-left: max(-30px, -3vw);
}
.ei-square.ei-break-top {
    display: inline-block;
    font-size: 2em;
    line-height: 1;
    padding: 20px;
    border-radius: var(--ei-radius);
    background-color: var(--theme-palette-color-1);
    color: var(--theme-palette-color-7);
    width: 75px;
    height: 75px;
    text-align: center;
    position: absolute;
    top: -36px;
}

.ei-circle-list li :is(strong, b) {
    font-size: 1.3em;
    color: var(--theme-palette-color-5);
}
.ei-circle-list li::marker {
    content: '';
}
ol.ei-circle-list li {
    counter-increment: li;
    position: relative;
}
.ei-circle-list li::before {
    content: counter(li);
    display: inline-block;
    position: absolute;
    background-color: var(--theme-palette-color-1);
    color: var(--theme-palette-color-7);
    font-size: 32px;
    font-weight: 600;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    vertical-align: sub;
    text-align: center;
    left: -60px;
}

.ei-theme-maxwidth {
    margin: auto var(--ei-horizontal-content-margin);
}
.ei-limit-width {
    max-width: 70%;
}

.ei-accordian-tweaks .kt-blocks-accordion-header {
    margin-bottom: -5px;
    position: relative;
    z-index: 1;
}

/* ******* ******* *******
*   MEGA MENU LAYOUT
******* ******* ******* */
ul.sub-menu {
    --columns-padding: 0px;
    gap: 20px;
    padding: 20px 0px;
}
#menu-main-menu ul.sub-menu li > a.ct-menu-link {
    flex-direction: column;
}
@media (min-width:1000px) {
    .ei-mega-menu-title {
        font-size: 1.5em;
        font-weight: 600;
    }
}
#offcanvas ul.sub-menu {
    list-style: none;
}
#offcanvas .ct-menu-link {
    gap: 20px;
}
#offcanvas .ct-menu-link img {
    max-width: 100px;
}

/* 
 */
[data-prefix="single_page"] .entry-header .page-description {
    max-width: 800px;
}


/* ******* ******* *******
*   HERO WITH TRANSPARENT HEADER 
*   similar to the slider on the home page
******* ******* ******* */
header:has([data-transparent]) ~ main > div.hero-section {
    /* height: 0; */
    --min-height: 0!important;
    padding-bottom: max(80vh, 41.67%)!important;
    padding-top: 0px!important;
}
header:has([data-transparent]) ~ main > div.hero-section .ct-media-container img {
    object-position: 50% 20%;
}
header:has([data-transparent]) ~ main > div.hero-section[data-type="type-2"] .ct-media-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, white 140px, transparent 400px);
    background-color: transparent;
}
header:has([data-transparent]) ~ main > div.hero-section header.entry-header {
    display: inline-block;
    position: absolute;
    width: auto;
    background-color: inherit;
    border-radius: var(--ei-radius);
    padding: 35px 45px;
    margin-left: var(--ei-horizontal-content-margin);
    margin-right: var(--ei-horizontal-content-margin);
    max-width: 800px;
    bottom: -100px;
}


/* ******* ******* *******
*   HOME SLIDER 
*   similar to the hero with transparent header
******* ******* ******* */
/* slider fits behind header */
.home.page #header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.home-slider {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
}
/* slider aspect-ratio 12:5 but not smaller than 600px tall */
.home-slider .kb-advanced-slide {
    padding-bottom: max(600px, 41.67%)!important;
}
/* gradient overlay on individual slides */
.home-slider .kb-advanced-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, white 140px, transparent 400px);
}
.home-slider .kb-advanced-slide-inner h1 {
    color: var(--theme-palette-color-7);
    margin-block-end: 0px;
}
.home-slider .kb-splide .splide__track, .kb-slider-size-ratio .kb-advanced-slide, .kb-slider-size-ratio .kb-advanced-slide-inner-wrap {
    overflow: inherit!important;
}
/* pagination dots */
.home-slider .kb-splide ul.splide__pagination.splide__pagination {
    left: auto;
    right: var(--ei-horizontal-content-margin);
    gap: 5px;
    padding: 0px;
}
.home-slider li:has(.is-active) {
    border: 1px solid var(--theme-palette-color-1);
    border-radius: 50%;
}
.home-slider .kb-splide button.splide__pagination__page {
    height: var(--ei-pagination-dots-size);
    width: var(--ei-pagination-dots-size);
    margin: 7px;
    background-color: var(--ei-pagination-dots-color);
    opacity: 1;
    &.is-active {
        background-color: var(--ei-pagination-dots-color--active);
    }
}
.home-slider .kb-splide ul.splide__pagination.slick-dots {
    bottom: -60px;
}


/* ******* ******* *******
*   TEXTBOX IN SLIDER AND TRANSPARENT HERO
******* ******* ******* */
.home-slider .kb-advanced-slide-inner,
header:has([data-transparent]) ~ main > div.hero-section header.entry-header {
    --x-margin: var(--ei-horizontal-content-margin); 
    display: inline-block;
    position: absolute;
    width: auto;
    background-color: inherit;
    border-radius: var(--ei-radius);
    padding: 35px 45px;
    margin-left: var(--x-margin);
    margin-right: var(--x-margin);
    bottom: -100px;
}
@media (max-width:800px) {
    .home-slider .kb-advanced-slide-inner,
    header:has([data-transparent]) ~ main > div.hero-section header.entry-header {
        --x-margin: 0px;
        border-radius: 0px;
        width: 100vw;
        opacity: 0.9;
        bottom: 0;
    }
}


/*  */
.ei-text-overlay > .kt-inside-inner-col > *:not(figure) {
    /* remove */
    position: absolute;
    bottom: 0;
    width: 100%;
}
.ei-hide-overflow .kt-inside-inner-col {
    overflow: hidden;
    width: 100%;
}
.ei-underlay-following {
    padding-bottom: 15vw;
    margin-bottom: -15vw!important;
    z-index: -2;
}
/* @media (max-width:1024px) {
    .ei-horizontal-scroll > div {
        display: flex;
        justify-content: start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        > div {
            scroll-snap-align: start;
            --width: min(330px, 88vw);
            min-width: var(--width);
            flex-flow: row;
            flex: 0 0 var(--width);
            flex: 1;
        }
        :has(.kt-inside-inner-col:empty) {
            display: none;
        }
    }
    div.ei-slider-dots {
        justify-content: center;
        span {
            display: inline-block;
            padding: 5px;
            margin: 10px;
            border-radius: 50%;
            background-color: lightgrey;
        }
    }
} */

/* TABS */
.ei-bottom-tabs .kt-tabs-wrap {
    display: flex;
    flex-flow: column-reverse;
}
.ei-bottom-tabs .kb-tab-titles-wrap {
    align-items: flex-start !important;
    text-align: initial;
}
.ei-bottom-tabs a.kt-tab-title {
    border-bottom-width: 0px !important;
    border-top-width: 4px !important;
    border-radius: 0px !important;
}
.ei-bottom-tabs .kt-title-text {
    font-size: 1.3em;
}
.ei-bottom-tabs .kt-title-sub-text {
    font-size: 1em;
}


/* FOOTER */
@media (min-width: 470px) {
    ul#menu-footer-resources, ul#menu-footer-structures {
        display: block;
        columns: 2;
    }
}

/* STRONG TESTIMONIAL */
.strong-view {
    max-width: min(800px, 100vw - 100px);
    margin: auto;
}
div.wpmslider-viewport {
    color: var(--theme-palette-color-7);
    background: var(--theme-palette-color-5);
    text-align: center;
    border-radius: var(--ei-radius);
}
div.wpmtst-testimonial-inner.testimonial-inner {
    padding: 50px clamp(50px, 10vw, 100px);
}
div.strong-view.controls-type-sides.nav-position-outside a:is(.wpmslider-prev, .wpmslider-next) {
    top: calc(50% - 80px);
    padding: 45px;
    background: var(--theme-palette-color-1);
    border-radius: var(--ei-radius);
}
div.strong-view.controls-type-sides.nav-position-outside a:is(.wpmslider-prev, .wpmslider-next):before {
    top: -20px!important;
    left: -20px!important;
    background-color: white;
    height: 40px;
    width: 40px;
}
div.strong-view.controls-type-sides.nav-position-outside a.wpmslider-prev {
    left: -45px;
}
div.strong-view.controls-type-sides.nav-position-outside a.wpmslider-next {
    right: -45px;
}
/* div.strong-view.controls-type-sides.nav-position-outside a.wpmslider-next:before {
    mask: url('/wp-content/uploads/noun-arrow-right-3134192.svg') center center no-repeat;
} */
@media (max-width: 768px) {
    .strong-view {
        max-width: 100%;
    }
    div.strong-view.controls-type-sides.nav-position-outside a:is(.wpmslider-prev, .wpmslider-next) {
        display: none;
    }
}
.strong-view.pager-style-buttons .wpmslider-pager-link:before {
    height: var(--ei-pagination-dots-size)!important;
    width: var(--ei-pagination-dots-size)!important;
    margin: 7px;
    background: var(--ei-pagination-dots-color)!important;
    mask: none !important;
    border-radius: 50%;
}
.strong-view.pager-style-buttons .wpmslider-pager-link.active:before {
    background: var(--ei-pagination-dots-color--active)!important;
    box-shadow: 0px 0px 0px 6px var(--theme-palette-color-7), 0px 0px 0px 7px var(--theme-palette-color-1);
}

/* TAXONOMY TERMS ROW */
.ei-terms-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    .ei-term-grid-item {
        flex: 0 0 100px;
        text-align: center;
        color: var(--theme-palette-color-6);
        line-height: 1.2;
        img {
            aspect-ratio: 1;
            width: 100px;
            margin-bottom: 5px;
        }
    }
}


/* FOR [ei_options] SHORTCODE */
#option-preview {
    display: grid;
    column-gap: 4rem;
    padding: min(50px, 3.5vw);
    min-height: 466px;
    grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
    box-shadow: 5px 5px 14px 0px rgba(0, 0, 0, 0.2);
    border: 2px solid var(--theme-palette-color-5);
    border-radius: var(--ei-radius);
    margin: 60px auto;
}
#option-preview img {
    border-radius: var(--ei-radius);
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
}
.ei-options-grid {
    display: grid;
    --cell-width: max(166px, 10vw);
    grid-template-columns: repeat(auto-fill, minmax(var(--cell-width), 1fr));
    gap: 30px;
}
.ei-options-grid-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding: 15px;
    border-radius: var(--ei-radius);
    background-color: var(--theme-palette-color-3);
    h5 {
        font-size: 1.2em;
        text-align: center;
        color: var(--theme-palette-color-7);
    }
    img {
        aspect-ratio: 3 / 2;
        object-fit: contain;
        margin-bottom: 10px;
    }
    a {
        cursor: pointer;
        position: absolute;
        inset: 0;
    }
    a.ei-focused {
        opacity: 0.3;
        background-color: var(--theme-palette-color-6);
    }
}

.ei-product-features-table {
    --col-width: 250px;
    --cell-height: 70px;
    font-size: 0.9em;
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--col-width));
    grid-auto-flow:column;
    column-gap: 10px;
    margin: 60px auto;
    padding-bottom: 30px;
    overflow-x: auto;
    scrollbar-color: var(--theme-palette-color-1) #ececec;
}
.ei-product-features-column {
    display: grid;
    background-color: #ececec;
    border-radius: var(--ei-radius);
    overflow: hidden;
    text-align: center;
    h3, .ei-h3 {
        font-size: 1.2em;
        height: 80px;
        margin-bottom: 0px;
        padding: 10px;
    }
    > div {
        width: var(--col-width);
        padding: 10px;
        min-height: var(--cell-height);
        line-height: 115%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.ei-reference-column {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    text-align: right;
    .ei-h3 {
        display: block;
        font-size: 1.4em;
        height: 80px;
        margin-bottom: 0px;
    }
    > div {
        > div {
            width: var(--col-width);
            padding: 10px;
            min-height: var(--cell-height);
            line-height: 115%;
            display: flex;
            align-items: center;
            justify-content: end;
        }
    }
}

.ei-reference-column, .ei-product-features-column {
    width: var(--col-width);
    .image-space img {
        aspect-ratio: 3/2;
        object-fit: cover;
    }
    .image-space {
        width: 100%;
        height: auto;
        padding: 0px;
        aspect-ratio: 3/2;
        margin-bottom: 10px;
    }
    > .wp-block-button__link {
        font-size: 0.8em;
        width: 100%;
        padding: inherit;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }
    .ei-4-line-cell:not(:has(div)) {
        display: none;
    }
    .ei-4-line-cell:has(div)  {
        min-height: 100px;
        > div {
            display: flex;
            align-items: center;
            height: 100%;
        }
    }
}


/* Featured Project Sample Gallery */
.ei-feature-project-sample-gallery {
    display: grid;
    column-gap: 60px;
    grid-template-columns: 1fr;
    justify-items: center;
    margin: 30px;
    margin-top: 60px;
}
.ei-feature-project-sample-gallery-item {
    --accent-color: var(--theme-palette-color-6);
    cursor: pointer;
    border-top: 4px solid var(--accent-color);
    padding: 15px;
    width: 100%;
    > :is(h5,div) {
        color: var(--global-palette5);
        font-weight: 400;
    }
}
.ei-feature-project-sample-gallery-item.ei-focused {
    --accent-color: var(--theme-palette-color-1);
    border-color: var(--accent-color);
    transition: border 250ms ease-in-out;
    > :is(h5,div) {
        color: var(--accent-color);
    }
}
/* .ei-featured-project-image {
    padding: 30px;
} */
.ei-featured-project-image img {
    aspect-ratio: 1.8;
    width: -webkit-fill-available;
    object-fit: cover;
    border-radius: var(--ei-radius);
    box-shadow: var(--wp--preset--shadow--natural);
}
@media (min-width:900px) {
    .ei-feature-project-sample-gallery {
        grid-template-columns: 1fr 1fr 1fr;
    }
    [x-collapse] {
        display: block!important;
        height: auto!important;
    }
   
}


/* SEARCH AND FILTER */
#search-filter-form-12048 ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding-inline-start: 0px;
}
.searchandfilter input.sf-range-max, .searchandfilter input.sf-range-min {
    max-width: 100px;
}

/* META FIELDS */
span.ei-meta-value {
    filter: invert();
    font-size: 0.8em;
    margin-block: 0px!important;
}

/* PLUGIN TWEAKS */
#wpsl-search-wrap form {
    display: flex;
    flex-wrap: wrap;
}
