/**
 * NoLoJS CSS
 **/

/*****
 * Base CSS, for comsetics
*****/
:root {
  --green-dark: #34a0a4;
  --green-med: #a1c9c9;
  --green-light: #f6f7f1;
  --header-height-large: 150px;
  --header-height-small: 75px;
  --header-padding: 1rem;
  --content-margin: var(--header-height-large);
  --small-screen-breakpoint: 600px;
}
*, ::before, ::after {
    box-sizing: border-box;
}
html {
    background-color: var(--green-dark);
}
body {
    margin: 0;
    background-color: var(--green-light);
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
    line-height: 1.2;
    color: #444;
}
h1 {
    margin: 0;
    padding-block: 2rem;
    font-size: 2rem;
    text-align: center;
}
h2 {
    text-align: center;
}
header,
footer {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding: var(--header-padding);
    color: var(--green-light);
    font-size: 16px;
    background-color: var(--green-dark);
    & a {
        color: var(--green-dark);
    }
}
footer {
    flex-direction: column;
    text-align: center;
}
nav {
    & button {
        position: absolute;
        left: .5rem;
        bottom: .5rem;
        border-radius: 4px;
        padding: .5rem;
        border: 1px solid var(--green-light);
        background-color: var(--green-dark);
        cursor: pointer;
    }
    & ul {
        list-style: none;
        background-color: var(--green-light);
        box-shadow: 2px 0 8px black;
    }
    & a {
        display: block;
        padding: .5rem 1rem;
        text-decoration: none;
        background-color: white;
        border-bottom: 1px solid var(--green-light);
        cursor: pointer;
        transition: all 150ms;
        &:hover {
            text-decoration: underline;
        }
    }
}
main {
    padding-block: 1rem;
    & > *:not(.container--content__full-width) {
        max-width: 1200px;
        margin-inline: auto;
        padding-inline: 2rem;
    }
}
hr {
    margin-block: 2em;
    margin-inline: 1rem;
}
p {
    margin-block: .5em;
}
code,
pre {
    background-color: #333;
    color: lime;
    & span {
        color: red;
    }
}
code {
    padding-block: 2px;
    padding-inline: 4px;
}
dialog {
    max-width: 90%;
    padding-inline: 1rem;
    background-color: var(--green-med);
    border: 2px solid var(--green-dark);
    box-shadow: 5px 5px 10px;
}
::backdrop {
    background: rgb(0 0 0 / .65);
}
button {
    border: 1px solid var(--green-dark);
    border-radius: 5px;
    padding-block: 5px;
    padding-inline: 10px;
    display: inline-block;
    background-color: var(--green-dark);
    cursor: pointer;
    color: var(--green-light);
}
img, video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* General styles for the media content cards */
.container--cards {
    container-type: inline-size;
    & .container--media-content {
        border: 1px solid var(--green-dark);
        border-radius: 12px;
        overflow: clip;
        margin-block: 1rem;
    }
}
/* Transition based on screen size */
@container (inline-size > 640px) {
    .container--media-content {
        display: flex;
        & > div {
            flex: 1 1 50%;
        }
    }
}



/*****
 * Begin Features CSS
*****/


/** Smooth Scrolling **/
/* Only apply if the user did NOT request reduced motion */
@media (prefers-reduced-motion: no-preference) {
    /* Makes the sliding a little smoother */
    html {
        scroll-behavior: smooth;
    }
}
/* Give some "breathing room" for the scrolled-to element */
:target {
    scroll-margin-top: 100px;
}


/** Sticky Header **/
.header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
}
/* Push the content down for the fixed header */
main {
    /* The height of the logo, plus the header top & bottom padding */
    margin-top: var(--content-margin);
}


/** Shrinking Header **/
/* Make the logo initially large */
.header-shrink {
    height: var(--header-height-large);
    & img {
        max-height: 100%;
        width: auto;
    }
}
/* Define the animations that should happen when the user scrolls */
@keyframes header-scroll {
    to { 
        height: var(--header-height-small); 
    }
}
/* Only apply if the user did NOT request reduced motion */
@media (prefers-reduced-motion: no-preference) { 
    /* Make sure the device supports scroll animation */
    @supports (animation-timeline: scroll()) {
        .header-shrink {
            /* Assign the animations to the elements */
            animation: header-scroll linear both;
            /* Passing nothing into `scroll()` will assign the animation to the document scroll */
            animation-timeline: scroll();
            /* 100px is a magic number; the animation will start at 0 and end at 100px; choose whatever numbers you want */
            animation-range: 0 100px;
        }
    }
}


