@charset "utf-8";

/*
 Theme Name: Twenty Twenty-One Child-Theme
 Description:  Twenty Twenty One Child Theme for Geburtshaus Levi Strauss Museum
 Author:       Dev Specialists
 Author URI:   https://www.dev-specialists.com/
 Template:     twentytwentyone
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/
/* CSS Document */

/* Variables */
:root {
    --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);

    --global--font-size-base: 1rem;
    --global--font-size-xs: 0.813rem;
    --global--font-size-sm: 0.875rem;
    --global--font-size-md: 1rem;
    --global--font-size-lg: 1rem;
    --global--font-size-xl: 1rem;
    --global--font-size-xxl: 1.125rem;
    --global--font-size-xxxl: 1rem;
    --global--font-size-page-title: var(--global--font-size-xxl);
    --global--letter-spacing: normal;

    /* Line Height */
    --global--line-height-body: 18px;
    --global--line-height-heading: 18px;
    --global--line-height-page-title: 1.1;

    /* Headings */
    --heading--font-size-h3: var(--global--font-size-sm);
    --heading--font-size-h2: var(--global--font-size-xl);
    --heading--font-size-h1: var(--global--font-size-page-title);
    --heading--font-weight: bold;

    /* Main navigation */
    --primary-nav--font-size-sub-menu: var(--global--font-size-base);


    /* Colors */
    --global--color-red: #cc071e;
    --global--color-primary: #085079;
    --global--color-border: rgba(74, 121, 144, 0.5);
    --global--border--dashed: 3px dashed var(--global--color-border);
    --global-border-style: 1px solid transparent;
    --global-dashed-border-img-repeat: round;

    --global--width-sidebar-base: 20%;
    --global--width-sidebar-sm: 30%;
    --global--width-sidebar-xs: 100%;

    --button--padding-vertical: 5px;
    --button--padding-horizontal: calc(2 * var(--button--padding-vertical));

}

.widget-area, .pagination, .comments-pagination, .post-navigation, .site-footer, .site-header, .alignwide, .wide-max-width {
    max-width: 100%;
}

.content-area {
    width: 100%
}

.site-header {
    padding: 0;
    margin: 0 auto;
}

.float-content {
    float: none !important;
}

.collapsible {
    overflow: hidden;
    height: auto;
}

.collapsible.collapsed {
    height: 0 !important;
}

@media only screen and (min-width: 768px) {
    .content-area {
        margin: 0 auto;
    }
}

/*override styling from parent theme*/
.content-container {
    --responsive--alignwide-width: 100%;
    --responsive--aligndefault-width: 100%;
    width: 1258px !important;
    margin: 0 auto !important;
}

/*Headings*/
h1, h2, h3, h4, h5, h6,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: var(--global--color-red);
}

.side-bar-heading h1 {
    letter-spacing: 0.225rem;
}

.side-bar-heading h1 {
    letter-spacing: 0.06rem;
    color: var(--global--color-primary);
}

.side-bar-heading h1 a {
    line-height: 23px;
}

/*Links*/
.primary-navigation > div > a,
h1.archive-menu-title a,
.side-bar-heading h1 a {
    padding: 0;
}

.primary-navigation a:hover,
.primary-navigation a:link,
.primary-navigation a:visited,
.side-bar-right, a:link,
.side-bar-right, a:visited {
    text-decoration: none !important;
    text-underline: none !important;
}

.primary-navigation a:hover,
.side-bar-right, a:hover {
    color: var(--global--color-red);
    text-decoration: none;
}

.primary-navigation .current_page_item > a:first-child,
.side-bar-right a {
    text-decoration: none;
    color: var(--global--color-red);
}

a:focus {
    background-color: transparent !important;
    color: var(--global--color-red) !important;
}

/*Text*/
p {
    margin-bottom: 12px;
}

/*Elements */
hr.border-dashed-top {
    margin-bottom: 0.5rem;
    height: 1px;
    border-bottom: var(--global-border-style);
    border-image: var(--global-dashed-border-img);
    border-image-repeat: var(--global-dashed-border-img-repeat);
}

hr.border-dashed-bottom {
    height: 1px;
    margin-top: 0.5rem;
    border-bottom: var(--global-border-style);
    border-image: var(--global-dashed-border-img);
    border-image-repeat: var(--global-dashed-border-img-repeat);
}

