/*This file contains CSS rules that define the general layout such as styles for the positioning of elements on the page
especially elements from the layout.html.php*/

/*mobile first min-width sets base and content is adapted to computers.*/
@media (min-width: 100px) {
    /*Default styles for common HTML elements (tag name as selectors)*/
    body {
        min-height: 100vh;
        margin: 0;
        padding: 0;
        overflow-x: hidden; /*Needed for flash messages sliding in*/
        background: var(--background-color);
        color: var(--font-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        /*justify-content: center;*/
        width: 100%;
        font-family: var(--main-font-family), sans-serif;
        /*Custom cursor*/
        cursor: url('cursor/circle-cursor.svg'), auto;
    }

    [data-theme="dark"] body {
        cursor: url('cursor/circle-cursor-white.svg'), auto;
    }

    /*Show default text cursor for text content (not custom one)*/
    p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, pre:hover, ul:hover, ol:hover,
    li:hover, code:hover, blockquote:hover, details:hover, summary:hover, table:hover,
    form:hover, input:hover, textarea:hover, select:hover, label:hover, hr:hover {
        cursor: text;
    }

    a h1:hover, a h2:hover, a h3:hover, a h4:hover, a h5:hover, a h6:hover, a code:hover {
        cursor: pointer;
    }

    html {
        scroll-behavior: smooth;
    }

    button {
        font-family: var(--main-font-family), sans-serif;
        /*Overwrite default ugly button styles*/
        background: var(--black-or-white-color);
        color: var(--font-color-inverted);
        border: 3px solid var(--black-or-white-color);
        border-radius: 99px;
        cursor: pointer;
    }
    select {
        font-family: var(--main-font-family), sans-serif;
    }

    img {
        max-width: 100%;
    }

    #wrapper {
        /*height: 100dvh;*/
        width: 100%;
        padding: 0;
        height: auto; /*needed for the position sticky of the header*/
    }

    section {
        width: 100%;
    }

    .section-content {
        width: 90%;
        margin: 0 auto;
    }

    * {
        /*border-box specifies that the borders and padding should be attributed to element's width
        and height and not overflowing to the parent.
        https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing*/
        box-sizing: border-box;
        transition: background-color 250ms;
    }

    h1, h2, h3, h4 {
        color: var(--title-color);
    }

    a {
        color: var(--font-color);
    }

    /*Instead of increasing the specificity with the :not selector, remove the filter where its not needed, not here*/
    a:hover {
        filter: brightness(120%);
    }

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 22px min(5%, 40px) 22px min(5%, 40px);
        width: 100%;
        background: var(--background-color);
    }

    details summary:hover, details summary > *:hover {
        cursor: pointer;
    }

    #breadcrumbs {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 10px;
        row-gap: 7px;
        align-items: center;
        font-weight: 350;
        font-size: 15px;

        .breadcrumb-item {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        a {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
            text-decoration: none;
            color: var(--font-color);
            transition: background-color 250ms, filter 250ms;
        }

        a:hover {
            filter: invert(20%);
            color: inherit;
        }

        .main-page-link {
            /*color: var(--font-color);*/
            /*font-weight: 400;*/
            color: var(--black-or-white-color);
        }

        .main-page-link:hover {
            cursor: pointer;
        }

        .sub-page-link {
            /*color: #9f9f9f;*/
            font-weight: 300;
        }

        /*Last sub-page-link should have a padding right of 20px*/

        .breadcrumb-item:last-child {
            padding-right: 20px;
        }

        .breadcrumb-slash {
            font-size: 15px;
            font-weight: 400;
            color: #c5c5c5;
        }

        img {
            width: 20px;
            height: 20px;
            margin-bottom: 2px;
            /*margin: 0 10px;*/
        }
    }
}

/*portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones*/
@media (min-width: 641px) {
    #breadcrumbs {
        font-size: initial;
        gap: 16px;
        row-gap: 10px;
    }
}

@media (min-width: 961px) {
    /*tablet, landscape iPad, lo-res laptops ands desktops*/

}

@media (min-width: 1025px) {
    /*big landscape tablets, laptops, and desktops*/

}

@media (min-width: 1281px) {
    /*hi-res laptops and desktops*/
}