/** Header drop-shadow if scrolled **/
html {
    /* Identify the scroll container */
    container-type: scroll-state;
}
@media (prefers-reduced-motion: no-preference) { 
    header {
        transition: all 250ms;
    }
}
/* Only apply if the user did NOT request reduced motion */
@container scroll-state(scrollable: top) {
  header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
}


/** Offscreen nav for small screens **/
nav {
  /* Set as custom properties for consistency */
  --hidden: -100vw;
  --visible: 0;
  ul {
    /* Override User-Agent styles */
    margin: 0; /* Prevents center/center */
    border: 0; /* Kills fat black border */
    /* Set top position for onscreen nav */
    top: var(--content-margin);
    /* Start offstage... */
    translate: var(--hidden);
    /* ... and move onstage when open */
    &:popover-open {
        translate: var(--visible);
        @starting-style {
            translate: var(--hidden);
        }
    }
    /* Only apply if the user did NOT request reduced motion */
    @media (prefers-reduced-motion: no-preference) {
        /* Animate the menu opening */
        transition: translate 150ms;
    }
    /* Add backdrop */
    &::backdrop {
        background: rgb(0 0 0 / 50%);
    }
  }
}
/* Override offscreen on larger screens */
@media (min-width: 769px) {
    /* Flip the layout on larger screens */
    header {
        flex-direction: row-reverse;
        justify-content: space-evenly;
        align-items: end;
    }
    /* Hide the nav button on larger screens */
    header button {
        display: none;
    }
    /* Overrides for larger screens */
    nav ul {
        position: static;
        display: flex;
        gap: 1rem;
        background: none;
        border: 0;
        translate: none;
        box-shadow: none;
        & li:hover {
            background-color: white;
        }
    }
}


/** All content-over-media components **/
.content-over-media {
    display: grid;
    grid-template: "media-content";
    place-items: center;
    justify-content: start;
    & > * {
        grid-area: media-content;
    }
}
.container--media {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: "media";
    place-items: stretch;
    place-content: stretch;
}
.container--content {
    position: relative;
    margin-block: 4vw;
    margin-inline: 2vw;
    padding-inline: 8vw;
}


/** All CSS Carousels will use these basic starting blocks **/
.css-carousel {
    /* Because I choose to use a UL for my carousel, remove browser defaults */
    list-style: none;
    margin: 0;
    padding: 0;
    /* The only CSS necessary for a basic Carousel */
    display: flex;
    flex-wrap: nowrap;
    /* Help content-over-media stand out*/
    & .container--content {
        max-width: 90%;
        text-align: center;
        background-color: rgba(255 255 255 / 0.9);
        border: 1px solid rgba(0, 0, 0, 0.15);
    }
}


/** The Hero Carousel **/
.css-carousel__hero {
    /* Max width, based on image size, center to keep pretty */
    max-width: 1200px;
    margin-inline: auto;
    /* Give some breathing room for dot indicators */
    margin-block-end: 5rem;
    /* Set the slides to create a single row */
    overflow-inline: auto;
    /* Prevents accidental Back/Forward */
    overscroll-behavior-inline: contain;
    /* Optionally remove the scrollbar */
    scrollbar-width: none;
    /* Confines the scrolling direction */
    scroll-snap-type: inline mandatory;
    /* Setup anchor for navigation arrows and indicator dots */
    anchor-name: --css-carousel__hero;
    /* Position the dots where you wish */
    scroll-marker-group: after;
    /* Only apply if the user did NOT request reduced motion */
    @media (prefers-reduced-motion: no-preference) {
        /* Makes the sliding a little smoother */
        scroll-behavior: smooth;
    }

    &::scroll-button(*) {
        position-anchor: --css-carousel__hero;
        position: fixed;
        top: anchor(center);
    }
    &::scroll-button(inline-start) {
        left: calc(anchor(left) + 10px);
        content: "⬅" / "Scroll Left";
    }
    &::scroll-button(inline-end) {
        right: calc(anchor(right) + 10px);
        content: "⮕" / "Scroll Right";
    }

    &::scroll-marker-group {
        position-anchor: --css-carousel__hero;
        position-area: block-end;
        position-visibility: always;
        position: fixed;
        margin-block-start: 1rem;
        /* Customize the dots as you wish */
        display: grid;
        grid-auto-columns: 15px;
        grid-auto-flow: column;
        gap: 20px;
    }
  
    li {
        flex: 0 0 100%;
        /* Optionally force swipes to center the new slide */
        scroll-snap-align: center;
        /* Optionally force swipes to stop for each slide */
        scroll-snap-stop: always;
        &::scroll-marker {
            content: ' ';
            /* Customize the dots as you wish */
            aspect-ratio: 1;
            border-radius: 100%;
            border: 1px solid var(--green-dark);
        }
        &::scroll-marker:target-current {
            /* Customize the current dot as you wish */
            background: var(--green-med);
        }
    }
    img {
        /* Make hero carousel images responsive */
        object-fit: contain;
    }
  
}


