/* @media (prefers-reduced-motion: no-preference) {
    /* We want a view transition between pages
    @view-transition { navigation: auto; }
    /* Note that the animation duration in here dictates
    how long it takes to actually "do" the navigation to
    the second page, so it really ought to agree with the
    duration of ::view-transition-new below so when the
    incoming animation finishes, the navigation happens.
    ::view-transition-group(root) { animation-duration: 500ms; }

    /* To animate the value of a custom property, you 
    have to declare it with @property.
    Our var(--time) will range between 0 and 1
    @property --time {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
    }

    /* A do-nothing animation for the outgoing page
    @keyframes move-out { from { } to {  } }

    /* actually animate time from a bit before 0 to a bit after 1,
    so that the wave appears a bit above the screen and ends a bit after
    @keyframes move-in {
    from { --time: -0.1; }
    to { --time: 1.1; }
    }

    /* The old page has to have some transition animation defined, 
        or it gets the default fade.
    ::view-transition-old(root) {
        animation: 500ms ease-in both move-out;
    }

    /* The new page appears with our wave effect
    ::view-transition-new(root) {
    --humps: 2; /* the number of "waves" in the wave effect
    --pi: 3.14; /* half of tau
    --lr: calc(var(--humps) * pi); /* the amout of radians from left to right
    --time: 0.0; /* how far we are through the animation

    /* The wave is:
        --humps number of humps from left to right
        vertically positioned at 100% * --time (so it 
            goes from top to bottom)
        horizontally offset (scrolled) by --time so that 
            the wave fronts move left to right
        And we manually create a sine wave (well, technically a cosine wave)
            by calculating the height of each bit of the clip path every 10%
            of the way from left to right of the screen
        This seems close enough for government work, but people with sharp eyes
            might think the wave is not smooth enough, in which case add more lines
            to the clip path. The first number (10%) is the position of a point from
            left to right across the screen, and the second is the position of that
            point up and down; note that the 0.1 in the cos needs to agree with the 10%
            l-r position.
    clip-path: polygon(
        0% 0%,
        0% calc(cos(calc(0 + var(--time)) * var(--lr)) * 10% + calc(100% * var(--time))),
        10% calc(cos(calc(0.1 + var(--time)) * var(--lr)) * 10% + calc(100% * var(--time))),
        20% calc(cos(calc(0.2 + var(--time)) * var(--lr)) * 10% + calc(100% * var(--time))),
        30% calc(cos(calc(0.3 + var(--time)) * var(--lr)) * 10% + calc(100% * var(--time))),
        40% calc(cos(calc(0.4 + var(--time)) * var(--lr)) * 10% + calc(100% * var(--time))),
        50% calc(cos(calc(0.5 + var(--time)) * var(--lr)) * 10% + calc(100% * var(--time))),
        60% calc(cos(calc(0.6 + var(--time)) * var(--lr)) * 10% + calc(100% * var(--time))),
        70% calc(cos(calc(0.7 + var(--time)) * var(--lr)) * 10% + calc(100% * var(--time))),
        80% calc(cos(calc(0.8 + var(--time)) * var(--lr)) * 10% + calc(100% * var(--time))),
        90% calc(cos(calc(0.9 + var(--time)) * var(--lr)) * 10% + calc(100% * var(--time))),
        100% calc(cos(calc(1.0 + var(--time)) * var(--lr)) * 10% + calc(100% * var(--time))),
        100% 0%
    );
    /* And declare the animation, which is what moves the wave
    animation: 500ms ease-in both move-in;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root) {
      animation-delay: 500ms;
    }
    
    ::view-transition-new(root) {
      animation: circle-in 500ms;
    }
    
    @keyframes move-in {
      from { translate: 0 -100%; }
      to { translate: 0  0; }
    }
    
    @keyframes circle-in {
      from { clip-path: circle(0% at 50% 0%); }
      to { clip-path: circle(120% at 50% 0%); }
    }
} */

