/* ------------------------------------------------------------------------ */

/*
 * Breakpoints:
 *   max content width: 1280px (grid minmax)
 *   desktop: width >= 1024px (more spacing, top navigation)
 *   tablet: width < 1024px (less spacing, right-aligned navigation)
 *   mobile: width < 768px (even less spacing, full-screen navigation)
 *   min content width: 320px (grid minmax)
*  Resource: https://www.devsheets.io/sheets/screen-sizes
 */


/* ------------------------------------------------------------------------ */


/*
 * Theme.
 */


/* color theme */
:root {
}

/* light theme */
:root {

    /* grays used on this page (white to black) */
    --color-gray-lightest: white;
    --color-gray-light: #f4f4f4;
    --color-gray-dark: #383838;
    --color-gray-darkest: black;

    /* lavendel (hue: 300) */
    --color-main-lighter: #f8dff8;  /* value:  97.2 | saturation:  10.0 */
    --color-main-light:   #eeccee;  /* value:  93.2 | saturation:  14.0 */
    --color-main:         #992699;  /* value:  60.0 | saturation:  75.2 */
    --color-main-dark:    #7a0c7a;  /* value:  48.0 | saturation:  90.0 */
    --color-main-darker:  #440044;  /* value:  26.7 | saturation: 100.0 */

    --color-fg: var(--color-gray-darkest); /* default text color */
    --color-bg: var(--color-gray-light); /* body background */
    --color-border: var(--color-main-light); /* borders around layout elements */
    --color-link-fg: var(--color-main); /* default link color */
    --color-link-focus-fg: var(--color-main-darker); /* default link color */
    --color-link-underline: var(--color-main-light); /* default link underline color */
    --color-selection-bg: var(--color-main-light); /* background for text selections */
    --color-header-fg: var(--color-main-darker); /* text color for main page header */
    --color-nav-active: var(--color-main); /* indicator for currently active nav elements */
    --color-nav-focus-bg: var(--color-main-light); /* indicator for currently focussed nav elements */
    --color-content-bg: var(--color-gray-lightest); /* background color for main content */
    --color-content-fg: var(--color-gray-dark); /* foreground color for main content */
    --color-quote: var(--color-main-lighter); /* color for quote chars in quotes sections */

}

/* dark theme */
@media (prefers-color-scheme: dark) { :root {
}}


/* ------------------------------------------------------------------------ */


/*
 * Basic Styles and Layout.
 */


* {
    box-sizing: border-box;
}

html {
    font-family: serif;
    color: var(--color-fg);
    background: var(--color-bg);
}

html,
body {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

a,
a:link,
a:visited {
    color: var(--color-link-fg);
    text-decoration: var(--color-link-underline) underline 2px;
    text-underline-offset: 4px;
    text-decoration-inset: -2px;
    transition: 0.1s linear;
}

@media (hover: hover) {
    a:hover,
    a:focus,
    a:focus-within {
        color: var(--color-link-focus-fg);
        text-decoration-thickness: 3px;
        text-decoration-inset: -4px;
        outline: none;
    }
}

a:active {
    text-decoration-thickness: 5px;
}

::selection {
    background: var(--color-selection-bg);
}


/* ------------------------------------------------------------------------ */


/*
 * Page Layout.
 */


body {
    --body-spacing: 2em;
}

body > header,
body > main,
body > footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1280px) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
        "spacer-l content spacer-r";
}

body > header > .content,
body > main > article,
body > footer > .content {
    grid-area: content;
}

body > header {
    position: sticky; /* like fixed, but still occupies space and can be grid */
    top: 0;
}


/* shadows over content */

header::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(221, 221, 221, 1) 0%,
        rgba(221, 221, 221, 0.5) 10%,
        rgba(221, 221, 221, 0)
    );
}

/* TODO: not so sure about this yet */
body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(221, 221, 221, 1) 0%,
        rgba(221, 221, 221, 0.5) 10%,
        rgba(221, 221, 221, 0)
    );
}


/* ------------------------------------------------------------------------ */


/*
 * HEADER (large)
 */


header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    z-index: 50;
    /* box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); */
    --active-border-width: 2px;
    --padding-horizontal: 1em;
    --padding-vertical: 0.2em;
    --size: 3.2em;
}

