/* Pango theme — transition-safe for Mastodon / glitch-soc 4.5 AND 4.6
 *
 * Light-theme detection changed in 4.6:
 *   4.5 and earlier:  body.theme-mastodon-light
 *   4.6 and later:    [data-color-scheme="light"]   (attribute on an ancestor)
 *
 * Every light-theme rule below lists BOTH selectors. On 4.5 the attribute
 * selector is inert; on 4.6 the class selector is inert. Same file works
 * across the upgrade — no swap needed at cutover. Once you're settled on
 * 4.6 you can delete the `body.theme-mastodon-light` halves.
 *
 * dark red  = #981b1e
 * light red = #cd2026
 */

/* ---- Small logo (default / all schemes) ---- */
#mastodon > div > div > div.ui__header > a,
#mastodon > div > div > div.columns-area__panels > div.columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational > div > div > div.navigation-panel__logo > a,
.sidebar__toggle__logo > a:nth-child(1) {
    content: url('https://cache.smolnet.org/smolnet_uploads/pango-long.svg');
    height: 28px;
}

/* ---- Small logo (light scheme) ---- */
body.theme-mastodon-light #mastodon > div > div > div.ui__header > a,
body.theme-mastodon-light #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational > div > div > div.navigation-panel__logo > a,
body.theme-mastodon-light .sidebar__toggle__logo > a:nth-child(1),
[data-color-scheme="light"] #mastodon > div > div > div.ui__header > a,
[data-color-scheme="light"] #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational > div > div > div.navigation-panel__logo > a,
[data-color-scheme="light"] .sidebar__toggle__logo > a:nth-child(1) {
    content: url('https://cache.smolnet.org/smolnet_uploads/pango-long-dark.svg');
    height: 28px;
}

/* ---- Logged-out / container-alt logo ---- */
body > div.container-alt > div.logo-container > h1 > a {
    content: url('https://cache.smolnet.org/smolnet_uploads/pango-long.svg');
    height: 39px;
}

body.theme-mastodon-light > div.container-alt > div.logo-container > h1 > a,
[data-color-scheme="light"] body > div.container-alt > div.logo-container > h1 > a {
    content: url('https://cache.smolnet.org/smolnet_uploads/pango-long-dark.svg');
    height: 42px;
}

/* ---- Big logo ---- */
img.logo {
    content: url('https://cache.smolnet.org/smolnet_uploads/pango-square.svg');
}

body.theme-mastodon-light img.logo,
[data-color-scheme="light"] img.logo {
    content: url('https://cache.smolnet.org/smolnet_uploads/pango-square-dark.svg');
}

/* ---- Creamy dark backgrounds in light scheme ---- */
body.theme-mastodon-light,
body.admin.theme-mastodon-light > div.admin-wrapper > div > div,
[data-color-scheme="light"] body,
[data-color-scheme="light"] body.admin > div.admin-wrapper > div > div {
    background: #F7F7F7;
}

@media screen and (max-width: 1174px) {
    body.theme-mastodon-light .ui__header,
    body.theme-mastodon-light .columns-area__panels__pane--navigational .navigation-panel,
    [data-color-scheme="light"] .ui__header,
    [data-color-scheme="light"] .columns-area__panels__pane--navigational .navigation-panel {
        background: #F7F7F7;
    }
}

/* ---- White backgrounds in light scheme ---- */
body.theme-mastodon-light .admin-wrapper .sidebar ul,
[data-color-scheme="light"] .admin-wrapper .sidebar ul {
    background: #fff;
}

/* admin panel navigation: white with black text in light scheme
 * NOTE: `div:nth-child` (no argument) is invalid CSS and was in your
 * original file — left as-is. Give it an index (e.g. :nth-child(2)) if
 * this rule is meant to fire. */
body.admin.theme-mastodon-light > div.admin-wrapper > div:nth-child > div > div > ul,
[data-color-scheme="light"] body.admin > div.admin-wrapper > div:nth-child > div > div > ul {
    background: #fff;
    color: #000000;
}

/* ---- Navigation accent (all schemes) ---- */
.column-link--transparent.active,
.about__section__title,
.column-header__back-button {
    color: #cd2026;
}

.filters .filter-subset a.selected {
    color: #cd2026;
    border-bottom: 2px solid #cd2026;
}

