@charset "UTF-8";

@import url("components/color/global.css");
@import url("components/font/globals.css");
@import url("components/global.css");
@import url("components/server.css");

/*
### styling responsive
###  - with css grid and flexbox
###  - using @media queries
*/
/*
*** Global styles
 */
html {
    min-height: 100vh;
    width: 100%;
    color: var(--color-text-primary);
    overflow-wrap: break-word;
    scroll-behavior: smooth;
    font-family: sans-serif;
    color-scheme: light dark;
}
html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

*,
::before,
::after {
    box-sizing: border-box;
}
body {
    max-width: 97vw;
    margin: 0.5em auto;
    font-size: var(--font-size);
    line-height: var(--font-line-normal);
    font-family: var(--font-family-sans);
    background: var(--color-background-page);
}
.skip-link {
    --offset: 20em;
    --outline: 2px;
    left: var(--outline);
    list-style: none;
    margin: 0;
    position: absolute;
    right: var(--outline);
    top: calc(var(--offset)*-1);
    width: calc(100% - var(--outline)*2);
    z-index: 1000;
}
/* some settings while developing */
.aside-left {
    background: var(--color-background-secondary);
}
main {
    background: var(--color-background-primary);
}
.aside-right {
    background: var(--color-background-secondary);
}
/* end of developing settings */
h1 {
    letter-spacing: 0.015em;
    font-size: clamp(1.4rem, 2.5vw, 2.0rem);
    text-align: center;
    color: light-dark(
        var(--rl-color-coffee-15),
        var(--rl-color-coffee-90)
    );
    font-family: var(--font-family-chewy);
}
.navigation__logo {
    text-shadow: 0.1rem 0.1rem 0.1rem light-dark(
        var(--rl-color-orange-40),
        var(--rl-color-gold)
    );
}
h1,h2,h3,h4,h5,h6 {
    padding: 0;
    margin: 0;
}

p {
    line-height: var(--font-line-normal);
    font-size: max(1.2em, 1.2vw);
}

ul {
    list-style: none;
}
img,picture,video {
    max-width: 100%;
    height: auto;
}
/*input,
button,
textarea,
select {
    font: var(--font-family-cursive) 0.8rem var(--font-axis-regular);
}*/

