/* 
 Theme Name: Pop-up-Artists Theme
 Description: WordPress-Theme mit personalisiertem Theme für Pop-Up-Artists
 Version: 1.0
 Author: wppt:kommunikation gmbH, wuppertal
 Author Uri: https://wppt.de 
*/

:root {
    --pua-black: #000;
    --pua-hero: #CDDBDE;
    --pua-darkgray: #AFAFAC;
    --pua-footer: var(--pua-darkgray);
    --pua-headline-red: #AC3318;
    --pua-headline: #29227C;
    --pua-externallink: #29227C;
    --pua-font-family: 'Din', Helvetica, Arial, Verdana, sans-serif;
    --pua-smallhelinefont: 1.875rem;
    --pua-biggerheadlinefont: 3.4375rem;
    --pua-smalltxtfont: 1.375rem;
    --pua-biggertxtfont: 1.75rem;
}

@font-face {
    font-display: swap;
    font-family: 'Din';
    src: url('assets/fonts/din/din-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

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

html {
    font-size: 1rem;
}

body {
    font-family: var(--pua-font-family);
    font-weight: normal;
    color: var(--pua-black);
    font-size: var(--pua-smalltxtfont);
    background: var(--pua-hero);

    @media (min-width: 768px) {
        & {
            font-size: var(--pua-biggertxtfont);
        }
    }
}

.container,
.container-fluid,
.txtcontainer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.container,
.txtcontainer {
    padding-right: 20px;
    padding-left: 20px;
}

.container > .txtcontainer {
    padding-right: 0;
    padding-left: 0;
}

.txtcontainer {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* max-width: 65%; */
}

@media (min-width: 768px) {}

@media (min-width: 1024px) {
    .container {
        max-width: 950px;
    }

    .txtcontainer {
        max-width: 716px;
        padding: 0;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }

    .txtcontainer {
        max-width: 896px;
        padding: 0;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1450px;
    }

    .txtcontainer {
        max-width: 1075px;
        padding: 0;
    }
}

body>footer,
body>header,
body>main {
    padding: 0;
}

nav ol:last-of-type,
nav ul:last-of-type {
    margin-right: 0;
}

nav ol:first-of-type,
nav ul:first-of-type {
    margin-left: 0;
}

:where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
    --pico-color: var(--pua-headline-red);
    --pico-underline: var(--pua-headline-red);
    --pico-text-decoration: none;
}

:where(a:not([role=button])),
[role=link] {
    color: var(--pua-externallink);
    --pico-underline: var(--pua-headline-red);
}

:where(.wp-block-columns) {
    margin: 0;
}

nav {
    ul {
        li {
            padding: 0;

            a {
                text-transform: uppercase;
                font-size: 1.5625rem;
                font-weight: bold;

                &[href="https"] {
                    text-decoration: none;
                    color: var(--pua-externallink);
                }

                &[href="https"]:hover {
                    text-align: none;
                }

                &[href^="#"],
                &[href^=""] {
                    text-decoration: underline;
                    color: var(--pua-headline-red);
                    cursor: default;
                    pointer-events: none;
                }
            }
        }
    }
}

.block {
    min-height: 100vh;
    min-height: 100dvh;
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
    padding-top: 5rem;
    padding-bottom: 5rem;

    @media (min-width: 768px) {
        & {
            padding-top: 7.5rem;
            padding-bottom: 7.5rem;
        }
    }

    &:first-child {
        border-top: 0;
        padding-top: 0;
    }

    &:nth-of-type(2) {
        border-top-width: 10px;
    }

    &:last-of-type {
        border-bottom-width: 10px;
    }
}

section {
    margin-bottom: 0;
}

article {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

h1,
h2 {
    color: var(--pua-headline);
    text-transform: uppercase;
    margin-bottom: 0;
    font-size: var(--pua-smallhelinefont);
    font-family: var(--pua-font-family);

    @media (min-width: 768px) {
        & {
            font-size: var(--pua-biggerheadlinefont);
        }
    }

    a {
        color: var(--pua-headline-red);
        text-decoration: none;

        &:hover {
            text-decoration: none;
        }
    }
}

h2 {
    margin-bottom: 1.875rem;
}

h3, h4, h5, h6 {
    font-family: var(--pua-font-family);
    font-size: var(--pua-smalltxtfont);
    color: var(--pua-headline);
    font-weight: bold;
    text-transform: uppercase;

    @media (min-width: 768px) {
        font-size: var(--pua-biggertxtfont);
    }
}

p {
    color: var(--pua-black);
    margin-bottom: 1.5em;
    line-height: 1.25;

    &:empty {
        display: none;
    }

    &:last-of-type {
        margin-bottom: 0;
    }
}

a {
    text-decoration: none;
    color: var(--pua-externallink);

    &:hover {
        text-decoration: none;
    }
}

blockquote {
    border: none;
    margin: 0;
    margin-top: 4.375rem;
    margin-bottom: 2.5rem;
    padding: 0;
    text-align: center;

    @media (min-width: 768px) {
        margin-top: 6.3125rem;
        margin-bottom: 5rem;
    }
}

blockquote>p,
blockquote>p:last-of-type {
    font-size: 2.0625rem;
    line-height: 125%;
    margin-bottom: 1.875rem;

    @media (min-width: 1024px) {
        font-size: 2.8125rem;
    }
}

blockquote footer {
    color: var(--pua-black);
}

blockquote cite {
    font-style: normal;
    font-size: 1.25rem;

    @media (min-width: 1024px) {
        font-size: 1.5625rem;
    }
}

br {
    &.bmobile {
        @media (min-width: 768px) {
            display: none;
        }
    }

    &.bdesktop {
        @media (min-width: 768px) {
            display: block;
        }
    }
}

.wp-block-list,
.flexible-list {
    padding-left: 0;
    font-size: var(--pua-smalltxtfont);
    color: var(--pua-black);

    @media (min-width: 768px) {
        font-size: var(--pua-biggertxtfont);
    }

    li {
        list-style: none;
    }
}

.flexible-list {
    li {
        border-bottom: 2px solid #fff;
        padding-bottom: 50px;
        margin-bottom: 50px;
        line-height: 1;

        .wp-block-column {
            margin-bottom: 0;

            &:first-of-type {
                order: 2;

                @media (min-width: 782px) {
                    & {
                        order: 1;
                    }
                }
            }

            &:last-of-type {
                order: 1;
                margin-bottom: 1.875rem;

                @media (min-width: 782px) {
                    & {
                        order: 2;
                        margin-bottom: 0;
                    }
                }
            }
        }

        &:last-of-type {
            border-bottom: none;
            padding-bottom: 0;
        }
    }

    .is-layout-flex {
        display: flex;
    }
}

.is-layout-flex {
    display: grid;
    grid-template-columns: 1fr;

    @media (min-width: 782px) {
        & {
            grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
            gap: calc(var(--pico-spacing) * 2);
        }
    }
}

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

.wp-block-image + .txtcontainer {
    margin-top: 3.125rem;

    @media (min-width: 1024px) {
        margin-top: 7.5rem;
    }
}

.wp-block-gallery {
    &.wp-block-gallery-0 {
        max-width: 100%;
        height: auto;
        position: relative;
        margin: auto;
        list-style: none;

        .wp-block-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            transition: opacity 3s ease-in-out;
            list-style: none;
        }

        .wp-block-image:first-child {
            position: relative
        }

        .wp-block-image.active {
            opacity: 1;
            z-index: 2
        }

        .wp-block-image.last-active {
            opacity: 1;
            z-index: 1
        }

        .wp-block-image img {
            width: 100%;
            height: auto
        }
    }

    &.wp-block-gallery-1 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;

        @media (min-width: 1024px) {
            & {
                grid-template-columns: repeat(8, 1fr);
                gap: 0;
            }
        }
    }

    &.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
        width: 100%;
    }
}

