/*SITE-WIDE STYLING*/
/*Using a cascade layer ensures that this styling how a lower priority than non-layered styling (used on specific layouts/pages)*/
@layer defaults {
    :root {
        color-scheme: light dark;
        --text_color: light-dark(black, white);
        --heading_font: Georgia, serif;
        --text_font: "DejaVu Sans", sans-serif;
    }
    @view-transition {
        navigation: auto;
    }
    ::view-transition-group(root) {
        animation-duration: 0.3s;
    }

    * {
        margin: 0;
        padding: 0;
    }
    html {
        scroll-behavior: smooth;
        padding-bottom: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0)); /*Chromium-based browsers support max, as in some circumstances they recalculate safe-area-inset-*. Safari and Firefox do not. */
        background-color: light-dark(#f7fafb,rgb(39, 42, 45)); /*Interestingly placing this in body causes dark reader (extension, dynamic mode) to not fully invert the page colors, so placing it here seems to be more full-proof*/
        font-family: var(--text_font);
        text-underline-offset: 10%;
    }

    main {
        padding-left: env(safe-area-max-inset-left, env(safe-area-inset-left, 0)); /*Used by Safari which will otherwise draw everything behind the notch */
        padding-right: env(safe-area-max-inset-right, env(safe-area-inset-right, 0));
        :not(h) { /*I'm not actually sure why this works, as I don't think h can be used like this, but nontheless it does */
            a, button {
                color: light-dark(rgb(55, 55, 55), rgb(225, 225, 225));
            }

            a:hover, a:focus-within, button:hover { /*focus-within is not used for buttons as this causes them to remain highlighted after being clicked. It shouldn't really affect screen reader usage as the button is outlined clearly by the browser*/
                color: light-dark(black, white);
            }
        }
        a {
            -webkit-tap-highlight-color: transparent;
        }
        p, li {
            line-height: 1.5;
            font-size: 17px;
        }
        p, ul, ol {
            margin-bottom: 1.1em;
        }
        li {
            margin-bottom: 0.3em;
            margin-left: 15px;
        }
        .date {
            margin-top: 0px;
            font-style: italic;
            font-family: var(--heading_font);
        }
    }


    h1, h2, h3, h4, h5, h6 {
        font-family: var(--heading_font);
    }

    img { /* This is needed because each image has its width and height added as a HTML property to avoid layout shift, which means the default value is not auto. */
        width: auto;
        height: auto;
    }
    svg {
        aspect-ratio: 1;
        fill: currentColor /*inherited, eg from <a> or <button>*/
    }
}

/*MARGIN STYLING*/
.margin {
    main {
        margin-inline: max(6px + 3%, 50% - 375px);
        /*After ~800px display width, content will remain the same width and only margins will expand*/
    }

}
/*BLOG-LIKE STYLING*/
.blog {
    main {
        margin-top: 24px;
        margin-bottom: 26px;
    }
    .title {
        font-size:40px;
        text-decoration: underline;
        /*Somehow Safari does not support setting style in text-decoration*/
        text-decoration-style: dashed;
        text-underline-offset: 20px;
        margin-bottom: 32px;
    }
    .entries {
        a {
            color: var(--text_color);
        }

        a:link {
            text-decoration: none;
        }

        a:hover h1, a:active h1, a:focus-within h1 {
            text-decoration: underline;
        }


        h1 {
            font-size: 34 px;
            margin-bottom: 1px;
            margin-top: 14px;
        }

        .date {
            margin-bottom: 5px;
            font-size: 14px;
        }

        p {
            font-size: 16px;
            margin-bottom: 18px;
        }
    }
}

/*NAVBAR STYLING*/
.navbar {
    --navbar_height: 55px;
    --navbar_color: #3f95ff;
    background-color: var(--navbar_color);
    padding-left: env(safe-area-max-inset-left, env(safe-area-inset-left, 0));
    padding-right: env(safe-area-max-inset-right, env(safe-area-inset-right, 0));
    height: var(--navbar_height);
    width: 100%;
    display: flex;

    nav {
        transform-origin: top;
        transition-duration: 0.25s;
        overflow: hidden; /*Don't allow to spill outside box*/
    }
    ul {
        list-style-type: none; /*remove bullet points*/
        overflow: hidden;
        font-size: 19px;
        line-height: var(--navbar_height);
    }
    li:hover, li:focus-within {
        background-color: #55b8ff;
    }
    label {
        user-select: none; /*Prevent menu button text from being selected*/
        -webkit-user-select: none;
        cursor: pointer;
        text-align: left;
        color: white;
        font-size: 36px;
        padding-inline: 10px;
        line-height: var(--navbar_height);
    }
    input {
        display: none;
    }
    img {
        height: var(--navbar_height);
        aspect-ratio: 1;
    }

    /*NAVIGATION MENU (PAGE LINKS) STYLING*/
    #nav_menu_checkbox + label {
        display: none;
    }

    .nav_element {
        float: left;
        border-right: 1px solid #ffffff;
    }
    .nav_element a {
        display: block;
        text-decoration: none;
        color: rgb(255, 255, 255);
        padding-inline: 10px;
    }

    /*LANGUAGE SWITCHER MENU (FLAGS) STYLING*/
    .language_switcher {
        flex-basis: 0px;
        position: absolute;
        top: var(--navbar_height);
        right: 85.5px;
        transform: scaleY(0.0002); /*Firefox bug with drawing behind other elements when scaling from 0*/
        z-index: 2;
        background-color: var(--navbar_color);
    }
    .language {
        border-top: 1px solid #4f4f66;
        height: var(--navbar_height);
    }
    #language_switcher_checkbox:checked ~ .language_switcher {
        transform: scaleY(1)
    }

    @media screen and (width <= 600px) {
        --navbar_height: 60px;
        --navmenu_height: 65px;
        ul {
            line-height: var(--navmenu_height);
        }
        #nav_menu_checkbox + label {
            display: inline;
            flex-basis: 100%;
        }
        #nav_menu_checkbox:checked ~ .nav_menu {
            transform: scaleY(1)
        }
        .nav_menu {
            position: absolute;
            top: var(--navbar_height);
            transform: scaleY(0.0001); /*Firefox bug with drawing behind other elements when scaling from 0*/
            width: 100%;
            background-color: var(--navbar_color);
            z-index: 1;
        }
        .nav_element:first-child {
            border-top: 1px solid #4f4f66;
        }
        .nav_element {
            float: none;
            text-align: left;
            border-right: 0px;
            border-bottom: 1px solid #4f4f66;
        }
        .nav_element a {
            padding-inline: 20px;
        }
        .language_switcher {
            right: 90.5px;
        }
    }
}