/* Shared header, navigation and footer used by static and PHP pages. */

.site-nav {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(8, 8, 8, .92);
    backdrop-filter: blur(16px);
}

.site-nav.nav--scrolled {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .32);
}

.site-nav .site-nav__inner {
    width: min(100% - 40px, 1200px);
    max-width: none;
    min-height: 64px;
    height: auto;
    margin-inline: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: initial;
    gap: 28px;
}

.site-nav .site-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: #f3f3f3;
    font: 700 26px/1 'Cormorant Garamond', Georgia, serif;
    text-decoration: none;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.site-nav .site-logo b,
.site-nav .site-logo__mark {
    color: #c9c9c9;
}

.site-nav .site-logo__mark {
    font: 20px/1 Inter, system-ui, sans-serif;
}

.site-nav .tools {
    position: relative;
    flex: 0 0 auto;
}

.site-nav .tools__btn {
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: #f3f3f3;
    background: #151515;
    font: 600 14px/1.2 Inter, system-ui, sans-serif;
}

.site-nav .tools__menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + 10px);
    left: 0;
    width: min(290px, calc(100vw - 32px));
    min-width: 0;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    background: #1b1b1b;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
}

.site-nav .tools__menu[hidden] {
    display: none;
}

.site-nav .tools__item {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border-radius: 12px;
    color: #f3f3f3;
    background: rgba(255, 255, 255, .08);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.site-nav .tools__item small,
.site-nav .tools__soon {
    margin-top: 2px;
    color: #a4a4a4;
    font-size: 12px;
    font-weight: 400;
}

.site-nav .tools__soon {
    padding: 10px 14px 6px;
}

.site-nav .site-nav__links {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.site-nav .site-nav__links > a:not(.site-button) {
    padding: 8px 12px;
    color: #a4a4a4;
    font: 500 14px/1.4 Inter, system-ui, sans-serif;
    text-decoration: none;
}

.site-nav .site-nav__links > a:not(.site-button):hover {
    color: #fff;
}

.site-nav [data-auth-menu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-nav [data-auth] {
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid #f3f3f3;
    border-radius: 999px;
    color: #080808;
    background: #f3f3f3;
    font: 600 14px/1.2 Inter, system-ui, sans-serif;
    white-space: nowrap;
}

.site-nav [data-auth="login"] {
    border-color: rgba(255, 255, 255, .2);
    color: #f3f3f3;
    background: transparent;
}

html[data-theme="light"] .site-nav [data-auth="login"] {
    border-color: rgba(0, 0, 0, .45);
    color: #171717;
    background: #fff;
}

html[data-theme="light"] .site-nav [data-auth="login"]:hover,
html[data-theme="light"] .site-nav [data-auth="login"]:focus-visible {
    border-color: #171717;
    color: #171717;
    background: #f0f0ee;
}

.site-nav .theme-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: #f3f3f3;
    background: transparent;
}

.site-nav .profile-menu summary {
    min-height: 40px;
}

.site-nav .burger {
    display: none;
    margin-left: auto;
}

.site-nav .subnav {
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .025);
}

.site-nav .subnav__inner {
    width: min(100% - 40px, 1200px);
    max-width: none;
    min-height: 44px;
    height: auto;
    margin-inline: auto;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.site-nav .subnav__inner::-webkit-scrollbar {
    display: none;
}

.site-nav .subnav a {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 999px;
    color: #a4a4a4;
    font: 500 14px/1.4 Inter, system-ui, sans-serif;
    text-decoration: none;
}

.site-nav .subnav a:hover,
.site-nav .subnav a.is-active,
.site-nav .subnav a[aria-current="page"] {
    color: #f3f3f3;
    background: rgba(255, 255, 255, .1);
}

.site-main.site-content {
    width: 100%;
}

.site-content__inner {
    width: min(100% - 40px, 1200px);
    margin-inline: auto;
}

.site-content__inner--wide {
    width: 100%;
    max-width: none;
}

.site-footer {
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #a4a4a4;
    background: #080808;
}

.site-footer .footer__inner {
    width: min(100% - 40px, 1200px);
    max-width: none;
    min-height: 88px;
    margin-inline: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.site-footer .site-logo {
    color: #f3f3f3;
}

.site-footer .site-logo--footer {
    font-size: 24px;
}

.site-footer .footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.site-footer .footer__links a {
    color: #a4a4a4;
    font-size: 14px;
    text-decoration: none;
}

.site-footer .footer__links a:hover {
    color: #f3f3f3;
}

.site-footer .footer__copy {
    width: 100%;
    margin: 0;
    color: #a4a4a4;
    font-size: 13px;
    text-align: center;
}

html[data-theme="light"] .site-nav {
    border-color: rgba(0, 0, 0, .1);
    background: rgba(250, 250, 248, .94);
}

html[data-theme="light"] .site-nav .site-logo,
html[data-theme="light"] .site-nav .site-nav__links > a:not(.site-button),
html[data-theme="light"] .site-nav .theme-toggle {
    color: #222;
}

html[data-theme="light"] .site-nav .tools__btn {
    border-color: rgba(0, 0, 0, .17);
    color: #171717;
    background: #fff;
}

html[data-theme="light"] .site-nav .tools__menu {
    border-color: rgba(0, 0, 0, .16);
    background: #fff;
}

html[data-theme="light"] .site-nav .tools__item {
    color: #171717;
    background: rgba(0, 0, 0, .06);
}

html[data-theme="light"] .site-nav .tools__item small,
html[data-theme="light"] .site-nav .tools__soon {
    color: #626262;
}

html[data-theme="light"] .site-nav .subnav {
    border-color: rgba(0, 0, 0, .1);
    background: #f0f0ee;
}

html[data-theme="light"] .site-nav .subnav a {
    color: #626262;
}

html[data-theme="light"] .site-nav .subnav a:hover,
html[data-theme="light"] .site-nav .subnav a.is-active,
html[data-theme="light"] .site-nav .subnav a[aria-current="page"] {
    color: #171717;
    background: rgba(0, 0, 0, .08);
}

html[data-theme="light"] .site-footer {
    border-color: rgba(0, 0, 0, .1);
    color: #171717;
    background: #f0f0ee;
}

html[data-theme="light"] .site-footer .site-logo {
    color: #171717;
}

@media (max-width: 768px) {
    .site-nav .site-nav__inner {
        min-height: 56px;
    }

    .site-nav .burger {
        display: flex;
        z-index: 110;
    }

    .site-nav .site-nav__links {
        position: fixed;
        z-index: 100;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(280px, calc(100vw - 24px));
        max-width: 100%;
        flex: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 20px;
        padding: 80px 32px 32px;
        overflow-y: auto;
        border-left: 1px solid rgba(255, 255, 255, .08);
        background: #101010;
        transform: translateX(100%);
        transition: transform .3s ease;
    }

    .site-nav .site-nav__links--open {
        transform: translateX(0);
    }

    .site-nav .site-nav__links > a:not(.site-button) {
        padding: 6px 0;
    }

    .site-nav .site-nav__links .site-button,
    .site-nav [data-auth-menu],
    .site-nav [data-auth] {
        width: 100%;
    }

    .site-nav [data-auth-menu] {
        flex-direction: column;
        align-items: stretch;
    }

    .site-nav .theme-toggle {
        width: 100%;
        height: 42px;
        flex: 0 0 42px;
        border-radius: 12px;
    }

    .site-nav .profile-menu__panel {
        position: static;
        margin-top: 8px;
    }

    .site-nav .footer__inner {
        flex-direction: column;
        text-align: center;
    }

    .site-nav .footer__links {
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .site-nav .site-nav__inner,
    .site-nav .subnav__inner,
    .site-footer .footer__inner {
        width: min(100% - 32px, 1200px);
    }

    .site-nav .site-logo {
        font-size: 24px;
    }

    .site-nav .tools__btn {
        max-width: min(230px, calc(100vw - 150px));
        padding-inline: 12px;
        font-size: 12px;
    }

    .site-footer .footer__links {
        justify-content: center;
        gap: 12px 18px;
    }
}
.demo__download {
  margin-top: 12px;
}

.demo__download[hidden] {
  display: none;
}