/* 
 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);
    hyphens: auto;

    @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;
}

.exhibition__title {
    margin-top: var(--pico-typography-spacing-top);
}

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);
    hyphens: none;

    @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;
    hyphens: none;

    @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;
    hyphens: none;

    @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%;
}

/* Kopfbild des One-Pagers: serverseitig gezogenes Einzelfoto. Das Einblenden loest die
   alte opacity-Transition der Stapelung ab. */
.hero-photo {
    margin: 0;
}

.hero-photo__image {
    display: block;
    width: 100%;
    height: auto;
    animation: hero-photo-einblenden 3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .hero-photo__image {
        animation: none;
    }
}

@keyframes hero-photo-einblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Der Kopfbereich gibt das Foto als .hero-photo aus, die uebrigen Abschnitte als
   .wp-block-image aus dem Blockeditor - beide brauchen denselben Abstand zum Text. */
.wp-block-image + .txtcontainer,
.hero-photo + .txtcontainer {
    margin-top: 3.125rem;

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

.wp-block-gallery {
    /* Das gestapelte Kopfbild ist entfallen: die Auswahl faellt jetzt serverseitig in
       popupartists_get_random_hero_image_id(), ausgegeben wird ein einzelnes .hero-photo
       im normalen Textfluss. Die Stapelung brauchte position: absolute und nahm dem
       Kopfbereich damit seine Hoehe - er behielt die des ersten Bildes und schob den Text
       je nach gezogenem Foto um bis zu 30px zu weit nach oben. */

    &.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);

            /* Innenabstand oben und Bildhoehe des Logos ergeben zusammen die Unterkante
               des Logos. Der Hamburger haengt an derselben Linie, steht als absolut
               positioniertes Element aber ausserhalb des Bildflusses und kann sie nicht
               vom Logo uebernehmen. Beide Werte stehen deshalb hier, wo sowohl das Logo
               als auch der Hamburger sie erben - sonst muesste jede Aenderung an einer
               der beiden Zahlen an einer zweiten Stelle nachgezogen werden. */
            --pua-header-block-start: 1.75rem;
            --pua-header-logo-height: 1.4rem;

            @media (min-width: 768px) {
                --pua-header-logo-height: 4.5rem; /*2.6rem*/
            }
        }

    .header__elements {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: var(--pua-header-block-start);
        /* Der Abstand nach unten war eine Aussenkante. .header-container hat weder Polsterung
           noch Rahmen, deshalb fiel sie mit ihm zusammen und lag ausserhalb seines
           Hintergrunds - das Logo sass sichtbar auf der Kante der Farbflaeche, darunter
           schimmerte der Seiteninhalt durch. Als Innenpolsterung bleibt der Abstand gleich
           gross, gehoert aber zur Flaeche und wird deshalb mit eingefaerbt. */
        padding-bottom: 20px;

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

    /* Schriftzug und optionales Header-Bild bilden zusammen ein Flex-Element, damit
       .header__elements weiterhin genau zwei Kinder hat und sein space-between-Layout
       unveraendert bleibt. Ohne ausgewaehltes Bild enthaelt der Wrapper nur die
       Ueberschrift und wirkt sich nicht aus. */
    .header__branding {
        display: flex;
        gap: 1rem;
        align-items: baseline;
    }

    /* Mit dem Schriftzug ist auch die sichtbare Textzeile entfallen, an deren Grundlinie
       das Logo hing. Den Strut, der das Logo um Unterlaenge und halben Durchschuss
       anhebt, traegt aber schon der Zeilenkasten des Logo-Links: laut Spezifikation
       beginnt jeder Zeilenkasten mit einem nullbreiten Kasten aus Schriftart und
       Zeilenhoehe des Blocks. Ein zusaetzliches Pseudoelement mit Zero-Width-Space war
       dafuer nicht noetig und in WebKit sogar schaedlich - U+200B ist eine
       Umbruchgelegenheit, und weil die Ueberschrift als Flex-Element nur so breit ist wie
       ihr Inhalt, ist die Zeile hinter dem Logo voll: WebKit bricht dort um und setzt das
       Pseudoelement auf eine zweite Zeile, was den Kopfbereich um eine Zeilenhoehe wachsen
       liess (249px statt 188px ab 768px, 114px statt 82px darunter) und das Menue aus der
       Flucht mit der Logo-Unterkante schob. Blink bricht an derselben Stelle nicht um.
       Ohne die Regel messen beide Engines dieselbe Geometrie, in Blink unveraendert zum
       Stand mit Regel - sie war dort von Anfang an wirkungslos.
    .header__branding h1::after {
        content: "\200B";
    }
    */

    /* Als Inline-Block haengt der Link mit seiner Unterkante an der Grundlinie des
       Zeilenkastens: ein Inline-Block ohne eigene Textzeile setzt seine Grundlinie auf
       die Unterkante. */
    .header__logo-link {
        display: inline-block;
        vertical-align: baseline;
    }

    .header__logo {
        /* Die Blockdarstellung haelt das Bild aus dem Zeilenkasten des Links heraus. Als
           Inline-Element wuerde es selbst auf dessen Grundlinie sitzen und der Link bekaeme
           die Grundlinie des Bildes statt seiner Unterkante - die Anhebung entfiele. */
        display: block;
        width: auto;
        max-height: var(--pua-header-logo-height);
    }

    .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;
            }
        }
    }

    .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;
                }
            }
        }
    }
}

.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;
    }
}

/* Der Button endet auf der Unterkante des Logos: top setzt seine Oberkante auf diese
   Linie, translateY zieht ihn um die eigene Hoehe wieder darueber. So bleibt die
   Ausrichtung an die beiden Werte gebunden, aus denen die Linie entsteht, statt an eine
   je Breakpoint nachgemessene Zahl - die frueheren 1.75rem und 2.4375rem liessen den
   Button ab 768px 34px zu hoch und darunter 4,62px zu tief sitzen.
   Als Flex-Spalte traegt der Abstand zwischen den Balken der gap, nicht mehr ein
   Aussenabstand am Balken: der letzte Balken schliesst damit buendig mit dem Button ab
   und liegt tatsaechlich auf der Linie. Der Text fuer Screenreader steht absolut und
   zaehlt als Flex-Element nicht mit. */
.hamburger {
    position: absolute;
    top: calc(var(--pua-header-block-start) + var(--pua-header-logo-height));
    right: 1.25rem;
    z-index: 999;
    transform: translateY(-100%);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

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

.hamburger:focus {
    box-shadow: none
}

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

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

/* Sollte den Aussenabstand unter dem letzten Balken zuruecknehmen, kam aber nie an:
   .hamburger span traegt eine Klasse und ein Element (0-1-1) und schlaegt diesen reinen
   Klassenselektor (0-1-0), der Abstand blieb stehen. Seit der Button eine Flex-Spalte mit
   gap ist, gibt es unter dem letzten Balken ohnehin keinen Abstand mehr.
.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;
    }
}