@import "./no-js.css";

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

:root {
    overflow-y: scroll;
    color-scheme: light dark;
    --animation-timing: 250ms;
    --border-radius: 1.25rem;
    --bold: 600;

    /* light mode (default) */
    --body-bg: #ccc;
    --body-fg: #000;
    --el-bg: #fff;
    --link-blue: blue;
}

.darkmode {
    --body-bg: #333;
    --body-fg: #fff;
    --el-bg: #000;
    --link-blue: aqua;
}

:focus-visible {
    outline: 0.125rem solid orange;
    outline-offset: 0.1875rem;
}

body {
    font-size: clamp(1.156rem, 1.1182rem + 0.1757vw, 1.25rem);
    font-family: system-ui, sans-serif;
    background-color: var(--body-bg);
    color: var(--body-fg);
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    line-height: 1.5;
    position: relative;
}

.h1 {
    font-size: clamp(1.75rem, 1.4486rem + 1.4019vw, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-inline: auto;
    align-items: center;
    justify-content: center;

    & svg {
        width: 3.125rem;
        height: 3.125rem;
        fill: var(--body-fg);
        background-color: var(--body-bg);
        border-radius: 0.5rem;
        align-self: flex-end;
    }

    & span {
        text-align: center;
    }
}

abbr {
    text-underline-offset: 0.25em;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}

p {
    /* max-width: 30ch; */
    text-wrap: pretty;
}

.h1,
h1,
h2,
h3 {
    text-wrap: balance;
}

.h1,
h1,
h2,
h3 {
    font-weight: normal;
}

h1,
h2,
h3 {
    text-align: center;
}

h1,
h2 {
    font-size: clamp(1.25rem, 1.1495rem + 0.4673vw, 1.5rem);
}

h3 {
    font-size: clamp(1.156rem, 1.1182rem + 0.1757vw, 1.25rem);
}

button,
input {
    font-size: inherit;
    font-family: inherit;
}

input {
    background-color: inherit;
    color: inherit;
    border-color: inherit;
}

a {
    color: var(--body-fg);
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

b,
strong {
    font-weight: var(--bold);
}

pre {
    overflow-x: auto;
    position: relative;
    top: -1rem;
}
code {
    font-family: "Courier New", Courier, monospace;
    /* font-weight: var(--bold); */
}

.external-link {
    color: var(--link-blue);
    text-underline-offset: 0.5em;

    &::after {
        color: var(--link-blue);
        content: " \27F6";
    }
}

.container {
    /* Locally-scoped CSS variables */
    --_content-max-width: 50rem;
    --_content-space-outside: 2rem;

    width: min(var(--_content-max-width), 100% - var(--_content-space-outside) * 2);
    margin-inline: auto;
}

.flow > * + * {
    margin-block-start: 1em;
    /* em NOT rem & margin-block-start NOT margin-block-end */
}

.element {
    padding: 1rem;
}

.header,
.footer,
.element {
    background-color: var(--el-bg);
}

.footer {
    padding: 3rem 2rem;
    text-align: center;
}

.header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block: 3rem;
    margin-block-start: 0;
}

.main {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding-block: 2rem;
}

.primary-navigation {
    position: relative;
    & nav {
        width: fit-content;
        margin-inline: auto;

        @media screen and (width <= 31.25rem) {
            &.menu-hidden,
            &.menu-visible {
                margin-inline: auto;
                display: grid;
                grid-template-rows: 0fr;
                transition: grid-template-rows var(--animation-timing) ease-in;

                & > ul {
                    overflow: hidden;
                }
            }

            &.menu-visible {
                grid-template-rows: 1fr;
                width: 100%;

                & > ul {
                    padding-block-start: 3rem;
                }
            }
        }
    }

    & ul {
        list-style: "";
        display: flex;
        gap: 1.25rem;
        align-items: baseline;
        width: fit-content;
        margin-inline: auto;
        padding-inline-start: 0;

        @media screen and (width <= 31.25rem) {
            flex-direction: column;
            gap: 0;
            z-index: 300;
        }
    }
    & a {
        color: var(--link-blue);
        border-block-end: 0.3125rem solid transparent;
        padding-block-end: 0.3125rem;
        margin-block-end: 0.625rem;
        display: block;
        cursor: pointer;
        text-decoration: none;

        @media screen and (width <= 31.25rem) {
            padding: 0;
            margin: 0;
            border: 0;
        }

        &[aria-current="page"],
        &:hover {
            border-block-end: 0.3125rem solid var(--body-bg);
            color: var(--body-fg);

            @media screen and (width <= 31.25rem) {
                border: 0;
            }
        }

        &[aria-current="page"] {
            pointer-events: none;

            @media screen and (width <= 31.25rem) {
                font-weight: var(--bold);
            }
        }
    }

    @media screen and (width <= 31.25rem) {
        max-width: 100%;
        margin: 0;
    }
}

.hamburger-button-wrapper {
    display: none;
}

@media screen and (width <= 31.25rem) {
    .hamburger-button-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        margin-inline: auto;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;

        & p {
            font-size: 1rem;
            font-weight: normal;
            margin-block-start: -0.3125rem;
            margin-inline-start: auto;
        }
    }

    .hamburger-button {
        cursor: pointer;
        width: 3.125rem;
        background-color: transparent;
        border: 0;

        & .line {
            width: 80%;
            height: 0.625rem;
            fill: var(--body-fg);
            transition:
                y var(--animation-timing) ease-in var(--animation-timing),
                rotate var(--animation-timing) ease-in,
                opacity 0ms var(--animation-timing);
            transform-origin: center;
        }

        &[aria-expanded="true"] .line {
            transition:
                y var(--animation-timing) ease-in,
                rotate var(--animation-timing) ease-in var(--animation-timing),
                opacity 0ms var(--animation-timing);
        }
        &[aria-expanded="true"] :is(.top, .bottom) {
            y: 2.9375rem;
        }
        &[aria-expanded="true"] .top {
            rotate: 45deg;
        }
        &[aria-expanded="true"] .bottom {
            rotate: -45deg;
        }
        &[aria-expanded="true"] .middle {
            opacity: 0;
        }
    }
}

