/* Shared website roles. The tour editor has a separate layout and stylesheet. */
.site-shell {
    color-scheme: light;
    --site-page: #fafaf8;
    --site-surface: #fff;
    --site-footer: #f0f1ec;
    --site-subtle: #efefea;
    --site-ink: #242627;
    --site-muted: #596057;
    --site-border: #82887f;
    --site-link: #1d6596;
    --site-focus: #1d6596;
    --site-danger: #914735;
    --site-notice: #fcf6f3;
    background: var(--site-page);
    color: var(--site-ink);
}
.site-shell .body-content { background: var(--site-page); }
.site-shell .keob-footer { background: var(--site-footer); color: var(--site-ink); }
.site-shell .keob-footer .container { width: 100%; max-width: 1224px; }
.site-shell .keob-footer a { color: var(--site-link); text-decoration: underline; text-underline-offset: 3px; }
.site-shell .btn-admin-only,
.site-shell .dropdown-content a.btn-admin-only,
.site-shell .btn-admin-only a,
.site-shell .admin-only { color: var(--site-link); }
.site-shell .btn-default { color: var(--site-ink); background: var(--site-surface); border-color: var(--site-border); }
.site-shell .btn-default:hover, .site-shell .btn-default:focus { color: var(--site-ink); background: var(--site-subtle); border-color: var(--site-border); }
.site-shell .btn-primary, .site-shell .btn-primary:hover, .site-shell .btn-primary:focus { color: #fff; background: #1d6596; border-color: #1d6596; }
.site-shell .btn-success, .site-shell .btn-success:hover, .site-shell .btn-success:focus { color: #fff; background: #047857; border-color: #047857; }
.site-shell .btn-warning, .site-shell .btn-warning:hover, .site-shell .btn-warning:focus { color: #fff; background: #b45309; border-color: #b45309; }
.site-shell .btn-danger, .site-shell .btn-danger:hover, .site-shell .btn-danger:focus { color: #fff; background: #b91c1c; border-color: #b91c1c; }
.site-shell .btn-info, .site-shell .btn-info:hover, .site-shell .btn-info:focus { color: #fff; background: #16687f; border-color: #16687f; }
.site-shell .btn { background-image: none; }
.site-shell :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--site-focus); outline-offset: 3px; }
.site-shell .site-navbar :is(a, button, summary):focus-visible { outline-color: #f5d65c; }
.site-shell :is(.site-user-panel, .site-language-dialog, .gallery-options-menu, .modal-content) { background: var(--site-surface); color: var(--site-ink); border-color: var(--site-border); }
.site-shell .form-control { background: var(--site-surface); color: var(--site-ink); border-color: var(--site-border); }
.site-shell input::placeholder, .site-shell textarea::placeholder { color: var(--site-muted); opacity: 1; }
.site-shell .text-muted { color: var(--site-muted); }
.site-shell .table > :is(thead, tbody, tfoot) > tr > :is(th, td),
.site-shell :is(.modal-header, .modal-footer, .panel, .panel-heading) { border-color: var(--site-border); }
.site-shell .table-striped > tbody > tr:nth-of-type(odd) { background: var(--site-subtle); }
.site-shell .table-hover > tbody > tr:hover { background: var(--site-subtle); }
.site-shell .panel, .site-shell .well { background: var(--site-surface); color: var(--site-ink); }
.site-shell .panel-default > .panel-heading { background: var(--site-subtle); color: var(--site-ink); }
.site-shell.site-legacy .body-content a:not(.btn) { color: var(--site-link); }
.site-shell .app-card { background: var(--site-surface); color: var(--site-ink); border-color: var(--site-border); }
.site-shell .app-card:hover { transform: none; }
.site-shell .dropdown-content { background: var(--site-surface); }
.site-shell .dropdown-content a { color: var(--site-ink); }
.site-shell .dropdown-content a:hover { background: var(--site-subtle); }
.site-shell .close { color: var(--site-ink); opacity: 1; }
.site-shell .bootstrap-dialog.type-danger .modal-header { background: #b91c1c; }
.site-shell .bootstrap-dialog.type-warning .modal-header { background: #b45309; }
.site-shell .bootstrap-dialog.type-success .modal-header { background: #047857; }
.site-shell .bootstrap-dialog.type-info .modal-header { background: #16687f; }
.site-shell .bootstrap-dialog.type-primary .modal-header { background: #1d6596; }
.site-shell .bootstrap-dialog .modal-header .close { color: #fff; }
.site-shell .gallery-lock { background: var(--site-surface); }
.site-shell .gallery-admin .embedCode { color: var(--site-link); }
.site-shell .premium-button:hover { background: #f5d65c; color: #252621; }
.site-shell .gallery-search button:hover { background: #f5d65c; }

@media (prefers-color-scheme: dark) {
    .site-shell {
        color-scheme: dark;
        --site-page: #191c1b;
        --site-surface: #252a27;
        --site-footer: #202522;
        --site-subtle: #343c35;
        --site-ink: #eceee9;
        --site-muted: #b5bdb3;
        --site-border: #899585;
        --site-link: #9bd2f5;
        --site-focus: #9bd2f5;
        --site-danger: #f0b5a4;
        --site-notice: #3a2723;
    }
    .site-shell.site-legacy .body-content a:not(.btn) { color: var(--site-link); }
    .site-shell .premium-plan-copper { --metal-ink: #e4b384; }
    .site-shell .premium-plan-silver { --metal-ink: #c2ccd7; }
    .site-shell .premium-plan-gold { --metal-ink: #e5ca76; }
    .site-shell .premium-plan .premium-button:hover { color: #252621; }
    .site-shell :is(.gallery-search button, .gallery-lock, .gallery-property) img[src*="/images/material/"] { filter: invert(1); opacity: 1; }
    .site-shell .gallery-search button:hover img[src*="/images/material/"] { filter: none; }
    .site-shell .dropdown-content { background: var(--site-surface); }
    .site-shell .dropdown-content a:hover { background: var(--site-subtle); }
    .site-shell .gallery-preview-note { background: #393421; color: #e8dfb8; }
}

@media (prefers-contrast: more) {
    .site-shell { --site-muted: var(--site-ink); }
    .site-shell :is(a, button, input, select, textarea, summary):focus-visible { outline-width: 3px; }
    .site-shell .gallery-property img[src*="/images/material/"] { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .site-shell *, .site-shell *::before, .site-shell *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}