/* =============================================================================
   Uberspace documentation design
   Shared documentation design: theme, typography, controls and layout
   ============================================================================= */

:root {
    /* Core Colors */
    --color-black: #06001e;
    --color-white: #fff;
    --color-dark: #212134;
    --color-light: #f4f1ff;

    /* Grayscale */
    --color-gray-0: #f9f7ff;
    --color-gray-1: #f4f1ff;
    --color-gray-2: #e0dce8;
    --color-gray-3: #c8c2d9;
    --color-gray-4: #9f9caf;
    --color-gray-5: #7e7a91;
    --color-gray-6: #4d4c68;
    --color-gray-7: #403a60;
    --color-gray-8: #383651;
    --color-gray-9: #2b2b3a;

    /* Accents */
    --color-blue: #28c2ff;
    --color-yellow: #fffc9c;
    --color-green: #47d7ac;
    --color-orange: #ffca3a;

}

/* =============================================================================
   Light Theme
   ============================================================================= */

[data-md-color-scheme$="-light"] {
    --site-terminal-dot: var(--color-gray-4);
    --site-terminal-background: var(--color-gray-2);
    --site-terminal-border: var(--color-gray-3);
    --site-terminal-text: var(--color-gray-6);
    --site-link-color: var(--site-accent-strong);
    --site-code-mark: var(--color-gray-2);
    --site-code-comment: var(--color-gray-6);
    --site-code-keyword: var(--site-accent-strong);
    --site-code-string: var(--site-accent-strong);
    --site-code-number: #a80046;
    color-scheme: light;
    --md-default-fg-color: var(--color-gray-8);
    --md-default-fg-color--light: var(--site-accent-strong);
    --md-primary-fg-color: var(--color-black);
    --md-default-bg-color: var(--color-white);
    --md-admonition-bg-color: var(--color-gray-0);
    --md-typeset-a-color: var(--site-link-color);
    --md-typeset-mark-color: var(--site-accent-soft);
    --md-code-fg-color: var(--color-gray-9);
    --md-code-bg-color: var(--color-gray-1);
}

/* =============================================================================
   Dark Theme
   ============================================================================= */

[data-md-color-scheme$="-dark"] {
    --site-terminal-dot: var(--color-gray-5);
    --site-terminal-background: var(--color-gray-8);
    --site-terminal-border: var(--color-gray-6);
    --site-terminal-text: var(--color-gray-4);
    --site-link-color: var(--site-accent-soft);
    --site-code-mark: var(--color-gray-8);
    --site-code-comment: var(--color-gray-4);
    --site-code-keyword: var(--site-accent-soft);
    --site-code-string: var(--color-green);
    --site-code-number: var(--color-orange);
    color-scheme: dark;
    --md-default-fg-color: var(--color-light);
    --md-default-fg-color--light: var(--color-gray-3);
    --md-default-fg-color--dark: var(--color-white);
    --md-primary-fg-color: var(--color-black);
    --md-default-bg-color: var(--color-black);
    --md-typeset-a-color: var(--site-accent-soft);
    --md-typeset-mark-color: var(--site-accent-strong);
    --md-admonition-fg-color: var(--color-white);
    --md-admonition-bg-color: var(--color-dark);
    --md-typeset-color: var(--color-light);
    --md-code-fg-color: var(--color-light);
    --md-code-bg-color: var(--color-gray-9);
    --md-typeset-table-color: var(--color-gray-6);
}

[data-md-color-scheme$="-dark"] .md-typeset table:not([class]) {
    background-color: var(--color-dark);
    border: 1px solid var(--color-gray-6);
}

[data-md-color-scheme$="-dark"] .md-typeset table:not([class]) th {
    background-color: var(--color-gray-8);
    color: var(--color-light);
    border-bottom: 1px solid var(--color-gray-6);
}

[data-md-color-scheme$="-dark"] .md-typeset table:not([class]) td {
    border-top: 1px solid var(--color-gray-7);
}

