/* SAS Gaming Unified — design tokens + section rules
 * Selector note: WP body_class() uses `wp-child-theme-{stylesheet}` for
 * child themes (the `wp-theme-*` class is the parent). All rules scope to
 * .wp-child-theme-sasgaming-unified so they only fire when the child theme
 * is the active stylesheet.
 */
:root {
    --sas-bg-base:      #0d0e12;
    --sas-bg-panel:     #14162a;
    --sas-bg-panel-2:   #1a1a2e;
    --sas-accent:       #6B21A8;
    --sas-accent-hi:    #7c3aed;
    --sas-accent-lo:    #4c1d95;
    --sas-accent-lt:    #c4b5fd;
    --sas-text:         #ffffff;
    --sas-text-muted:   #cbd5e1;
    --sas-text-dim:     #94a3b8;
    --sas-border:       rgba(124, 58, 237, 0.30);
    --sas-border-solid: #6B21A8;

    --sas-radius:       8px;
    --sas-radius-sm:    4px;
    --sas-shadow:       0 4px 24px rgba(0, 0, 0, 0.45);

    --sas-font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --sas-font-display: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* ===== Sitewide base (only when child theme active) ===== */
body.wp-child-theme-sasgaming-unified {
    background: var(--sas-bg-base);
    color: var(--sas-text);
    font-family: var(--sas-font-body);
}
body.wp-child-theme-sasgaming-unified a {
    color: var(--sas-accent-lt);
    text-decoration: none;
}
body.wp-child-theme-sasgaming-unified a:hover {
    color: var(--sas-text);
    text-decoration: underline;
}
body.wp-child-theme-sasgaming-unified h1,
body.wp-child-theme-sasgaming-unified h2,
body.wp-child-theme-sasgaming-unified h3 {
    color: var(--sas-text);
    font-weight: 800;
}

/* Header / nav palette overrides (parent theme containers) */
body.wp-child-theme-sasgaming-unified header,
body.wp-child-theme-sasgaming-unified .site-header,
body.wp-child-theme-sasgaming-unified nav.main-navigation,
body.wp-child-theme-sasgaming-unified .menu-main-container,
body.wp-child-theme-sasgaming-unified .menu-header,
body.wp-child-theme-sasgaming-unified .top-header,
body.wp-child-theme-sasgaming-unified .logo-bg {
    background: var(--sas-bg-panel-2);
    border-bottom: 1px solid var(--sas-border);
}

/* Replace the parent theme's red "Wargame" placeholder logo with the
 * SAS icon. The parent theme renders <img class="image-logo"> inside
 * <a class="logo-image">; using `content: url(...)` lets us swap the
 * rendered image without touching the parent template. */
body.wp-child-theme-sasgaming-unified .image-logo {
    content: url("./assets/sas_icon.png") !important;
    max-height: 72px !important;
    width: auto !important;
    height: auto !important;
}
body.wp-child-theme-sasgaming-unified .logo-image {
    background: transparent;
}
/* Shrink the parent theme's logo column from col-lg-3 (25% of viewport)
 * to just enough to hug the 72px icon. Without this it renders as a wide
 * purple bar across the left quarter of the header. */
body.wp-child-theme-sasgaming-unified .logo-bg {
    flex: 0 0 auto !important;
    max-width: 96px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
body.wp-child-theme-sasgaming-unified .site-title,
body.wp-child-theme-sasgaming-unified .site-description {
    color: var(--sas-text);
}
body.wp-child-theme-sasgaming-unified nav a,
body.wp-child-theme-sasgaming-unified .menu a {
    color: var(--sas-text-muted);
}
body.wp-child-theme-sasgaming-unified nav a:hover,
body.wp-child-theme-sasgaming-unified .menu a:hover {
    color: var(--sas-accent-lt);
}

/* Footer palette overrides */
body.wp-child-theme-sasgaming-unified footer,
body.wp-child-theme-sasgaming-unified .site-footer {
    background: var(--sas-bg-panel-2);
    color: var(--sas-text-muted);
    border-top: 1px solid var(--sas-border);
}
body.wp-child-theme-sasgaming-unified .site-footer a {
    color: var(--sas-accent-lt);
}

/* ===== Page chrome (NOT content body) =====
 * The parent theme renders .post-content as a white card with default
 * dark text — keep that for readability and parity with the editor view.
 * The unified palette applies to the page chrome around the content
 * (header, hero strip, sidebars, footer), not the content card itself.
 *
 * Page hero strip: parent uses div#banner above the content card to
 * hold the page title <h1>. Give it a subtle dark gradient so the
 * heading lands on something instead of bleeding into transparent. */
body.wp-child-theme-sasgaming-unified #banner {
    background: linear-gradient(180deg, var(--sas-bg-panel-2) 0%, var(--sas-bg-base) 100%);
    border-bottom: 1px solid var(--sas-border);
}
body.wp-child-theme-sasgaming-unified .post-title {
    color: var(--sas-text) !important;
}

/* The body has color: #fff for the homepage hero/cards, but inside the
 * white .post-content card that bleeds onto <li>, <td>, <dd>, etc.
 * (parent only colors <p>). Reset content text to dark so lists and
 * table cells read on the white card while leaving the parent's
 * `.post-content p { color: #707070 }` rule alone for paragraphs. */
body.wp-child-theme-sasgaming-unified .post-content,
body.wp-child-theme-sasgaming-unified .entry-content,
body.wp-child-theme-sasgaming-unified .page-content {
    color: #333;
}
body.wp-child-theme-sasgaming-unified .post-content li,
body.wp-child-theme-sasgaming-unified .post-content dd,
body.wp-child-theme-sasgaming-unified .post-content td,
body.wp-child-theme-sasgaming-unified .entry-content li,
body.wp-child-theme-sasgaming-unified .entry-content dd,
body.wp-child-theme-sasgaming-unified .entry-content td {
    color: #333;
}
body.wp-child-theme-sasgaming-unified .post-content h1,
body.wp-child-theme-sasgaming-unified .post-content h2,
body.wp-child-theme-sasgaming-unified .post-content h3,
body.wp-child-theme-sasgaming-unified .post-content h4,
body.wp-child-theme-sasgaming-unified .post-content h5,
body.wp-child-theme-sasgaming-unified .post-content h6 {
    color: #1a1a2e;
}
body.wp-child-theme-sasgaming-unified .post-content a {
    color: var(--sas-accent);  /* dark purple — readable on white */
}
body.wp-child-theme-sasgaming-unified .post-content a:hover {
    color: var(--sas-accent-hi);
}

/* Hide parent theme's top menu/header on the homepage only — the
 * 3 portal cards (Guild · Wiki · Game Servers) provide navigation
 * there. Keep it on subpages so visitors can still get back home. */
body.home.wp-child-theme-sasgaming-unified .menu-header,
body.home.wp-child-theme-sasgaming-unified .top-header {
    display: none !important;
}

/* ===== Banner ===== */
.sas-front { max-width: 1100px; margin: 0 auto; padding: 0 16px 32px; }

.sas-banner-wrap { padding: 24px 0 0; }
.sas-banner {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid var(--sas-border-solid);
    border-radius: var(--sas-radius-sm);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.30);
}
.sas-banner img { display: block; width: 100%; height: auto; }