header .content {
    padding: 0 var(--body-spacing);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1,
header h1 a,
header nav,
header nav ul,
header nav li,
header nav a {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    font-size: 1em;
}

header h1 span {
    --font-size: 2;
    font-family: "Amatic SC - Subset for Headings", sans-serif;
    font-size: calc(var(--font-size) * 1em);
}

header h1 a {
    color: black ! important;
    text-decoration: none ! important;
}

header h1 img {
    height: calc(var(--size) * 0.75);
    padding: 0.2em var(--padding-horizontal);
}

header nav a {
    padding: var(--padding-vertical) var(--padding-horizontal);
}

header nav > .wrapper > ul > li > a {
    height: var(--size);
}

header nav ul {
    list-style: none;
    flex-wrap: wrap;
}

header nav a {
    transition: background 0.1s linear;
}

header nav input {
    display: none;
}

header nav label {
    height: var(--size);
    display: none;
}

header nav label img {
    padding: 0.5em;
}

header nav a,
header nav a:link,
header nav a:hover,
header nav a:focus,
header nav a:active,
header nav a:visited {
    color: black;
    text-decoration: none;
    white-space: nowrap;
}

header nav a:focus,
header nav a:active {
    background: var(--color-nav-focus-bg);
    outline: none;
}
@media (hover: hover) { header nav a:hover {
    background: var(--color-nav-focus-bg);
}}

header nav > .wrapper > ul > li > a.active {
    border-bottom: var(--active-border-width) solid var(--color-nav-active);
    padding-bottom: calc(var(--padding-vertical) - var(--active-border-width));
}

header nav li {
    position: relative;
}

header nav li ul {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
    padding: 0.5em 0;
    z-index: 100;
}

header nav li:hover ul,
header nav li:focus-within ul {
    display: flex;
}

header nav li:focus-within > a {
    background: var(--color-nav-focus-bg);
}

@media (hover: hover) {
    header nav li:hover > a {
        background: var(--color-nav-focus-bg);
    }
}

header nav li ul a {
    --padding-vertical: 0.5em;
    padding: var(--padding-vertical) var(--padding-horizontal);
    flex-grow: 1;
}

header nav li ul a.active {
    border-left: var(--active-border-width) solid var(--color-nav-active);
    padding-left: calc(var(--padding-horizontal) - var(--active-border-width));
}


/*
 * HEADER (medium)
 */

@media (width < 1024px) {

    header {
        --active-border-width: 3px;
        --padding-vertical: 0.5em;
    }

    header .content {
        padding: 0;
    }

    header nav .wrapper {
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
        min-width: 22em;
        max-width: 50vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        background: var(--color-bg);
        border-left: 1px solid var(--color-border);
    }

    header nav label {
        display: flex;
        align-self: flex-end;
        cursor: pointer;
    }

    header nav input:checked + .wrapper {
        display: flex;
        opacity: 1;
        pointer-events: initial;
    }

    header nav ul,
    header nav li,
    header nav li ul {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    header nav li {
        align-self: stretch;
        align-items: stretch;
    }

    header nav li ul {
        position: initial;
        box-shadow: none;
        border: 0;
        padding: 0;
        margin: 0.5em 0;
    }

    header nav li:focus-within > a {
        background: initial;
    }

    header nav li ul a {
        --padding-vertical: 0.6em; /* replaces fixed height on top-level nav entries */
    }

    header nav > .wrapper > ul {
        overflow-y: auto;
        overscroll-behaviour: contain;
    }

    header nav > .wrapper > ul > li {
        margin-bottom: 1em;
    }

    header nav > .wrapper > ul > li > a {
        font-weight: bold;
        --padding-vertical: 1em; /* replaces fixed height on top-level nav entries */
        height: initial; /* no fixed height anymore */
    }

    header nav > .wrapper > ul > li > a.active {
        border-bottom: 0;
        padding-bottom: var(--padding-vertical);
        border-left: var(--active-border-width) solid var(--color-nav-active);
        padding-left: calc(var(--padding-horizontal) - var(--active-border-width));
    }


}


/*
 * HEADER (mobile)
 */

@media screen and (width < 768px) {

    header nav .wrapper {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        border-left: 0;
    }

    header nav > .wrapper > ul {
        padding: 0 1em;
    }

    header nav > .wrapper > ul > li {
        margin-top: 1em;
    }

    header nav li ul a {
        --padding-vertical: 1em;
    }

}


/* ------------------------------------------------------------------------ */


/*
 * CONTENT (large)
 */


article {
    font-size: 1.2em;
    padding: 0 var(--body-spacing);
    --spacing: 2em;
}

article h1 {
    --font-size: 2.6;
    font-family: "Amatic SC - Subset for Headings", sans-serif;
    font-size: calc(var(--font-size) * 1em);
    font-weight: 600;
    color: var(--color-header-fg);
    padding: calc(1/var(--font-size) * var(--spacing));
    margin: 1em 0 0;
}


/* sections */

article section:first-child {
    margin-top: var(--spacing);
}

article section h2 {
    --font-size: 1.8;
    font-family: "Amatic SC - Subset for Headings", sans-serif;
    font-size: calc(var(--font-size) * 1em);
    font-weight: 600;
    color: var(--color-header-fg);
    margin: 0;
    padding-bottom: calc(var(--spacing)/4 * 1/var(--font-size));
    border-bottom: 1px solid var(--color-border);
    overflow: auto; /* workaround for element (and thus border) stretching to far in float mode */
}

article section h3,
article section h4,
article section h5 {
    font-weight: bold;
    margin: 0;
    color: var(--color-content-fg);
}

article section h3 {
    font-size: 1.08em;
}

article section h4 {
    font-size: 1em;
}

article section h5 {
    font-size: 0.85em;
}

article section {
    padding: var(--spacing);
    background: var(--color-content-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.5em;
    margin-bottom: var(--spacing);
}

article section .text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    font-family: serif;
}

article section a.button {
    display: block;
    text-align: center;
    line-height: 180%;
    margin: var(--spacing) 0;
    padding: var(--spacing);
    border: 1px solid var(--color-border);
    border-radius: 0.5em;
}

article section p {
    line-height: 160%;
    margin: 0;
    color: var(--color-content-fg);
}

article section ul {
    color: var(--color-content-fg);
    list-style-type: '-  ';
    padding: 0 var(--spacing);
}

article section p + ul {
    margin: calc(var(--spacing) * -1) 0 0;
}

article section p + ul li {
    line-height: 160%;
    margin: 0;
    padding: 0;
}

article section p + ul.none {
    list-style: none;
}

article section .tiles {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing);
}

article section .tiles a {
    display: flex;
    flex-direction: column;
    flex-basis: 20em;
    flex-grow: 1;
    margin: 0;
}

article section .tiles a {
    text-decoration: none;
    color: var(--color-content-fg);
}

article section .tiles a .title {
    color: var(--color-link-fg);
    text-decoration: var(--color-link-underline) underline 2px;
    text-underline-offset: 4px;
    text-decoration-inset: -2px;
    transition: 0.1s linear;
    margin-bottom: var(--spacing);
}

@media (hover: hover) {
    article section .tiles a:hover .title,
    article section .tiles a:focus .title,
    article section .tiles a:focus-within .title {
        color: var(--color-link-focus-fg);
        text-decoration-thickness: 3px;
        text-decoration-inset: -4px;
    }
}

article section .tiles a .description {
    text-align: left;
}


/* two-column sections (text + image) */

article section.columns {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-areas:
        "text image";
}

article section.columns .text {
    grid-area: text;
}

article section.columns figure {
    grid-area: image;
    margin: 0;
    padding-left: var(--spacing);
}

article section.columns figure img {
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--color-border);
}


