/* 
Theme Name: Compentus
Description: Compentus is a child theme of Hello Elementor
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* general */
h1,h2,h3,h4,p {
    text-wrap: pretty;
}



/* hero stuff */
.hero-intro {
    transition: min-height 1000ms cubic-bezier(.96,0,.28,1) !important;
    will-change: transform;
    overflow: hidden;
}

.hero-intro.intro--finished {
    height: 0% !important;
    max-height: 0px !important;
    min-height: 0;
}



/* dark mode stuff */
:root {
    --dark-mode-ms: 600ms;
    --dark-mode-color: #f0f0f0;
    --dark-mode-bg: #212121;
}

body, 
.e-con.e-parent {
    transition: background-color var(--dark-mode-ms), color var(--dark-mode-ms), filter var(--dark-mode-ms) !important;
}

.dark-mode {
    /* transition: background-color var(--dark-mode-ms), color var(--dark-mode-ms), filter var(--dark-mode-ms) !important; */
    background-color: var(--dark-mode-bg) !important;
    color: var(--dark-mode-color) !important;
}

.dark-mode p,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode span,
.dark-mode a,
.dark-mode div {
    color: var(--dark-mode-color) !important;
}

.dark-mode img[src$=".svg"] {
    filter: invert(1);
}

.dark-mode svg g {
    fill: var(--dark-mode-color) !important;
}
.dark-mode svg path {
    stroke: var(--dark-mode-color) !important;
}

.dark-mode .elementor-divider {
    --divider-color: var(--dark-mode-color);
}

.dark-mode .elementor-element .elementor-button:hover,
.dark-mode .elementor-element .elementor-button:hover span {
    background: var(--dark-mode-color) !important;
    color: var(--dark-mode-bg) !important;
}

.dark-mode .featured-slider__scrollbar {
    background-color: #999;
}

.dark-mode .featured-slider__scrollbar::after {
    background-color: var(--dark-mode-color);
}



/* hover effect on featured work */
.work-image {
    transition: transform 500ms ease !important;
}

.featured-slider > .e-child:hover .work-image {
    transform: scale(1.05);
}



/* FEATURED SLIDER */
.featured-slider {
    scroll-behavior: auto; /* smooth is buggy */
    position: relative;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    
    cursor: grab;
}

.featured-slider::-webkit-scrollbar {
    display: none;
}

.featured-slider > .e-child {
    scroll-margin-left: 6.25vw;
}

.featured-slider.is-snappy {
    scroll-snap-type: x mandatory;
}
.featured-slider.is-snappy > .e-child {
    scroll-snap-stop: always;
    scroll-snap-align: start;
}

.featured-slider.is-dragging {
    scroll-behavior: auto;
    scroll-snap-type: none;
    
    cursor: grabbing;
}

.featured-slider.is-dragging a {
    cursor: grabbing;
}

.featured-slider.is-dragging > .e-child {
    scroll-snap-stop: normal;
    scroll-snap-align: none;
}

/* Custom Scrollbar */
.featured-slider__scrollbar {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #ccc;
    cursor: grab;
}
.featured-slider__scrollbar.is-dragging {
    cursor: grabbing;
}
.featured-slider__scrollbar::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 1;
    padding: 20px 0;
}
.featured-slider__scrollbar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--scrollbar-width, 0);
    height: 100%;
    background-color: black;
    transform: translateX(var(--scrollbar-translate));
    z-index: 2;
}