/* Global CSS variables */

:root {
    /* Scale down the entire site because picocss uses huge size. */
    --pico-font-size: 1.1rem !important;
    /* Make the nav not soo tall. */
    --pico-nav-element-spacing-vertical: 0.75rem;

    /*--pico-nav-element-spacing-horizontal: 0.25rem; */
    --radium-margin-top-main: 3rem;
}

/* Orange color for light color scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]),
:host:not([data-theme="dark"]) {
    --radium-header-background-color: #f0f2f6;
    --radium-footer-background-color: var(--radium-header-background-color);
    --pico-header-background: rgba(255, 255, 255, 0.8);
    --pico-header-border-color: transparent;
}

/* Orange color for dark color scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]),
    :host:not([data-theme]) {
        --radium-header-background-color: var(--pico-card-background-color);
        --radium-footer-background-color: var(--pico-card-background-color);
        --pico-header-background: rgba(19, 22.5, 30.5, 0.9);
        --pico-header-border-color: rgba(32, 38, 50, 0.9);
    }
}

/* Orange color for dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
    --radium-header-background-color: var(--pico-card-background-color);
    --radium-footer-background-color: var(--pico-card-background-color);
    --pico-header-background: rgba(19, 22.5, 30.5, 0.9);
    --pico-header-border-color: rgba(32, 38, 50, 0.9);
}

summary[role="button"].outline {
    border-color: transparent;
    background-color: transparent;
    color: var(--pico-contrast);
    text-decoration: none;
    outline: none;
    box-shadow: none;
}

summary[role="button"].outline:is([aria-current], :hover, :active) {
    border-color: transparent !important;
    background-color: transparent;
    color: var(--pico-contrast-hover);
    text-decoration: underline;
    outline: none;
    box-shadow: none;
}

body > header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    /*height: 65px;*/
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: var(--radium-header-background-color);
}

body > header.is-fixed-above-lg {
    z-index: 9999;
    /*position: sticky;*/
    position: fixed;
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    background-color: var(--pico-header-background);
    transition:
        border-top-color 0.4s ease-in-out,
        box-shadow 0.4s ease-in-out;
}
/*
body > header.is-fixed-above-lg.is-fixed {
    border-bottom-color: var(--pico-header-border-color);
    box-shadow: var(--pico-card-box-shadow);
}
*/
body > header.is-fixed-above-lg.is-fixed {
    border-bottom: 1px solid var(--pico-muted-border-color);
    box-shadow: var(--pico-box-shadow);
}

body > header nav .separator:before {
    display: block;
    height: 1.125rem;
    margin-inline: var(--pico-nav-element-spacing-horizontal);
    border-left: var(--pico-border-width) solid
        var(--pico-form-element-border-color);
    content: "";
}

details.dropdown.no-arrow summary::-webkit-details-marker,
details.dropdown.no-arrow summary::marker,
details.dropdown.no-arrow summary::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

details.dropdown.no-arrow summary {
    padding-right: 0 !important;
    /* remove extra space reserved for arrow */
    justify-content: flex-start !important;
    /* align text left */
}

/* Push down the main so it isn't under the fixed header. */
main {
    margin-top: var(--radium-margin-top-main);
}

summary.outline.no-after::after {
    display: none;
}

.dropdown-menu {
    left: -166px !important;
    gap: 4em;
}

.main-menu {
    gap: 4em;
    min-width: 210px;
    padding: 16px;
}

.main-menu details summary {
    /* font-weight: 500;*/
}

.main-menu details summary a {
    color: var(--pico-dropdown-color);
    text-decoration: none;
}

.main-menu details summary {
    margin: calc(var(--pico-form-element-spacing-vertical) * -0.5)
        calc(var(--pico-form-element-spacing-horizontal) * -1);
    padding: calc(var(--pico-form-element-spacing-vertical) * 0.75)
        var(--pico-form-element-spacing-horizontal);
    overflow: hidden;
    border-radius: 0;
    color: var(--pico-dropdown-color);
    text-overflow: ellipsis;
}

.main-menu details summary:focus,
.main-menu details summary:active,
.main-menu details summary:focus-visible,
.main-menu details summary[aria-current]:not([aria-current="false"]) {
    background-color: var(--pico-dropdown-background-color);
    color: var(--pico-color);
}

.main-menu details summary:hover,
.main-menu details summary[aria-current]:not([aria-current="false"]):hover {
    background-color: var(--pico-dropdown-hover-background-color);
}

.main-menu details[open] summary {
    color: var(--pico-color) !important;
}

.main-menu details summary + ul li a:hover {
    background-color: var(--pico-dropdown-hover-background-color);
}

.main-menu details summary + ul li a:focus,
.main-menu details summary + ul li a:active,
.main-menu details summary + ul li a:focus-visible,
.main-menu details summary + ul li a[aria-current]:not([aria-current="false"]) {
    background-color: var(--pico-dropdown-background-color);
}

.main-menu
    details
    summary
    + ul
    li
    a[aria-current]:not([aria-current="false"]):hover {
    background-color: var(--pico-dropdown-hover-background-color);
}
/*
.main-menu details + ul li a:focus,
.main-menu details + ul li a:active,
.main-menu details + ul li a:focus-visible,
.main-menu details + ul li a[aria-current]:not([aria-current="false"]) {
    color: var(--pico-primary-hover);
    background-color: var(--pico-dropdown-background-color);
}*/

.main-menu details > ul li a:focus,
.main-menu details > ul li a:active,
.main-menu details > ul li a:focus-visible,
.main-menu details > ul li a[aria-current]:not([aria-current="false"]) {
    color: var(--pico-primary-hover);
    text-decoration: none;
    font-weight: 500;
}

.main-menu details summary a:focus,
.main-menu details summary a:active,
.main-menu details summary a:focus-visible,
.main-menu details summary a[aria-current]:not([aria-current="false"]) {
    color: var(--pico-primary-hover);
    text-decoration: none;
    font-weight: 500;
}

/* Default hamburger icon */
.dropdown-menu-button svg path {
    d: path(
        "M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"
    );
    transition: d 2.3s ease;
}

/* X icon when details is open */
.dropdown-menu-button[open] summary svg path {
    d: path(
        "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 178.7 150.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L178.7 224 105.4 297.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L224 269.3 297.4 342.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L269.3 224 342.6 150.6z"
    ) !important;
    transition: d 2.3s ease;
}

/* Pages */

.page {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Footer */

.reverse-collapse {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
    .reverse-collapse {
        grid-template-columns: 1fr;
    }

    .reverse-collapse > :first-child {
        order: 2;
    }

    .reverse-collapse > :nth-child(2) {
        order: 1;
    }
}

/* Footer */

body > footer {
    padding-left: 16px;
    padding-right: 16px;
    background-color: var(--radium-footer-background-color);
}

/* Global */
.radium-text-center {
    text-align: center;
}

.radium-text-gradient {
    background: linear-gradient(to right, #0afde0, #0979ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}