/* ===== Stats strip ===== */
.sas-stats-wrap { margin: 14px auto 0; max-width: 1100px; }
.sas-stats {
    padding: 10px 16px;
    background: rgba(107, 33, 168, 0.18);
    border-top: 1px solid var(--sas-border-solid);
    border-bottom: 1px solid var(--sas-border-solid);
    color: var(--sas-text);
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.sas-stats strong { color: var(--sas-accent-lt); font-weight: 700; }
.sas-stats .dot   { color: var(--sas-accent-hi); margin-right: 6px; }
.sas-stats .sep   { opacity: 0.5; margin: 0 8px; }
.sas-stats.stale  { opacity: 0.65; font-style: italic; }

/* ===== Welcome blurb + video split ===== */
.sas-welcome {
    margin: 22px auto;
    padding: 0 16px;
    display: grid;
    gap: 22px;
    grid-template-columns: 1.4fr 1fr;
}
.sas-welcome .copy h2 {
    margin: 0 0 8px;
    font-size: 22px;
    letter-spacing: 0.02em;
}
.sas-welcome .copy p {
    margin: 0;
    line-height: 1.6;
    font-size: 14px;
    color: var(--sas-text-muted);
}
.sas-welcome .video {
    aspect-ratio: 16/9;
    background: var(--sas-bg-panel-2);
    border: 1px dashed var(--sas-border);
    border-radius: var(--sas-radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sas-accent-lt);
    font-size: 13px;
}
.sas-welcome .video iframe,
.sas-welcome .video video { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 720px) {
    .sas-welcome { grid-template-columns: 1fr; }
}

/* ===== Three portal cards ===== */
.sas-portals {
    margin: 0 auto 22px;
    padding: 0 16px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, 1fr);
}
.sas-portal {
    display: block;
    padding: 18px 16px;
    background: var(--sas-accent);
    border: 1px solid var(--sas-accent-hi);
    border-radius: var(--sas-radius-sm);
    color: var(--sas-text);
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.30);
}
.sas-portal:hover,
.sas-portal:focus-visible {
    background: var(--sas-accent-hi);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--sas-text);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.30);
}
.sas-portal small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: none;
}
@media (max-width: 720px) {
    .sas-portals { grid-template-columns: 1fr; }
}

/* ===== Activity row ===== */
.sas-activity {
    margin: 0 auto 22px;
    padding: 0 16px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, 1fr);
}
.sas-activity .tile {
    background: rgba(107, 33, 168, 0.06);
    border: 1px dashed var(--sas-border);
    border-radius: var(--sas-radius-sm);
    padding: 14px 16px;
    color: var(--sas-text-muted);
    font-size: 13px;
}
.sas-activity .tile h3 {
    margin: 0 0 8px;
    color: var(--sas-accent-lt);
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 700;
}
.sas-activity ul { list-style: none; margin: 0; padding: 0; }
.sas-activity li { margin: 0 0 6px; line-height: 1.5; }
.sas-activity li time { color: var(--sas-text-dim); font-size: 11px; margin-right: 6px; }
.sas-activity .empty { color: var(--sas-text-dim); font-style: italic; }
@media (max-width: 720px) {
    .sas-activity { grid-template-columns: 1fr; }
}