/* AshesoftheSingularity Theme — Dark sci-fi with cyan/teal accents */
/* Mirrors the legacy sd2022.ashes2.scss palette: brand cyan #35F1E8 +
   secondary teal #1f526f over near-black backgrounds, with the Ashes II
   battlefield artwork as a full-bleed body background. */

/* Saira — the legacy Ashes II body/heading font (locally hosted). */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Saira/woff2/Saira-Regular.woff2') format('woff2'),
         url('/fonts/Saira/woff/Saira-Regular.woff') format('woff'),
         url('/fonts/Saira/ttf/Saira-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/Saira/woff2/Saira-Medium.woff2') format('woff2'),
         url('/fonts/Saira/woff/Saira-Medium.woff') format('woff'),
         url('/fonts/Saira/ttf/Saira-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/Saira/woff2/Saira-SemiBold.woff2') format('woff2'),
         url('/fonts/Saira/woff/Saira-SemiBold.woff') format('woff'),
         url('/fonts/Saira/ttf/Saira-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/Saira/woff2/Saira-Bold.woff2') format('woff2'),
         url('/fonts/Saira/woff/Saira-Bold.woff') format('woff'),
         url('/fonts/Saira/ttf/Saira-Bold.ttf') format('truetype');
}

/* Section 1: Variable overrides — cyan/teal palette from legacy ashes2.scss */
.theme-ashesofthesingularity {
    --accent-color: #1f526f;
    --accent-color-text: #FDFDFD;
    --background: #050e1a;
    --alternate-background: #0A1828;
    --text-color: #E8E8E8;
    --secondary-text-color: #9C9C9C;
    --table-text-color: #C8D8E0;
    --link-color: #35F1E8;
    --border-color: #1f526f;
    --border-color-gradient: #091c36;
    --header-background: #0A1828;
    --header-text-color: #E8E8E8;
    --menu-background: #050e1a;
    --menu-text-color: #E8E8E8;
    --section-header-background: #091c36;
    --section-header-background-2: #060f1a;
    --section-header-background-3: linear-gradient(to bottom,#0C2240 0%,#050e1a 100%);
    --section-header-text-color: #35F1E8;
    --body-background: rgba(5,14,26,.85);
    --body-text-color: #E8E8E8;
    --nav-gradient: linear-gradient(to bottom,rgba(31,82,111,1) 0%,rgba(9,28,54,1) 100%);
    --nav-border-color: #1f526f;
    --error-background: #2D0000;
    --error-text-color: #FF6B6B;
    --error-border-color: #8B0000;
    --success-text-color: #4CAF50;
    --message-background: #0A2D2D;
    --message-text-color: #35F1E8;
    --message-border-color: #1f526f;
    --post-quote-background: #0A1828;
    --post-quote-text-color: #C8D8E0;
    --post-quote-border-color: #1f526f;
    --post-quote-header-background: #091c36;
    --post-quote-header-text-color: #35F1E8;
    --search-highlight-text-color: #35F1E8;
    --tooltip-background-color: #0A1828;
    --tooltip-border-color: #1f526f;
    --tooltip-color: #E8E8E8;
    --tooltip-highlight-color: #35F1E8;
    --tooltip-de-emphasize-color: #6A6A6A;
    --table-header-background: #050e1a;
    --main-accent-color: #35F1E8;
    --sub-alert-background-color: #1f526f;
    --sub-alert-text-color: #FDFDFD;
    --sub-alert-link-color: #050e1a;
    --container-border-color: #1f526f;
    font-family: 'Saira', 'Segoe UI', Arial, sans-serif;
}

/* Section 2: Site header overrides */
.theme-ashesofthesingularity .sd-site-header {
    background: linear-gradient(to bottom,#0C2240 0%,#091c36 100%);
    border-bottom-color: var(--accent-color);
}

.theme-ashesofthesingularity .sd-site-title {
    color: var(--link-color);
}

/* Section 3: Breadcrumb bar */
.theme-ashesofthesingularity .sd-breadcrumbs li:not(:last-child)::after {
    color: var(--accent-color);
}

/* Section 4: Forum listing rows — cyan tint on hover */
.theme-ashesofthesingularity .sd-thread-item:hover,
.theme-ashesofthesingularity .sd-thread-item:nth-child(even):hover,
.theme-ashesofthesingularity .sd-category-row:hover,
.theme-ashesofthesingularity .sd-category-table tbody tr:nth-child(even):hover {
    background: rgba(53,241,232,.06);
}

/* Section 5: Thread group labels and section headers */
.theme-ashesofthesingularity .sd-thread-list-header {
    background: var(--section-header-background);
    color: var(--link-color);
}

/* Section 6: Post container headers (for thread view) */
.theme-ashesofthesingularity .sd-post-header {
    background: linear-gradient(to bottom,#0C2240 0%,#091c36 100%);
    border-bottom: 1px solid var(--accent-color);
}

.theme-ashesofthesingularity .sd-post-header__username a {
    color: var(--link-color);
    font-weight: 600;
}

/* Section 7: Buttons and links */
.theme-ashesofthesingularity .sd-btn-primary {
    background: rgba(13,77,139,.6);
    border: 1px solid #007efb;
    box-shadow: inset 0 0 4px #488ed3, 0 0 8px rgba(53,241,232,.3);
    color: #FDFDFD;
}

    .theme-ashesofthesingularity .sd-btn-primary:hover {
        background: rgba(16,118,200,.8);
        box-shadow: inset 0 0 6px #4798e9, 0 0 12px rgba(53,241,232,.5);
    }

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

    .theme-ashesofthesingularity .sd-btn-secondary:hover {
        background: var(--alternate-background);
    }

/* Section 8: Thread icon states */
.theme-ashesofthesingularity .sd-thread-icon--unread {
    color: var(--link-color);
}

.theme-ashesofthesingularity .sd-thread-icon--read {
    color: var(--accent-color);
}

/* Section 9: Pagination */
.theme-ashesofthesingularity .sd-thread-tray__page-link {
    border-color: var(--accent-color);
    color: var(--link-color);
}

    .theme-ashesofthesingularity .sd-thread-tray__page-link:hover {
        background: var(--accent-color);
        color: var(--accent-color-text);
    }

/* Section 10: Sidebar — cyan headers */
.theme-ashesofthesingularity .sd-sidebar h2,
.theme-ashesofthesingularity .sd-sidebar h3 {
    color: var(--link-color);
}

/* Section 11: Forum jump */
.theme-ashesofthesingularity .sd-forum-jump__select {
    border-color: var(--accent-color);
    background: var(--section-header-background);
    color: var(--text-color);
}

/* Section 12: Category rows (home page) — cyan title text on dark band */
.theme-ashesofthesingularity .sd-category-header {
    background: linear-gradient(to bottom,#0C2240 0%,#091c36 100%);
    color: var(--link-color);
    border-bottom: 1px solid var(--accent-color);
}

/* Section 13: Moderators bar */
.theme-ashesofthesingularity .sd-moderators {
    background: var(--section-header-background);
    border-top-color: var(--accent-color);
}

/* Section 14: Spoiler text */
.theme-ashesofthesingularity .spoiler {
    background: var(--link-color);
    color: var(--link-color);
}

    .theme-ashesofthesingularity .spoiler:hover,
    .theme-ashesofthesingularity .spoiler.revealed {
        background: transparent;
        color: inherit;
    }

/* Section 15: Quote blocks */
.theme-ashesofthesingularity .sd-quote {
    background: var(--post-quote-background);
    border-left: 3px solid var(--post-quote-border-color);
    padding: .5rem .75rem;
}

.theme-ashesofthesingularity .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;
}

/* Section 16: Site nav overrides — clean dark band, no visible borders, cyan
   highlight on the active item, white text on the rest. Mirrors the legacy
   nav strip from the screenshot. */
.theme-ashesofthesingularity .site-nav {
    --site-nav-bg: transparent;
    --site-nav-text: #FDFDFD;
    --site-nav-hover-bg: rgba(53,241,232,.12);
    --site-nav-active-bg: var(--accent-color);
    --site-nav-border-color: transparent;
    --site-nav-border-top: none;
    --site-nav-border-bottom: none;
    --site-nav-height: 50px;
    font-family: 'Saira', 'Segoe UI', Arial, sans-serif;
}

/* Three-layer background: cyan hairline at top + cyan hairline at bottom +
   dark center band — each fading to transparent at the left/right 5% edges
   so the lines blend into the battlefield artwork (matches the legacy nav
   strip in the screenshot). */
.theme-ashesofthesingularity .site-nav__bar {
    background:
        linear-gradient(to right, transparent, #35F1E8 5%, #35F1E8 95%, transparent) no-repeat scroll left top,
        linear-gradient(to right, transparent, #35F1E8 5%, #35F1E8 95%, transparent) no-repeat scroll left bottom,
        linear-gradient(to right, transparent, rgba(0,0,0,.65) 5%, rgba(0,0,0,.65) 95%, transparent);
    background-size: 100% 1px, 100% 1px, 100% 100%;
    justify-content: center;
    max-width: 1760px;
}

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

.theme-ashesofthesingularity .site-nav__item a {
    color: #FDFDFD;
    font-weight: 600;
    letter-spacing: 1px;
    transition: background .2s ease-in-out, color .2s ease-in-out;
}

.theme-ashesofthesingularity .site-nav__item a:hover {
    background: rgba(53,241,232,.12);
    color: #35F1E8;
}

.theme-ashesofthesingularity .site-nav__item--active a {
    background: var(--accent-color);
    color: #FDFDFD;
}

/* Games dropdown — solid dark panel with cyan border, uppercase Saira items.
   Mirrors the legacy GAMES > [Ashes II / Ashes: Escalation] menu. */
.theme-ashesofthesingularity .site-nav__dropdown {
    background: #050e1a;
    border: 1px solid #1f526f;
    min-width: 220px;
    padding: .5em 0;
    font-family: 'Saira', 'Segoe UI', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.theme-ashesofthesingularity .site-nav__dropdown li a {
    color: #FDFDFD;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.7em 1.5em;
}

.theme-ashesofthesingularity .site-nav__dropdown li a:hover {
    background: rgba(53,241,232,.12);
    color: #35F1E8;
}

/* Content area background — subtle translucent dark so the body image still
   reads through, but text remains readable. */
.theme-ashesofthesingularity .sd-content-area {
    background: rgba(5,14,26,.85);
}

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

/* Section 17: Body background — full-bleed Ashes II battlefield artwork
   (the same image used in the legacy hero). Pinned center-top so the
   foreground figures stay visible behind the forum content. The body
   background-color provides a near-black fallback. */
body.theme-ashesofthesingularity {
    background: #0b0a0b url('https://www.stardock.com/ashesofthesingularity/ashesofthesingularity2/ashes2_bkgd_subpage.jpg') no-repeat scroll center top;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Saira', 'Segoe UI', Arial, sans-serif;
}

@media (max-width: 900px) {
    /* iOS drops fixed background-attachment, leaving the page solid black —
       fall back to scroll + a smaller fixed-width image on phones. */
    body.theme-ashesofthesingularity {
        background-attachment: scroll;
        background-size: 1280px auto;
    }
}

/* Section 18: Hero gap + logo — push the content area down so the
   battlefield artwork is visible between the site nav and the first forum
   group, then drop the centered "ASHES OF THE SINGULARITY II" glow logo
   into that gap. The logo is sized so it dominates the hero band like in
   the legacy screenshot, with a subtle drop-shadow to lift it off the busy
   background. */
.theme-ashesofthesingularity .sd-page-container {
    margin-top: 400px;
}

.sd-ashes-logo {
    position: absolute;
    left: 50%;
    top: 130px;
    transform: translateX(-50%);
    z-index: 3;
    display: block;
    pointer-events: auto;
}

.sd-ashes-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 720px;
    border: 0;
    filter: drop-shadow(0 2px 16px rgba(0,0,0,.7));
}

@media (max-width: 1100px) {
    .theme-ashesofthesingularity .sd-page-container {
        margin-top: 240px;
    }

    .sd-ashes-logo img {
        max-width: 560px;
        max-height: 220px;
    }
}

@media (max-width: 768px) {
    .theme-ashesofthesingularity .sd-page-container {
        margin-top: 180px;
    }

    .sd-ashes-logo {
        top: 80px;
        max-width: 100vw;
        overflow: hidden;
    }

    .sd-ashes-logo img {
        max-width: min(440px, 92vw);
        max-height: 160px;
    }
}

@media (max-width: 480px) {
    .theme-ashesofthesingularity .sd-page-container {
        margin-top: 140px;
    }

    .sd-ashes-logo {
        top: 60px;
    }

    .sd-ashes-logo img {
        max-width: min(340px, 88vw);
        max-height: 120px;
    }
}

/* Section 19: Mobile drawer + site-nav hide — at ≤850px the desktop site-nav
   is fully hidden and the drawer (triggered from the Stardock header's
   "Ashes of the Singularity Menu" item) takes over navigation. */
@media (max-width: 850px) {
    .theme-ashesofthesingularity .site-nav {
        display: none;
    }
}

.sd-ashes-drawer {
    position: fixed;
    top: 0;
    left: -260px;
    width: 240px;
    height: 100%;
    background: linear-gradient(to bottom, #0a1626 0%, #050b14 100%);
    border-right: 2px solid #35F1E8;
    box-shadow: 4px 0 12px rgba(0,0,0,.5);
    z-index: 2000;
    transition: left 0.35s ease;
    overflow-y: auto;
    font-family: 'Saira', 'Segoe UI', Arial, sans-serif;
}

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

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

.sd-ashes-drawer > ul > li {
    background: linear-gradient(to bottom, #0C2240 0%, #050e1a 100%);
    border-bottom: 1px solid #1f526f;
    padding: 0.75em 0;
}

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

.sd-ashes-drawer > ul > li > a > span {
    color: #FDFDFD;
    font-weight: 600;
    font-size: 1.05em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sd-ashes-drawer > ul > li > a:hover > span,
.sd-ashes-drawer > ul > li.sd-ashes-drawer__active > a > span {
    color: #35F1E8;
    text-shadow: 0 0 8px rgba(53,241,232,.6);
}

/* CTA / Wishlist in drawer — green identity. */
.sd-ashes-drawer > ul > li.sd-ashes-drawer__cta {
    background: linear-gradient(to bottom, #2d8b2d 0%, #1a661a 100%);
    border-bottom: 1px solid #1a661a;
    border-top: 1px solid #8be08b;
}

.sd-ashes-drawer > ul > li.sd-ashes-drawer__cta > a > span {
    color: #FFFFFF;
    text-shadow: 0 1px 2px #000;
}

.sd-ashes-drawer > ul > li.sd-ashes-drawer__cta > a:hover > span {
    color: #c8ffd0;
}

/* Close — sits at bottom, darker treatment so it reads as "dismiss". */
.sd-ashes-drawer > ul > li.sd-ashes-drawer__close {
    background: linear-gradient(to bottom, #1a1a1a 0%, #000000 100%);
    border-top: 1px solid #35F1E8;
}

/* New Topic — mirror the Ashes sd-btn-primary translucent-blue + cyan glow. */
.theme-ashesofthesingularity .sd-forumhead__new-topic {
    background: rgba(13,77,139,.6);
    border: 1px solid #007efb;
    box-shadow: inset 0 0 4px #488ed3, 0 0 8px rgba(53,241,232,.3);
    border-radius: 4px;
    color: #FDFDFD;
}

    .theme-ashesofthesingularity .sd-forumhead__new-topic:hover {
        background: rgba(16,118,200,.8);
        box-shadow: inset 0 0 6px #4798e9, 0 0 12px rgba(53,241,232,.5);
        opacity: 1;
    }