/* columns with logo */

article section.columns figure.logo {
    padding: calc(var(--spacing) * 2);
}

article section.columns figure.logo img {
    border: 0;
}


/* poem sections */

article section.poem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing);
    padding: calc(var(--spacing) * 2);
    font-family: "Poiret One - Subset for Poems", sans-serif;
}

article section.poem h2 {
    --font-size: 1.4;
    font-family: "Poiret One - Subset for Poems", sans-serif;
    font-weight: 900;
    color: var(--color-content-fg);
    padding-bottom: calc(var(--spacing)/2 * 1/var(--font-size));
}

article section.poem .content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

article section.poem p {
    font-weight: 600;
    font-size: 1.2em;
}

article section.poem .author {
    font-size: 0.9em;
}


/* quotes sections */

article section.quotes .text {
    margin-top: var(--spacing);
}

article section.quotes ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    margin: 0;
    padding: 0;
}

article section.quotes ul:last-child {
    margin-bottom: 0;
}

article section.quotes li {
    color: var(--color-content-fg);
    margin: 0;
    padding: calc(var(--spacing) / 1.5) calc(var(--spacing) * 3);
    border: 1px solid var(--color-border);
    border-radius: 0.5em;
    position: relative;
}

article section.quotes li:before,
article section.quotes li:after {
    font-size: 5em;
    font-weight: 600;
    line-height: normal;
    color: var(--color-quote);
    position: absolute;
}