.block-scroll {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;

    .scroll-container {
        display: block;
        overflow-y: auto;
        margin: 0 auto;
        padding-right: 3.125rem;
        min-height: 0;
        width: 100%;
        flex: 1;
    }
}

.page-pua {
    background: var(--pua-hero);

        .header-container {
            position: sticky;
            top: 0;
            z-index: 9999;
            background: var(--pua-hero);
        }

    .header__elements {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 1.75rem;
        margin-bottom: 2.125rem;

        @media (min-width: 1280px) {
            display: flex;
            flex-direction: row;
            align-items: end;
            padding-top: 4.8125rem;
        }
    }

    .menu-header-menue-container {
        position: relative;
        width: 100vw;
        left: 0;
        z-index: 999;
        top: 0;

        @media (min-width: 1280px) {
            width: auto;
        }
    }

    .header-menu {
        flex-direction: column;
        align-items: start;
        margin-bottom: 0.3125rem;
        font-size: 1.5625rem;

        @media (min-width: 1280px) {
            & {
                flex-direction: row;
                justify-content: normal;
                gap: 3.125rem;
            }
        }
    }

    .hero__elements {
        position: relative;
    }

    .hero__container-inner {
        position: relative;
    }

    .hero__gallery {
        position: relative;
        display: flex;
        justify-content: center;
    }

    .disturber__link {
        position: absolute;
        right: -4.25rem;
        top: 50%;
        border-radius: 100%;
        text-align: center;
        width: 180px;
        aspect-ratio: 1;
        text-decoration: none;
        text-transform: uppercase;
        line-height: 1.1578947368;
        display: none;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        color: #000;
        font-size: 19px;
        transform: rotate(-15deg) translateY(-50%);
        z-index: 999;

        @media (min-width: 1024px) {
            & {
                display: flex;
            }
        }
    }

    .gr-presse {
        a {
            color: inherit;
        }
    }

    .gr-impressum {
        h3,
        h4,
        h5, 
        h6 {
            font-size: var(--pua-smalltxtfont);
            color: var(--pua-black);
            font-weight: normal;
    
            @media (min-width: 768px) {
                font-size: var(--pua-biggertxtfont);
            }
        }

        .wp-block-list li {
            list-style: square;
            margin-left: 1.5625rem;

            &::marker {
                color: var(--pua-headline);
            }
        }
    }
}