/* Accordion */
.accordion {
    padding: 0.5rem;
    background-color: var(--el-bg);
    border-radius: var(--border-radius);

    & h2 {
        display: inline;
        font-size: clamp(1.156rem, 1.1182rem + 0.1757vw, 1.25rem);
        font-weight: var(--bold);
        line-height: 1.2;
    }

    & h3 {
        text-align: left;
        font-weight: var(--bold);
    }

    & details {
        overflow: clip;
        background-color: var(--el-bg);
        border-block-end: 0.125rem solid var(--body-bg);

        &:last-child {
            border-block-end: 0;
        }
    }

    & summary {
        color: var(--link-blue);
        cursor: pointer;

        &:hover {
            opacity: 0.7;
        }

        &:focus-visible {
            outline-offset: -0.2rem;
        }
    }

    & .summary-content {
        padding: 0 1rem 1rem;
    }

    ul,
    ol {
        padding-inline-start: 1.25rem;
    }

    & .nested {
        padding-inline: 1rem;

        & h3 {
            display: inline;
            font-size: clamp(1.156rem, 1.1182rem + 0.1757vw, 1.25rem);
            font-weight: var(--bold);
            line-height: 1.2;
        }
        & h4 {
            font-size: clamp(1.156rem, 1.1182rem + 0.1757vw, 1.25rem);
        }
    }
}

@media (width > 37.5rem) and (prefers-reduced-motion: no-preference) {
    @supports (interpolate-size: allow-keywords) {
        :root {
            interpolate-size: allow-keywords;
        }

        details {
            transition: height 0.5s ease;
            height: 4rem;

            &[open] {
                height: auto;
                overflow: clip;
            }
        }
    }
}

/* Theme */
.theme-toggler {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.3125rem 0.625rem;
    margin-block-start: 0;
    border: 0;

    & button {
        font-size: clamp(0.875rem, 0.8248rem + 0.2336vw, 1rem);
        font-family: inherit;
        background-color: var(--link-blue);

        width: 1.5625rem;
        height: 0.8125rem;
        border: 0;
        border-radius: var(--border-radius);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0.125rem;

        & span {
            height: 0.8125rem;
            width: 0.8125rem;
            background-color: white;
            border-radius: 50%;
        }
    }

    & p {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--body-fg);
        &.light {
            opacity: 1;
        }

        &.dark {
            opacity: 0.5;
        }
    }
}

.darkmode {
    & .theme-toggler button {
        justify-content: flex-end;
    }

    & p {
        &.light {
            opacity: 0.5;
        }

        &.dark {
            opacity: 1;
        }
    }
}
/* End theme */

/* Loader */
.loader {
    position: fixed;
    z-index: 500;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--body-bg);
    color: var(--body-fg);
}

.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

.loader::after {
    content: "Loading...";
    font-size: 3.125rem;
}

@media (prefers-reduced-motion: no-preference) {
    .loader {
        transition:
            opacity 0.75s,
            visibility 0.75s;
    }

    .loader::after {
        content: "";
        font-size: 0rem;
        width: 6.25rem;
        height: 6.25rem;
        border: 1.25rem solid var(--body-fg);
        border-top-color: var(--el-bg);
        border-radius: 50%;
        animation: loading 0.75s ease infinite;
    }
    @keyframes loading {
        from {
            transform: rotate(0turn);
        }
        to {
            transform: rotate(1turn);
        }
    }
}

/** Skip link */
.skip-link {
    background-color: var(--body-bg);
    color: var(--body-fg);
    font-weight: 600;
    padding: 0.3125rem 0.625rem;
    margin-block-start: 0;
    margin-inline-end: 0.625rem;
}
.element-invisible {
    clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
    height: 0.0625rem;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    &.element-focusable:active,
    &.element-focusable:focus {
        clip: auto;
        height: auto;
        overflow: visible;
    }
}

.visually-hidden {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip-path: inset(0);
    border: 0;
}