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

:root {
    --gr-black: #000;
    --gr-hero: #F3F1E8;
    --gr-darkgray: #AFAFAC;
    --gr-footer: var(--gr-darkgray);
    --gr-headline: #AC3318;
    --gr-externallink: #29227C;
    --gr-font-family: 'Din', Helvetica, Arial, Verdana, sans-serif;
    --gr-smallhelinefont: 1.875rem;
    --gr-biggerheadlinefont: 3.4375rem;
    --gr-smalltxtfont: 1.375rem;
    --gr-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(--gr-font-family);
    font-weight: normal;
    color: var(--gr-black);
    font-size: var(--gr-smalltxtfont);
    background: var(--gr-hero);
    hyphens: auto;

    @media (min-width: 768px) {
        & {
            font-size: var(--gr-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(--gr-headline);
    --pico-underline: var(--gr-headline);
    --pico-text-decoration: none;
}

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

nav {
    ul {
        li {
            padding: 0;

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

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

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

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

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

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

    &: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(--gr-headline);
    text-transform: uppercase;
    margin-bottom: 0;
    font-size: var(--gr-smallhelinefont);
    font-family: var(--gr-font-family);
    hyphens: none;

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

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

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

h2 {
    margin-bottom: 1.875rem;
}

h3, h4, h5, h6 {
    font-family: var(--gr-font-family);
    font-size: var(--gr-smalltxtfont);
    color: var(--gr-black);
    font-weight: normal;
    text-transform: uppercase;
    hyphens: none;

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

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

    &:empty {
        display: none;
    }

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

a {
    text-decoration: none;
    color: var(--gr-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(--gr-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;
        }
    }

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

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

    @media (min-width: 768px) {
        font-size: var(--gr-biggertxtfont);
    }
    
    li {
        list-style: none;
        margin-bottom: 1em;
    }
}

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

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

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

/* Hero-Bild: 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;
    }
}

.wp-block-gallery {
    /* Das gestapelte Hero-Bild ist entfallen: die Auswahl faellt jetzt serverseitig in
       georgrose_theme_get_random_hero_image_id(), ausgegeben wird ein einzelnes .hero-photo
       im normalen Textfluss. Die Stapelung brauchte position: absolute und nahm dem Hero
       damit seine Hoehe - er behielt die des ersten Bildes und verschob den folgenden
       Inhalt je nach gezogenem Foto um -15 bis +24px. */

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

    &.has-nested-images.columns-8 figure.wp-block-image img {
        aspect-ratio: 1;
        object-fit: cover;
    }
}

.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-gr {
    background: var(--gr-hero);

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

        /* Innenabstand oben und Bildhoehe des Logos ergeben zusammen die Unterkante des
           Logos - und weil das Bild als Flex-Element an der Grundlinie haengt, zugleich
           die Grundlinie des Schriftzugs daneben. Das gilt, solange das Bild hoeher ist
           als die Oberlaenge des Schriftzugs; das ist es in beiden Breakpoints (die
           gemessene Oberkante des Bildes bleibt bei 28px, das Bild wird also nicht nach
           unten geschoben). 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. */
        --gr-header-block-start: 1.75rem;
        --gr-header-logo-height: 1.4rem;

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

    .header__elements {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: var(--gr-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;
    }

    /* Das Header-Bild ist verlinkt wie der Schriftzug daneben. Damit ist der Link das
       Flex-Element von .header__branding und traegt dessen flex-shrink; das Bild bleibt
       durch die Blockdarstellung an der Oberkante wie zuvor. */
    .header__logo-link {
        display: block;
        flex-shrink: 0;
    }

    .header__logo {
        /* Ohne Blockdarstellung sitzt das Bild als Inline-Element auf der Grundlinie des
           Links und wird dadurch um die Zeilenunterlaenge nach unten geschoben. */
        display: block;
        width: auto;
        max-height: var(--gr-header-logo-height);
        flex-shrink: 0;
    }

    .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-fotographie {
        .page-title {
            br {
                @media (min-width: 1024px) {
                    & {
                        display: none;
                    }
                }
            }
        }

        .wp-block-image {
            margin: 5rem 0;
        }

        /*
         * Die Seite "Radiomanager und Coach" laeuft in dieser Section weiter. Liegt kein
         * Bild dazwischen, folgt ihr article direkt auf den Fotografie-Text und bekommt
         * denselben Abstand wie eine Section nach oben. Steht das Bild wieder dazwischen,
         * greift die Regel nicht und der Bildabstand von 5rem bleibt wie gehabt.
         */
        .txtcontainer + .txtcontainer {
            margin-top: var(--block-padding-block);
        }
    }

    .gr-gallery {
        min-height: auto;
    }

    .gr-ausstellungen {

    }

    .gr-impressum {
        h3,
        h4,
        h5,
        h6 {
            font-size: var(--gr-smalltxtfont);
            color: var(--gr-black);
            font-weight: normal;

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

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

            &::marker {
                color: var(--gr-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: 9.75rem;
        }
    }

    p {
        margin-bottom: 0;
    }
}

/* Der Button endet auf der Unterkante des Logos, die zugleich die Grundlinie des
   Schriftzugs ist: 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 65,98px 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(--gr-header-block-start) + var(--gr-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(--gr-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
    }
}