/**
 * uaplus.css version 0.3.0
 */

@layer {
    *,
    *::after,
    *::before {
        box-sizing: border-box;
    }

    :focus-visible {
        outline-offset: 3px;
    }

    html {
        -webkit-text-size-adjust: none;
        text-size-adjust: none;

        line-height: 1.5;
        scrollbar-gutter: stable;
    }

    h1 {
        font-size: 2em;
        margin-block: 0.67em;
    }

    abbr[title] {
        cursor: help;
        text-decoration-line: underline;
        text-decoration-style: dotted;
    }

    @media (forced-colors: active) {
        mark {
            color: HighlightText;
            background-color: Highlight;
        }
    }

    audio,
    iframe,
    img,
    svg,
    video {
        max-block-size: 100%;
        max-inline-size: 100%;
    }

    fieldset {
        min-inline-size: 0;
    }

    label:has(+ input:not([type="radio"], [type="checkbox"]), select, textarea) {
        display: block;
    }

    textarea:not([rows]) {
        min-block-size: 6em;
    }

    button,
    input,
    select,
    textarea {
        font-family: inherit;
        font-size: inherit;
    }

    [type="search"] {
        -webkit-appearance: textfield;
    }

    @supports (-webkit-touch-callout: none) {
        [type="search"] {
            border: 1px solid -apple-system-secondary-label;
            background-color: canvas;
        }
    }

    input:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {
        direction: ltr;
    }

    table {
        border-collapse: collapse;
        border: 1px solid;
    }

    th,
    td {
        border: 1px solid;
        padding: 0.25em 0.5em;
        vertical-align: top;
    }

    dialog::backdrop {
        background: oklch(0% 0 0 / 0.3);
    }

    dialog,
    [popover],
    dialog::backdrop {
        opacity: 0;
        transition: opacity 150ms ease-out, display 150ms allow-discrete,
        overlay 150ms allow-discrete;
    }

    dialog[open],
    :popover-open,
    dialog[open]::backdrop {
        opacity: 1;
    }

    @starting-style {
        dialog[open],
        :popover-open,
        dialog[open]::backdrop {
            opacity: 0;
        }
    }

    [hidden]:not([hidden="until-found"]) {
        display: none !important;
    }

    img, video {
        display: block;
        height: auto;
    }

    summary {
        cursor: default;
    }

    iframe {
        border: none;
    }

    @supports(position-area: block-end span-inline-end) {
        [popover] {
            margin: 0;
            position-area: block-end span-inline-end;
        }
    }

    h1, h2, h3, h4, h5, h6{ font-weight: normal; }
    h1, h2, h3, h4, h5, h6, p, ul, ol{  margin: 0; padding: 0; }
}

@font-face {
    font-family: 'Fidel Grotesk';
    src: url("/assets/fidel-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fidel Grotesk';
    src: url("/assets/fidel-fett.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


html{
    --padding: 1.5rem;
    --color: #ffff00;

    --multiplier: 0.8;

    --font-size-copy: calc( 18rem / 16 * var( --multiplier ) );
    --font-size-title: calc( 24rem / 16 * var( --multiplier ) );

    --font-size-s: calc( 36rem / 16 * var( --multiplier ) );
    --font-size-m: calc( 54rem / 16 * var( --multiplier ) );
    --font-size-l: calc( 72rem / 16 * var( --multiplier ) );

    --font-size-nav: calc( 2.875rem * var( --multiplier ) );
    --font-size-fav: calc( 80rem / 16 * var( --multiplier ) );

    @media (max-width: 1024px){
        --padding: 1rem;
        --multiplier: 0.7;
    }


}

body{
    font-family: 'Fidel Grotesk', sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

.font-size-copy{ font-size: var( --font-size-copy ); line-height: 1.55; }
.font-size-title{ font-size: var( --font-size-title ); line-height: 1.5; }
.font-size-s{ font-size: var( --font-size-s ); line-height: 1.5; }
.font-size-m{ font-size: var( --font-size-m ); line-height: 1.33; }
.font-size-l{ font-size: var( --font-size-l ); line-height: 1.33; }

.font-size-nav{ font-size: var( --font-size-nav ); line-height: 1.56; }
.font-size-fav{ font-size: var( --font-size-fav ); line-height: 1.175; }

a {
    cursor: pointer;
    text-decoration-thickness: 0.15em;
    text-underline-offset: 0.3em;

    &:link, &:visited, &:hover, &:active{
        color: inherit;
    }

    &.no-underline{
        text-decoration: none;
    }

    &.underline-on-hover{
        text-decoration: none;

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

.text-center{
    text-align: center;
}

strong, .bold{
    font-weight: bold;
}

#skip-to-content-link {
    position: fixed;
    top: 0;

    background: black;
    color: white;
    left: 50%;
    padding: 8px;

    transform: translate(-50%, -150%);
    transition: transform 0.3s;
    z-index: 100;

    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;

    &:focus {
        transform: translate(-50%, 0);
    }
}

.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

button{
    cursor: pointer;
    border-radius: 0;
    background-color: transparent;
    border: none;
}

.nav-btn{
    width: 2.2rem;
    height: 1.5rem;
    border: 2px solid black;
    background-color: white;

    span{
        display: block;
        height: 2px;
        background: black;
    }
}

#show-nav-btn{
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;

    padding: 4px 3px;
}

#hide-nav-btn{
    position: relative;
    border-radius: 0.3em;

    span{
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc( 100% - 12px );

        translate: -50% -50%;

        &:first-child{ rotate: 45deg; }
        &:last-child{ rotate: -45deg; }
    }
}

.top-container{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
    max-width: 60rem;
}

#main-header{
    padding: var( --padding );
}

#main-nav{
    --versatz-y: calc( var(--padding) * -1 - 0.2em );
    background: var( --color );
    top: var( --versatz-y );

    right: calc( var( --padding) * -1 );
    height: 100vh;

    overflow-y: auto;
    border: none;

    position-area: center span-start;

    padding: var( --padding );

    #search-form{
        margin-block: 1lh;
        position: relative;

        input{
            border: none;
            padding: 0.25em;
            padding-right: 2em;

            text-box: trim-both cap alphabetic;
            width: 100%;

            &::placeholder{
                color: currentColor;
            }
        }

        button{
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            padding: 0.2em;

            svg{
                display: initial;
                height: 100%;
                width: auto;
            }
        }
    }

    .social-media-portrait{
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 1rem;
        align-items: center;

        text-align: center;
        margin-block: 1lh;

        .logo-link{
            background: black;
            border-radius: 0.3em;
            padding: 0.25em;
            width: max-content;
            margin-inline: auto;

            svg{
                display: block;
                height: 1em;

                path{
                    fill: white;
                }
            }
        }

        .ig{
            grid-column-start: 3;
        }

        .portrait{
            grid-column-start: 2;
            grid-row-start: 1;

            width: 150px;

            img{
                width: 100%;
            }
        }
    }
}

