/*
    Theme Name:         lukar-Theme
    Version:            1.0
    Author:             iconate® Gesellschaft für Kommunikation und Medien mbH
    Author URI:         https://iconate.de/
    Description:        Theme for the website of lukar°
    Text Domain:        lukar
    Template:           propvisionx
    Tested up to:       6.9.1
    Requires at least:  6.9.1
    Requires PHP:       8.5
    License:            GNU General Public License v2 or later
    License URI:        http://www.gnu.org/licenses/gpl-2.0.html
*/
:root {
    --wp--preset--color--black: white;
    --wp--preset--color--white: black;

    --wp--style--global--content-size: calc(100dvw - (var(--wp--preset--spacing--20) * 2));
    --wp--style--global--wide-size: calc(100dvw - (var(--wp--preset--spacing--20) * 2));
    --section-wide: calc(var(--wp--style--global--wide-size) - (var(--wp--preset--spacing--100) * 2));

    --button-arrow: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5.834' fill='none' overflow='visible'%3E%3Cg%3E%3Cpath d='M 10 2.837 L 0 2.837' fill='transparent' stroke-width='0.85' stroke='rgb(255, 255, 255)' stroke-miterlimit='10'%3E%3C/path%3E%3Cpath d='M 6.979 0 L 9.979 2.917 L 6.979 5.834' fill='transparent' stroke-width='0.85' stroke='rgb(255, 255, 255)' stroke-miterlimit='10'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    --button-x: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' overflow='visible'%3E%3Cg%3E%3Cpath d='M 0 0 L 4 4 L 8 8' fill='transparent' stroke='rgb(255, 255, 255)' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M 8 0 L 4 4 L 0 8' fill='transparent' stroke='rgb(255, 255, 255)' stroke-linecap='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%0A%3Csvg width='7' height='6' viewBox='0 0 7 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.707092 2.7002L2.70709 4.7002L5.70709 0.700195' stroke='white' stroke-linecap='square'/%3E%3C/svg%3E%0A");
}

#contact-section-wrapper form *[aria-hidden="true"]:not(.wpcf7-not-valid-tip, .wpcf7-response-output),
.wpcf7-spinner {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

a,
p:not(.cm__desc),
span,
h1, h2:not(.cm__title),
h3, h4, h5 {
    color: var(--wp--preset--color--black) !important;
}

.section-title,
.section-subtitle,
.section-headlines > *,
.navigation-text-item__title,
.ntb-nav-title,
h1, h2, h3, h4, h5 {
    font-weight: 400;
}

.section-title,
.cb-slide .wp-block-heading,
.swiper-headline-text {
    font-style: italic;
}

.section-subtitle {
    color: var(--wp--preset--color--grey-1) !important;
}

/* button */

.wp-block-buttons {
    position: relative;
}

.wp-block-button,
#contact-section-wrapper form p:has(input[type="submit"]) {
    padding: calc(var(--wp--preset--spacing--10) / 1.5) var(--wp--preset--spacing--10);
    padding-left: calc(var(--wp--preset--spacing--10) * 3);
    background-color: var(--wp--preset--color--white);
    z-index: 15;
}

.wp-block-buttons::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    z-index: -1;
    display: block;
}

.wp-block-button.sticky {
    position: fixed;
    right: var(--wp--preset--spacing--20);
    bottom: var(--wp--preset--spacing--20);
    border: .5px solid var(--wp--preset--color--black);
}

.wp-block-button .wp-block-button__link,
#contact-section-wrapper form p:has(input[type="submit"]),
#contact-section-wrapper form input[type="submit"] {
    position: relative;
    font-size: var(--wp--preset--font-size--small);
    padding: unset;
    border: unset;
    border-radius: 0;
    background-color: transparent;
}

.wp-block-button .wp-block-button__link::after {
    content: none;
}

.wp-block-button .wp-block-button__link::before,
#contact-section-wrapper form p:has(input[type="submit"])::before {
    content: "";
    position: absolute;
    display: block;
    left: calc(0px - var(--wp--preset--spacing--10) * 2);
    width: var(--wp--preset--spacing--10);
    height: var(--wp--preset--spacing--10);
    top: 50%;
    transform: translate(0, -50%);
    background-image: var(--button-arrow);
    background-position: center;
    background-repeat: no-repeat;
    transition: var(--transition);
}

.wp-block-button .wp-block-button__link:hover::before,
#contact-section-wrapper form p:has(input[type="submit"]):hover::before {
    transform: translate(0, -50%) rotate(-45deg);
}

