/*
Theme Name: Die Haustechnik
Theme URI: https://diehaustechnik.at
Author: Florian Narr
Author URI: https://www.klixpert.io
Description: Custom theme for Die Haustechnik
Version: 1.0.0
Text Domain: diehaustechnik
*/

:root {
    --mobile-breakpoint: 576px;
    /* Small devices (phones) */
    --tablet-breakpoint: 768px;
    /* Medium devices (tablets) */
    --desktop-breakpoint: 1024px;
    /* Large devices (laptops/desktops) */
    --large-breakpoint: 1200px;
    /* Extra large devices */
    --clip-path_faktor_1_1: polygon(0 0,
            88% 0,
            100% 15%,
            100% 100%,
            20% 100%,
            0 80%,
            0 0);
    /* this is 1:1 */
    --clip-path: var(--clip-path_faktor_1_1);
    --clip-path-faktor-2_5-1_6: polygon(0 0,
            88% 0,
            100% 20%,
            100% 100%,
            20% 100%,
            0 70%,
            0 0);
    /* this is 2.5:1.6 */
    --clip-path: polygon(40px 0,
            100% 0,
            100% calc(100% - 40px),
            calc(100% - 40px) 100%,
            0 100%,
            0 40px);
    --clip-path-invert: polygon(60px 0, 100% 0, 100% calc(100% - 90px), calc(100% - 90px) 100%, 0 100%, 0 60px);
    --clip-path-invert-2: polygon(0 0, calc(100% - 60px) 0, 100% 60px, 100% 100%, 60px 100%, 0 calc(100% - 60px));
}

h1.has-background, 
h2.has-background, 
h3.has-background, 
h4.has-background, 
h5.has-background, 
h6.has-background {
    @media screen and (max-width: 768px) {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }
}

.wp-block-post-content>p,
.wp-block-post-content>ul,
.wp-block-post-content>ol,
.wp-block-post-content>.wp-block-heading {
    max-width: var(--wp--style--global--content-size);
    width: 100%;
    margin-inline: auto;
}

@media (max-width: 1024px) {

    .wp-block-post-content>p,
    .wp-block-post-content>ul,
    .wp-block-post-content>ol,
    .wp-block-post-content>.wp-block-heading {
        padding-inline: var(--wp--preset--spacing--40);
    }

    footer>* {
        padding-inline: var(--wp--preset--spacing--40);
    }
}

:where(.wp-site-blocks)>* {
    margin-block-start: 0 !important;
}

.wp-block-post-content>*:not(:first-child):not(.wp-block-klx-breadcrumbs) {
    margin-block-start: 7.5rem !important;

    @media screen and (max-width: 768px) {
        margin-block-start: 3rem !important;
    }
}

footer>div {
    padding-block-start: 5rem;
    padding-block-end: 3rem;

    @media screen and (max-width: 768px) {
        padding-block-start: 0;
        padding-block-end: 0;
    }
}

footer .wp-block-columns {
    gap: 9.4rem;

    @media (max-width: 768px) {
        gap: 5rem;
    }
}

footer .wp-block-columns .is-layout-grid {
    gap: 3rem;
}

@media (max-width: 768px) {
    footer .wp-block-social-links {
        flex-direction: row;
    }

    footer a:not(.wp-block-social-link-anchor) {
        font-size: 1.1rem;
    }

    footer .wp-block-columns.wp-container-core-columns-is-layout-4 {
        gap: 3rem;
    }
}

a {
    transition: color 0.2s ease-in-out;
}

.admin-bar header,
.admin-bar .wp-block-klx-call-to-action:first-child {
    top: 44px !important;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

.wp-block-search {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 1px solid var(--wp--preset--color--primary-600);
    position: relative;
}

.search-results .wp-block-search {
    border-left: none;
}

.wp-block-search input {
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--wp--preset--color--pure-white);
    border: none;
    outline: none;
}

.wp-block-search .wp-block-search__inside-wrapper {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

.wp-block-search .wp-block-search__inside-wrapper::before {
    content: url("assets/svg/magnifier.svg");
    width: 21px;
    height: 20px;
    display: block;
    margin-left: 1rem;
}

.wp-block-search button svg {
    display: none;
}

@media (max-width: 768px) {
    .wp-block-search {
        border-left: none;
    }
}

.wp-block-search input:focus {
    outline: none;
    box-shadow: none;
}

.wp-block-search input::placeholder {
    color: var(--wp--preset--color--pure-white);
}