/*
Theme Name: hse Steuerungstechnik
Theme URI: https://hsesteuerung.de
Author: Agentur Herzstück GmbH
Author URI: https://www.agentur-herzstueck.de
Description: Block-Theme mit Full-Site-Editing Features, handgemacht für hse Steuerungstechnik
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hse
*/

/* ############################ FONT FACE */

@font-face {
    font-display: swap;
    font-family: 'Maven Pro';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/maven-pro-v39-latin/maven-pro-v39-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Maven Pro';
    font-style: normal;
    font-weight: 500;
    src: url('assets/fonts/maven-pro-v39-latin/maven-pro-v40-latin-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Maven Pro';
    font-style: normal;
    font-weight: 600;
    src: url('assets/fonts/maven-pro-v39-latin/maven-pro-v39-latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Maven Pro';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/maven-pro-v39-latin/maven-pro-v39-latin-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Maven Pro';
    font-style: normal;
    font-weight: 800;
    src: url('assets/fonts/maven-pro-v39-latin/maven-pro-v40-latin-800.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Maven Pro';
    font-style: normal;
    font-weight: 900;
    src: url('assets/fonts/maven-pro-v39-latin/maven-pro-v39-latin-900.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('assets/fonts/montserrat-v30-latin/montserrat-v30-latin-300.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/montserrat-v30-latin/montserrat-v30-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('assets/fonts/montserrat-v30-latin/montserrat-v30-latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('assets/fonts/montserrat-v30-latin/montserrat-v30-latin-800.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    src: url('assets/fonts/montserrat-v30-latin/montserrat-v30-latin-900.woff2') format('woff2');
}

/* ############################ BASICS */

body,
html {
    color: var(--wp--preset--color--gray);
    overflow-x: hidden;
    text-wrap: balance;
}

@media (max-width: 768px) {
    body {
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

a, button {
    transition: all .3s ease;
}

b,
strong {
    font-weight: 600;
}

.wp-block-heading b,
.wp-block-heading strong {
    font-weight: 800;
}

header.wp-block-kadence-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
    width: 100vw;
}

header .kb-header-container {
    transition: 0.5s;
}

.custom-logo {
    max-height: 60px;
    width: auto;
}

footer {
    margin: 0 !important
}

.footer-social {
    border-radius: 100em;
    border: 2px solid var(--wp--preset--color--white);
    padding: 5px;
    transition: 0.1s;
}

.footer-social:hover {
    border: 2px solid var(--wp--preset--color--red);
}

footer ul li {
    display: block !important;
}

footer ul li::after {
    display: block;
    content: "";
    height: 3px;
    background: var(--wp--preset--color--white);
    width: 0;
    margin: 0 auto;
    transition: width .2s ease-in-out 0s;
}

footer ul li:hover::after {
    width: 100%;
}

footer ul li:hover a {
    text-decoration: none;
}

/* ############################ NAVIGATIONS */

@media(min-width: 1025px) {

    /* First Level Menu */
    header .wp-block-navigation__container .wp-block-navigation-item {
        transition: 0.1s;
    }

    header .wp-block-navigation>.wp-block-navigation-item::after {
        display: block;
        content: "";
        height: 2px;
        background: var(--wp--preset--color--white);
        width: 0;
        margin: 0 auto;
        position: absolute;
        bottom: 0;
        left: 0;
        transition: width .2s ease-in-out 0s;
    }

    header .wp-block-navigation>.wp-block-navigation-item {
        padding: 0.25rem 0.75rem 0.75rem 0.75rem;
    }

    header .wp-block-navigation-item:hover::after,
    header .wp-block-navigation>.current-menu-item.wp-block-navigation-item::after {
        width: 100%;
    }

    /* Second Level Menu */

    header .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container, 
    header .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container, .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container, 
    header .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container {
        left: unset;
        right: 0;
    }

    header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container, 
    header .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, 
    header .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
        min-width: 230px;
    }

    header .wp-block-navigation .has-child.submenu-has-2-columns .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container, 
    header .wp-block-navigation .has-child.submenu-has-2-columns:not(.open-on-click):hover > .wp-block-navigation__submenu-container, 
    header .wp-block-navigation .has-child.submenu-has-2-columns:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
        display: block;
        column-count: 2;
    }

    header .wp-block-navigation__submenu-container .wp-block-navigation-item,
    header .wp-block-navigation__submenu-container .wp-block-navigation-item a {
        transition: 0.2s;
        hyphens: none;
        word-break: keep-all;
        color: var(--wp--preset--color--red);
    }

    header .wp-block-navigation__submenu-container>.wp-block-navigation-item {
        padding: 0.25rem;
        background: transparent;
    }

    header li.current-menu-ancestor.wp-block-navigation-item::after {
        width: 100%;
    }

    header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover a {
        color: var(--wp--preset--color--black) !important;
    }

    header .wp-block-navigation__submenu-container {
        background: var(--wp--preset--color--white)!important;
        color: var(--wp--preset--color--red);
        position: relative;
        overflow: hidden;
        margin-top: 0.75rem;
        box-shadow: none !important;
        transition: 0.2s !important;
        border: 0;
        padding: 0.5rem;
    }

    header .wp-block-navigation__submenu-container::before {
        content: "";
        background: url('data:image/svg+xml,<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 815.9 599.87"><defs><style> .st0 { fill: none; stroke: %23bf0012; stroke-width: 3px; } </style></defs><g id="Gruppe_5"><path id="Pfad_11" class="st0" d="M.6.8l345.91,261.92-174,336.69"/><path id="Pfad_12" class="st0" d="M346.51,262.78L815.44,18.22"/></g></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        position: absolute;
        opacity: 0.07;
    }

    header .wp-block-navigation__submenu-container>.wp-block-navigation-item a {
        width: 100% !important;
    }

    header .wp-block-navigation__submenu-container li.current-menu-item.wp-block-navigation-item a {
        color: var(--wp--preset--color--black) !important;
        font-weight: 600 !important;
    }
}

@media (max-width: 719px) {
    header .wp-block-kadence-navigation.navigation-mobile-orientation-vertical .kb-nav-dropdown-toggle-btn {
        background: var(--wp--preset--color--white);
        color: var(--wp--preset--color--black);
        padding: .5rem;
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
        align-self: center;
        flex-basis: max-content;
    }
    header .wp-block-kadence-navigation-link .kb-nav-arrow-svg, .wp-block-kadence-navigation-link .kadence-svg-icon {
        top: 0.075rem;
        width: 1.25rem;
        height: 1.25rem;
        align-self: center;
    }
}

/* ############################ BLOCK STYLES */

.wp-block-splide-carousel .splide__pagination {
    gap: 1rem;
    bottom: -50px;
}

.splide__pagination .splide__pagination__page {
    background-color: var(--wp--preset--color--red) !important;
    height: 20px;
    width: 20px;
    opacity: 1;
    transition: 0.2s;
}

.splide__pagination .splide__pagination__page:focus {
    outline: none;
}

.splide__pagination__page.is-active {
    transform: none;
    width: 80px;
    border-radius: 100em;
}
@media (max-width: 768px) {
    .splide__arrows {
        position: absolute;
        top: 0;
        width: 100%;
    }
    .wp-block-splide-carousel__container {
        padding-left: 0;
        padding-right: 0;
        padding-top: 2rem;
    }
    .wp-block-splide-carousel .splide__pagination {
        gap: 0.25rem;
    }

    .splide__pagination .splide__pagination__page {
        height: 10px;
        width: 10px;
    }
    .splide__pagination__page.is-active {
        width: 30px;
    }
}
@media (min-width: 769px) and (max-width: 1080px) {
    .wp-block-splide-carousel__container {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .wp-block-splide-carousel .splide__arrows--ltr .splide__arrow--prev {
        left: -3rem;
    }
    .wp-block-splide-carousel .splide__arrows--ltr .splide__arrow--next {
        right: -3rem;
    }
}

/* Decor on Headlines / Text*/
.is-style-with-decor {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-weight: 800;
    font-family: 'Maven Pro' sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.is-style-with-decor::before {
    content: "//";
    display: block;
    font-weight: 800;
    color: inherit;
}

/* Decor on Image*/
figure.is-style-decor {
    overflow: hidden;
}

figure.is-style-decor::before {
    content: "";
    background-color: var(--wp--preset--color--white);
    height: 13%;
    width: 100%;
    position: absolute;
    top: -2px;
    left: 0;
    z-index: 10;
    clip-path: polygon(0 0, 0 98%, 103% 0);
}


ul.is-style-list-decor,
ul.wp-block-list.is-style-list-decor {
    list-style: none;
    font-weight: 600;
}

ul.is-style-list-decor li {
    position: relative;
}

ul.is-style-list-decor li::before {
    content: "//";
    display: block;
    position: absolute;
    top: 0;
    left: -25px;
}

/* Service Card hover animation */
.service-card>div::before {
    content: "";
    display: block;
    background: var(--wp--preset--color--black);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.4 !important;

}

.service-card .wp-block-heading,
.service-card p {
    margin: 0;
    z-index: 2;
}


@media (min-width: 1025px) {
    .service-card {
        position: relative;
        height: 390px;
        overflow: hidden;
    }

    .service-card>div {
        height: 100%;
    }

    .service-card>div::before {
        content: "";
        display: block;
        background: var(--wp--preset--color--black);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        opacity: 0 !important;
        transition: 0.4s;

    }

    .service-card:hover>div::before {
        opacity: 0.6 !important;

    }

    .service-card h3 {
        margin: 0;
        z-index: 2;
    }

    .service-card p {
        margin: 0;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.4s ease, max-height 0.4s ease;
        z-index: 2;
    }

    .service-card:hover p {
        opacity: 1;
        max-height: 100%;
    }
}


/* ############################ POST STYLES */

.job-postings ul li.wp-block-post {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.job-postings ul li.wp-block-post h2 a {
    transition: 0.2s;
}

.sub-hero-stage::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50vw;
    height: 100%;
    background: #BF0012;
    background: linear-gradient(90deg, rgba(191, 0, 18, 0) 17%, rgba(191, 0, 18, 0.2) 67%);
}