/* header / footer */

header,
footer {
    width: var(--wp--style--global--wide-size);
    padding: var(--wp--preset--spacing--20);
}

header {
    /*height: calc(var(--wp--preset--spacing--100) - var(--wp--preset--spacing--20) * 2);*/
    align-content: center;
    background-color: transparent;
    mix-blend-mode: difference
}

header .wp-block-column.logo {
    filter: invert(1);
}

header .wp-block-column.logo > *,
header .wp-block-column.right > *{
    max-width: 30%;
    
}

header .wp-block-columns .wp-block-column.right {
    grid-gap: var(--wp--preset--spacing--40);
}

header .wp-block-columns {
    justify-content: space-between;
    position: relative;
}

header .wp-block-columns .wp-block-column.center {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    display: flex;
    justify-content: center;
    padding: var(--wp--preset--spacing--10) calc(var(--wp--preset--spacing--10) * 1.5);
    border-radius: var(--wp--preset--spacing--40);
    background: #00000050;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 0;
}

.wp-site-blocks::after {
  content: "";
  position: fixed;
  top: var(--wp--preset--spacing--20);
  left: 50%;
  width: 310px;
  height: 35px;
  border-radius: 35px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translate(-50%, 0);
  pointer-events: none;
  z-index: 10;
}

footer {
    background-color: var(--wp--preset--color--white);
}

footer a:hover,
footer .blog-name,
footer .copyright-year {
    color: var(--wp--preset--color--black) !important;
}

header .wpml-language-switcher-block ul.hasSpacing.isHorizontal li::after {
    color: var(--wp--preset--color--grey-2);
}

header .wpml-language-switcher-block ul.hasSpacing.isHorizontal li:has(a) {
    color: var(--wp--preset--color--grey-2);
}

@keyframes nav-appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

header .wp-block-column.right .wp-block-button__link,
header .wp-block-column.right .wpml-language-switcher-block {
    animation: nav-appear ease-out 0.8s both;
}

/* main */

main > .entry-content {
    width: 100%;
}

main > .entry-content > *:not(.video-section):not(.full-slider-section) {
    width: 100dvw;
    padding-left: unset !important;
    padding-right: unset !important;
    color: var(--wp--preset--color--white) !important;
}

main > .entry-content > *:not(.video-section):not(.full-slider-section):not(.section-contact),
.wp-block-post-title,
main > .entry-content > .section-contact > * {
    max-width: var(--section-wide) !important;
    margin: 0 auto !important;
}

main > .entry-content > .section-contact p,
main > .entry-content > .section-contact span,
main > .entry-content > .section-contact .section-title,
main > .entry-content > .section-contact .wp-block-heading {
    color: var(--wp--preset--color--white) !important;
}

main > .entry-content > .section-contact .section-subtitle {
    color: var(--wp--preset--color--grey-2) !important;
}

main > .entry-content > .section-contact {
    background-color: var(--wp--preset--color--black);
}

/* nav text block */

.navigation-text-block {
    background-color: var(--wp--preset--color--white);
    max-width: var(--section-wide) !important;
    z-index: 10;
}

.navigation-text-block::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    height: 100%;
    width: 100dvw;
    background-color: var(--wp--preset--color--white);
    z-index: -1;
}

.navigation-text-block__nav {
    max-width: calc((var(--section-wide) - (var(--wp--preset--spacing--40) * 2)) / 3) !important;
    width: calc((var(--section-wide) - (var(--wp--preset--spacing--40) * 2)) / 3) !important;
}

.navigation-text-block__content {
    max-width: calc(100% / 3 * 2) !important;
    width: calc(100% / 3 * 2) !important;
}

/* full layout */

@keyframes hero-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

main > .entry-content > .full-slider-section {
    animation: hero-fade-in 0.8s ease-out both;
}

main > .entry-content > .full-slider-section,
.full-slider-section .swiper-slide {
    padding: 0 !important;
    height: 100dvh;
}

.full-slider-section .swiper-slide {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    height: 100dvh !important;
}

main > .entry-content > .full-slider-section figure,
main > .entry-content > .video-section figure {
    position: relative;
    width: 100%;
    height: 100%;
}

main > .entry-content > .full-slider-section figure img,
main > .entry-content > .video-section figure video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
}

main > .entry-content > *, .wp-block-post-title {
    padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--40) !important;
}

.full-slider-section .wp-block-image img {
    width: 100%;
}