button {
    color: inherit;
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

.page-layout__header {
    display: grid;
    position: sticky;
    top: 0;
    z-index: var(--z-index-sticky-header);
}

.navigation {
    padding: 0 0.25em;
    background-color: var(--color-background-page);
    &[data-scheme="dark"] {
        color: var(--color-text-primary);
        color-scheme: dark;
    }
}
img.middle {
    margin: 0;
    width: calc(var(--font-size) + 0.35rem);
    padding-right: 0.25rem;
    vertical-align: middle;
}

.breadcrumb-bar {
    align-items: center;
    background-color: var(--color-background-gold);
    border-width: 1px;
    border-bottom: 1px solid var(--color-border-primary);
    border-left: 0 solid var(--color-border-primary);
    border-right: 0 solid var(--color-border-primary);
    border-top: 1px solid var(--color-border-primary);
    column-gap: 1rem;
    display: flex;
    height: var(--breadcrumbs-bar-height);
    justify-content: end;
    max-width: 100vw;
    padding-inline: var(--layout-side-padding);
    text-wrap: nowrap;
}
.breadcrumb {
    align-items: center;
    display: flex;
    justify-content: end;
    list-style: none;
    margin: 0 auto 0 0;
    min-width: 0;
    overflow-x: hidden;
    padding: 2px;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-inline: .25rem;
    padding-right: 0.25rem;
    padding-left: 0.25rem;
}
.lang-menu__header {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lang-menu__header a {
    padding: 0 0.25em;
    display: block;
}
aside,
main {
    padding: 0.5rem;
}

footer {
    background: var(--color-background-page);
    display: grid;
}
.footer-menu {
    padding: 0.5em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.footer-menu a {
    padding: 0.25em;
    display: block;
}
.lang-menu__footer {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lang-menu__footer a {
    padding: 0.25em;
    display: block;
}
.openstreetmap {
    padding: 0.5em;
    text-align: center;
}
.openstreetmap small {
    display: block;
    font-size: 0.8em;
}
.openstreetmap iframe {
    border: 0.125em solid var(--color-border-primary);
    width: 100%; /* takes precedence over the width set with the HTML width attribute */
}
.copyright {
    text-align: center;
}
.copyright p {
    font-size: 0.8em;
}
.copyright img {
    vertical-align: middle;
}
.lang-menu__footer,
.footer-nav,
.copyright {
    font-size: calc(0.8em + 0.25dvw);
}
.active,
.current {
    text-decoration: none;
    color: var(--color-text-blue);
    background-color: var(--color-background-gold);
    a:hover {
        text-decoration: none;
    }
}

/* Dropdown menu navbar START */
/* Navigation */
/* Base */
/* Tab */

/* Tab Button */
.menu__tab-button {
    margin: 0;
    font: inherit;
    line-height: var(--font-line-ui);
    color: var(--color-text-blue);
    white-space: nowrap;
    cursor: pointer;
    background-color: transparent;

    &:is([aria-expanded="true"], :hover) {
        color: var(--color-text-blue);
        background-color: var(--color-background-gold);
    }

    /* Arrow & Icon */
    &::before,
    &::after {
        width: 1.25rem;
        height: 1.25rem;
        background-color: currentcolor;
        mask-size: cover;
    }

    /* Arrow */
    &::after {
        content: "";
        mask-image: url("../Icons/icon/chevron-down.svg");
    }
    &[aria-expanded="true"]::after {
        scale: -1;
    }
}
.menu__tab-label::first-letter {
    font-size: max(1.5rem, 1.2vw);
    font-weight: bold;
    font-family: var(--font-family-montecarlo);
    margin-right: 0.1rem;
}

/* Tab Link */
.menu__tab-link {
    /* Custom, to match the icon height */
    line-height: 1.25rem;
}

/* Panel */
.menu__panel-title {
    padding: 0.125rem 1.4rem;
    margin: 0;
    font-size: inherit;
    a {
        color: inherit;
    }
}
/* Dropdown navbar END */

a {
    color: var(--color-link-blue);

    &:hover {
        color: light-dark(
            var(--rl-color-hover),
            var(--rl-bg-hover)
        );
        background-color: light-dark(
            var(--rl-bg-hover),
            var(--rl-color-hover)
        );
    }
}
/* Solr search settings START */
/* Search */
/*.navigation__search[data-view="mobile"] {
    display: none;
}
.navigation__search[data-view="desktop"] {
    display: block;
}*/
.navigation__search {
    justify-self: end;
}
form {
    display: inline-block;
    /* Form outline */
    background: var(--color-background-aqua);
    padding: 0.25em;
    border: 1px solid var(--color-text-aqua);
    border-radius: 0.5em;
}
.input-group {
    display: flex;
}
.search-button {
    background: var(--color-background-aqua);
    &::after {
        content: "";
        mask-image: url("../Icons/icon/chevron-down.svg");
    }
}


/*.input-group input {
    background: var(--color-background-primary);
}
.input-group button {
    background: var(--color-background-secondary);
}*/
/* Solr search settings START */

/* media queries equal or larger than 70rem */
@media (width > 62.5rem) {

    /*:root {
        --navigation-height: 4.125rem;
    }*/
    .navigation {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        column-gap: 0.25rem;
        align-items: center;
        height: auto;

        /*padding-block: 0.75rem;
        padding-inline: var(--layout-side-padding);*/
    }

    /* Logo */

    .navigation__logo {
        margin-inline-start: -6px;
        padding-left: 0.5rem;
        justify-self: start;
    }
    /* Popup */
    .navigation__popup {
        display: contents;
    }
    /* Button */
    .navigation__button {
        display: none;
    }

    /* Dropdown navbar START */
    .menu {
        --menu-button-padding: 0.25rem 0.25rem;
        position: relative;
        display: flex;
        align-items: center;
        column-gap: 0.25rem;
        justify-content: space-between;
    }

    /* Button */
    .menu__tab-button {
        display: flex;

        column-gap: 0.125rem;
        align-items: center;

        padding: var(--menu-button-padding);

        border: none;
    }

    .menu__tab-button[aria-expanded="true"] {
        position: relative;
        z-index: 1;
    }

    /* Arrow */
    .menu__tab-button::after {
        margin-right: -4px;
    }

    /* Link */
    .menu__tab-link {
        padding: 0 0.7rem;
    }

    /* Label */
    .menu__tab-label[data-type="short"] {
        display: none;
    }

    /* Panel */
    .menu__panel {
        position: absolute;
        right: 0;
        left: 0;
        z-index: 1; /* prevents menu foldout to be drawn below language chooser */

        margin-top: -1px;

        background-color: var(--color-background-page);
        border: 1px solid var(--color-border-primary);
    }

    .menu__panel ul {
        margin: 0;
        padding: 0;
    }

    /* Title */
    .menu__panel-title {
        color: var(--color-text-blue);
        background-color: var(--color-background-gold);
    }
    /* Dropdown navbar END */

    .content-wrapper {
        display: flex;
    }

    .content-wrapper > * {
        flex: 1;
    }
    .content-wrapper > main {
        flex-grow: 3;
        border-right: 0.1rem solid var(--color-border-active);
        border-left: 0.1rem solid var(--color-border-active);
    }
}

/* media between 45rem and 69.99rem */
@media (min-width: 45rem) and (width <= 62.49rem) {

    .content-wrapper {
        display: flex;
    }
    .content-wrapper > * {
        flex: 1;
    }
    .content-wrapper > main {
        flex-grow: 3;
        border-right: 0.1rem solid var(--color-border-active);
        border-left: 0.1rem solid var(--color-border-active);
    }
}


/* media width equal or lower than 69.99rem */
@media (width <= 62.49rem) {
    :root {
        --navigation-height: 2.9rem;
    }
    .navigation {
        display: grid;
        grid-template-columns: 1fr min-content min-content;
        column-gap: 0.25rem;
        align-items: center;
        justify-items: start;
        height: var(--navigation-height);

        &[data-open="true"] {
            position: fixed;
            inset: 0;
            z-index: 2;

            align-content: start;

            height: auto;

            overflow-y: auto;
        }
    }

    /* Popup */

    .navigation__popup {
        display: none;
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .navigation[data-open="true"] .navigation__popup {
        display: block;
    }

    /* Logo */
    .navigation__logo {
        padding: 0.2rem;
    }
    /* Button */

    .navigation__button {
        padding: 0.7rem;
        margin: 0;
        cursor: pointer;
        outline-offset: -2px;
        background-color: transparent;
        border: none;

        &:hover {
            background-color: var(--color-background-secondary);
        }
        &::before {
            display: block;

            width: 1.5rem;
            height: 1.5rem;

            content: "";

            background-color: currentcolor;

            mask-size: cover;
        }
        &[aria-expanded="true"]::before {
            mask-image: url("../Icons/icon/cancel.svg");
        }
        &[aria-expanded="false"]::before {
            mask-image: url("../Icons/icon/menu.svg");
        }
    }

    .menu {
        --menu-button-padding: 0.125rem 0.25rem;
    }

    /* Tab */
    .menu__tab {
        display: grid;
        border-top: 1px solid var(--color-border-primary);
    }

    /* Button */
    .menu__tab-button {
        display: flex;

        column-gap: 0.25rem;
        align-items: center;

        padding: var(--menu-button-padding);

        border: none;
        /* Arrow */
    }

    .menu__tab-button::after {
        margin-left: auto;
    }

    /* Link */
    .menu__tab-link {
        padding: var(--menu-button-padding);
    }

    /* Label */
    .menu__tab-label {
        order: -1;
    }

    .menu__tab-label[data-type="short"] {
        display: none;
    }

    /* Title */
    .menu__panel-title::after {
        position: relative;
        display: block;
        height: 1px;
        content: "";
        background-color: var(--color-border-primary);
    }
}