hr.border-dashed-between {
    display: flex;
    border: none;
    height: 1px;
    border-bottom: var(--global-border-style);
    border-image: var(--global-dashed-border-img);
    border-image-repeat: var(--global-dashed-border-img-repeat);
    margin: 1rem 0 1rem 0 !important;
}

/*site layout*/
.wp-block-group {
    margin: 0 !important;
    clear: none;
    display: block;
}

.primary-navigation .side-bar-heading {
    padding-left: 1rem;
    display: none;
}

#primary-menu {
    width: 100%;
}

.sidebar-wrapper {
    width: 20%;
    float: right;
}

.content-wrapper h1,
.content-wrapper .h1,
.content-wrapper h2,
.content-wrapper .h2,
.content-wrapper h3,
.content-wrapper .h3,
.content-wrapper h4,
.content-wrapper .h4,
.content-wrapper h5,
.content-wrapper .h5,
.content-wrapper h6,
.content-wrapper .h6 {
    clear: none;
    margin-bottom: 0.5rem;
}

hr {
    clear: none;
}


.wp-block-group, .wp-block-group:before, .wp-block-group:after {
    clear: initial;
    display: block;
}

.sidebar-wrapper {
    width: 100%;
}

.sidebar-content-wrapper {
    display: flex;
    flex-direction: column-reverse;
}

.content-wrapper {
    padding: 0 0 2rem 0;
}

#primary-menu {
    padding-bottom: 1rem;
}

.content-wrapper > hr:first-child,
#primary-menu > hr:first-child {
    display: none;
}

@media only screen and (min-width: 768px) {
    .sidebar-content-wrapper {
        display: block;
    }

    .primary-navigation .side-bar-heading {
        display: block;
        width: 30%;
        float: right;
    }

    .sidebar-wrapper {
        width: 30%;
        display: block;
        float: right;
        padding-left: 1rem;
    }

    .sidebar-wrapper .side-bar-heading {
        display: none;
    }

    .content-wrapper {
        float: left;
    }

    #primary-menu {
        float: left;
        width: 70%;
    }
}

@media only screen and (min-width: 1279px) {
    .content-wrapper > hr:first-child,
    #primary-menu > hr:first-child {
        display: block;
    }

    #primary-menu > hr:first-child {
        padding: 0;
        margin: 0;
    }

    .primary-navigation .side-bar-heading {
        padding: 0;
        width: 20%;
        display: none;
    }

    .sidebar-wrapper .side-bar-heading {
        display: block;
        width: 100%;
    }

    .sidebar-wrapper {
        padding: 0;
        width: 20%;
        display: flex;
        flex-direction: column;
    }

    .content-wrapper {
        width: 60%;
        float: left;
        padding: 0 1.5rem;
    }

    .primary-navigation {
        float: left;
        width: 20%
    }

    #primary-menu {
        float: left;
        width: 100%;
    }

    .float-content {
        float: left !important;
    }
}

.site-content {
    margin-bottom: 2rem;
}

.site {
    padding: 1rem 1rem;
    background-color: rgba(255, 255, 255, 1.0);
}

@media only screen and (min-width: 768px) {
    .site {
        background-color: rgba(255, 255, 255, 0.7);
    }
}

#content-header h1 {
    clear: left;

}

#content-header {
    margin-bottom: 2rem;
}


@media only screen and (min-width: 768px) {
    .site {
        padding: 45px 57px;
    }

}

@media only screen and (min-width: 1279px) {
    #site-navigation {
        display: block;
    }

    .site {
        margin: 40px auto;
        padding: 1.813rem 4.625rem;
        background-color: rgba(255, 255, 255, 0.9);
        max-width: 1258px;
    }

    body.custom-background div.site {
        max-width: 1258px;
        margin: 1.813rem auto;
    }
}

/*Menu*/
.menu-wrapper {
    list-style-type: none;
    padding: 0;
}

.menu-wrapper li a {
    font-size: 16px;
    line-height: 18px;
    width: 100%;
    padding: 0.5rem 0;
    word-break: break-word;
    white-space: normal;
    border-bottom: 1px solid transparent;;
    border-image: var(--global-dashed-border-img);
    border-image-repeat: round;
}

.sub-menu {
    display: none;
}

.current-page-ancestor .sub-menu,
.current-menu-ancestor .sub-menu,
.current-menu-parent .sub-menu,
.current-page-parent .sub-menu,
.current_page_parent .sub-menu,
.current_page_ancestor.sub-menu,
.current-menu-active .sub-menu,
.current_page_item .sub-menu {
    display: block;
}