.swiper-headline-overlay {
    pointer-events: none;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 10;
}

.swiper-headline-text {
    margin: var(--wp--preset--spacing--20) !important;
    transition: opacity 0.6s ease;
}

.swiper-headline-text.is-hidden {
    opacity: 0;
}

/* video section */

main > .entry-content > .video-section {
    position: sticky;
    top: 0;
    height: 100dvh;
    padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) !important;
}

.video-section figure {
    overflow: hidden;
    border-radius: var(--wp--preset--spacing--20);
}

main > .entry-content > .video-section figure.wp-block-video video {
    transform: scale(0.5);
    transform-origin: center center;
    will-change: transform;
}

/* contact overlay */

body:has(button[aria-controls="contact-section-wrapper"][aria-expanded="true"]) {
    overflow: hidden;
}

#contact-section-wrapper[aria-hidden="true"] {
    opacity: 0;
    right: calc(0px - 100%);
}

#contact-section-wrapper {
    position: fixed;
    right: 0;
    top: 0;
    width: 25rem;
    height: 100dvh;
    padding: var(--wp--preset--spacing--20);
    margin: 0;
    background-color: var(--wp--preset--color--black);
    z-index: 102;
    transition: var(--transition);
}

#contact-section-wrapper .hidden-fields-container {
    display: none;
}

.wp-block-contact-form-7-contact-form-selector,
.wp-block-contact-form-7-contact-form-selector > *,
.wp-block-contact-form-7-contact-form-selector > * > * {
    width: 100%;
    height: 100%;
    margin: 0 !important;
}

#contact-section-wrapper,
#contact-section-wrapper form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: scroll;
    overflow-x: hidden;
}

#contact-section-wrapper form > *:not(.contact-headline):first-of-type {
  margin-top: auto !important;
  color: var(--wp--preset--color--grey-1) !important;
}

#contact-section-wrapper form .contact-headline p {
    font-size: var(--wp--preset--font-size--x-large) !important;
    font-weight: 400;
    font-style: italic;
    line-height: var(--line-height-regular);
    letter-spacing: -0.03px;
    color: var(--wp--preset--color--white) !important;
    margin-top: 0 !important;
}

#contact-section-wrapper form > p:has(input, textarea) {
    margin-top: var(--wp--preset--spacing--10) !important;
}

#contact-section-wrapper form label:has(input, textarea),
#contact-section-wrapper form label:has(input, textarea) input,
#contact-section-wrapper form label:has(input, textarea) textarea {
    position: relative;
    height: var(--wp--preset--spacing--40);
    font-size: var(--wp--preset--font-size--medium) !important;
    transition: var(--transition);
}

#contact-section-wrapper form label:has(input, textarea) input,
#contact-section-wrapper form label:has(input, textarea) textarea {
    color: var(--wp--preset--color--white) !important;
    background-color: var(--wp--preset--color--black) !important;
    line-height: 2.5;
}

#contact-section-wrapper form label:has(textarea),
#contact-section-wrapper form label textarea {
    height: calc(var(--wp--preset--spacing--40) * 2) !important;
}

#contact-section-wrapper form p {
    display: block;
    color: var(--wp--preset--color--grey-1) !important;
}

#contact-section-wrapper form *,
#contact-section-wrapper form p,
#contact-section-wrapper form input,
#contact-section-wrapper form label span {
    display: block;
    color: var(--wp--preset--color--grey-2) !important;
    font-size: var(--wp--preset--font-size--small) !important;
    width: 100%;
    padding: 0;
    border: unset;
    outline: unset;
}

#contact-section-wrapper form label > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}

#contact-section-wrapper form input {
    height: calc(var(--wp--preset--spacing--40) - var(--wp--preset--spacing--10));
    border-bottom: 1px solid var(--wp--preset--color--grey-2);
}

#contact-section-wrapper form textarea {
    height: calc(var(--wp--preset--spacing--40) * 2);
    border-bottom: 1px solid var(--wp--preset--color--grey-2);
}

#contact-section-wrapper form label:focus-within:not(:has(span.enc-math-captcha, input[type="checkbox"])),
#contact-section-wrapper form label.is-filled:not(:has(span.enc-math-captcha, input[type="checkbox"])),
#contact-section-wrapper form label:focus-within:not(:has(span.enc-math-captcha, input[type="checkbox"])),
#contact-section-wrapper form  label:has(input:not(:placeholder-shown))::before,
#contact-section-wrapper form  label:has(textarea:not(:placeholder-shown))::before,
#contact-section-wrapper form .wpcf7-not-valid-tip {
    font-size: calc(var(--wp--preset--font-size--small) - 4px) !important;
    line-height: 0.1;
}

