@import "colors.css";
@layer base, layout, components;
/* ========= Root Variables ========= */
:root {
   
    --base-text-color-1: white;
    --base-text-color-2: var(--chocolate-cosmos);
    --base-text-color-3: var(--pistachio);
    --base-text-color-4: var(--mint-green);
    --base-text-color: var(--base-text-color-4);
    --nav-fill: var(--mossy-green);
    --nav-gradient: var(--dark-turqoise);

    --nav-bg-color-1: linear-gradient(to left,var(--nav-fill), var(--nav-gradient));
    --nav-bg-color-2: #1c1c1c;
    --nav-bg-color-3:#2E2C2F;
    --nav-bg-color:var(--nav-bg-color-1);

    --nav-text-color-1:white;
    --nav-text-color-2:black;
    --nav-text-color-3:var(--wine);
    --nav-text-color-4:var(--light-wine);
    --nav-text-color-5:  var(--pistachio);
    --nav-text-color-6: var(--base-text-color);
    --nav-text-color:var(--nav-text-color-6);

    --nav-border-color-1: var(--nav-text-color);
    --nav-border-color-2:white;
    --nav-border-color:var(--nav-border-color-1);

    --nav-gap:75px;
    --nav-font-size:1rem;
    --nav-padding:2rem;
    --page-highlight:var(--light-cyan);

    --theme-svg-color-1: white;
    --theme-svg-color-2: var(--base-text-color);
    --theme-svg-color: var(--theme-svg-color-2);
    
    --logo-size-1:2rem;
    --logo-size-2:2.5rem;
    --logo-size:var(--logo-size-2);
    --logo-color-1: var(--base-text-color);
    --logo-color-2: var(--mint-green);
    --logo-color-3: color-mix(in srgb, var(--base-text-color), black 40%);
    --logo-color:var(--logo-color-3);


    --body-fill: var(--mossy-green);
    --body-gradient: var(--dark-turqoise);

    --body-bg-color-1: linear-gradient(to left,var(--body-fill), var(--body-gradient));
    --body-bg-color-2:  linear-gradient(to right,var(--light-orange), var(--cream));
    --body-bg-color-3: linear-gradient(to right,var(--radiant-lapis-lazuli), var(--lapis-lazuli));
    --body-bg-color:  var(--body-bg-color-2);

    --main-fill:var(--mint-green);
    --main-gradient: var(--dark-mint-green);
    --main-height: 80vh;

    --main-bg-color-1: linear-gradient(to left,var(--main-fill), var(--main-gradient));
    --main-bg-color-2: linear-gradient(to right,var(--lighter-orange),var(--lighter-cream));
    --main-bg-color-3: linear-gradient(to right,var(--charcoal-black),var(--gunmetal), var(--dark-mint-green),var(--pale-green));
    --main-bg-color-4: var(--body-bg-color-2);
    --main-bg-color: var(--main-bg-color-2);

    --intro-text-color: white;
    --two-color-outline: var(--celadon) 5px 5px, var(--tiffany-blue) -5px -5px;

    --h1-color-1: var(--vanilla);
    --h1-color-2: var(--wine);
    --h1-color-3: color-mix(in srgb, var(--base-text-color), black 20%);
    --h1-color: var(--h1-color-3);

    --h1-font-size-1: 2rem;
    --h1-font-size-2: 3rem;
    --h1-font-size: var(--h1-font-size-2);

    --header-height:5rem; 
    
    --footer-height:3.5rem;

    
}
/* ========= Root Variables Dark Mode ========= */
:root.dark {
    --base-text-color-1: white;
    --base-text-color: var(--base-text-color-1);

    --nav-fill: var(--mossy-green);
    --nav-gradient: var(--dark-turqoise);

    --nav-bg-color-1: linear-gradient(to left,var(--nav-fill), var(--nav-gradient));
    --nav-bg-color:var(--nav-bg-color-1);

    --nav-text-color-1:white;
    --nav-text-color-2: var(--base-text-color);
    --nav-text-color:var(--nav-text-color-2);

    --nav-border-color-1: var(--nav-text-color);
    --nav-border-color-2:white;
    --nav-border-color:var(--nav-border-color-1);

    --page-highlight-1: var(--light-cyan);
    --page-highlight:var(--page-highlight-1);

    --theme-svg-color-1: white;
    --theme-svg-color-2: var(--base-text-color);
    --theme-svg-color: var(--theme-svg-color-2);
    
    --logo-color-1: var(--base-text-color);
    --logo-color-2: var(--mint-green);
    --logo-color-3: color-mix(in srgb, var(--base-text-color), black 40%);
    --logo-color:var(--logo-color-3);


    --body-fill: var(--mossy-green);
    --body-gradient: var(--dark-turqoise);

    --body-bg-color-1: linear-gradient(to left,var(--body-fill), var(--body-gradient));
    --body-bg-color-3: linear-gradient(to right,var(--radiant-lapis-lazuli), var(--lapis-lazuli));
    --body-bg-color-4: linear-gradient(to right,
        color-mix(in srgb, var(--light-orange), var(--dark-turqoise) 10%), 
        color-mix(in srgb, var(--cream),var(--dark-turqoise) 10%));
    --body-bg-color-5: linear-gradient(to right,var(--violet),var(--wine), var(--chocolate-cosmos));
    --body-bg-color:  var(--body-bg-color-5);

    --main-fill:var(--mint-green);
    --main-gradient: var(--dark-mint-green);

    --main-bg-color-1: linear-gradient(to right,var(--charcoal-black),var(--gunmetal), var(--dark-mint-green),var(--pale-green));
    --main-bg-color-2: var(--body-bg-color-2);
    --main-bg-color-3: linear-gradient(to right,var(--light-violet),var(--light-wine), var(--light-chocolate-cosmos));
    --main-bg-color: var(--main-bg-color-3);

    --intro-text-color: white;
    --two-color-outline: var(--celadon) 5px 5px, var(--tiffany-blue) -5px -5px;

    --h1-color-1: var(--vanilla);
    --h1-color-3: color-mix(in srgb, var(--base-text-color), black 20%);
    --h1-color: var(--h1-color-1);
}
/* ========= Universal Tags ========= */
* {
    margin: 0;
    padding: 0;
    color:var(--base-text-color);
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(1rem,calc(1rem + 0.4vw), 1.15rem);

}

