/* ==========================================
   ELDEROS - MAIN STYLESHEET
   Dark Fantasy / Ice Blue Theme
   Homepage + Scrollable Patch Notes
   ========================================== */

:root {
    --bg-primary: #080d18;
    --bg-secondary: #101b2b;
    --bg-panel: #070d17;
    --border-primary: #34465d;
    --border-highlight: #486487;
    --text-primary: #dce9ff;
    --text-secondary: #aebed2;
    --ice-blue: #64baff;
    --ice-light: #b9deff;
    --online: #52c878;
    --offline: #ed6b6b;
    --maintenance: #e7b74d;
}

/* GLOBAL */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

/* TYPOGRAPHY */

h1, h2, h3, h4 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: normal;
    color: var(--ice-light);
}

h1 { font-size: 36px; }
h2 { font-size: 24px; }

p {
    color: #c4d1e2;
}

a {
    color: var(--ice-blue);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: #fff;
}

/* HEADER */

.site-header {
    width: 100%;
    min-height: 85px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 15px 35px;
    background: linear-gradient(180deg, #111d30, #080d18);
    border-bottom: 1px solid #344c68;
    box-shadow: 0 4px 20px #0008;
}

.site-header .brand {
    flex-shrink: 0;
    font: bold 30px Georgia, serif;
    letter-spacing: 3px;
    color: #c5e3ff;
    text-shadow:
        0 0 10px #168dff,
        0 0 20px #0758a8;
}

/* NAVIGATION */

.site-nav,
.site-header nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    padding: 10px;
}

.site-nav a,
.site-header nav a {
    color: #b8cbe4;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.site-nav a:hover,
.site-header nav a:hover,
.header-actions a:hover {
    color: #fff;
    text-shadow: 0 0 10px #168dff;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.header-actions a {
    color: #a9cfff;
    font-size: 12px;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* MAIN CONTENT */

.site-main {
    width: 96%;
    max-width: none;
    margin: 0 auto;
    padding: 12px 0 0;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* HERO SECTION */

.hero-section {
    width: 100%;
    min-height: 350px;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px;

    background-image:
        linear-gradient(
            90deg,
            rgba(4,8,16,.50) 0%,
            rgba(4,8,16,.30) 22%,
            rgba(4,8,16,.12) 45%,
            rgba(4,8,16,.04) 68%,
            rgba(4,8,16,0) 100%
        ),
        url('/ast/img/header_elderos.webp');

    background-color: #070b13;
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;

    border: 1px solid #283a50;
    box-shadow: inset 0 0 12px #0008;

    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: none;
}

.hero-section h1 {
    position: relative;
    z-index: 1;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 15px;

    font: bold clamp(36px, 5vw, 72px) Georgia, serif;
    letter-spacing: 3px;
    color: #c5e3ff;

    text-shadow:
        0 0 10px #168dff,
        0 0 20px #0758a8;
}

.hero-section p {
    position: relative;
    z-index: 1;
    font-size: 18px;
    color: #c5d7ea;
    text-shadow: none;
}

/* HOMEPAGE MODULES */

.homepage-modules {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.4fr)
        minmax(0, 1.2fr)
        minmax(0, 1fr);
    gap: 4px;
    align-items: stretch;
    margin-top: 4px;
    min-height: 0;
    flex: 0 0 auto;
}

.homepage-module {
    min-width: 0;
    min-height: 0;
}

/* SERVER STATUS */

.server-status {
    width: 100%;
    max-width: 340px;
    padding: 14px;
    margin: 0;
    background: linear-gradient(145deg, #101b2b, #050912);
    border: 1px solid var(--border-primary);
    box-shadow:
        inset 0 0 25px #000,
        0 0 12px #071c39;
    color: var(--text-primary);
    position: relative;
}

.homepage-modules .server-status {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0;
}

/* DECORATIVE PANEL LINES */

.server-status::before,
.fantasy-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        #63b9ff,
        transparent
    );
}

/* MODULE HEADINGS */

.server-status h2,
.fantasy-panel h2 {
    margin: 0 0 10px;
    text-align: center;
    font-size: 17px;
    letter-spacing: 2px;
    color: #dce9ff;
    text-shadow: 0 0 10px #1a76c9;
}

/* PLAYER COUNT */

.server-status-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px;
    background: var(--bg-panel);
    border: 1px solid #354c65;
    box-shadow: inset 0 0 15px #000;
}

.server-status-count strong {
    font-size: 26px;
    font-weight: normal;
    color: #c5dfff;
    text-shadow: 0 0 10px #1765b0;
}

.server-status-count small {
    font-size: 10px;
    letter-spacing: 1px;
    text-align: center;
    color: var(--text-secondary);
}

/* STATUS COLORS */

.online { color: var(--online); }
.offline { color: var(--offline); }
.maintenance { color: var(--maintenance); }

/* SERVER CHANNELS */

.server-channels {
    margin: 9px 0;
}

