/* Sins Theme — Dark space theme (original Sins of a Solar Empire) */
/* Colors extracted from legacy Sins forums.scss — accent #555555, dark base with amber links */
/* Section 1: Variable overrides */
.theme-sins {
    --accent-color: #555555;
    --accent-color-text: #FDFDFD;
    --background: #0A0A0A;
    --alternate-background: #181818;
    --text-color: #E8E8E8;
    --secondary-text-color: #9C9C9C;
    --table-text-color: #C8C8C8;
    --link-color: #FFB400;
    --border-color: #3A3A3A;
    --border-color-gradient: #1A1A1A;
    --header-background: #1E1E1E;
    --header-text-color: #E8E8E8;
    --menu-background: #0A0A0A;
    --menu-text-color: #E8E8E8;
    --section-header-background: #1A1A1A;
    --section-header-background-2: #141414;
    --section-header-background-3: linear-gradient(to bottom,#1E1E1E 0%,#0F0F0F 100%);
    --section-header-text-color: #D0D0D0;
    --body-background: #111111;
    --body-text-color: #E0E0E0;
    --nav-gradient: linear-gradient(to bottom,rgba(85,85,85,1) 0%,rgba(60,60,60,1) 100%);
    --nav-border-color: #666666;
    --error-background: #2D0000;
    --error-text-color: #FF6B6B;
    --error-border-color: #8B0000;
    --success-text-color: #4CAF50;
    --message-background: #2D2200;
    --message-text-color: #FFD54F;
    --message-border-color: #8B6914;
    --post-quote-background: #1A1A1A;
    --post-quote-text-color: #C8C8D0;
    --post-quote-border-color: #3A3A3A;
    --post-quote-header-background: #141414;
    --post-quote-header-text-color: #999999;
    --search-highlight-text-color: #45D5F7;
    --tooltip-background-color: #1E1E1E;
    --tooltip-border-color: #3A3A3A;
    --tooltip-color: #E8E8E8;
    --tooltip-highlight-color: #FFB400;
    --tooltip-de-emphasize-color: #6A6A6A;
    --table-header-background: #0A0A0A;
    --main-accent-color: #45D5F7;
    --sub-alert-background-color: #FFB400;
    --sub-alert-text-color: #0A0A0A;
    --sub-alert-link-color: #0A0A0A;
}
    /* Section 2: Site header overrides */
    .theme-sins .sd-site-header {
        background: linear-gradient(to bottom,#252525 0%,#1A1A1A 100%);
        border-bottom-color: var(--accent-color);
    }

    .theme-sins .sd-site-title {
        color: var(--text-color);
    }
    /* Section 3: Breadcrumb bar */
    .theme-sins .sd-breadcrumbs li:not(:last-child)::after {
        color: var(--nav-border-color);
    }
    /* Section 4: Forum listing rows */
    .theme-sins .sd-thread-item:hover,
    .theme-sins .sd-thread-item:nth-child(even):hover,
    .theme-sins .sd-category-row:hover,
    .theme-sins .sd-category-table tbody tr:nth-child(even):hover {
        background: rgba(255,180,0,.06);
    }
    /* Section 5: Thread group labels and section headers */


    .theme-sins .sd-thread-list-header {
        background: var(--section-header-background);
    }
    /* Section 6: Post container headers (for thread view) */
    .theme-sins .sd-post-header {
        background: linear-gradient(to bottom,#252525 0%,#1A1A1A 100%);
        border-bottom: 1px solid var(--border-color);
    }

    .theme-sins .sd-post-header__username a {
        color: var(--link-color);
        font-weight: 600;
    }
    /* Section 7: Buttons and links */
    .theme-sins .sd-btn-primary {
        background-color: var(--accent-color);
        color: var(--accent-color-text);
    }

        .theme-sins .sd-btn-primary:hover {
            background-color: var(--nav-border-color);
        }

    .theme-sins .sd-btn-secondary {
        border-color: var(--border-color);
        color: var(--body-text-color);
    }

        .theme-sins .sd-btn-secondary:hover {
            background: #252525;
        }
    /* Section 8: Thread icon states */
    .theme-sins .sd-thread-icon--unread {
        color: var(--link-color);
    }

    .theme-sins .sd-thread-icon--read {
        color: #5A5A5A;
    }
    /* Section 9: Pagination */
    .theme-sins .sd-thread-tray__page-link {
        border-color: var(--border-color);
        color: var(--link-color);
    }

        .theme-sins .sd-thread-tray__page-link:hover {
            background: var(--accent-color);
            color: var(--accent-color-text);
        }
    /* Section 10: Sidebar */
    .theme-sins .sd-sidebar {
    }
    /* Section 11: Forum jump */
    .theme-sins .sd-forum-jump__select {
        border-color: var(--border-color);
        background: var(--section-header-background-2);
    }
    /* Section 12: Category rows (home page) — hover unified in Section 4 */
    .theme-sins .sd-category-header {
        background: linear-gradient(to bottom,#252525 0%,#1A1A1A 100%);
        color: var(--text-color);
        border-bottom: 1px solid var(--border-color);
    }
    /* Section 13: Moderators bar */
    .theme-sins .sd-moderators {
        background: var(--section-header-background-2);
        border-top-color: #2A2A2A;
    }
    /* Section 14: Spoiler text */
    .theme-sins .spoiler {
        background: var(--link-color);
        color: var(--link-color);
    }

        .theme-sins .spoiler:hover, .theme-sins .spoiler.revealed {
            background: transparent;
            color: inherit;
        }
    /* Section 15: Quote blocks */
    .theme-sins .sd-quote {
        background: var(--post-quote-background);
        border-left: 3px solid var(--accent-color);
        padding: .5rem .75rem;
    }

    .theme-sins .sd-quote-header {
        background: var(--post-quote-header-background);
        color: var(--post-quote-header-text-color);
        padding: .25rem .5rem;
        font-size: .8rem;
        font-weight: 600;
    }

/* Content area background */
.theme-sins .sd-content-area {
    background: var(--body-background);
}
/* Dark-theme override — whiten the Stardock-reply badge so the Stardock S shows on dark backgrounds like the legacy forums. */
.theme-sins .sd-stardock-reply {
    filter: brightness(0) invert(1);
}

/* Section 16: Body background — matches legacy Sins site.css
   (html { background: #000 url(site-background.jpg) no-repeat fixed center top }).
   Offset 33px down so the top of the image sits below the dark Stardock header. */
body.theme-sins {
    background: #000 url('/images/themes/sins/site-background.jpg') no-repeat fixed center 33px;
}

/* Push the main content down so the banner art at the top of the Sins
   background image is visible above it. */
.theme-sins .sd-page-container {
    margin-top: 245px;
}

@media (max-width: 900px) {
    body.theme-sins {
        background-size: 760px auto;
        background-position: center 45px;
    }

    .theme-sins .sd-page-container {
        margin-top: 160px;
    }
}

/* Section 17: Sins site logo — clickable overlay centered over the space-battle
   banner region of the body background image. */
.sd-sins-logo {
    position: absolute;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    z-index: 2;
    display: block;
}

.sd-sins-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 480px;
    border: 0;
}

@media (max-width: 900px) {
    .sd-sins-logo {
        top: 30px;
        max-width: 100vw;
        overflow: hidden;
        /* Let clicks pass through the logo on mobile so it can never block
           the New Topic button (or any other tray controls) when they
           visually overlap. The logo is decorative at this size — the link
           is still reachable from the Stardock header. */
        pointer-events: none;
    }

    .sd-sins-logo img {
        /* Grow up to 440px but never wider than 95% of the viewport so the
           page won't introduce horizontal scroll on narrow screens. */
        max-width: min(440px, 95vw);
    }

    /* Belt-and-suspenders: also lift the New Topic CTA above the logo on
       mobile so it's never visually masked. */
    .theme-sins .sd-forumhead__new-topic {
        position: relative;
        z-index: 5;
    }
}

/* Section 18: Mobile slide-in drawer — opened via the "Sins of a Solar Empire
   Menu" item in the Stardock header's mobile nav. Styled with the Sins 1
   muted gray/amber palette. */
.sd-sins-drawer {
    position: fixed;
    top: 0;
    left: -240px;
    width: 220px;
    height: 100%;
    background: #0A0A0A;
    border-right: 2px solid #555555;
    z-index: 2000;
    transition: left 0.35s ease;
    overflow-y: auto;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.sd-sins-drawer--open { left: 0; }

.sd-sins-drawer ul { list-style: none; margin: 0; padding: 0; }

.sd-sins-drawer > ul > li {
    background: linear-gradient(180deg, #1E1E1E 0%, #0A0A0A 100%);
    border-bottom: 1px solid #3A3A3A;
    padding: 0.75em 0;
}

.sd-sins-drawer > ul > li > a {
    display: block;
    color: #E8E8E8;
    text-decoration: none;
    padding: 0 1em;
}

.sd-sins-drawer > ul > li > a > span {
    color: #E8E8E8;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sd-sins-drawer > ul > li > a:hover > span,
.sd-sins-drawer > ul > li.sd-sins-drawer__active > a > span {
    color: #FFB400;
}

.sd-sins-drawer > ul > li.sd-sins-drawer__store {
    background: linear-gradient(180deg, #555555 0%, #2A2A2A 100%);
    border-bottom: 1px solid #FFB400;
}

.sd-sins-drawer > ul > li.sd-sins-drawer__store > a > span {
    color: #FDFDFD;
    text-shadow: 1px 1px 2px #000;
}

.sd-sins-drawer > ul > li.sd-sins-drawer__store > a:hover > span {
    color: #FFD54F;
}

.sd-sins-drawer > ul > li.sd-sins-drawer__close {
    background: linear-gradient(180deg, #1A1A1A 0%, #000000 100%);
    border-top: 1px solid #555555;
}

/* Section 19: Site nav overrides — mirrors the GalCiv2 brushed-steel nav
   structure (deep band, full-bar-height beveled cells, edge-fading amber
   hairlines, separator borders between cells, and an inset shadow at the
   bottom of the bar) but recoloured for the Sins palette: charcoal +
   amber instead of GC2's navy + cyan. */
.theme-sins .site-nav {
    --site-nav-bg: transparent;
    --site-nav-text: #E8E8E8;
    --site-nav-hover-bg: linear-gradient(to bottom, #6a6a6a 0%, #3a3a3a 50%, #1f1f1f 100%);
    --site-nav-active-bg: linear-gradient(to bottom, #7a7a7a 0%, #4a4a4a 50%, #2a2a2a 100%);
    --site-nav-border-color: #555555;
    --site-nav-height: 48px;
    padding-bottom: 1.5rem;
}

/* Deep charcoal band with brushed-metal sheen + amber hairlines top and
   bottom (edge-faded 5%→95%) — same three-layer recipe GC2 uses. */
.theme-sins .site-nav__bar {
    background:
        linear-gradient(to right, transparent, #e93804 5%, #e93804 95%, transparent) no-repeat scroll left top,
        linear-gradient(to right, transparent, #8d0300 5%, #8d0300 95%, transparent) no-repeat scroll left bottom,
        linear-gradient(to bottom, #2a2a2a 0%, #0f0f0f 50%, #2a2a2a 100%);
    background-size: 100% 1px, 100% 1px, 100% 100%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -8px 12px rgba(0,0,0,.4);
    max-width: 1760px;
    justify-content: center;
}

.theme-sins .site-nav__menu {
    margin: 0;
    align-items: center;
}

/* Cells fill nearly the bar height with thin gray separators between them
   — same vertical-divider treatment as the GC2 nav. */
.theme-sins .site-nav__item {
    align-items: center;
    height: 97%;
    border-left: 1px solid #be3821;
    border-right: 1px solid #e88135#be3821;
}

.theme-sins .site-nav__item:first-child {
    border-left: 2px solid #555555;
}

.theme-sins .site-nav__item:last-child {
    border-right: 2px solid #555555;
}

    .theme-sins .site-nav__item a {
        color: #E8E8E8;
        font-weight: 600;
        padding: 0 1.1rem;
        text-shadow: 1px 1px 2px #000;
        transition: background .2s ease-in-out, box-shadow .2s ease-in-out, border-color .2s ease-in-out;
        background: linear-gradient(to bottom, #f8a06e 0%,#e75d2e 50%, #880500 100%);
    }

/* Hover — amber-warm gradient with bright amber top edge + glow, mirroring
   GC2's cyan diamond-reflection hover but in Sins' amber palette. */
        .theme-sins .site-nav__item a:hover {
            background: linear-gradient(to bottom, #f67429 0%, #bf3e12 50%, #5f0401 100%);
            box-shadow: 0 0 8px rgba(234,153,93,.6), inset 0 1px 0 rgba(255,255,255,.15);
            color: #FFFFFF;
            text-shadow: 0 0 2px #FFFFFF;
        }

/* Active — slightly different amber treatment so the current page stands out. */
.theme-sins .site-nav__item--active a {
    background: linear-gradient(to bottom, #f67429 0%, #bf3e12 50%, #5f0401 100%);
    color: #FFFFFF;
    text-shadow: 0 0 2px #FFFFFF;
}

/* Sins icon at the left — sized to the bar with subtle drop-shadow. */
.theme-sins .site-nav__logo {
    padding: 0 1rem 0 0;
}

.theme-sins .site-nav__logo img {
    max-height: 85px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* Purchase CTA — green pill (mirrors the green Store button GC2 uses) but
   layered with the same metal border treatment so it sits as a peer cell. */
.theme-sins .site-nav__store {
    background: linear-gradient(to bottom, #5ddf5d 0%,#3bb33b 50%, #075907 100%);
    height: 97%;
    padding: 0 1.25rem;
    font-weight: 600;
    text-shadow: 1px 1px 2px #000;
}

    .theme-sins .site-nav__store:hover {
        background: linear-gradient(to bottom, #3ec53e 0%,#208520 50%, #034203 100%);
        box-shadow: 0 0 8px rgba(92,184,92,.6), inset 0 1px 0 rgba(255,255,255,.15);
        text-decoration: none;
        text-shadow: 0 0 2px #FFFFFF;
    }

/* New Topic — Sins amber pill matching the theme link/highlight colour. */
.theme-sins .sd-forumhead__new-topic {
    background: var(--link-color);
    border: 1px solid #C68A00;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 8px rgba(255,180,0,.4);
    border-radius: 4px;
    color: #1a1a1a;
    text-shadow: 0 1px 1px rgba(255,255,255,.3);
    letter-spacing: 1px;
}

    .theme-sins .sd-forumhead__new-topic:hover {
        background: #FFD54F;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 12px rgba(255,180,0,.6);
        opacity: 1;
    }

/* Mobile: hide the entire site nav (bar + menu + store + logo). The
   shared rule in site-nav.css already drops the menu/store, but the
   wrapper itself is left visible as a sliver — kill it here so nothing
   shows on small screens. */
@media (max-width: 850px) {
    .theme-sins .site-nav,
    .theme-sins .site-nav__bar {
        display: none !important;
    }
}