.content-grid {
    --padding-inline: 2rem;
    --content-max-width: 70ch;
    --breakout-max-width: 85ch;

    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) /2);

    display:grid;
    grid-template-columns: 
        [full-width-start] minmax(var(--padding-inline), 1fr)
        [breakout-start] minmax(0, var(--breakout-size))
        [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end]
        minmax(0, var(--breakout-size)) [breakout-end]
        minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width), 
.full-width > :not(.breakout, .full-width) {
    grid-column: content;
}

.content-grid > .breakout {
    grid-column: breakout;
}

.content-grid > .full-width {
    grid-column: full-width;
}


/* ========= Global Tags ========= */
h1 {
    display:flex;
    justify-content: center;
    color: var(--h1-color);
    font-size: var(--h1-font-size)
}
/* ========= Body Tags ========= */
body {
    display: flex;
    flex-direction: column;
    background: var(--body-bg-color);
   
}
/* ========= Main Tags ========= */
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: var(--main-height);
    padding: 1rem;
    background:  var(--main-bg-color);
}
/* ========= Header & Nav Tags ========= */
header menu, nav+button{
    display: none;
}
header {
    display:flex;
    flex-direction: row;  
    height: var(--header-height);
    align-items: center;
    
    > nav {
        -background: var(--nav-bg-color);
        text-transform: uppercase;
        padding:var(--nav-padding);
        flex:1;
    }
    ul {
        display:flex;
        list-style-type: none;
        align-items: center;
        justify-content: flex-start;
        gap: var(--nav-gap);
        padding: 0px;
        margin: 0px;
        a {
            display:inline-flex;
            align-items: center;
            text-decoration: none;
            &:not(.logo a) {
                box-shadow: var(--two-color-outline);
                color: var(--nav-text-color);
                font-size: var(--nav-font-size);
                -background-color: var(--pale-red);
                padding: calc(var(--nav-font-size)/4);
            }
        }

    }
}




li.logo {
    margin-right: auto;
}
.logo a {
    font-size: var(--logo-size);
    color: var(--logo-color);
    font-weight: bold;
    -letter-spacing: -0.5;
}
nav a[aria-current="page"] {
    background-color: var(--page-highlight);
    opacity: .67;
    font-weight: 600;
    
}
/* ========= Theme ========= */
#theme-menu-heading {
    color:var(--nav-text-color);

}

