/*
Theme Name: Johnny
Theme URI: http://www.yakiuta.net
Description: WordPress-Theme für yakiuta
Author: yakiuta
Author URI: http://www.bodenstein.app
Version: 2026
*/
@import url('https://fonts.googleapis.com/css2?family=Ruda:wght@400..900&display=swap');

:root {
    /*Farben*/
    --background-color: rgb(44, 52, 64);
    --body-color:#ffffff;
    --body-color-lightgrey:#818181;
    --footer-background-color: #2e2e2e;
    /*Maße*/
    --top-distance: 80px;
    --side-distance: 15px;
}
body {
    background-color: var(--background-color);
    color: var(--body-color);
    padding: 0 var(--side-distance);
    margin: 0;
    font-family: "Ruda", sans-serif;
}
#navLabel {
    position: fixed;
    left: var(--side-distance);
    top: 0;
    width: 100%;
    height: var(--top-distance);
    background-color: var(--background-color);
    z-index: 999;
    cursor: pointer;
}
input.hiddenCheckbox {
    display: none;
}
#filter-container {
    max-height: 0;
    transition: max-height 0.5s ease-out;
    visibility: hidden;
    overflow: hidden;
    line-height: 2em;

}
#filter-icon-checkbox:checked ~ #filter-container {
    visibility: visible;
    max-height: 10em;
    transition: max-height 0.5s ease-in;
}

nav#main {
    height: 0;
    overflow: hidden;
    position: fixed;
    top: 100px;
    float: left;
}
#navCheckbox:checked ~ nav {
    height: auto;
}
#navCheckbox:checked ~ #wrapper {
    display: none;
}
h1.nav {
    margin: 20px 0 0;
}
.filter-icon-label {
    cursor: pointer;
    display: block;
}

#wrapper {
    margin: var(--top-distance) 0 0;
    height: calc(100vh - 100px);
}
#wrapper.home {
    background-image: url("images/yakiutahome2026.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}
div.navCol {
    position: fixed;
    width: 100%;
    height: var(--top-distance);
    background-color: var(--background-color);
}
body.home div.navCol {
    display: none;
}
div.navCol.noback {
    display: none;
}
body.archive div.contentCol {
    padding-top: var(--top-distance);
}
#content {
    width: 100%;
}

.relative {
    position: relative;
}
.centered {
    text-align: center;
}


a,
a:hover {
    text-decoration: none;
    color: var(--body-color);
}
h1,
ul.nav li {
    font-size: 2em;
    font-weight: 400;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.nav {
    line-height: 2.5em;
}

/* temp */
ul.recht {
    margin-top: 50px;
}

img.main-breit {
    width: 100%;
    height: auto;
}
.wp-block-paragraph,
.hinweis {
    line-height: 1.5em;
}



ul#ausstellung ,
ul#workshop {
    color: var(--body-color-lightgrey);
}
.upcoming ,
.aktuell {
    color: var(--body-color);
}
ul#katalog li,
ul#raum li {
    border-bottom: dotted var(--body-color-lightgrey);
    padding: 10px 15px;
}
ul#ausstellung li,
ul#workshop li {
    border-top: dotted var(--body-color-lightgrey);
    padding: 10px 15px;
}
ul#ausstellung li.top,
ul#workshop li.top {
    border-top: none;
}
ul#ausstellung h3 {
    text-align: center;
    border-top: 7px solid var(--body-color-lightgrey);
    padding-top: 10px;
}
.katalog-mehr,
.ausstellung-mehr {
    position: absolute;
    border: 1px solid var(--body-color-lightgrey);
    padding: 3px 10px;
}
.katalog-mehr {
    right: 3px;
    top: 0;
}
.katalog-mehr a {
    color: var(--body-color);
}
h1.katalog {
    margin-bottom: 0;
}
h1.katalog ~ p {
    margin: 0 0 40px;
}
.ausstellung-mehr {
    right: 3px;
    top: 20px;
}
li.aktuell {
    background-color: #444d4f;
}

input#filterAktuell:checked ~ :not(.aktuell) {
    display: none;
}
input#filterBald:checked ~ :not(.upcoming) {
    display: none;
}
input#filterArchiv:checked ~ :not(.archiv) {
    display: none;
}




div.skizzenbuch-li {
    border: 1px solid var(--body-color-lightgrey);
    padding: 0 15px;
}

#filter {
    border: 1px solid var(--body-color-lightgrey);
    padding: 10px;
}
#filter a {
    color: var(--body-color-lightgrey);
}
#filter a:hover {
    color: var(--body-color);
}
figure.main-halbbreit img {
    object-fit: contain !important;
    object-position: top;
    width: 65%;
    height: 100%;
}
.wp-element-caption {
    margin-bottom: 3em;
    color: var(--body-color-lightgrey);
}

nav.pagination {
    text-align: center;
    margin: 20px 0;
}
.page-numbers.prev,
.page-numbers.next {
    border: 1px solid;
    padding: 8px 10px 10px;
    font-size: x-large;
}
.page-numbers.prev {margin-right: 15px;}
.page-numbers.next {margin-left: 15px;}

.page-numbers.current {
    color: var(--body-color-lightgrey);
    font-size: x-large;
}


/*
 *
 * Responsiveness */

@media only screen and (min-width: 600px) {
    #navLabel {
        width: inherit;
    }
    #wrapper {
        margin: var(--top-distance) 0 0;
        display: grid;
        grid-template-columns: 240px 1fr;
    }
    div.navCol {
        width: inherit;
    }
    div.navCol.noback {
        display: inherit;
        grid-column: 1/2;
    }
    #filter {
        display: none;
    }
    #filter-container {
        display: none;
    }
    div.contentCol {
        grid-column: 2/3;
    }
    #content {
        float: right;
        width: 537px;
    }

}