/*
© 2025 Tord Dellsén
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/

/*
### Notes on compatability

We only use "baseline widely available" (https://web.dev/baseline/) CSS, with some exceptions

If functionality is used which is not "baseline widely available", then either
* we have a fallback (ex for `light-dark`, see details below)
* the value can safely be ignored (ex: `text-wrap: balanced`)

This relies on "CSS fault tolerance" which means that lines will simply be skipped if they
cannot be procesed

In practice iOS is the problematic system since other systems updates their browser engines
through their package managers. (For iOS you need to buy a new phone!)

When adding a new CSS feature, please check one of these sites compatability:
- caniuse.com
- MDN

*/

/*
**** CSS Reset ****
*/

*, ::after, ::before {
    box-sizing: border-box;
    margin: 0;
}

svg, img{
    align-self: center;
}
img{
    /*
    To avoid sub-pixel gap issues for the svg files, a white background is added, which
    makes the sub-pixel gaps unnoticable
    */
    filter: drop-shadow(0 0 white);
}

/*
**** Constants ****
*/

@font-face {
    font-family: 'Gauntlet Thin';
    src: url('fonts/gauntlet/GauntletThin_TB.otf') format('truetype');
}
@font-face {
    font-family: 'Gauntlet Classic';
    src: url('fonts/gauntlet/GauntletClassic_TB.otf') format('truetype');
}