/** CSS Animated Carousel **/
.container--tabs {
    /* Initially create a multi-column grid */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 1rem;
    max-width: 600px;
    margin-inline: auto;
    background: var(--green-med);
    /* Hide tabs that are currently "offscreen" */
    overflow-y: hidden;
    /* Hide the horizontal scrollbar */
    scrollbar-width: none;
    /* Fixed height is not always appropriate, but highlights tab content can scroll within each tab panel */
    block-size: 300px;
    /* Give some space above for the "tabs" */
    margin-block-start: 4rem;
    /* Define where where the "tabs" sit */
    scroll-marker-group: before;
    /* Define content scroll behavior */
    scroll-snap-type: x mandatory;
    /* Create anchor for reference */
    anchor-name: --tabs;
  
  /* Define the "tab" group */
  &::scroll-marker-group {
    /* Create the tabs layout */
    display: flex;
    column-gap: 1rem;
    align-items: end;
    justify-content: start;
    /* Correlate & position the tab anchors */
    position-anchor: --tabs;
    position: absolute;
    bottom: anchor(top);
    left: anchor(left);
    right: anchor(right);
  }
}
.container--tab {
    padding: 1rem;
    overflow-y: scroll;
    /* Define scroll snap to the start of each slide */
    scroll-snap-align: start;
    /* If you want to get fancy, and make the tab content scrollbars match your design */
    scrollbar-color: var(--green-dark) var(--green-med); /* Firefox, thumb color, track color */
    &::-webkit-scrollbar-thumb {
        background-color: var(--green-dark); /* WebKit, color of the thumb */
        border-radius: 6px; /* WebKit, rounded corners for the thumb */
    }
    &::-webkit-scrollbar-track {
        background: var(--green-med); /* WebKit, color of the track */
    }
    &::scroll-marker {
        /* Create the "tab" content based on its `aria-label` */
        content: attr(aria-label);
        /* Make it look pretty... */
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
        padding-inline: 1.5rem;
        padding-block: 1rem;
        background: var(--green-dark);
        border: 1px solid var(--green-med);
        border-bottom: none;
        color: white;
  }
  /* can change the appearance of the `:target-current`, but note that nesting this does NOT work */
  &::scroll-marker:target-current {
    background: var(--green-med);
  }
}  



/** CSS Animated Carousel **/
/* Create the animation for the loop effect (note iOS needs the GPU activation from translate3d */
@keyframes css-carousel__animated-loop {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-100%, 0, 0); }
}
/* Make both ULs `flex` and setup overflow scolling */
.css-carousel__wrapper {
    display: flex;;
    /* Set the slides to create a single row */
    overflow-inline: auto;
    & img {
        max-width: none; /* Prevent image shrinking */
    }
}
/* Only apply if the user did NOT request reduced motion */
@media (prefers-reduced-motion: no-preference) {
    /* Kill the scrollbar for the wrapper */
    .css-carousel__wrapper {
        scrollbar-width: none;
    }
    /* Add the animation */
    .css-carousel__animated-loop {
        animation: css-carousel__animated-loop 20s linear infinite;
    }
}