:root {
    color-scheme: light;

    --border-radius: 8px;
    --border-width: 3px;
    --gap-sm: 0.5rem;
    --gap-base: 1rem;
    --gap-lg: 1.5rem;
    --padding-block-main: 2rem;
    --shadow-offset: 4px;
    --shadow-offset-large: 6px;

    --clr-accent: hsl(159, 100%, 24%); /* Jade 550 */
    --clr-accent-text: hsl(0, 0%, 100%);
    --clr-error: hsl(5, 71%, 45%); /* Red 550 */

    /* Light Theme */
    --surface-00: hsl(40, 19%, 94%); /* Sand 50 */
    --surface-00-invert: hsl(222, 21%, 12%); /* Slate 900 */
    --surface-01: hsl(0, 0%, 100%);
    --surface-01-invert: hsl(220, 22%, 16%); /* Slate 850 */
    --clr-bold: hsl(0, 0%, 0%);
    --clr-bold-invert: hsl(220, 23%, 90%); /* Slate 100 */
    --clr-text: hsl(60, 3%, 6%);
    --clr-text-invert: hsl(216, 19%, 95%); /* Slate 50 */
    --clr-text-subtle: hsl(0, 0%, 42%); /* Grey 550 */
    --clr-text-subtle-invert: hsl(0, 0%, 73%); /* Grey 250 */
    
    & [data-theme=dark]{
        color-scheme: dark;
        
        /* Dark Theme */
        --surface-00: rgb(24, 28, 37); /* Slate 900 */
        --surface-00-invert: hsl(40, 19%, 94%); /* Sand 50 */
        --surface-01: hsl(220, 22%, 16%); /* Slate 850 */
        --surface-01-invert: hsl(0, 0%, 100%);
        --clr-bold: hsl(220, 23%, 90%); /* Slate 100 */
        --clr-bold-invert: hsl(0, 0%, 0%);
        --clr-text: hsl(216, 19%, 95%); /* Slate 50 */
        --clr-text-invert: hsl(60, 3%, 6%);
        --clr-text-subtle: hsl(0, 0%, 73%); /* Grey 250 */
        --clr-text-subtle-invert: hsl(0, 0%, 42%); /* Grey 550 */
    }
}

html, body {
    height: 100%;
}

body {
    background: var(--surface-00);
    color: var(--clr-text);
    display: grid;
    font-family: system-ui, sans-serif;
    grid-template-rows: auto 1fr auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    background: inherit;
}

main {
    padding-block: var(--padding-block-main);

    border: 0;
    border-bottom-color: var(--clr-bold);
    border-bottom-style: solid;
    border-bottom-width: var(--border-width);
    border-top-color: var(--clr-bold);
    border-top-style: solid;
    border-top-width: var(--border-width);
}

/* Column navigation on narrow screens */
nav,
nav ul {
    flex-direction: column;

    @media (width > 576px) {
        flex-direction: row;
    }
}

p {
    overflow-wrap: break-word;
    max-width: 72ch;

    &.subtle {
        color: var(--clr-text-subtle);
    }
}

ul {
    list-style: none;
    padding-inline-start: 0;
}

.grid {
    display: grid;
    gap: var(--gap-base);
    grid-template-columns: 1fr;

    @media (min-width: 768px) {
        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
    }
}

.wrapper {
    --max-width: 60rem;
    margin-inline: auto;
    width: min(100% - 2rem, var(--max-width));
}

.ndw-button {
    --_shadow-offset: var(--shadow-offset);
    --padding-block: 0.5rem;
    --padding-inline: 1rem;

    align-self: flex-start;
    background: var(--surface-01);
    border-color: var(--clr-bold);
    border-radius: var(--border-radius);
    border-style: solid;
    border-width: var(--border-width);
    box-shadow: var(--_shadow-offset) var(--_shadow-offset) 0 var(--clr-bold);
    cursor: pointer;
    display: inline-block;
    padding-block: var(--padding-block);
    padding-inline: var(--padding-inline);

    &:hover {
        text-decoration: underline;
    }
    
    &:not(.static) {
        --_shadow-offset: var(--shadow-offset-large);
        transform: translate(0, 0);
        transition: transform 0.08s ease, box-shadow 0.08s ease;

        &:hover {
            --hover-size: 2px;
            --shadow-offset-hover: calc(var(--_shadow-offset) - var(--hover-size));
            box-shadow: var(--shadow-offset-hover) var(--shadow-offset-hover) 0 var(--clr-bold);
            text-decoration: none;
            transform: translate(var(--hover-size), var(--hover-size));
        }
    }

    &.primary {
        background: var(--clr-accent);
        color: var(--clr-accent-text);
    }

    &.large {
        --padding-block: 0.75rem;
        --padding-inline: 1.5rem;
    }
}

