/* ============================================================
   DarkenedSkies – Minimal Custom Theme
   Goal: keep header/nav stock, theme content + hero + footer
   ============================================================ */

/* ---------- Global background + text ---------- */

body {
    background: radial-gradient(circle at top, #111322 0%, #050712 40%, #000 100%) fixed;
    color: #e5e7eb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

a {
    color: #c084fc;
}

a:hover {
    color: #e9d5ff;
}

/* ---------- Content layout ---------- */

#content {
    margin-top: 2rem;
}

/* Dark glass cards ONLY inside content (don’t touch header/nav) */
#content .ui.segment,
#content .ui.segments .segment {
    background: rgba(9, 13, 31, 0.96) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.9) !important;
    color: #e5e7eb !important;
}

/* Don’t double-box nested segments */
#content .ui.segment .ui.segment {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

h1, h2, h3, h4 {
    color: #f9fafb !important;
}

/* ---------- IE warning message ---------- */

#content .ui.message {
    background: rgba(248, 113, 113, 0.06) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(248, 113, 113, 0.4) !important;
    color: #fecaca !important;
}

/* ---------- DS Hero Panel (your custom hero) ---------- */

.ds-hero {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 2rem 2.5rem;
    background:
        radial-gradient(circle at 10% 0%, rgba(224, 180, 255, 0.28), transparent 60%),
        radial-gradient(circle at 100% 0%, rgba(15, 23, 42, 0.9), transparent 55%),
        linear-gradient(135deg, #050712, #020308);
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.95),
        0 0 32px rgba(192, 132, 252, 0.4);
}

.ds-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
}

.ds-hero-left {
    display: flex;
    gap: 1.8rem;
    align-items: center;
}

.ds-logo-circle {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 0%, #ffffff, #f9fafb00),
        radial-gradient(circle at 80% 120%, #c084fc, #4c1d95);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 30px rgba(192, 132, 252, 0.9),
        0 18px 40px rgba(0, 0, 0, 0.9);
}

.ds-logo-circle img {
    max-width: 70%;
    max-height: 70%;
}

.ds-hero-topline {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.ds-hero-title {
    font-size: 1.95rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.ds-hero-sub {
    font-size: 0.95rem;
    color: #9ca3af;
    max-width: 26rem;
}

.ds-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.9rem;
}

/* Right side stats grid */
.ds-hero-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    min-width: 270px;
}

.ds-chip {
    background: rgba(5, 8, 22, 0.98);
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    padding: 0.7rem 0.9rem;
    font-size: 0.83rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.9);
}

.ds-chip-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #9ca3af;
    margin-bottom: 0.1rem;
}

.ds-chip-value {
    font-weight: 600;
}

.ds-chip-online {
    color: #4ade80;
}

/* ---------- Homepage spacing ---------- */

.ui.stackable.grid > .column {
    margin-bottom: 1.2rem;
}

/* “Welcome to NamelessMC” news box */
.news_post .content,
#portal_home .news_post .content {
    background: transparent !important;
}

/* ---------- Cookie notice ---------- */

#cookieNotice,
#cookieNotice .ui.segment {
    background: rgba(15, 23, 42, 0.98) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
    color: #e5e7eb !important;
}

/* ---------- Footer ---------- */

.ds-footer {
    text-align: center;
    padding: 2rem 0;
    margin-top: 4rem;
    background: rgba(5, 8, 22, 0.98);
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    color: #9ca3af;
    font-size: 0.9rem;
}

.ds-footer strong {
    color: #f9fafb;
}

/* ---------- Hover polish ---------- */

.ds-chip,
#content .ui.segment,
#content .ui.card {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ds-chip:hover,
#content .ui.segment:hover,
#content .ui.card:hover {
    transform: translateY(-2px);
    border-color: rgba(192, 132, 252, 0.95) !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 1) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .ds-hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .ds-hero-right {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }
}

@media (max-width: 600px) {
    .ds-hero {
        padding: 1.5rem 1.4rem;
    }

    .ds-hero-title {
        font-size: 1.6rem;
    }
}

/* ===== Expand main page width (fix skinny layout) ===== */

/* Make all main containers significantly wider */
.ui.container,
#content > .ui.container,
#content > .ui.grid,
#content > .ui.stackable.grid {
    width: 100% !important;
    max-width: 1500px !important;   /* adjust this number to taste */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Make Hero full-width inside the max container */
.ds-hero {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

/* Make segments/cards expand wider */
.ui.segment,
.ui.card,
.news_post,
#portal_home .news_post .content {
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}