.server-channel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #263343;
    font-size: 12px;
    color: #c4d1e2;
}

.server-channel:last-child {
    border-bottom: none;
}

/* SERVER STATUS BUTTON */

.server-status-button {
    display: block;
    width: 100%;
    padding: 9px 12px;
    text-align: center;
    color: #c5dfff;
    background: linear-gradient(180deg, #182c46, #09111e);
    border: 1px solid var(--border-highlight);
    font: 12px Georgia, serif;
    letter-spacing: 1px;
    cursor: pointer;
    transition:
        background .2s ease,
        box-shadow .2s ease;
}

.server-status-button:hover {
    background: #173c69;
    color: #fff;
    box-shadow: 0 0 15px #116fc080;
}

.server-status-button:disabled {
    opacity: .6;
    cursor: wait;
}

/* FANTASY PANELS */

.fantasy-panel {
    background: linear-gradient(145deg, #101b2b, #050912);
    border: 1px solid var(--border-primary);
    padding: 14px;
    box-shadow:
        inset 0 0 25px #000,
        0 0 12px #071c39;
    position: relative;
}

.homepage-modules .fantasy-panel {
    height: 100%;
    min-height: 0;
    margin: 0;
}

/* GENERAL BUTTONS */

.btn,
button {
    display: inline-block;
    padding: 12px 24px;
    color: #dce9ff;
    background: linear-gradient(#193452, #09111e);
    border: 1px solid var(--border-highlight);
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 1px;
    transition:
        background .2s ease,
        box-shadow .2s ease;
}

.btn:hover,
button:hover {
    background: #174675;
    color: #fff;
    box-shadow: 0 0 15px #007bff60;
}

button.server-status-button {
    padding: 9px 12px;
    font-size: 12px;
}

/* ==========================================
   NEWS PAGE
   ========================================== */

.news-page {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 0 50px;
}

.news-page-heading {
    padding: 34px 38px;
    margin-bottom: 16px;
    border: 1px solid #283a50;
    background: linear-gradient(135deg, #101b2b, #070b13);
}

.news-eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    color: #86bce9;
}

.news-page-heading h1 {
    margin: 8px 0;
    color: #c5e3ff;
    font: bold clamp(30px, 4vw, 48px) Georgia, serif;
    letter-spacing: 2px;
    text-shadow:
        0 0 10px #168dff,
        0 0 20px #0758a8;
}

.news-page-heading p {
    margin: 0;
}

.patchnotes-card {
    border: 1px solid var(--border-primary);
    background: linear-gradient(145deg, #101b2b, #050912);
    box-shadow:
        inset 0 0 25px #000,
        0 0 12px #071c39;
    padding: 30px 38px;
    overflow-wrap: anywhere;
}

.patchnotes-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #34465d;
    padding-bottom: 12px;
    margin-bottom: 24px;
}

.patchnotes-card-header h2 {
    margin: 0;
    font-size: 22px;
    letter-spacing: 1px;
}

.patchnotes-card-header time {
    font-size: 12px;
    color: var(--text-secondary);
}

.patchnotes-notice {
    padding: 14px;
    border: 1px solid #715d36;
    background: #34291455;
    color: #edcea0;
}

/* FULL PATCH NOTES MARKDOWN */

.patchnotes-content {
    color: #dce9ff;
    font-size: 15px;
    line-height: 1.75;
}

.patchnotes-content h1,
.patchnotes-content h2,
.patchnotes-content h3,
.patchnotes-content h4,
.patchnotes-content h5,
.patchnotes-content h6 {
    margin: 1.35em 0 .55em;
    color: #b9deff;
}

.patchnotes-content h1 { font-size: 28px; }
.patchnotes-content h2 { font-size: 23px; }
.patchnotes-content h3 { font-size: 19px; }

.patchnotes-content p {
    margin: 0 0 1em;
}

.patchnotes-content ul,
.patchnotes-content ol {
    padding-left: 25px;
    margin: 0 0 1.2em;
}

.patchnotes-content li {
    margin: 5px 0;
}

.patchnotes-content a {
    color: #7fc6ff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.patchnotes-content code {
    font-family: Consolas, monospace;
    background: #07101d;
    color: #b7e1ff;
    padding: 2px 5px;
    border-radius: 3px;
}

.patchnotes-content pre {
    background: #050a12;
    border: 1px solid #293c53;
    padding: 16px;
    overflow-x: auto;
}

.patchnotes-content pre code {
    padding: 0;
    background: transparent;
    white-space: pre;
}

/* ==========================================
   HOMEPAGE NEWS PREVIEW
   ========================================== */

.news-module {
    min-width: 0;
    overflow: hidden;
}

/* Keep preview independent from page scrolling */

.news-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.news-preview h2 {
    flex: 0 0 auto;
    margin: 0 0 4px;
}

/* Scrollable content */

.news-preview-scroll {
    width: 100%;
    height: 145px;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #426b95 #08111d;
    padding: 6px 12px 6px 4px;
    background: #050a1280;
    border: 1px solid #24374d;
    border-radius: 2px;
    overflow-wrap: anywhere;
}

/* Compact markdown typography inside preview */

.news-preview-scroll.patchnotes-content {
    font-size: 11px;
    line-height: 1.5;
    color: #b9cce0;
}

.news-preview-scroll h1,
.news-preview-scroll h2,
.news-preview-scroll h3,
.news-preview-scroll h4,
.news-preview-scroll h5,
.news-preview-scroll h6 {
    text-align: left;
    letter-spacing: .3px;
    text-shadow: none;
    margin: 8px 0 5px;
}

.news-preview-scroll h1 {
    font-size: 16px;
}

.news-preview-scroll h2 {
    font-size: 14px;
}

.news-preview-scroll h3,
.news-preview-scroll h4 {
    font-size: 12px;
}

.news-preview-scroll p {
    margin: 0 0 7px;
}

.news-preview-scroll ul,
.news-preview-scroll ol {
    margin: 0 0 10px;
    padding-left: 18px;
}

.news-preview-scroll li {
    margin: 3px 0;
}

.news-preview-scroll pre {
    padding: 8px;
    font-size: 10px;
}

/* Scrollbar for Chromium/WebKit browsers */

.news-preview-scroll::-webkit-scrollbar {
    width: 6px;
}

.news-preview-scroll::-webkit-scrollbar-track {
    background: #08111d;
}

.news-preview-scroll::-webkit-scrollbar-thumb {
    background: #426b95;
    border-radius: 6px;
}

.news-preview-scroll::-webkit-scrollbar-thumb:hover {
    background: #64baff;
}

/* Footer inside the news module */

.news-preview-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid #28394f;
    font-size: 10px;
    letter-spacing: .4px;
    color: #859cb5;
}

.news-preview-footer a {
    color: #8bc9ff;
    font-weight: bold;
    white-space: nowrap;
}

.news-preview-footer a:hover {
    color: #fff;
}

.news-preview-empty {
    color: #aebed2;
    font-size: 12px;
}

/* ==========================================
   SITE FOOTER
   ========================================== */

.site-footer,
footer {
    width: 100%;
    flex-shrink: 0;
    margin-top: 4px;
    padding: 12px 15px;
    text-align: center;
    background: #060a12;
    border-top: 1px solid #293c53;
    color: #849bb7;
    font-size: 12px;
}

.site-footer p,
footer p {
    margin: 3px 0;
}

.site-footer a,
footer a {
    color: #79baff;
}

/* ==========================================
   LARGE DESKTOP / WQHD
   ========================================== */

@media (min-width: 1101px) {
    .site-main:has(
        .hero-section + .homepage-modules
    ) {
        flex: 1 0 auto;
        min-height: calc(100dvh - 155px);
    }

    .site-main:has(
        .hero-section + .homepage-modules
    ) .hero-section {
        flex: 1 0 auto;
        min-height: 350px;
        background-size: 100% auto;
        background-position: 62% 18%;
    }

    .site-main:has(
        .hero-section + .homepage-modules
    ) .homepage-modules {
        flex: 0 0 auto;
        min-height: 0;
    }
}

/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 1100px) {
    .site-header {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .site-header .brand {
        font-size: 26px;
    }

    .site-nav,
    .site-header nav {
        gap: 15px;
    }

    .homepage-modules {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        flex: 0 0 auto;
    }

    .hero-section {
        min-height: 350px;
        padding: 50px 30px;
        background-size: cover;
        background-position: 60% center;
    }
}

/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 650px) {
    .site-header {
        padding: 15px 12px;
        flex-direction: column;
        gap: 12px;
    }

    .site-header .brand {
        font-size: 25px;
    }

    .site-nav,
    .site-header nav {
        gap: 12px;
        padding: 5px;
    }

    .site-nav a,
    .site-header nav a {
        font-size: 11px;
    }

    .header-actions {
        gap: 20px;
    }

    .site-main {
        width: 100%;
        padding: 10px 12px 0;
    }

    .hero-section {
        min-height: 300px;
        padding: 35px 20px;
        background-size: cover;
        background-position: 58% center;
    }

    .hero-section h1 {
        font-size: 32px;
        letter-spacing: 2px;
    }

    .hero-section p {
        font-size: 15px;
    }

    .homepage-modules {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .homepage-module {
        min-height: 0;
    }

    .server-status {
        max-width: 100%;
        margin: 0;
    }

    .fantasy-panel {
        padding: 14px;
    }

    .news-page {
        padding: 14px 0 30px;
    }

    .news-page-heading,
    .patchnotes-card {
        padding: 20px 16px;
    }

    .news-preview-scroll {
        height: 185px;
        flex: 0 0 auto;
    }

    .site-footer,
    footer {
        margin-top: 4px;
    }
}

/* ==========================================
   END OF ELDEROS STYLESHEET
   ========================================== */