/* Typography and controls. Font files are served locally. */
@font-face {
    font-family: "Uberspace Navigation";
    src: url("../_static/fonts/alternate-gothic-no3-d.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Uberspace Body";
    src: url("../_static/fonts/opensans-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Uberspace Heading";
    src: url("../_static/fonts/montserrat-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Uberspace Heading";
    src: url("../_static/fonts/montserrat-semibold.woff2") format("woff2");
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Uberspace Body";
    src: url("../_static/fonts/opensans-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    --md-text-font: "Uberspace Body";
    --md-code-font: "SF Mono", Monaco, Consolas;
}

[data-md-color-scheme] {
    --md-typeset-color: var(--md-default-fg-color);
    --md-accent-fg-color: var(--site-link-color);
    --md-typeset-a-color: var(--site-link-color);
    --md-default-fg-color--lighter: var(--color-gray-5);
}

[data-md-color-scheme$="-light"] {
    --site-control-border: var(--color-gray-5);
    --site-muted: var(--color-gray-6);
    --site-info: #0369a1;
    --site-success: #08775c;
    --site-warning: #766000;
    --site-danger: #b0004b;
}

[data-md-color-scheme$="-dark"] {
    --site-control-border: var(--color-gray-4);
    --site-muted: var(--color-gray-3);
    --site-info: var(--color-blue);
    --site-success: var(--color-green);
    --site-warning: var(--color-yellow);
    --site-danger: #ff80b4;
}

.md-typeset {
    font-size: 0.8rem;
    line-height: 1.7;
}

.md-typeset :is(h1, h2, h3, h4, h5, h6) {
    font-family: "Uberspace Heading", sans-serif;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
    text-transform: none;
    overflow-wrap: anywhere;
}

.md-typeset h1 { color: var(--site-link-color); font-size: clamp(1.5rem, 3vw, 2rem); }
.md-typeset h2 { font-size: 1.4rem; }
.md-typeset h3 { font-size: 1.1rem; }
.md-typeset :is(h4, h5, h6) { font-size: 0.85rem; font-weight: 600; }

.md-typeset :is(blockquote, small) { color: var(--site-muted); }
.md-typeset blockquote { border-color: var(--site-control-border); }

.md-typeset .md-button {
    border: 1px solid var(--site-link-color);
    border-radius: 0.2rem;
    background: transparent;
    color: var(--site-link-color);
    padding: 0.5em 1em;
    box-shadow: none;
}

.md-typeset .md-button:is(:hover, :focus-visible),
.md-typeset .md-button--primary {
    background: var(--site-accent-strong);
    border-color: var(--site-accent-strong);
    color: var(--color-white);
}

:where(a, button, input, summary, label[tabindex]):focus-visible {
    outline: 2px solid var(--site-link-color);
    outline-offset: 3px;
}

.md-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--site-accent-soft); }

.md-typeset :is(.admonition, details)[class] {
    --site-status: var(--site-info);
    border: 1px solid var(--site-status);
    border-radius: 0.2rem;
    box-shadow: none;
}

.md-typeset :is(.admonition, details):is(.success, .check, .done) { --site-status: var(--site-success); }
.md-typeset :is(.admonition, details):is(.warning, .caution, .attention) { --site-status: var(--site-warning); }
.md-typeset :is(.admonition, details):is(.danger, .failure, .fail, .missing, .error, .bug) { --site-status: var(--site-danger); }

.md-typeset :is(.admonition, details) > :is(.admonition-title, summary) {
    background: color-mix(in srgb, var(--site-status) 10%, transparent);
    color: var(--md-default-fg-color);
}

.md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::before {
    background-color: var(--site-status);
}

.md-typeset details > summary::after { color: var(--site-status); }

.md-typeset :is(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: 110px; }

.md-code__button { color: var(--site-muted); opacity: 1; }
.md-code__button:is(:hover, :focus-visible) { color: var(--site-link-color); }

/* =============================================================================
   Navigation
   ============================================================================= */

[data-md-color-scheme] .md-nav__item :is(.md-nav__link:hover, .md-nav__link--active) {
    color: var(--site-link-color);
    font-weight: bold;
}

/* Syntax colors are defined once per theme above. Keep token specificity
   equal to Material's selectors so its defaults do not override these colors. */
[data-md-color-scheme] .highlight span { color: var(--md-code-fg-color); }
[data-md-color-scheme] .highlight .hll { background-color: var(--site-code-mark); }
[data-md-color-scheme] .highlight :is(.c, .cd, .cm, .c1, .cs) { color: var(--site-code-comment); }
[data-md-color-scheme] .highlight :is(.k, .kd, .kn, .kp, .kr, .kt) { color: var(--site-code-keyword); }
[data-md-color-scheme] .highlight :is(.s, .sb, .sc, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss) { color: var(--site-code-string); }
[data-md-color-scheme] .highlight :is(.m, .mb, .mf, .mh, .mi, .il, .mo) { color: var(--site-code-number); }

/* =============================================================================
   Terminal Styling
   ============================================================================= */

.highlight.language-console,
pre.language-console-remote {
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--color-gray-6);
    margin: 1rem 0;
    overflow: hidden;
}

/* Title bar */
.highlight.language-console::before,
pre.language-console-remote::before {
    display: block;
    height: 32px;
    background: radial-gradient(circle at 18px 16px, var(--site-terminal-dot) 6px, transparent 6px), var(--site-terminal-background);
    border-bottom: 1px solid var(--site-terminal-border);
    color: var(--site-terminal-text);
    font-family: "SF Mono", Monaco, Consolas, monospace;
    font-size: 0.65rem;
    line-height: 32px;
    padding-left: 28px;
}

.highlight.language-console::before {
    content: "localuser@localhost: ~ - Terminal";
}

pre.language-console-remote::before {
    content: "isabell@moondust: ~ - ssh moondust.uberspace.de";
}

/* Code area */
.highlight.language-console code,
pre.language-console-remote code {
    display: block;
    padding: 0.5rem;
    font-family: "SF Mono", Monaco, Consolas, monospace;
    font-size: 0.65rem;
    line-height: 1.6;
}

/* Trailing prompt */
pre.language-console-remote code::after {
    content: "\A[isabell@moondust ~]$ ";
    white-space: pre;
    color: var(--md-code-fg-color);
}

.highlight.language-console pre {
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Custom title support */
.highlight.language-console:has(.filename)::before {
    display: none !important;
}

.highlight.language-console > .filename {
    display: block !important;
    height: 32px !important;
    background: radial-gradient(circle at 18px 16px, var(--site-terminal-dot) 6px, transparent 6px), var(--site-terminal-background) !important;
    border-bottom: 1px solid var(--site-terminal-border) !important;
    border-radius: 0 !important;
    color: var(--site-terminal-text) !important;
    font-family: "SF Mono", Monaco, Consolas, monospace !important;
    font-size: 0.65rem !important;
    font-weight: normal !important;
    line-height: 32px !important;
    padding: 0 0 0 28px !important;
    margin: 0 !important;
    position: relative !important;
}

.highlight.language-console > .filename::before {
    content: "";
    position: absolute;
    top: 4px;
    right: 8px;
    width: 24px;
    height: 24px;
    background-color: var(--site-terminal-text);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b5cf6'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
}

/* =============================================================================
   Branding and tabbed layout
   ============================================================================= */

.md-header__inner {
    position: relative;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 86px;
}

.md-header .md-logo {
    order: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0.2rem;
}

.md-logo img.site-wordmark {
    width: 78px;
    height: 48px;
    object-fit: contain;
}

.md-header img.site-wordmark {
    width: 113.75px;
    height: 70px;
}

.md-header .md-search {
    position: absolute;
    top: calc(50% - 22px);
    left: var(--site-search-left);
    right: var(--site-search-right, 4px);
    width: auto;
    padding: 0;
    z-index: 3;
}

#__search ~ .md-header .md-search__inner {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    transform: none;
    transition: none;
    z-index: 1;
    overflow: visible;
}

#__search ~ .md-header .md-search__overlay {
    position: fixed;
    inset: var(--site-search-overlay-top) 0 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: rgb(0 0 0 / 40%);
    transform: none;
}