.primary-navigation .icon {
    display: none;
}

.nav-sidebar .menu-title,
.menu-title {
    color: var(--global--color-primary)
}

.menu-title-wrapper .menu-title {
    line-height: 23px;

}

.menu-title-wrapper {
    color: var(--global--color-primary);
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-weight: bold;
    font-size: 1.25rem;
}

.d-none {
    display: none;
}

.submenu-item {
    padding-left: 15px;
}

.content {
    padding: 0 75px;
}

.language-menu-wrapper {
    max-width: var(--responsive--alignwide-width);
    padding: 0.5rem 0;
}

.language-menu-container ul {
    padding: 0;

}

.language-menu,
.simple-language-menu-wrapper {
    list-style: none;
    display: flex;
}

.language-menu-wrapper li:after {
    content: " /\00a0";
}

.language-menu-wrapper li:last-child:after {
    content: " ";
}

.current-lang a {
    font-weight: bold;
}

.current-menu-parent > a {
    color: var(--global--color-red)!important;
}

.header {
    display: flex;
    width: 100%;
}

header div {
    background-repeat: no-repeat;
}

header .header-image {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

header .image-container {
    display: flex;
    width: 70%;
}

header .image-container div:first-child {
    display: none;
}

header .header-link {
    width: 30%;
}

header .header-logo {
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding-top: 100%;
}


.primary-navigation {
    position: static;
}

.primary-menu-wrapper ul {
    display: block !important;
}

.primary-navigation .sub-menu {
    margin: 0;
    border: none;
    margin-left: 20px !important;
}

.primary-navigation .sub-menu .menu-item > a {
    padding: 0.5rem 0;
}

.primary-navigation .primary-menu-container {
    margin: 0;
}

.primary-navigation .primary-menu-container > ul > .menu-item {
    display: block !important;
}

.primary-navigation > div > .menu-wrapper {
    display: block;
    max-width: 100%;
}


.primary-navigation > div > .menu-wrapper > li > .sub-menu {
    position: inherit;
    max-width: 100%;
    min-width: min-content;
}

.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
    background-color: transparent !important;
}

.primary-navigation .primary-menu-container > ul > .menu-item > a {
    padding-left: 0;
    padding-right: 0;
}

.primary-navigation > div > .menu-wrapper > li > .sub-menu:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
    content: none;
}

.primary-navigation .primary-menu-wrapper > ul > .menu-item > a {
    padding: 0.5rem 0;
}

.primary-menu-container {
    padding-bottom: 2rem;
}

.menu-icons,
.menu-icons a {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.site-main > article > *:first-child {
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .primary-menu-container {
        padding-bottom: 4rem;
    }
}

@media only screen and (max-width: 1279px) {
    .primary-menu-container {
        display: none;
    }

    .primary-menu-container.responsive {
        display: block;
        transition: 0s, opacity 0.5s linear;
    }

    .primary-navigation .icon {
        display: block;
    }


    .wp-block-media-text {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
        padding: 0 0 2rem 0;
    }

    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
        grid-column: 1;
    }

    .wp-block-media-text .wp-block-media-text__content {
        padding: 0 0 1rem 0 !important;
        grid-column: 1;
    }

    .wp-block-media-text .wp-block-media-text__media {
        grid-row: 2;
    }

    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
        grid-row: 2;
    }
}


@media only screen and (min-width: 1279px) {
    .wp-block-media-text {
        padding: 0 0 2rem 0;
        display: grid;
    }

    .header {
        height: 260px;
    }

    header .image-container {
        width: 80%;
        height: 260px;
    }

    header .image-container div:first-child {
        display: block;
    }

    header .header-link {
        width: 260px;
        padding-top: 0;
    }

    header .header-logo {
        width: 260px;
        padding-top: 0;
    }

    .wp-block-media-text__content p {
        padding: 0 0 0 1rem;
    }

    .wp-block-media-text__content p.has-text-align-left {
        padding: 0 1rem 0 0;
    }

    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        padding: 0 0;
    }

    .wp-block-media-text .wp-block-media-text__content {
        padding: 0;
    }

    .primary-menu-container {
        padding-bottom: 0;
    }

    .menu-icons {
        padding: 0.5rem 0 0 0;
    }
}

/* Post */
/*single page post*/
.single-post .post {
    display: block;
}

