/* Elemental Theme — Dark theme with earth/warm accents */
/* Colors extracted from legacy sd2022.elemental.scss */

/* Legacy Elemental fonts — Adobe Typekit provides trajan-pro-3 (headings)
   and proxima-nova (body); Google Fonts supplies Cinzel as a free
   classical-serif fallback when the Typekit license doesn't cover the
   current domain. */
@import url('https://use.typekit.net/xwv6ung.css');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&display=swap');

/* Section 1: Variable overrides */
.theme-elemental {
    --accent-color: #a7821f;
    --accent-color-text: #FDFDFD;
    --background: #0A0A08;
    --alternate-background: #181610;
    --text-color: #E8E8E0;
    --secondary-text-color: #9C9C8C;
    --table-text-color: #C8C8B8;
    --link-color: #a7821f;
    --border-color: #3A3020;
    --border-color-gradient: #1A1810;
    --header-background: #1E1C14;
    --header-text-color: #E8E8E0;
    --menu-background: #0A0A08;
    --menu-text-color: #E8E8E0;
    --section-header-background: #1A1810;
    --section-header-background-2: #141208;
    --section-header-background-3: linear-gradient(to bottom,#1E1C14 0%,#0F0E08 100%);
    --section-header-text-color: #D0C0A0;
    --body-background: #0E0E08;
    --body-text-color: #E0E0D8;
    --nav-gradient: linear-gradient(to bottom,rgba(167,130,31,1) 0%,rgba(151,123,73,1) 100%);
    --nav-border-color: #a7821f;
    --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: #1A1810;
    --post-quote-text-color: #C8C8C0;
    --post-quote-border-color: #4A3A1A;
    --post-quote-header-background: #141208;
    --post-quote-header-text-color: #a7821f;
    --search-highlight-text-color: #cfa229;
    --tooltip-background-color: #1E1C14;
    --tooltip-border-color: #3A3020;
    --tooltip-color: #E8E8E0;
    --tooltip-highlight-color: #a7821f;
    --tooltip-de-emphasize-color: #6A6A5A;
    --table-header-background: #0A0A08;
    --main-accent-color: #FDFDFD;
    --sub-alert-background-color: #a7821f;
    --sub-alert-text-color: #FDFDFD;
    --sub-alert-link-color: #0A0A08;
}
    /* Section 2: Site header overrides */
    .theme-elemental .sd-site-header {
        background: linear-gradient(to bottom,#1E1C14 0%,#141208 100%);
        border-bottom-color: var(--accent-color);
    }

    .theme-elemental .sd-site-title {
        color: var(--search-highlight-text-color);
    }
    /* Section 3: Breadcrumb bar */
    .theme-elemental .sd-breadcrumbs li:not(:last-child)::after {
        color: #6A5A3A;
    }
    /* Section 4: Forum listing rows */
    .theme-elemental .sd-thread-item:hover,
    .theme-elemental .sd-thread-item:nth-child(even):hover,
    .theme-elemental .sd-category-row:hover,
    .theme-elemental .sd-category-table tbody tr:nth-child(even):hover {
        background: rgba(167,130,31,.08);
    }
    /* Section 5: Thread group labels and section headers */


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

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

        .theme-elemental .sd-btn-primary:hover {
            background-color: var(--search-highlight-text-color);
        }

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

        .theme-elemental .sd-btn-secondary:hover {
            background: var(--header-background);
        }
    /* Section 8: Thread icon states */
    .theme-elemental .sd-thread-icon--unread {
        color: var(--accent-color);
    }

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

        .theme-elemental .sd-thread-tray__page-link:hover {
            background: var(--accent-color);
            color: var(--accent-color-text);
        }
    /* Section 10: Sidebar */
    .theme-elemental .sd-sidebar {
    }
    /* Section 11: Forum jump */
    .theme-elemental .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-elemental .sd-category-header {
        background: linear-gradient(to bottom,#1E1C14 0%,#141208 100%);
        color: var(--search-highlight-text-color);
        border-bottom: 1px solid var(--border-color);
    }
    /* Section 13: Moderators bar */
    .theme-elemental .sd-moderators {
        background: var(--section-header-background-2);
        border-top-color: #2A2518;
    }
    /* Section 14: Spoiler text */
    .theme-elemental .spoiler {
        background: var(--accent-color);
        color: var(--accent-color);
    }

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

    .theme-elemental .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 — matches the legacy Elemental nav bar:
       a dark translucent band with gold (#a7821f) hairlines at the top and
       bottom that fade to transparent at the left/right edges, uppercase
       Trajan Pro labels, and an Elemental diamond icon at the left.
       The three background-image layers mirror the legacy SCSS in
       sd2022.elemental.scss: top hairline, bottom hairline, center band. */
    .theme-elemental .site-nav {
        --site-nav-bg: transparent;
        --site-nav-text: #FFF;
        --site-nav-hover-bg: #1b1b1b;
        --site-nav-active-bg: #1b1b1b;
        --site-nav-border-color: #a7821f;
        --site-nav-border-top: none;
        --site-nav-border-bottom: none;
        --site-nav-height: 48px;
        background:
            linear-gradient(to right, transparent, #a7821f 5%, #a7821f 95%, transparent) no-repeat scroll left top,
            linear-gradient(to right, transparent, #a7821f 5%, #a7821f 95%, transparent) no-repeat scroll left bottom,
            linear-gradient(to right, transparent, rgba(34,38,42,.8) 5%, rgba(34,38,42,.8) 95%, transparent) no-repeat scroll left center;
        background-size: 100% 1px, 100% 1px, 100% 100%;
        font-family: 'trajan-pro-3', 'Cinzel', 'Times New Roman', serif;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        position: relative;
        z-index: 5;
    }

    /* Diamond icon on the left — the Elemental crest (LogoUrl from
       appsettings.json, rendered as .site-nav__logo by _SiteNav.cshtml).
       Sized to match the 36px legacy icon and offset from the left gold line
       so it sits within the dark band. The pseudo-element guarantees the
       crest still appears even if the LogoUrl/img fails to load (downloaded
       SVG served from /images/themes/elemental/). */
    .theme-elemental .site-nav__logo {
        padding: 0 1rem 0 1.5rem;
        min-width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        background: url('/images/themes/elemental/elemental-icon-white.svg') no-repeat 1.5rem center;
        background-size: 36px 36px;
    }

    .theme-elemental .site-nav__logo img {
        height: 36px;
        width: 36px;
        object-fit: contain;
        opacity: 0; /* Hide the inline img — the CSS background renders the icon. */
    }

    /* Hide Home per legacy — the diamond icon serves as the home link. */
    .theme-elemental .site-nav__item.home {
        display: none;
    }

    /* Center the nav contents horizontally — the legacy grouped the diamond
       icon and menu items together in the middle of the bar rather than
       flushing them to the left. */
    .theme-elemental .site-nav__bar {
        justify-content: center;
        max-width: 1080px;
    }

    /* Menu items: no pill background on active state, just a darker band
       flood; hovers get a subtle dark fill rather than the default accent. */
    .theme-elemental .site-nav__item a {
        padding: 0 1.25rem;
        color: #FFF;
        font-size: 1rem;
    }

    .theme-elemental .site-nav__item a:hover,
    .theme-elemental .site-nav__item--active a {
        background: rgba(27,27,27,.8);
        color: #FFF;
    }

    /* "Games" dropdown — mirrors legacy `.dropdown-menu` styling: solid dark
       background, gold accent border, Trajan Pro labels spanning a roomy
       min-width, with a subtle hover fill on sub-items. */
    .theme-elemental .site-nav__dropdown {
        background: #0A0A08;
        border: 1px solid #a7821f;
        min-width: 240px;
        padding: .5em 0;
        font-family: 'trajan-pro-3', 'Cinzel', 'Times New Roman', serif;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .theme-elemental .site-nav__dropdown li a {
        color: #FFF;
        font-size: 0.95rem;
        padding: 0.6em 1.25em;
    }

    .theme-elemental .site-nav__dropdown li a:hover {
        background: rgba(167,130,31,.18);
        color: #d4a737;
    }

    /* Hide the entire site-nav on mobile — the theme-styled drawer (triggered
       from the Stardock header's mobile menu) handles navigation. Without
       this rule, the dark gradient band + diamond icon would still show on
       phones since site-nav.css only hides the menu + hamburger by default. */
    @media (max-width: 850px) {
        .theme-elemental .site-nav {
            display: none;
        }
    }

/* Content area background */
.theme-elemental .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-elemental .sd-stardock-reply {
    filter: brightness(0) invert(1);
}

/* Section 17: Mobile slide-in drawer — opened via the "Elemental Menu" item
   in the Stardock header's mobile nav. Styled with the theme's gold/bronze
   fantasy palette. */
.sd-elemental-drawer {
    position: fixed;
    top: 0;
    left: -240px;
    width: 220px;
    height: 100%;
    background: #0A0A08;
    border-right: 2px solid #a7821f;
    z-index: 2000;
    transition: left 0.35s ease;
    overflow-y: auto;
    font-family: 'Segoe UI', Arial, sans-serif;
}

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

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

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

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

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

.sd-elemental-drawer > ul > li > a:hover > span,
.sd-elemental-drawer > ul > li.sd-elemental-drawer__active > a > span {
    color: #d4a737;
    text-shadow: 0 0 6px rgba(167, 130, 31, 0.6);
}

.sd-elemental-drawer > ul > li.sd-elemental-drawer__store {
    background: linear-gradient(180deg, #c89527 0%, #6a4f0e 100%);
    border-bottom: 1px solid #a7821f;
}

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

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

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

/* "Games" group header — non-clickable label that introduces the indented
   sub-items. Smaller than nav items, gold to match the theme accent. */
.sd-elemental-drawer > ul > li.sd-elemental-drawer__group {
    background: linear-gradient(180deg, #14110a 0%, #0A0A08 100%);
    border-bottom: 1px solid #3A3020;
    padding: 0.5em 1em;
}

.sd-elemental-drawer__group-label {
    color: #d4a737;
    font-weight: bold;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
}

/* Indented Games sub-items — same gradient treatment but pulled in slightly
   so the hierarchy reads visually. */
.sd-elemental-drawer > ul > li.sd-elemental-drawer__sub {
    background: #06060a;
    border-bottom: 1px solid #1f1810;
    padding: 0.55em 0;
}

.sd-elemental-drawer > ul > li.sd-elemental-drawer__sub > a {
    padding: 0 1em 0 2em;
}

.sd-elemental-drawer > ul > li.sd-elemental-drawer__sub > a > span {
    font-size: 1em;
    text-transform: none;
    letter-spacing: 0;
    color: #E8E8E0;
    font-weight: normal;
}

.sd-elemental-drawer > ul > li.sd-elemental-drawer__sub > a:hover > span {
    color: #d4a737;
    text-shadow: 0 0 6px rgba(167, 130, 31, 0.6);
}

/* Section 18: Body background — the legacy Elemental: Reforged home artwork
   used as a wide backdrop behind the forum content. Pinned top-center and
   set to `scroll` rather than `fixed` so iOS renders it correctly. */
body.theme-elemental {
    background: #000 url('https://www.stardock.com/elemental/reforged/home/elereforged_bkgd.jpg') no-repeat scroll center top;
    font-family: 'proxima-nova', Arial, sans-serif;
}

/* Shift the main page container down so the top of the background art acts
   as a banner above the forum body. */
.theme-elemental .sd-page-container {
    margin-top: 220px;
}

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

    .theme-elemental .sd-page-container {
        margin-top: 140px;
    }
}

@media (max-width: 500px) {
    body.theme-elemental {
        background-size: 760px auto;
    }

    .theme-elemental .sd-page-container {
        margin-top: 100px;
    }
}

/* Section 19: Centered "Elemental: Reforged" logo overlaid on the banner
   region of the body background, matching the legacy `.logo.subpage` image. */
.sd-elemental-logo {
    position: absolute;
    left: 50%;
    top: 130px;
    transform: translateX(-50%);
    z-index: 2;
    display: block;
}

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

@media (max-width: 900px) {
    .sd-elemental-logo {
        top: 55px;
        max-width: 100vw;
        overflow: hidden;
    }

    .sd-elemental-logo img {
        max-width: min(420px, 90vw);
    }
}

/* Section 20: Typography — every forum header uses Trajan Pro 3 (the
   legacy Elemental display serif), uppercase with letter-spacing for the
   classical fantasy feel. Cinzel is the free Google Fonts fallback when the
   Typekit license doesn't cover the current domain. */
.theme-elemental h1,
.theme-elemental h2,
.theme-elemental h3,
.theme-elemental h4,
.theme-elemental h5,
.theme-elemental h6,
.theme-elemental .sd-site-title,
.theme-elemental .sd-forum-title,
.theme-elemental .sd-page-title,
.theme-elemental .sd-category-header,
.theme-elemental .sd-category-header a,
.theme-elemental .sd-thread-list-header,
.theme-elemental .sd-post-header,
.theme-elemental .sd-forum-header,
.theme-elemental .sd-subforum-header,
.theme-elemental .sd-sidebar h2,
.theme-elemental .sd-sidebar h3,
.theme-elemental .sd-breadcrumbs {
    font-family: 'trajan-pro-3', 'Cinzel', 'Times New Roman', serif;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Post bodies + thread list titles use Segoe UI (matches the legacy
   `.body.article { font: 16px "Segoe UI", ... }` rule) — keeps user-written
   content readable in a familiar system face instead of the decorative serif
   used for page chrome. */
.theme-elemental .sd-post-body,
.theme-elemental .sd-post-body p,
.theme-elemental .sd-post-body li,
.theme-elemental .sd-post-body blockquote,
.theme-elemental .sd-post-body .quote,
.theme-elemental .sd-quote,
.theme-elemental .sd-quote-header,
.theme-elemental .sd-thread-item__title,
.theme-elemental .sd-thread-item__title a {
    font-family: 'Segoe UI', Arial, sans-serif;
    text-transform: none;
    letter-spacing: 0;
}

/* Headings inside post content use Segoe UI too — user-authored <h1>–<h6>
   shouldn't render in Trajan Pro / Cinzel like the page chrome does. */
.theme-elemental .sd-post-body h1,
.theme-elemental .sd-post-body h2,
.theme-elemental .sd-post-body h3,
.theme-elemental .sd-post-body h4,
.theme-elemental .sd-post-body h5,
.theme-elemental .sd-post-body h6 {
    font-family: 'Segoe UI', Arial, sans-serif;
    text-transform: none;
    letter-spacing: 0;
}

/* New Topic — Elemental gold pill in the theme's display serif. */
.theme-elemental .sd-forumhead__new-topic {
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 6px rgba(167,130,31,.4);
    border-radius: 4px;
    color: var(--accent-color-text);
    font-family: 'trajan-pro-3', 'Cinzel', 'Times New Roman', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .theme-elemental .sd-forumhead__new-topic:hover {
        background: var(--search-highlight-text-color);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 10px rgba(207,162,41,.6);
        opacity: 1;
    }