#__search ~ .md-header .md-search__form { height: 44px; }
#__search ~ .md-header .md-search__form > .md-search__icon { display: none; }
#__search ~ .md-header .md-search__input,
#__search ~ .md-header .md-search__suggest {
    height: 44px;
    padding-left: 0.6rem;
}

#__search ~ .md-header .md-search__output {
    top: 44px;
    bottom: auto;
    width: 100%;
    height: auto;
}

#__search ~ .md-header .md-search__scrollwrap {
    width: 100%;
    height: auto;
    max-height: var(--site-search-height, 70vh);
}

#__search:checked ~ .md-header .md-logo { visibility: hidden; }

#__search:checked ~ .md-header .md-search__inner {
    animation: site-search-open 180ms ease-out;
}

@keyframes site-search-open {
    from { clip-path: inset(0 100% -100vh 0); }
    to { clip-path: inset(0 0 -100vh 0); }
}

@media (prefers-reduced-motion: reduce) {
    #__search:checked ~ .md-header .md-search__inner { animation: none; }
}

@media screen and (max-width: 37.5em) {
    #__search:checked ~ .md-header .md-tabs__item:not(:has(.site-search-trigger)) {
        display: none;
    }
}

#__search:not(:checked) ~ .md-header .md-search {
    visibility: hidden;
    overflow: hidden;
}

.site-search-trigger {
    position: relative;
    z-index: 4;
    background: transparent;
    color: inherit;
    cursor: pointer;
    justify-content: center;
    min-width: 32px;
}

.site-search-trigger svg {
    width: 20px;
    height: 20px;
}

/* Anchor the mascot to the sticky header beside the content grid.
   Narrow viewports naturally crop it instead of changing its visibility. */
.site-mascot {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: max(0px, calc((100% - 61rem) / 2));
    height: 0;
    pointer-events: none;
}

.site-mascot__image {
    display: block;
    position: absolute;
    top: 0;
    right: 16px;
    width: 264px;
    height: auto;
}

[data-md-color-scheme$="-light"] .site-mascot__image {
    filter: drop-shadow(2px 4px 6px rgb(0 0 0 / 10%));
}