.post {
    display: flex;
    flex-direction: column-reverse;
}

.post-featured-image {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 1rem;
    width: 100%;
}

.post-featured-image img {
    width: 100%;
}

.post .entry-title {
    margin-top: 0;
    padding-bottom: 1rem;
}

.post p {
    max-width: var(--responsive--aligndefault-width);
}

@media only screen and (min-width: 768px) {
    .post {
        display: flex;
        flex-direction: row;
    }

    .single-post-page #primary-menu {
        float: none;
        width: 100%;
    }

    .post .post-featured-image {
        width: 33.33%
    }

    .post .post-content {
        width: 66.66%;
    }
}

@media only screen and (min-width: 1279px) {
    .single-post-page .content-wrapper {
        width: 80%;

    }
}

.post-preview {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
}

.post-preview hr {
    padding-top: 2rem;
}

.post-preview img {
    margin-bottom: 10px;
    width: 100%;
}


/*Footer */

.site-footer > *, .widget-area > * {
    margin: 0 !important;
}

footer {
    font-size: var(--global--font-size-xs);
}

footer p {
    padding-top: 0.5rem;
}

footer .contact-info-wrapper {
    padding: 1rem 0;
}

footer .contact-info-item {
    padding-bottom: 1.5rem;
}

footer .social-media-wrapper {
    display: flex;
    justify-content: space-around;
    padding: 2rem 0;
    gap: 0.775rem;
    max-width: 400px;
}

footer .social-media-item {
    width: 50%;
    display: flex;
    gap: 0.225rem
}

footer .social-media-item img {
    width: 30px;
}

footer .social-media-item span {
    width: 70%;
    height: 38px;
    margin: auto;
}

footer .copyright {
    padding-top: 1rem
}

footer .footer-menu-wrapper li,
footer ul.footer-menu-wrapper {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
footer .footer-menu-wrapper li {
    width: max-content;
}
footer .footer-menu-wrapper .footer-menu-link {
    width: 100%;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}{
}
footer .footer-menu-container {
    padding-bottom: 1.5rem;
}

footer ul.footer-menu-wrapper {
    display: flex;
    justify-content: space-around;
}


@media only screen and (min-width: 768px) {
    footer .contact-info-wrapper {
        display: flex;
        flex-wrap: wrap;
    }

    footer .contact-info-item {
        width: 50%;
    }

    footer .other-info-wrapper {
        display: flex;
    }

    footer .other-info-item {
        width: 50%;
    }

    footer .social-media-wrapper {
        display: flex;
        flex-direction: row;
    }

    footer .legal-links-wrapper {
        display: flex;
        flex-direction: column;
        padding: 2rem 0;
    }

    footer ul.footer-menu-wrapper {
        flex-direction: column;
    }

    footer .social-media-item img {
        width: 20%;
    }

    footer .social-media-item span {
        width: 72%;
    }
}


@media only screen and (min-width: 1279px) {
    footer .contact-info-item {
        width: 33%;
    }

    footer .contact-info-wrapper {
        width: 70%;
        display: flex;
    }

    footer .other-info-wrapper {
        width: 30%;
    }

    footer .footer-content {
        display: flex;
    }

    footer .social-media-item {
        width: 100%;
        padding-bottom: 1rem;
    }

    footer .legal-links-wrapper {
        width: 25%;
    }

    footer .social-media-wrapper {
        width: 60%;
    }

    footer .footer-menu-wrapper {
        list-style-position: inside;
    }

    footer .other-info-item {
        flex-direction: column;
        justify-content: normal;
    }
}

/* Google Maps */
.exggmap-mask {
    align-items: center;
    background-color: transparent !important;
    background-image: url("/app/uploads/2021/11/map-consent.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    filter: grayscale(40%);
    flex-direction: column;
    justify-content: center;
    padding: 15px;
}

.exggmap-caption {
    display: none;
}

.exggmap-mask button {
    background-color: transparent !important;
    color: var(--global--color-primary) !important;
    font-weight: 600;
    border: none;
}

@media only screen and (min-width: 768px) {
    .exggmap-wrapper {
        max-width: 70%;
    }

    .exggmap-wrapper .exggmap-mask {
        top: 4rem;
    }
}


@media only screen and (min-width: 1279px) {
    .exggmap-wrapper {
        max-width: none;
    }

    .exggmap-wrapper .exggmap-mask {
        top: 0;
    }
}