#contact-section-wrapper form p,
#contact-section-wrapper form p:has(input[type="checkbox"]) {
    margin-top: var(--wp--preset--spacing--20) !important;
}

#contact-section-wrapper form p:has(:not(span)) {
  margin-left: calc((var(--wp--preset--spacing--20) / 1.5) + var(--wp--preset--spacing--10) + var(--wp--preset--spacing--10));
}

#contact-section-wrapper form p:has(.enc-math-captcha, input[type="submit"]) {
    margin-top: var(--wp--preset--spacing--40) !important;
}

#contact-section-wrapper form label:has(input[type="checkbox"], .enc-math-captcha) {
    display: flex;
    flex-direction: row;
    grid-gap: var(--wp--preset--spacing--10);
    height: auto !important;
}

#contact-section-wrapper .wpcf7-checkbox span.wpcf7-list-item {
    margin: 0;
}

#contact-section-wrapper form input[type="checkbox"] {
    width: calc(var(--wp--preset--spacing--20) / 1.5);
    height: calc(var(--wp--preset--spacing--20) / 1.5);
    margin: 0;
    margin-top: calc(var(--wp--preset--spacing--10) / 1.5);
    padding: 0;
    border: 1px solid var(--wp--preset--color--grey-2);
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
    transition: var(--transition);
    background-image: var(--icon-check);
    background-repeat: no-repeat;
    background-position: 2px center;
}

#contact-section-wrapper form input[type="checkbox"]:checked {
    background-color: var(--wp--preset--color--white) !important;
    border: 1px solid var(--wp--preset--color--white) !important;
}

#contact-section-wrapper form p:has(.text-595-wrap) {
    margin-top: 0 !important;
}

#contact-section-wrapper form label:has(input[type="checkbox"]) > *,
#contact-section-wrapper form label > span.enc-math-captcha {
    position: relative;
}

#contact-section-wrapper form label:has(.enc-math-captcha) {
    flex-direction: column !important;
    font-size: var(--wp--preset--font-size--small) !important;
}

#contact-section-wrapper form span.enc-math-captcha {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--medium) !important;
    color: var(--wp--preset--color--grey-1) !important;
}

#contact-section-wrapper form span.enc-math-captcha > input {
    width: var(--wp--preset--spacing--40);
    margin-left: var(--wp--preset--spacing--10);
}

#contact-section-wrapper form input[type="submit"] {
    width: auto;
    height: auto;
    border: 1px solid var(--wp--preset--color--white);
    padding: calc(var(--wp--preset--spacing--10) / 1.5) var(--wp--preset--spacing--10);
    padding-left: calc(var(--wp--preset--spacing--10) * 3);
    color: var(--wp--preset--color--black) !important;
    background-color: var(--wp--preset--color--white) !important;
}

#contact-section-wrapper form input,
#contact-section-wrapper form textarea,
#contact-section-wrapper form label:has(input:not([type="checkbox"]), textarea),
#contact-section-wrapper form label:has(:not(.enc-math-captcha)) {
    cursor: pointer;
    line-height: 2;
}

#contact-section-wrapper form label:has(input[type="checkbox"]),
#contact-section-wrapper form label:has(.enc-math-captcha) {
    line-height: var(--line-height-regular) !important;
}

#contact-section-wrapper form p:has(input[type="submit"])::before {
    left: var(--wp--preset--spacing--10);
    z-index: 10;
}

#contact-section-wrapper form .wpcf7-not-valid-tip {
    position: absolute;
    top: var(--wp--preset--spacing--20);
    right: 0;
    width: auto !important;
    color: #dc3232 !important;
    font-weight: 300;
}

/* Handling for form response container */
#contact-section-wrapper form .wpcf7-response-output {
    display: block;
}
#contact-section-wrapper form .wpcf7-response-output:-moz-only-whitespace {
    display: none;
}

/* close button */

#contact-section-wrapper .wp-block-button {
    background-color: transparent;
    border: unset;
    color: var(--wp--preset--color--grey-2);
}

#contact-section-wrapper button {
    margin-top: var(--wp--preset--spacing--20);
    filter: invert(1);
}

#contact-section-wrapper button::before {
    background-image: var(--button-x);
}