body {
    .menu-header-menue-container {
        max-height: 0;
        transition: max-height .5s ease-in-out;
        overflow: hidden;

        @media (min-width: 1280px) {
            max-height: 100%;
        }


        .header-menu {
            opacity: 0;
            transition: opacity .3s ease-in-out;

            @media (min-width: 1280px) {
                opacity: 1;
            }
        }
    }

    &[data-menuopen="true"] {
        .menu-header-menue-container {
            max-height: 300px;
            overflow: visible;

            .header-menu {
                & {
                    opacity: 1;
                }
            }
        }
    }
}

/* GLightbox Custom Background */
.glightbox-container {
    background: #5F5F59 !important;
}

.goverlay {
    background: #5F5F59 !important;
    opacity: 1 !important;
}

.glightbox-clean .gslide-media {
    box-shadow: none !important;
}

/* GLightbox Button Backgrounds entfernen */
.glightbox-button {
    background: transparent !important;
}

.glightbox-button:hover {
    background: transparent !important;
}

.gclose,
.gnext,
.gprev {
    background: transparent !important;
    padding: 0;
}

.glightbox-clean .gclose {
    opacity: 1;
}

.gclose:hover,
.gnext:hover,
.gprev:hover {
    background: transparent !important;
}

.gclose:hover {
    opacity: 1 !important;
}


.gclose svg {
    width: 20px !important;
    height: auto !important;
}

.gnext svg,
.gprev svg {
    width: 26px !important;
    height: auto !important;
}

.footer__container {
    color: #000;

    .footer__inner {
        display: flex;
        flex-direction: column;
        padding: 4.0625rem 0;
        gap: 1.5625rem;
        align-items: center;

        @media (min-width: 1024px) {
            & {
                padding: 4.0625rem 0;
                flex-direction: row;
                gap: 0;
                justify-content: space-between;
                align-items: end;
            }
        }

        img {
            max-width: 18.75rem;
        }
    }

    p {
        margin-bottom: 0;
    }
}

.hamburger {
    position: absolute;
    display: block;
    margin-top: 0;
    cursor: pointer;
    background: none;
    border: none;
    top: 1.75rem;
    right: 1.25rem;
    padding: 0;
    z-index: 999;
}

@media (min-width: 768px) {
    .hamburger {
        top: 2.4375rem;
    }
}

@media (min-width: 1280px) {
    .hamburger {
        display: none
    }
}

.hamburger:focus {
    box-shadow: none
}

.hamburger span {
    display: block;
    background: var(--pua-headline);
    width: 30px;
    height: 4px;
    margin-bottom: 5px;
}

.hamburger__bun-top,
.hamburger__bun-bottom {
    transform: rotate(0deg) translate(0, 0);
    transition: all 0.5s linear
}

.hamburger__bun-bottom {
    margin: 0
}

.hamburger__bun-top.animated {
    transform: rotate(-45deg) translate(-6.5px, 6.5px);
    transition: all 0.5s linear
}

.hamburger__bun-bottom.animated {
    transform: rotate(45deg) translate(-6.5px, -6.5px);
    transition: all 0.5s linear
}




.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important
}


/* Animations */

.fadein {
    animation: fadein 2s forwards
}

.fadeout {
    animation: fadeout 2s forwards
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeout {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

/* Alert */

.fallback-notice {
    background: rgba(255, 0, 0, 0.5);
    border-radius: 5px;
    border: 1px solid red;
    padding: 20px;

    p {
        color: #fff;
    }
}