.theme-menu summary{
    list-style: none;
}
.theme-menu ul {
    gap:1.5rem;
}

li > button {
    background-color: transparent;
    cursor:pointer;
    border: none;
}  
.icon-sun,
.icon-moon {
    width: 1.5rem;
    height: 1.5rem;
    stroke: var(--theme-svg-color);
    fill: none;
    stroke-width: 2;
}
  
button[data-theme="light"]:hover .icon-sun {
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}

button[data-theme="dark"]:hover .icon-moon {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}
/* ========= Footer Tags ========= */

footer {
    display:flex;
    justify-content: center;
    height: var(--footer-height);
}
small {
    margin:auto;
}

  

/* ========= View Transitions ========= */
/*View transitions Disabled for now*/
/* @view-transition {
    navigation: auto;
}     

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
    animation-name: crazy-out;
}

::view-transition-new(root) {
    animation-name: crazy-in;
} */
@keyframes fade-out-up {
    from {
      opacity: 1;
      transform: translateY(0%);
    }
    to {
      opacity: 0;
      transform: translateY(100%);
    }
   }
@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}
   
@keyframes crazy-out {
    from {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
        filter: blur(6px);
    }
}

@keyframes crazy-in {
    from {
        opacity: 0;
        transform: scale(1.1) rotate(5deg);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
}

/*========== Sizing Adjustments for Nav Breakpoints========*/

@media (max-width: 760px){
    header nav > ul a:not(.logo a){
        display: none;
    }
    header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline-end:var(--nav-padding);
        
        nav > ul{
            gap:0;
        }
        nav+button{
            --bar-w: 25px;
            --bar-h: 5px;
            --bar-gap: 10px;
            --bar-color: var(--nav-text-color);
            --menu-width: calc(var(--bar-w) + 16px);
            --menu-height: calc(3 * var(--bar-h) + 2 * var(--bar-gap) + 16px);
            position: relative;
            display: inline-block;
            width: var(--menu-width);
            height: var(--menu-height);
            -border: 1px solid hsl(0 0% 100% / .2);
            -border-radius: .5rem;
            border:none;
            box-shadow: var(--two-color-outline);
            background: transparent;
            cursor: pointer;
            &::before, &::after {
                content:"";
                position:absolute; 
                left: 50%;
                top: 50%;
                height:3px;
                width: var(--bar-w);
                height: var(--bar-h);
                background: var(--bar-color);
                transform: translate(-50%, -50%);
                transition: transform .25s ease, opacity .25s ease, top .25s ease;
            }
            &::before{
                box-shadow:
                    0 calc(-1 * (var(--bar-gap) + var(--bar-h))) 0 0 var(--bar-color),
                    0 calc( 1 * (var(--bar-gap) + var(--bar-h))) 0 0 var(--bar-color);
            }
            &::after {
                opacity:0;
            }
        }
        > menu[popover]{
            display: none;   
            -position: fixed;           
            inset: auto 1rem auto auto; 
            -translate: 0 50%;
            top:5rem;
            right:0%;
            &:popover-open{
                display: flex;
                flex-direction:column;            
                margin: 0; 
                padding: 0.5rem 0;
                list-style: none;
                background: linear-gradient(to left,var(--nav-fill), var(--nav-gradient));
                border: 1px solid var(--nav-border-color);
                -border-radius: .6rem;
                box-shadow: 0 10px 25px rgba(0,0,0,.25);
            }
            a {
                display: block;
                padding: .65rem 1rem;
                color: var(--nav-text-color);
                text-decoration: none;
                &:hover {
                    background: hsl(0 0% 100% / .08);
                }
            }
        }
        &:has(menu[popover]:popover-open) > button[popovertarget]{
            &::before {
                box-shadow: none;
                transform: translate(-50%, -50%) rotate(45deg);
            }
            &::after {
                opacity: 1;
                transform: translate(-50%, -50%) rotate(-45deg);
            }
        }
    }
}

/* Enable default cross-fade for all content */
html.view-transition {
    view-transition-name: default;
}

/* Make content fade smoothly when DOM changes */
::view-transition-old(default) {
    animation: fadeOut 200ms ease forwards;
}

::view-transition-new(default) {
    animation: fadeIn 250ms ease forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}