article section.quotes li:before {
    content: '„';
    bottom: 0;
    left: 0.1em;
}

article section.quotes li:after {
    content: '“';
    top: -0.2em;
    right: 0.1em;
}


/* card sections */

article section.card {
    display: flex;
}

article section.card .text {
    justify-content: center;
}

article section.card img {
    max-width: 100%;
}

article section.card img.title {
    margin: 0 var(--spacing) var(--spacing);
}

article section.card img.logo {
    width: 40%;
    margin: calc(var(--spacing) * 2);
}

article section.card .subtitle {
    font-size: 1.2em;
    text-align: center;
}


/* index-nav sections */

article section.index-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: calc(var(--spacing) * 1.5);
    padding: calc(var(--spacing) * 3) 0;
}

article section.index-nav p {
    text-align: center;
}

article section.index-nav img {
    max-width: 40%;
    border-radius: 5px;
    border: 1px solid var(--color-border);
    margin-bottom: var(--spacing);
}

article section.index-nav .poem {
    font-weight: bold;
    font-style: italic;
}

article section.index-nav .links {
    min-width: 60%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing);
    padding: 0 var(--spacing);
}

article section.index-nav .links .button {
    margin: 0;
    padding: calc(var(--spacing) / 2) var(--spacing);
}


/* page: index */

body.index > header h1 { /* hide header in nav bar */
    visibility: hidden;
}


/*
 * CONTENT (tablet)
 */


@media screen and (width < 1024px) {

    article {
        font-size: 1.1em;
        padding: 0;
        --spacing: 1em;
    }

    article h1 {
        margin: calc(var(--spacing) / 4) 0;
    }

    article section {
        margin-bottom: calc(var(--spacing) * 2);
        border-width: 1px 0;
        border-radius: 0;
    }

    article section:first-child {
        margin-top: calc(var(--spacing) * 2);
    }

    article section p + ul {
        margin-top: var(--spacing);
    }

    article section .tiles {
        flex-wrap: wrap;
    }


    /* columns with logo */

    article section.columns figure.logo {
        padding: 8vw;
    }


    /* poem sections */

    article section.poem {
        padding: calc(var(--spacing) * 4) var(--spacing);
    }

    article section.poem .author {
        margin-top: calc(var(--spacing) * 2);
    }


    /* card sections */

    article section.card img.title {
        margin: 0 calc(var(--spacing) * 2) calc(var(--spacing) * 2);
    }

    article section.card img.logo {
        width: 20vw;
        margin: calc(var(--spacing) * 2) 5vw;
    }


    /* index-nav sections */

    article section.index-nav img {
        max-width: 50%;
    }


}


/*
 * CONTENT (mobile)
 */


@media screen and (width < 768px) {

    article {
        font-size: 1em;
    }

    article h1 {
        margin: 0;
    }

    article section {
        margin-bottom: calc(var(--spacing) * 1.5);
    }

    article section:first-child {
        margin-top: calc(var(--spacing) * 1.5);
    }


    /* two-column sections (text + image) */

    article section.columns {
        display: inline-block; /* **inline**-block is necessary to clear floats */
    }

    article section.columns .text {
        display: contents;
    }

    article section.columns p:nth-child(1n+2) {
        margin-top: var(--spacing); /* replacement for gap */
    }

    article section.columns figure {
        float: right;
        width: 40%;
    }


    /* poem sections */

    article section.poem {
        padding: calc(var(--spacing) * 2) var(--spacing);
    }

    article section.poem .content {
        width: 100%;
    }

    article section.poem .author {
        margin-top: var(--spacing);
    }


    /* card sections */

    article section.card {
        flex-direction: column;
        align-items: center;
    }

    article section.card img.title {
        margin: calc(var(--spacing) * 4) 5vw calc(var(--spacing) * 2);
    }

    article section.card img.logo {
        width: auto;
        max-width: 40vw;
        margin: calc(var(--spacing) * 4);
    }


    /* index-nav sections */

    article section.index-nav .links {
        min-width: 100%;
    }

    article section.index-nav img {
        max-width: 60%;
    }

}


/* ------------------------------------------------------------------------ */


/*
 * FOOTER (large)
 */

footer .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2em var(--body-spacing);
}

footer .content a {
    padding: 1em 2em;
}

footer .content a.active {
    font-weight: bold;
}