/*
Copyright: (c) 2026 Jörn Menne
Licensed under the Apache License, Version 2.0
See NOTICE file for details.
*/

:root{

    /* General variables */
    --border-radius: 8px;

    --transition-duration: 1s;

    --map-height: 60vh;

    /* Colors */
    --color-card-bg: snow;
    --color-blue: #0d6efd;
    --color-grey: #d9d9d9;
    --color-red: #ff0000;
    --color-yellow: #ffff00;
    --color-light-grey: #f5f5f5;

    --color-txt: black;

    --color-bg: white;
    --color-border: black;
    --color-shadow: black;
    /*--color-accent: orange;*/
    --color-accent: var(--color-red);
    --color-button: #9ed0d2;

    /* --color-entry-open: salmon; */
    --color-entry-open: var(--color-red);
    /* --color-entry-in-progress: royalblue; */
    --color-entry-in-progress: var(--color-yellow);
    --color-entry-finished: #3ec73e;
    --color-archived:gray;


    /* Info for the darkmode-toogle */
    --radius: 0.5rem;
    --rotation: 0deg;  

    --invert: 0%;
    --brightness: 100%;
    --contrast: 100%;


    transition: all var(--transition-duration);

}

:root:has(#dark:checked){
    /* Dark Colors */
    --color-bg: navy;
    /* --color-card-bg: darkgray; */
    --color-card-bg: hsl(from snow h 0% 70%);
    --color-txt: lightgray;
    --color-button: #5f9ea0;


    --rotation: 180deg;
    --position-right: var(--radius);

    /* Color-change for the map */
    --invert: 100%;
    --brightness: 90%;
    --contract: 90%;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-txt);
    margin: 0px 0px 1rem 0px;

    transition: all var(--transition-duration);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background: var(--color-blue);
    color: var(--color-grey);

    #icon {
      height: 40px;
    }

    .left{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .header-title {
        margin: 0.5rem;
    }
    h2, h4{
        padding: 0;
        margin: 0;
    }


    h4{
        font-style: italic;
    }

    nav {
        position: relative;

        /* hide checkbox */
        #menu-toggle {
            display: none;
        }

        .hamburger {
            display: none;
            cursor: pointer;

            span {
                display: block;
                width: 28px;
                height: 3px;
                background: white;
                margin: 5px 0;
                transition: 0.3s;
            }

            
        }

        .nav-links {
            list-style: none;
            display: flex;
            gap: 20px;
            align-items: center;

            li button{
                all: unset;
            }

            li a,
            li button {
                color: white;
                text-decoration: none;
                background: none;
                border: none;
                cursor: pointer;
                font-size: 16px;
                padding: 5px;
                border-radius: var(--border-radius);
                display: flex;
                align-items: center;
            }

            a:hover, button:hover{
                box-shadow: 1px 1px 2px 2px var(--color-shadow);
            }

            a:active, button:active{
                box-shadow: inset 1px 1px 2px 2px var(--color-shadow);
            }
        }

        /* ---------- MOBILE ---------- */
        @media (max-width: 768px) {

            .hamburger {
                display: block;
            }

            .nav-links {
                position: absolute;
                top: 30px;
                right: 0;
                width: 220px;
                background: var(--color-blue);
                flex-direction: column;
                padding: 20px;
                display: none;
                z-index: 100;
                border-radius: var(--border-radius);

                transition: all 0.5s ease;

                li {
                    margin: 10px 0;
                }

                

            }

                /* show menu when checkbox checked */
            #menu-toggle:checked + .hamburger + .nav-links {
                display: flex;
                max-height: 500px;
                opacity: 1;
            }

            #menu-toggle:checked + .hamburger {
                span:nth-child(1) {
                    transform: rotate(45deg) translate(5px, 5px);
                }

                span:nth-child(2) {
                    opacity: 0;
                }

                span:nth-child(3) {
                    transform: rotate(-45deg) translate(6px, -6px);
                }
            }
            }
        } 
}

.circle{
    width: calc(var(--radius)*2);
    height: calc(var(--radius)*2);
    border-radius: 100%;
    background: rgb(36, 34, 34);
    position: relative;
}

.semicircle{
    width: var(--radius);
    height: calc(var(--radius)*2);
    background: rgb(140, 139, 139);
    position: absolute;
    border-radius:  var(--radius) 0 0 var(--radius);    
    transform: rotate(var(--rotation));
    translate: var(--position-right);

    transition: all var(--transition-duration);
}

#dark{
    display: none;
}

.red{
    background: var(--color-red);
}

.blue{
    background: var(--color-blue);
    color: var(--color-grey);
}

.yellow{
    background: var(--color-yellow);
}

footer{
    padding: 10px;
    padding-bottom: 20px;
    background: var(--color-blue);
    color: var(--color-light-grey);

    div{
        padding:10px;

    }

    p{
        padding-left: 10px;
    }
    a{
        text-decoration: none;
        color: var(--color-light-grey);
        padding: 10px;
        padding-right: 15px;
        cursor: pointer;
        border-radius: var(--border-radius);

        &:hover{
            box-shadow: 1px 1px 2px 2px var(--color-shadow);
        }

        &:active{
            box-shadow: inset 1px 1px 2px 2px var(--color-shadow);
        }
    }
}