/* Match the typography, spacing and colors of uberspace.de's top menu. */
.md-tabs {
    color: var(--color-gray-4);
}

.md-header .md-tabs {
    flex: 1;
    min-width: 0;
    width: auto;
    margin-right: 0.6rem;
}

.md-header .md-tabs > .md-grid {
    margin: 0;
}

.md-tabs__list {
    align-items: center;
    gap: 32px;
    height: 86px;
    padding-inline: 0.4rem;
    overscroll-behavior-x: contain;
}

.md-tabs__item {
    flex-shrink: 0;
    height: auto;
    padding: 0;
}

.md-tabs__link {
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 11px 0;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: "Uberspace Navigation", "Arial Narrow", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    opacity: 1;
    transition: color 150ms ease;
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link:hover,
.md-tabs__link:focus-visible {
    color: var(--color-white);
}

/* Uberspace footer artwork, typography, spacing, and responsive list layout. */
.site-footer {
    position: relative;
    isolation: isolate;
    background: var(--color-gray-9);
    color: var(--color-gray-4);
    font: 16px / 1.66 "Uberspace Body", sans-serif;
}

.site-footer::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../_static/images/footer/stars.svg") top center;
    transform: rotate(180deg);
    content: "";
    pointer-events: none;
}

.site-footer__inner {
    display: grid;
    align-items: center;
    justify-content: center;
    gap: 32px;
    max-width: 1600px;
    margin-inline: auto;
    padding: 80px 9%;
    text-align: center;
}

.site-footer__brand img {
    display: block;
    width: 120px;
    height: auto;
    margin-inline: auto;
}

.site-footer__slogan {
    margin: 0;
    color: var(--site-accent-soft);
    font: 32px / 1.079 "Uberspace Navigation", "Arial Narrow", sans-serif;
    text-transform: uppercase;
}

.site-footer__slogan span {
    white-space: nowrap;
}

.site-footer-nav {
    display: grid;
    justify-content: center;
    align-items: start;
    gap: 32px;
}

.site-footer-nav__group {
    display: grid;
    grid-template-columns: 24px auto;
    gap: 8px;
    text-align: left;
}

.site-footer-nav__icon {
    width: 24px;
    height: 24px;
    margin-top: -4px;
    background-color: var(--color-gray-9);
}

.site-footer-nav__column {
    margin: 0;
    padding: 0 0 0 8px;
    border-left: 2px solid var(--color-gray-2);
    list-style: none;
}

.site-footer-nav a {
    display: block;
    color: inherit;
}

.site-footer-nav a:hover,
.site-footer-nav a[aria-current="page"] {
    color: var(--color-white);
}

.site-footer-nav a:focus-visible,
.md-typeset a:focus-visible,
.md-header a:focus-visible,
.md-header button:focus-visible,
.md-tabs a:focus-visible {
    outline: 2px solid var(--site-link-color);
    outline-offset: 4px;
}

.md-tabs__item--active > .md-tabs__link {
    border-bottom-color: var(--site-accent-soft);
}

.md-header .md-tabs__list {
    overflow-x: auto;
    scrollbar-width: thin;
}

.md-header .md-tabs__list::-webkit-scrollbar {
    height: 3px;
}

/* Pages without a sidebar use the section tabs instead of an empty drawer. */
.md-sidebar--primary[hidden] {
    display: none;
}

body:has(.md-sidebar--primary[hidden]) .md-header__button[for="__drawer"] {
    display: none;
}

/* Responsive layout. */

@media screen and (max-width: 37.5em) {
    .md-header__inner {
        min-height: 50.5px;
        padding-block: 0;
    }
    .md-header img.site-wordmark {
        width: 52px;
        height: 32px;
    }
    .md-header .md-tabs {
        margin-right: 0;
    }
    .md-tabs__list {
        gap: 6px;
        height: 50.5px;
        padding-inline: 0.2rem;
    }
    .md-tabs__link {
        font-size: 18px;
    }
    .md-header__button:not(.md-logo) {
        margin: 0;
        padding: 0.2rem;
    }
}

@media screen and (max-width: 76.234375em) {
    .md-tabs {
        display: block;
    }
}

@media screen and (min-width: 720px) {
    .site-footer-nav {
        grid-template-columns: repeat(4, max-content);
        gap: 16px;
    }
}

@media screen and (min-width: 1400px) {
    .site-footer__inner {
        grid-template-columns: auto auto auto;
        justify-content: space-between;
    }
}

@media screen and (max-width: 22em) {
    .md-header img.site-wordmark {
        width: 39px;
        height: 24px;
    }
    .md-tabs__list {
        gap: 4px;
    }
    .md-tabs__link {
        font-size: 16px;
    }
}

@media screen and (min-width: 76.25em) {
    .md-nav--primary > .md-nav__title,
    .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
        display: none;
    }
}