nav{
    ul{
        list-style-type: "";

        a{
            text-decoration: none;

            padding: 0.05em 0.2em;
            text-box: trim-both cap alphabetic;

            border: 2px solid transparent;
            border-radius: 0.3em;
            transition-duration: 0.2s;
            transition-timing-function: ease-out;
            transition-property: border, color, background-color;

            &:hover, &:focus-visible{
                border-color: black;
            }

            &[aria-current='page']{
                border-color: black;
                color: white;
                background: black;
            }
        }
    }
}

#main{
    padding: var( --padding );
}

#main-footer{
    padding: var( --padding );

    nav{
        background-color: var(--color );
        padding: var( --padding );

        ul{
            list-style-type: "";
            display: flex;
            flex-wrap: wrap;
            gap: 0 1ch;
            justify-content: center;

        }
    }

    .copyright{
        margin-top: 1lh;
    }
}

.project-preview{
    outline: 1em solid transparent;

    transition-property: background, outline;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;

    position: relative;

    a{
        position: absolute;
        inset: 0;
    }

    .text-wrapper{
        padding: 1em;
    }

    .title{
        display: inline;
    }

    &:has(a:hover),
    &:has(a:focus){
        outline: 1em solid var( --color );
        background-color: var( --color );
    }
}

.project-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var( --padding );
}

dl{
    div{
        display: flex;
        gap: 0.3em;

    }

    dd{
        margin: 0;
    }
}

.content-blocks{
    p + p {
        margin-top: 1lh;
    }

    .quote-block{
        text-wrap: balance;
        text-wrap: pretty;

        padding: 0;
        margin-block: 1lh;
        text-align: center;
    }

    .image-block{
        display: grid;
        gap: 1em;
        --cols: 1;
        grid-template-columns: repeat(var( --cols ), minmax(0, 1fr));

        margin-block: 1lh;

        &[data-cols="2"]{ --cols: 2;}
        &[data-cols="3"]{ --cols: 3;}
        &[data-cols="4"]{ --cols: 4;}
        &[data-cols="5"]{ --cols: 5;}
    }
}

.single-project{

    .project-article{
        display: grid;
        grid-template-columns: 20rem auto;
        grid-template-rows: auto 1fr;

        grid-template-areas:
                "header spalte2"
                "spalte1 spalte2"
                "footer footer";

        gap: var( --padding );

        @media (max-width: 900px){
            grid-template-columns: 1fr;
            grid-template-rows: initial;
            grid-template-areas: "header" "spalte1" "spalte2" "footer";
        }

        header{
            grid-area: header;
        }

        .spalte1{
            grid-row-start: 2;
            grid-area: spalte1;
        }

        .spalte2{
            grid-row: 1 / span 2;
            grid-column: 2;
            grid-area: spalte2;
        }

        footer{
            grid-area: footer;
        }
    }
}

.project-nav{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: baseline;

    .center-element{
        grid-column-start: 2;
        height: 1cap;
        aspect-ratio: 1;
        background: var( --color );
        border: 0.07em solid currentColor;
    }

    .prev-link{ text-align: right; }
    .next-link{ grid-column-end: -1; }

    a{
        text-decoration: none;
    }
}

.search{
    h1{
        margin-bottom: 1lh;
    }
}