/* ---- Quick links / tertiary buttons (all schemes) ---- */
.dashboard__quick-access,
.admin-wrapper .content__heading__tabs a.selected,
.button.button-tertiary,
.focal-point__preview strong {
    background-color: #cd2026;
}

/* ---- Active menu items (all schemes) ---- */
body.admin > div.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
.rules-list li:before {
    background-color: #cd2026;
}

.radio-button__input.checked {
    border-color: #cd2026;
    background: #cd2026;
}

/* ---- Admin-page buttons (all schemes) ---- */
body.admin div.actions > button,
body.admin .simple_form .block-button:last-child,
.simple_form .button:last-child,
body.admin .simple_form button:last-child {
    font-feature-settings: "kern";
    text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 22px;
    overflow: hidden;
    padding: 7px 18px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
    color: #ffffff;
    background-color: #cd2026;
}

/* ---- Other buttons ---- */
.button,
.button.button-secondary,
.button.button-tertiary,
.simple_form .block-button,
.simple_form .button,
.simple_form button {
    color: #ffffff;
    background-color: #cd2026;
    border: 0;
}

/* ---- Hover states -> dark red ---- */
.button:active,
.button:focus,
.button:hover,
body.admin > div.admin-wrapper > div.content-wrapper > div > p > a:hover,
body.admin div.actions > button:hover,
body.admin .simple_form .block-button:last-child:hover,
.simple_form .button:last-child:hover,
body.admin .simple_form button:last-child:hover,
.button-saml:hover::after,
a[href="/publish"]:hover::after,
#mastodon > div > div > div.columns-area__panels > div.columns-area__panels__pane.columns-area__panels__pane--compositional > div > div > form > div.compose-form__publish > div > button:hover::after,
#mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > form > div.compose-form__publish > div > button:hover::after,
#mastodon > div > div > div.columns-area > div.drawer > div.drawer__pager > div > form > div.compose-form__publish > div > button:hover::after,
body.admin > div.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover,
.dashboard__quick-access:hover,
.admin-wrapper .content__heading__tabs a.selected:hover,
.button.button-secondary:active,
.button.button-secondary:focus,
.button.button-secondary:hover,
.button.button-tertiary:active,
.button.button-tertiary:focus,
.button.button-tertiary:hover,
.simple_form .block-button:hover,
.simple_form .button:hover,
.simple_form button:hover {
    background-color: #981b1e;
    color: #fff;
}

/* ---- Hover navlinks -> dark red ---- */
.focal-point__preview strong:hover,
.column-link--transparent.active:hover {
    color: #981b1e;
}

/* ---- Hover underlined navlinks -> dark red ---- */
.filters .filter-subset a.selected:hover {
    color: #981b1e;
    border-bottom: 2px solid #981b1e;
}

/* ---- "TOOT!" publish button: hide label, inject TOOT! ---- */
#mastodon > div > div > div.columns-area__panels > div.columns-area__panels__pane.columns-area__panels__pane--compositional > div > div > form > div.compose-form__publish > div > button,
#mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > form > div.compose-form__publish > div > button,
#mastodon > div > div > div.columns-area > div.drawer > div.drawer__pager > div:nth-child(1) > form > div.compose-form__publish > div > button {
    visibility: hidden;
}

#mastodon > div > div > div.columns-area__panels > div.columns-area__panels__pane.columns-area__panels__pane--compositional > div > div > form > div.compose-form__publish > div > button:after,
#mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > form > div.compose-form__publish > div > button:after,
#mastodon > div > div > div.columns-area > div.drawer > div.drawer__pager > div:nth-child(1) > form > div.compose-form__publish > div > button:after {
    content: 'TOOT!';
    visibility: visible;
    font-feature-settings: "kern";
    text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    pointer-events: auto;
    background-color: #cd2026;
    border: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 22px;
    overflow: hidden;
    padding: 7px 18px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%;
}

a[href="/publish"] {
    visibility: hidden;
}

a[href="/publish"]:after {
    content: 'TOOT!';
    visibility: visible;
    text-rendering: optimizelegibility;
    font-feature-settings: "kern";
    text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    margin: 0;
    font: inherit;
    vertical-align: baseline;
    background-color: #cd2026;
    border: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 22px;
    overflow: hidden;
    padding: 7px 18px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto;
}