/* ============================================================
   Sunet Social – custom CSS updated for Mastodon 4.6.0
   Changes from the 4.5.x version:
     1. body.theme-mastodon-light  →  [data-color-scheme='light']
     2. body.admin.theme-mastodon-light  →  body.admin[data-color-scheme='light']
     3. Logo container in auth layout changed:
          div.logo-container > h1 > a  →  header.logo-container > a
          (Mastodon 4.6 uses <header> and <main> instead of <div>,
           and removed the <h1> wrapper around the logo link)
     4. All other selectors are unchanged – the .container-alt /
        .form-container / .alternative-login class names survived 4.6.
   ============================================================ */

/* Make small logo orange */
/* CHANGED: ui__header is completely gone in 4.6 (replaced by ui__navigation-bar
   which has no logo). The sidebar logo path broke because NavigationPanel now
   renders as <nav class="navigation-panel"> instead of a <div>, breaking the old
   "div > div > div.navigation-panel__logo" chain. Simplified to a direct selector.
   Using background-image instead of content: url() because content: url() on a
   non-replaced element like <a> renders the image at its natural SVG pixel size and
   ignores width/height on the element. background-image + background-size respects
   the element dimensions correctly. The inner SVG child is hidden with font-size:0. */
.navigation-panel__logo > a {
    display: block;
    height: 30px;
    width: 100%;
    background-image: url('https://files.social.sunet.se/logos/smol-log-white.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    font-size: 0;
}
.navigation-panel__logo > a > * {
    display: none;
}

/* CHANGED: light theme variant.
   When signed out, data-color-scheme is 'auto' (not 'light'), so we need both.
   When signed in with explicit dark theme, neither matches so white logo is used. */
[data-color-scheme='light'] .navigation-panel__logo > a,
[data-color-scheme='auto'] .navigation-panel__logo > a {
    background-image: url('https://files.social.sunet.se/logos/smol-log.svg');
}

/* In auto mode with a system dark preference, revert to white logo */
@media (prefers-color-scheme: dark) {
    [data-color-scheme='auto'] .navigation-panel__logo > a {
        background-image: url('https://files.social.sunet.se/logos/smol-log-white.svg');
    }
}

/* CHANGED: div.logo-container > h1 > a → header.logo-container > a
   (element changed from div to header; h1 wrapper removed in 4.6)
   Using background-image instead of content: url() for correct sizing. */
body > div.container-alt > header.logo-container > a {
    display: block;
    height: 55px;
    width: 200px;
    background-image: url('https://files.social.sunet.se/logos/smol-log-white.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    font-size: 0;
}
body > div.container-alt > header.logo-container > a > * {
    display: none;
}

/* CHANGED: body.theme-mastodon-light → [data-color-scheme='light']
   CHANGED: div.logo-container > h1 > a → header.logo-container > a */
[data-color-scheme='light'] body > div.container-alt > header.logo-container > a,
body[data-color-scheme='light'] > div.container-alt > header.logo-container > a {
    background-image: url('https://files.social.sunet.se/logos/smol-log.svg');
}

/* Make big logo orange */
/* CHANGED: In 4.6 the elephant logo is an inline SVG using fill="currentColor",
   not an <img> tag anymore. The old img.logo { content: url(...) } trick no
   longer works. Set color on the SVG element instead.
   !important is required because Mastodon's own component CSS sets
   color: var(--color-text-tertiary) on .logo inside scoped parent selectors,
   which would otherwise win the specificity battle. */
svg.logo--icon {
    color: #D57C38 !important;
}
/* Keep the old rule as a fallback for any remaining <img class="logo"> elsewhere */
img.logo {
    content: url('https://files.social.sunet.se/logos/logo.svg');
}

/* make dark background elements creamy in light theme */
/* CHANGED: body.theme-mastodon-light → [data-color-scheme='light'] */
[data-color-scheme='light'],
body.admin[data-color-scheme='light'] > div.admin-wrapper > div > div {
    background: #F7F7F7;
}

@media screen and (max-width: 1174px) {
    /* CHANGED: body.theme-mastodon-light → [data-color-scheme='light']
       NOTE: ui__header no longer exists in 4.6; only navigation-panel rule remains */
    [data-color-scheme='light'] .columns-area__panels__pane--navigational .navigation-panel {
        background: #F7F7F7;
    }
}

/* make other backgrounds white in light theme */
/* CHANGED: body.theme-mastodon-light → [data-color-scheme='light'] */
[data-color-scheme='light'] .admin-wrapper .sidebar ul {
    background: #fff;
}

/* admin panel navigation is white with black text in light theme */
/* CHANGED: body.admin.theme-mastodon-light → body.admin[data-color-scheme='light'] */
body.admin[data-color-scheme='light'] > div.admin-wrapper > div:nth-child > div > div > ul {
    background: #fff;
    color: #000000;
}

/* navigation all themes, */
.column-link--transparent.active, .about__section__title, .column-header__back-button {
    color: #D57C38;
}

/* more navigation all themes */
.filters .filter-subset a.selected {
    color: #D57C38;
    border-bottom: 2px solid #D57C38;
}

/* quick links in admin all themes*/
.dashboard__quick-access, .admin-wrapper .content__heading__tabs a.selected, .button.button-tertiary, .dashboard__quick-access, .focal-point__preview strong {
    background-color: #D57C38;
}

/* active menu items are red/orange in all themes */
body.admin > div.admin-wrapper .sidebar ul .simple-navigation-active-leaf a, .rules-list li:before {
    background-color: #D57C38;
}

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

/* buttons on admin page all themes */
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 14px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
    color: #ffffff;
    background-color: #D57C38;
}

/* Here we create new buttons instead of hidden ones */
body > div.container-alt > main.form-container > div.simple_form.alternative-login:before {
    visibility: visible;
    content: "Please register before trying to log in the first time.";
    position: absolute;
    margin-bottom: 100px;
    color: #fff;
}

/* saml button */
/* CHANGED: div.form-container → main.form-container */
body > div.container-alt > main.form-container > div.simple_form.alternative-login > .actions {
    margin-top: 0;
    flex: 2;
}

/* CHANGED: div.form-container → main.form-container */
body > div.container-alt > main.form-container > div.simple_form.alternative-login > div > a {
    visibility: hidden;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0 7px 14px;
}

/* CHANGED: div.form-container → main.form-container */
body > div.container-alt > main.form-container > div.simple_form.alternative-login {
    display: flex;
    align-items: center;
    background: rgb(33, 110, 147);
    box-shadow: rgb(33, 110, 147) 0 0 0 3px, 0 0 0 1px inset;
    height: 32px;
    width: auto;
    max-width: 340px;
    border-radius: 5px;
    padding: 9px 14px;
    color: rgb(33, 110, 147);
    justify-content: center;
    margin: auto;
}

/* CHANGED: div.form-container → main.form-container */
body > div.container-alt > main.form-container > div.simple_form.alternative-login:hover {
    color: #fff;
}

/* CHANGED: div.form-container → main.form-container
   CHANGED: h4 → h2  (Mastodon 4.6 uses h2 for "Or log in with" heading) */
body > div.container-alt > main.form-container > div.simple_form.alternative-login > h2 {
    visibility: visible;
    content: url('https://files.social.sunet.se/logos/sa-white.svg');
    height: 30px;
    margin-bottom: 0 !important;
}

/* CHANGED: div.form-container → main.form-container */
body > div.container-alt > main.form-container > div.simple_form.alternative-login > div > a::before {
    visibility: visible;
    content: '';
    display: inherit;
    height: 36px;
    border-right: 1px solid #fff;
    bottom: 4px;
    color: rgb(33, 110, 147);
}

/* CHANGED: div.form-container → main.form-container */
body > div.container-alt > main.form-container > div.simple_form.alternative-login > div > a::after {
    visibility: visible;
    content: "Access through your institution ";
    text-transform: none;
    text-rendering: optimizelegibility;
    outline: 0;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 1.4;
    text-decoration: none;
    display: inherit;
    color: #fff;
}

/* CHANGED: div.form-container → main.form-container */
body > div.container-alt > main.form-container > div.simple_form.alternative-login > div > a:hover::after {
    background-color: rgb(33, 110, 147);
}

/* toot button */
a[href="/publish"]: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: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);
    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: #D57C38;
}

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

/* Hover buttons turns them grey */
.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, .dashboard__quick-access:hover, .simple_form .block-button:hover, .simple_form .button:hover, .simple_form button:hover {
    background-color: #707070;
    color: #fff;
}

/* hover navlinks turns them grey */
.focal-point__preview strong:hover, .column-link--transparent.active:hover {
    color: #707070;
}

/* hover underscored navlinks turns them grey */
.filters .filter-subset a.selected:hover {
    color: #707070;
    border-bottom: 2px solid #707070;
}

/* All hidden elements here */
a[href="/publish"], #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, .button-saml {
    visibility: hidden;
}

form[action="/auth/sign_in"] {
    visibility: hidden;
    width: 0px;
    height: 0px;
}