/*
TBD: License header
*/

@font-face {
    font-family: 'Open Sans Light';
    src: url('fonts/OpenSans-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans Bold';
    src: url('fonts/OpenSans-Bold.ttf') format('truetype');
}

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

:root {
    /*Font*/
    --ff-base: system-ui, sans-serif;
    --ff-title: 'Open Sans Light', sans-serif;
    --ff-title-first-letter: 'Open Sans Bold', sans-serif;
    --fw-bold: 700;
    --fs-smallest-9pt: 0.5625rem;
    --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*/
    --clr-bg-primary: #FEFBF9;
    --clr-bg-secondary: #E5E5E5;
    --clr-fg-primary: #122646;
    --clr-fg-secondary: #918F8D;
    --clr-bg-app-has-moved-banner: #ff9c8f;
}

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

/*
p:last-child, ol:last-child, ul:last-child{
    margin-bottom: 0;
}
*/

/*
**** Main Screen: Central area ****
*/

body {
    height: 100vh;
    margin: 0 auto;
    max-width: 65ch;
    font-family: var(--ff-base);
    font-size: var(--fs-base-16pt);
    color: var(--clr-fg-primary);
    background-color: var(--clr-bg-primary);
    /*
    "Because this color appears before your stylesheets have loaded, set its value to the
    same color value as the background-color CSS property in your application's stylesheet."
    --- https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors
    */
}

table {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.left {
    font-size: 2.0em;
    padding: 0.8rem;
    cursor: pointer;
}

.checkbox {
    padding: 0.75rem;
}

.middle {
    flex-grow: 1;
    font-size: var(--fs-large-18pt);
}

.checkbox {
    /* background-color: var(--clr-bg-secondary); */
    /* flex-shrink: 0; */
    cursor: pointer;
}

.previous-days {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.row {
    margin: 0 0 0.5rem 0;
    padding: 0.2rem
}

.row:not(:last-child) {
    border-bottom: 2px solid #e0dedc;
}

.practice,
.smart-goal {
    padding: 0.5rem;
    cursor: pointer;
}

.practice {
    font-family: var(--ff-base);
    font-weight: var(--fw-bold);
}

.smart-goal {
    color: var(--clr-fg-secondary);
}

#main-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

#practices{
    display: flex;
    flex-direction: column;
}
#practices > svg{
    align-self: center;
}


/*
**** Main Screen: Header and Footer ****
*/

header,
.header {
    /*Flex child:*/
    flex-shrink: 0;

    /*Flex parent:*/
    display: flex;
    flex-direction: row;
}

/*
Warning: This may appear invisible on mobile browsers if the address bar is covering the footer
*/
footer {
    /*Flex child:*/
    flex-shrink: 0;
    /*Flex parent:*/
    display: flex;
    flex-direction: row;
}

.header-empty {
    flex-grow: 1;
}

footer {
    width: 100%;
}

#share-btn {
    background-color: var(--clr-bg-secondary);
    width: 100%;
}

#app-has-moved-banner{
    background-color: var(--clr-bg-app-has-moved-banner);
    font-size: var(--fs-small-14pt);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

#invisible-btn{
    visibility: hidden;
}


/*
**** Onboarding ****
*/

h1 {
    font-size: 3rem;
}

#onboarding-dlg{
    width: 100%;
    height: 85%;
    text-align: center;
}
#onboarding-dlg ul{
    list-style-type: none;
    padding-left: 0;
    text-align: left;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
input{
    margin-bottom: 0.75rem;
}
.onboarding-outer-div{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}
.onboarding-inner-div{
    width: 100%;    
}

#ob-1-text{
    padding-left: 0;
    text-align: left;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--ff-title);
}
#ob-1-text h1::first-letter{
    font-family: var(--ff-title-first-letter);
}

.selection-row{
    opacity: 0.5;
    cursor: pointer;
}
.selection-row.selected{
    opacity: 1;
}
button.inactive{
    color: var(--clr-fg-secondary);
}


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

dialog {
    margin: auto;
    max-width: 65ch;
    font-family: var(--ff-base);
    border-radius: 1.5rem;
    padding: 1rem;
}
dialog::backdrop{
    background: rgba(0,0,0,0.7);
}
@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);
    }
}
dialog[open]{
    animation: fadeIn 0.3s ease-out;
}
dialog.closing{
    animation: fadeOut 0.3s ease-out forwards;
}

button {
    /* background-color: var(--clr-debug-1); */
    padding: 0.2rem 0.4rem;
    background-color: inherit;
    border: none;
    cursor: pointer;
}
details{
    cursor: pointer;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.bordered {
    border: 1px solid var(--clr-fg-primary);
    font-size: var(--fs-base-16pt);
    padding: 0.7rem 1rem;
    min-height: 44px;
    min-width: 44px;
}

input[type=text] {
    width: 100%;
}

#version{
    font-size: var(--fs-small-14pt);
    color: var(--clr-bg-secondary);
}

textarea {
    width: 100%;
}

#intention-section {
    /* border: 2px solid black; */
    font-size: var(--fs-base-16pt);
    padding: 0.3rem 0.5rem;
    margin-top: 0.5rem;
    color: var(--clr-fg-secondary);
}

/*
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.
*/
svg{
    color: var(--clr-fg-primary);
}


.menu-items {
    padding: 1rem 1.5rem;
    line-height: 1.6;
    font-size: var(--fs-larger-20pt);
}

.centered {
    text-align: center;
}

#active-date-relative {
    font-weight: var(--fw-bold);
    font-size: var(--fs-larger-20pt);
}

#acitve-date-absolute {
    color: var(--clr-fg-secondary);
}

.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;
}

.youtube-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.other-credits{
    font-size: var(--fs-smaller-12pt);
}

input{
    font-size: var(--fs-large-18pt);
}

textarea{
    font-size: var(--fs-base-16pt);
}