/** Parallax **/
/* For all users, mostly layout */
.parallax__wrapper {
    /* Add some constraints to prevent bleeding out of container */
    min-height: 50vh;
    max-height: 50vh;
    overflow: clip;
    & .container--media-content {
        justify-content: normal;
    }
    & .container--content {
        margin-inline: 8vw;
        padding-inline: 4vw;
        padding-block: 2vw;
        background-color: rgb(255 255 255 / .65);
    }
    & img {
        scale: 1.75;
    }
}
/* Only apply if the user did NOT request reduced motion */
    .parallax__wrapper {
        /* Add parallax context */
        translate: 0;
        /* Make sure the content-over-media styles are applied */
        & .container--media-content {
            & > div {
                /* Set initial position to allow animation */
                position: fixed;
                top: 50%;
                translate: 0 -50% 0;
                /* Add timeline and range*/
                animation-timeline: view();
                animation-range: entry 10% exit 100%;
            }
        }
        /* Only apply if the user did NOT request reduced motion */
        @media (prefers-reduced-motion: no-preference) {
            /* Apply the animations */
            & .container--media {
                animation: parallax-image linear both;
            }
            & .container--content {
                margin-block: 0;
                animation: parallax-text linear both;
            }
        }
    }
    @keyframes parallax-image {
        from {
            translate: 0 -50% 0;
        }
        to {
            translate: 0 -85% 0;
        }
    }
    /* Animation for foreground text */
    @keyframes parallax-text {
        from {
            translate: 0 125% 0;
        }
        to {
            translate: 0 -200% 0;
        }
    }


/** Accordion **/
.container--accordion {
    details {
        margin-block-end: 6px;
        background-color: var(--green-light);
        border: 1px solid var(--green-dark);
        overflow: clip;
        interpolate-size: allow-keywords; /* Allows animation between numeric and text values; in this case block-size: 0 --> auto; */
        &::details-content {
            block-size: 0; /* Initial state is 0 height */
            /* Only apply if the user did NOT request reduced motion */
            @media (prefers-reduced-motion: no-preference) { 
                /* Animate the opening */
                transition: block-size 0.25s ease-in,
                            content-visibility 0.25s ease-in;
                /* Switch between numeric and text value will happen at 50% */
                transition-behavior: allow-discrete;
            }
        }
        &[open]::details-content {
            block-size: auto; /* Open state is 100% height */
        }
    }
    details > * {
        padding: 10px;
        margin: 0;
    }
    summary {
        background-color: var(--green-med);
        padding: 10px;
        cursor: pointer;
        font-weight: bold;
    }
    details[open] summary {
        background-color: var(--green-dark);
        color: var(--green-light);
    }
}


/** Fly-In Scroll Animations **/
/* Define the scroll animations */
@keyframes fly-in-left {
    from {
        opacity: 0;
        translate: 100% 0 0; /* Starts offscreen to the right */
    }
    to {
        opacity: 1;
        translate: 0 0 0; /* Ends at its natural position */
    }
}
@keyframes fly-in-right {
    from {
        opacity: 0;
        translate: -100% 0 0; /* Starts offscreen to the left */
    }
    to {
        opacity: 1;
        translate: 0 0 0; /* Ends at its natural position */
    }
}
@keyframes fly-in-up {
    from {
        opacity: 0;
        translate: 0 100% 0; /* Starts offscreen to the bottom */
    }
    to {
        opacity: 1;
        translate: 0 0 0; /* Ends at its natural position */
    }
}
@media (prefers-reduced-motion: no-preference) {
    /* Apply the animation to the cards */
    .scroll-animation--fly-in {
        animation-timing-function: linear;
        animation-direction: forwards;
        /* The duration can be adjusted, but the timeline drives it */
        animation-duration: 0.5s; 
        /* Connect the animation to the view timeline */
        animation-timeline: view();
        /* Set the animation start/end within the viewport */
        animation-range: entry 0% cover 50%; /* Starts when 0% is visible, ends when 50% is visible */
    }
    .fly-in--left {
        animation-name: fly-in-left;
    }
    .fly-in--right {
        animation-name: fly-in-right;
    }
    .fly-in--up {
        animation-name: fly-in-up;
    }
}