/* Floating visual-theme control. Language selection lives in Material's header. */
.site-control {
    position: fixed;
    right: 20px;
    z-index: 1000;
}

.theme-switcher { top: 72px; }

.site-control .site-control__select {
    padding: 10px 36px 10px 14px;
    border: none;
    border-radius: 8px;
    background-color: white;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    transition: all 0.2s;
}

.site-control .site-control__select:hover {
    background-color: #f5f5f5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.site-control .site-control__select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .site-control .site-control__select,
[data-site-theme="mars"] .site-control .site-control__select,
[data-site-theme="blueprint"] .site-control .site-control__select,
[data-site-theme="terminal"] .site-control .site-control__select,
[data-site-theme="spacex"] .site-control .site-control__select {
    background-color: #2d2d2d;
    color: #e0e0e0;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

[data-md-color-scheme="slate"] .site-control .site-control__select:hover {
    background-color: #3d3d3d;
}

/* Stabilize Material's header language menu across visual themes. Without an
   explicit hidden state, some theme/browser combinations paint all three
   overflowing links even while the popover has max-height: 0. */
.md-header__option > .md-select {
    position: relative;
}

.md-header__option > .md-select > .md-header__button {
    display: inline-flex;
}

.md-header__option > .md-select > .md-select__inner {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.md-header__option > .md-select:focus-within > .md-select__inner,
.md-header__option > .md-select:hover > .md-select__inner {
    max-height: 12rem;
    overflow: auto;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.md-header__option .md-select__item,
.md-header__option .md-select__link {
    display: block;
    background-image: none;
}

[data-site-theme="mars"] .md-header__option .md-select__inner,
[data-site-theme="blueprint"] .md-header__option .md-select__inner,
[data-site-theme="terminal"] .md-header__option .md-select__inner,
[data-site-theme="spacex"] .md-header__option .md-select__inner {
    background: var(--wiki-card);
    color: var(--wiki-ink);
}

[data-site-theme="mars"] .md-header__option .md-select__link,
[data-site-theme="blueprint"] .md-header__option .md-select__link,
[data-site-theme="terminal"] .md-header__option .md-select__link,
[data-site-theme="spacex"] .md-header__option .md-select__link {
    color: var(--wiki-ink);
}

[data-site-theme="mars"] .md-header__option .md-select__link:hover,
[data-site-theme="blueprint"] .md-header__option .md-select__link:hover,
[data-site-theme="terminal"] .md-header__option .md-select__link:hover,
[data-site-theme="spacex"] .md-header__option .md-select__link:hover {
    background: color-mix(in srgb, var(--wiki-accent) 18%, var(--wiki-card));
    color: var(--wiki-accent);
}

/* Mobile adjustments */
@media screen and (max-width: 767px) {
    .site-control {
        top: auto;
        right: 10px;
    }

    .theme-switcher { bottom: 76px; }

    .site-control .site-control__select {
        padding: 8px 32px 8px 12px;
        font-size: 13px;
    }
}