.ndw-card {
    background: var(--surface-01);
    border-color: var(--clr-bold);
    border-radius: var(--border-radius);
    border-style: solid;
    border-width: var(--border-width);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--clr-bold);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: 1.5rem;

    & header {
        font-size: 1.25rem;
        font-weight: 700;

        & p {
            font-size: 1rem;
            font-weight: 400;
        }
    }
}

.ndw-chip {
    border-color: var(--clr-bold);
    border-radius: 999px;
    border-style: solid;
    border-width: var(--border-width);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--clr-bold);
    font-size: 1rem;
    font-weight: 500;
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
    align-self: flex-start;
    text-align: center;
    text-wrap: balance;

    &+h1 {
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 900;
        line-height: 1.25;
        letter-spacing: 0.1ch;
        text-wrap: balance;
    }

    &#theme {
        display: flex;
        align-items: center;
        gap: var(--gap-sm);
        transform: translateY(var(--shadow-offset));

        & span {
            cursor: pointer;
            padding: 0.25rem;

            & svg {
                fill: var(--clr-text);
            }
        }

        & span.active,
        & span:hover {
            aspect-ratio: 1;
            background: var(--clr-bold);
            border-radius: 999px;
            height: 100%;

            & svg {
                fill: var(--clr-text-invert);
            }
        }
    }
}

.ndw-form {
    display: grid;
    gap: var(--gap-lg);
    grid-template-columns: repeat(2, 1fr);

    & .error-message {
        color: var(--clr-error);
    }

    & .error-message:empty,
    & .success-message:empty {
        display: none;
    }

    & fieldset,
    & .fieldset {
        border: 0;
        display: flex;
        flex-direction: column;
        gap: var(--gap-sm);
        padding: 0;
    }

    & > fieldset {
        @media (width <= 576px) {
            grid-column: 1 / -1;
        }
    }

    & > .wide {
        grid-column: 1 / -1;
    }

    & input:user-invalid,
    & textarea:user-invalid {
        border-color: var(--clr-error);
    }

    & input,
    & textarea {
        background: var(--surface-01);
        border-color: var(--clr-bold);
        border-radius: var(--border-radius);
        border-style: solid;
        border-width: var(--border-width);
        box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--clr-bold);
        display: inline-block;
        padding: 0.75rem;

        &::placeholder {
            color: var(--clr-text);
        }
    }

    & textarea {
        min-height: 3lh;
        resize: vertical;
    }
    
    & input[type=submit] {
        width: 100%;

        &[disabled] {
            cursor: not-allowed;
            filter: grayscale();
        }
    }

    label:has(+ :not(:required))::after {
        content: ' (optional)';
        font-size: 0.85rem;
    }
}

.ndw-home-cta-buttons {
    display: flex;
    gap: var(--gap-base);
}

.ndw-section {
    margin-block-start: 6rem;
    display: flex;
    gap: var(--gap-base);
    flex-direction: column;

    &:first-child {
        margin-block-start: 4rem;
    }

}

.ndw-site-footer {
    padding-block: var(--padding-block-main);

    background: var(--surface-00-invert);
    color: var(--clr-text-subtle-invert);
}

.ndw-site-header {
    padding-block: var(--padding-block-main);
    
    & nav {
        align-items: center;
        display: flex;
        gap: var(--gap-base);
        justify-content: space-between;
    }
    
    & .links {
        align-items: center;
        display: flex;
        gap: var(--gap-base);
    }
}

.site-logo-text {
    color: var(--clr-accent);
}