body:has(button[aria-controls="contact-section-wrapper"][aria-expanded="true"]) #contact-section-wrapper .wp-block-buttons:has(.close-contact-form-section) {
    position: fixed;
    bottom: var(--wp--preset--spacing--20) !important;
    right: var(--wp--preset--spacing--20) !important;
    z-index: 100;
}

.wp-block-button button.close-contact-form-section:hover::before {
  transform: translate(0, -50%) rotate(-90deg);
}

#contact-section-wrapper p a {
    display: inline;
}

@media (max-width: 1400px) {
    :root {
        --section-wide: var(--wp--style--global--wide-size);
    }
}

@media (max-width: 768px) {
    :root {
        --wp--style--global--content-size: calc(100dvw - (var(--wp--preset--spacing--20) * 2));
        --wp--style--global--wide-size: calc(100dvw - (var(--wp--preset--spacing--20) * 2));
        --section-wide: calc(100dvw - (var(--wp--preset--spacing--20) * 2));
    }

    main > .entry-content > .navigation-text-block > * {
        margin: unset !important;
    }

    .navigation-text-block__nav, .ntb-nav-counter {
        width: fit-content !important;
    }

    .navigation-text-block__content {
        width: 100% !important;
        max-width: 100% !important;
    }

     main > .entry-content > .navigation-text-block > .navigation-text-block__nav {
        margin-right: calc(var(--wp--preset--spacing--40) / 2) !important;
    }

     main > .entry-content > .navigation-text-block > .navigation-text-block__content {
        margin-left: calc(var(--wp--preset--spacing--40) / 2) !important;
    }

    #contact-section-wrapper {
        width: 80%;
    }

    #contact-section-wrapper form label:has(input, textarea),
    #contact-section-wrapper form label:has(input, textarea) input,
    #contact-section-wrapper form label:has(input, textarea) textarea {
        height: calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--10));
    }

    .swiper-headline-overlay {
        bottom: var(--wp--preset--spacing--40);
        bottom: calc(35px + var(--wp--preset--spacing--20));
        right: 0;
        left: unset;
    }

    main > .entry-content > .full-slider-section figure img,
    main > .entry-content > .video-section figure video {
        width: 100%;
        height: auto;
    }

    /* mobile menu*/

    header > .wp-block-columns {
        flex-direction: row-reverse;
    }

    header .wp-block-columns .wp-block-column.center {
        position: unset;
        top: unset;
        right: unset;
        transform: unset;
        flex-basis: unset;
        flex-grow: unset !important;
        filter: invert(1);
        padding: 0;
        background: unset;
    }

    header .wp-block-column.logo {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    header:has(.wp-block-navigation__responsive-container.is-menu-open) {
        mix-blend-mode: unset !important;
    }

    header .wp-block-columns .wp-block-column.right {
        display: none;
    }
    
    header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-column.right {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
    }

    header .wp-block-column.right > * {
        max-width: fit-content;
    }

    header .wp-block-column.right > .wpml-language-switcher-block {
        margin-top: 3px;
    }

    .wp-block-navigation__responsive-container-content,
    .wp-block-navigation__responsive-container-close {
        filter: invert(1);
    }

    header .wp-block-columns nav:has(.wp-block-navigation__responsive-container.is-menu-open),
    .wp-block-navigation__responsive-dialog {
        position: absolute;
        width: 100dvw;
        height: 100dvh;
        z-index: 100;
        background-color: var(--wp--preset--color--black);
        top: calc(0px - var(--wp--preset--spacing--20));
        right: calc(0px - var(--wp--preset--spacing--20));
    }

    .wp-block-navigation__responsive-container.is-menu-open { /*wp-block-navigation__responsive-container has-modal-open is-menu-open*/
        position: absolute !important;
        background-color: var(--wp--preset--color--white) !important;
        color: var(--wp--preset--color--black) !important;
        top: 0;
        width: 100%;
        height: 100%;
        left: 0;
    }
    
    .wp-block-navigation__responsive-dialog {
        top: 0;
        left: 0;
        margin: 0 !important;
    }

    .wp-block-navigation__responsive-container-content {
        padding-top: calc(var(--wp--preset--spacing--100) + var(--wp--preset--spacing--20)) !important;
    }

    .wp-block-navigation__responsive-container-close {
        top: calc(var(--wp--preset--spacing--20) * 1.125);
        right: var(--wp--preset--spacing--20);
    }

    .wp-site-blocks::after {
        display: none;
    }
}