:root {
    /*Font*/
    --ff-base: system-ui, sans-serif;
    --ff-title: 'Gauntlet Thin', sans-serif;
    --ff-title-first-letter: 'Gauntlet Classic', sans-serif;
    --fw-bold: 600;
    --fs-smaller-12pt: 0.75rem;
    --fs-small-14pt: 0.875rem;
    --fs-base-16pt: 1rem;
    --fs-large-18pt: 1.125rem;
    --fs-larger-20pt: 1.25rem;

    /*
    Colors

    light-dark is used, which is a relatively new css function and which is "baseline newly
    available" but not yet fully baseline, therefore there's a fallback for each color variable.

    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
    */
    color-scheme: light dark;

    --clr-bg-primary: #e8f4f2;
    --clr-bg-primary: light-dark(#e8f4f2, #1a1d21);

    --clr-bg-body: linear-gradient(135deg, #f8f6f2 0%, #e8f4f2 100%);

    --clr-bg-body-light: linear-gradient(135deg, #f8f6f2 0%, #e8f4f2 100%);
    --clr-bg-body-dark: linear-gradient(135deg, #1e2428 0%, #1a1a1a 100%);
    /* --clr-bg-body-dark: #121212; */
    --clr-bg-body: var(--clr-bg-body-light);
    /* See @media below */

    --clr-fg-primary: #122646;
    --clr-fg-primary: light-dark(#122646, #e8e8e8);

    --clr-fg-secondary: #918F8D;
    --clr-fg-secondary: light-dark(#918F8D, #b0b0b0);

    --clr-bg-installation-banner: #FFE9A0;
    --clr-bg-installation-banner: light-dark(#FFE9A0, #3d3420);

    --clr-fg-installation-banner: #122646;
    --clr-fg-installation-banner: light-dark(#122646, #e8c77e);

    --clr-version-text: #D5D5D5;
    --clr-version-text: light-dark(#D5D5D5, #707070);

    --clr-bg-row: #FFFFFF;
    --clr-bg-row: light-dark(#FFFFFF, #2a2a2a);

    --clr-dark-blue: #1940A5;
    --clr-dark-blue: light-dark(#1940A5, #7eabff);

    --clr-dlg-bg: #ffffff;
    --clr-dlg-bg: light-dark(#ffffff, #1c1f20);

    --clr-dlg-btn-background: #617BE8;
    --clr-dlg-btn-background: light-dark(#617BE8, #758cff);

    --clr-dlg-btn-text: #ffffff;
    --clr-dlg-btn-text: light-dark(#ffffff, #ffffff);

    --clr-staging-text: red;
    --clr-staging-text: light-dark(red, red);

    --clr-small-checkbox-empty: #E1E8F0;
    --clr-small-checkbox-empty: light-dark(#E1E8F0, #404040);
    --clr-small-checkbox-check: #39B174;

    --clr-checkbox-empty: #E1E8F0;
    --clr-checkbox-empty: light-dark(#E1E8F0, #404040);
    --clr-checkbox-check: #39B174;

    --clr-share-bg: #ffffff;
    --clr-share-bg: light-dark(#ffffff, #2A3A4A);
}

@media(prefers-color-scheme: dark){
    :root{
        --clr-bg-body: var(--clr-bg-body-dark);
    }
}

/*
**** Main Screen ****
*/

body {
    margin: 0 auto;
    max-width: 65ch;
    font-family: var(--ff-base);
    font-size: var(--fs-base-16pt);
    color: var(--clr-fg-primary);
    background: var(--clr-bg-body);
    background-attachment: fixed;
}
#main-container {
    /*Flex parent*/
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    /*
    **** Main Screen: Header ****
    */

    #installation-banner{
        font: inherit;

        /*Sticky*/
        position: sticky;
        z-index: 1;
        top:0;

        width: 100%;
        background-color: var(--clr-bg-installation-banner);
        color: var(--clr-fg-installation-banner);
        opacity: 0.85;
        font-size: var(--fs-small-14pt);
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        cursor: pointer;
    }

    nav {
        margin-top: 0.5em;

        /*Flex parent*/
        display: flex;
        flex-direction: row;
        align-items: center;

        .empty-header-item {
            /*Flex child*/
            flex-grow: 1;
        }
        #active-date-relative {
            font-weight: var(--fw-bold);
            font-size: var(--fs-larger-20pt);
        }
        #active-date-absolute {
            color: var(--clr-fg-secondary);
        }
    }

    #intention-section {
        font-size: var(--fs-base-16pt);
        padding: 0.3rem 0.5rem;
        margin-top: 0.5rem;
        color: var(--clr-fg-secondary);
    }

    #practice-list{
        /*Flex parent*/
        display: flex;
        flex-direction: column;

        /*
        **** Main Screen: Rows ****
        */

        section{
            /*Flex parent*/
            display: flex;
            flex-direction: column;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            /* Using flex to avoid collapsing margins betwee li-elements */
            display: flex;
            flex-direction: column;
        }
        .row {
            /*Flex parent*/
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: nowrap;

            margin: 0.5rem;
            padding: 0 1.0rem;
            background-color: var(--clr-bg-row);
            border-radius: 1.0rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

            .row-texts {
                /*Flex child*/
                flex-grow: 1;

                /*Flex parent*/
                display: flex;
                flex-direction: column;
            }
            .row-icon-container{
                padding-right: 0.25rem;
                svg{
                    color: var(--clr-dark-blue);
                    width: 36px;
                    height: 36px;
                }
            }
            .row-previous-days {
                /*Flex parent*/
                display: flex;
                flex-direction: column;
                
                padding: 0.5rem 0.5rem 0.5rem 0;
            }
            .practice{
                text-align: inherit;
                font: inherit;

                font-weight: var(--fw-bold);
                color: var(--clr-dark-blue);
                padding: 0.75rem 0.5rem 0.25rem 0.5rem;
            }
            .smart-goal {
                text-align: inherit;
                font: inherit;

                color: var(--clr-fg-secondary);
                padding: 0.25rem 0.5rem 0.75rem 0.5rem;
            }
            .row-checkbox{
                cursor: pointer;
                .checkbox-empty{
                    color: var(--clr-checkbox-empty);
                }
                .checkbox-check{
                    /*
                    Please note that currentColor is used for the checkmark, not the icon color.
                    This differs from the typical use of currentColor (in checkbox-empty, etc).
                    The reason this has been done is to be able to apply a color depending
                    on if the theme is dark or light (and since the green color will be the
                    same for light and dark themes we can use currentColor for this)
                    */
                    color: var(--clr-bg-row);
                }
                /*
                Old empty: #E1E8F0

                Old check: #39B174
                white

                */
            }
            .row-previous-days{
                .small-checkbox-empty{
                    color: var(--clr-small-checkbox-empty);
                }
                .small-checkbox-check{
                    color: var(--clr-small-checkbox-check);
                }
            }
        }
    }

    /**** Footer ****/

    footer {
        /*
        Warning: The footer may appear invisible on mobile browsers if the address bar is covering
        the footer
        */
        width: 100%;

        /*Flex child*/
        flex-shrink: 0;

        /*Flex parent*/
        display: flex;
        flex-direction: row;
        justify-content: center;

        #share-btn{
            border-radius: 50%;
            background-color: var(--clr-share-bg);
            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
            padding: 0;
            margin-bottom: 0.5rem;
        }
    }
}

/*
**** Onboarding dlg ****
*/

#onboarding-dlg{
    width: 100%;
    height: 85%;
    text-align: center;
    font-size: var(--fs-large-18pt);

    ul{
        list-style-type: none;
        padding-left: 0;
        text-align: left;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }
    p, ol, ul, textarea{
        margin-bottom: 1.2rem;
    }

    .onboarding-outer-div{
        width: 100%;
        height: 100%;
        padding: 1rem;

        .onboarding-inner-div{
            width: 100%;
            max-height: 100%;
            overflow-y: auto;
            align-self: center;

            #ob-1-text{
                padding-left: 0;
                text-align: left;
                display: inline-block;
                margin-left: auto;
                margin-right: auto;
                font-family: var(--ff-title);
                color: var(--clr-dark-blue);

                h1 span {
                    display: block;
                    font-size: 3.5rem;
                    &::first-letter{
                        font-family: var(--ff-title-first-letter); /* bold font version */
                    }
                }

            }

            #ot7-practice-selection{
                margin-bottom: 1.25rem;
                .ot7-part-of-day{
                    margin-bottom: 0.75rem;
                }
                .selection-row{
                    opacity: 0.5;
                    cursor: pointer;
                    &.selected{
                        opacity: 1;
                    }
                }
            }
        }
    }
}

/*
**** Other Dialogs ****
*/

dialog {
    
    margin: auto;
    max-width: 65ch;
    font-family: inherit;
    padding: 0; /*reset (default is 1em)*/
    border-radius: 1.0rem;
    outline: none;
    
    background-color: var(--clr-dlg-bg);

    .dlg-content{
        padding: 0 1rem 0.5rem 1rem;
        img{
            align-self: left;
            width: 100%;
            height: auto;
            display: block;
        }
    }

    &::backdrop{
        background: rgba(0,0,0,0.7);
    }
    &[open]{
        animation: fadeIn 0.3s ease-out;
    }
    &.closing{
        animation: fadeOut 0.3s ease-out forwards;
    }

    /**** Header ****/

    header{
        text-align: center;
        background: var(--clr-dlg-bg);

        /*Ensure the title is sticking to the top*/
        position: sticky;
        top:0;
        z-index: 1;

        /*Flex parent*/
        display: flex;
        flex-direction: row;
        align-items: center;

        h2{
            /*Flex child*/
            flex-grow: 1;
        }
        .x-close-btn, .invisible-btn{
            /*Flex child*/
            flex-shrink: 0;

            padding: 0.75rem;

            svg{
                width: 1.625rem;
                height: 1.625rem;
                cursor: pointer;
            }
        }
    }

    /**** Main Menu Content ****/

    .menu-items{
        list-style-type: none;
        padding-left: 0;
        ul{
            list-style-type: none;
            padding-left: 1.5rem;
        }
        button, a{
            padding: 0.75rem 1.0rem;
            font-size: var(--fs-larger-20pt);
            border-radius: 0.5rem;
            cursor: pointer;

            /*Flex parent*/
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.5rem;

            /*Donate a/href link*/
            text-decoration: none;
            color: var(--clr-fg-primary);
        }
        svg{
            width: 1.625rem;
            height: 1.625rem;

            /*Flex child*/
            flex-shrink: 0;

            /*
            Explicitly setting the color of the icons. We do this because on iOS if svg elements are placed
            inside a-tags (links) then the color will be blue.
            */
            color: var(--clr-fg-primary);
        }
    }
    #version-and-source{
        font-size: var(--fs-small-14pt);
        color: var(--clr-version-text);
        a{
            color: var(--clr-version-text);
        }
        #staging{
            color: var(--clr-staging-text);
            font-weight: var(--fw-bold);
        }
    }

    /**** Other Content ****/

    .other-attributions{
        font-size: var(--fs-smaller-12pt);
        overflow-wrap: anywhere;
    }

    .youtube-video-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; /* for the 16:9 aspect ratio */
        /* overflow: hidden; */
        margin: 0.75rem 0;

        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }

    #practice-short-description{
        color: var(--clr-fg-secondary);
    }

    .share-date-range{
        margin-bottom: 1rem;
        text-align: center;
    }

    /**** Footer ****/

    .dialog-buttons{
        text-align: center;

        /*Flex parent*/
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-bottom: 0.5rem;

        button{
            background-color: var(--clr-dlg-btn-background);
            color: var(--clr-dlg-btn-text);
            border-radius: 3rem;

            font-weight: var(--fw-bold);
            font-size: var(--fs-large-18pt);
            padding: 0.9rem 1.7rem;
            min-height: 44px;
            min-width: 44px;

            &.inactive{
                background-color: var(--clr-fg-secondary);
            }
        }
    }
}

/*
**** Dialog animation ****
*/

@keyframes fadeIn{
    from{
        opacity: 0;
        transform: scale(0.95);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes fadeOut{
    from{
        opacity: 1;
        transform: scale(1);
    }
    to{
        opacity: 0;
        transform: scale(0.95);
    }
}

/*
**** General ****
*/

button {
    padding: 0.2rem 0.4rem;
    background-color: inherit;
    border: none;
    cursor: pointer;
    &.bordered {
        border: 1px solid var(--clr-fg-primary);
        font-size: var(--fs-base-16pt);
        padding: 0.7rem 1rem;
        min-height: 44px;
        min-width: 44px;
    }
}

a{
    color: var(--clr-dark-blue);
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
@supports(text-wrap: pretty){
    h1, h2, h3, h4, h5, h6 {
        text-wrap: pretty;
    }
}
label{
    display: block;
}
details{
    cursor: pointer;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.centered {
    text-align: center;
}

p, ol, ul{
    margin-bottom: 0.7rem;
}

.invisible-btn{
    visibility: hidden;
}
.removed-btn{
    display: none;
}

input[type="text"], textarea {
    display: block; /*otherwise some browsers may give inline which results in the wrong width*/
    resize: none; /*for textarea*/
    font-family: inherit; /*for textarea*/
    font-size: var(--fs-large-18pt);
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 2px solid var(--clr-fg-secondary);
}

summary{
    font-size: var(--fs-large-18pt);
    padding-bottom: 0.75rem;
}

.toast{
    position: fixed;
    bottom: 2.0rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483647;

    background-color: rgb(35, 133, 0);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    &.show{
        opacity: 1;
    }
}