/*
 * Main stylesheet for R.E.P.O. Wiki
 *
 * This file centralises the common look and feel across all pages of the site.
 * It defines colour variables, resets, typography, layout for the header,
 * navigation, hero section, content cards, stats, tables, updates and footer.
 * By referencing this stylesheet from each HTML page, we avoid duplicating
 * styles and simplify maintenance. When you update colours or spacing here,
 * all pages will pick up the change automatically.
 */

/* Colour palette */
:root {
    --primary: #dc2626;
    --primary-dark: #b91c1c;
    --secondary: #ea580c;
    --accent: #fbbf24;
    --bg: #0a0a0a;
    --bg-card: #111111;
    --bg-muted: #1a1a1a;
    --border: #262626;
    --text: #ffffff;
    --text-muted: #a3a3a3;
    --text-dim: #737373;
}

/* Global reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: white;
    font-size: 18px;
}

.logo-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
    flex-wrap: wrap;
}

nav a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
}

nav a:hover {
    background: var(--bg-muted);
    color: var(--text);
}

/* Language selector */
.lang-select {
    background: var(--bg-muted);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    margin-left: auto;
}

/* Hero Section */
.hero {
    padding: 80px 0;
    text-align: center;
    background: linear-gradient(135deg, var(--bg) 0%, var(--bg-muted) 100%);
}

.hero h1 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 56px;
    margin-bottom: 16px;
    color: var(--text);
    font-weight: 700;
}

.hero .subtitle {
    font-size: 20px;
    color: var(--accent);
    margin-bottom: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero p {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.3);
}

/* Main Content */
.main-content {
    padding: 60px 0;
}

.section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 36px;
    text-align: center;
    margin-bottom: 48px;
    color: var(--primary);
    font-weight: 600;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 60px;
}

.content-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 32px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.content-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.1);
}

.card-icon {
    font-size: 32px;
    margin-bottom: 16px;
    display: block;
}

.content-card h3 {
    color: var(--text);
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 600;
}

.content-card p {
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.card-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

.card-link:hover {
    color: var(--secondary);
}

.status-badge {
    background: rgba(234, 88, 12, 0.1);
    border: 1px solid var(--secondary);
    border-radius: 16px;
    padding: 4px 12px;
    color: var(--secondary);
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    margin-top: 12px;
    text-transform: uppercase;
}

/* Stats Section */
.stats-section {
    background: var(--bg-card);
    padding: 48px 32px;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin: 60px 0;
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}

.stat-item {
    padding: 24px;
}

.stat-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
    display: block;
    margin-bottom: 8px;
}

.stat-label {
    color: var(--text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Content Sections */
.content-section {
    margin: 48px 0;
}

.content-section h2 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 600;
}

.content-section h3 {
    font-size: 20px;
    color: var(--text);
    margin: 24px 0 16px 0;
    font-weight: 600;
}

/* Monsters table */
.monster-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.monster-table th,
.monster-table td {
    border: 1px solid var(--border);
    padding: 8px 12px;
}

.monster-table th {
    background: var(--bg-muted);
    color: var(--text);
    font-weight: 600;
    text-align: left;
}

.monster-table td {
    color: var(--text-muted);
}

.content-section p {
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.7;
}

.content-section ul,
.content-section ol {
    color: var(--text-muted);
    margin-bottom: 16px;
    padding-left: 24px;
}

.content-section li {
    margin-bottom: 8px;
}

/* Updates Section */
.recent-updates {
    background: var(--bg-card);
    padding: 32px;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin: 48px 0;
}

/* Style the update items as full‑row links.  Each update is an anchor element
   spanning the entire row, allowing users to click anywhere to open the article. */
.recent-updates a.update-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.recent-updates a.update-item:last-child {
    border-bottom: none;
}

/* On hover, emphasise the title while keeping the date subtle */
.recent-updates a.update-item:hover .update-title {
    color: var(--primary);
}

.recent-updates h3 {
    color: var(--primary);
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 600;
}

.update-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.update-item:last-child {
    border-bottom: none;
}

.update-title {
    color: var(--text);
    font-weight: 500;
}

.update-date {
    color: var(--text-dim);
    font-size: 14px;
    font-family: 'JetBrains Mono', monospace;
}

/* Footer */
footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 48px 0;
    text-align: center;
    margin-top: 60px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-content p {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 8px;
}

/* Responsive design */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }
    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
    .hero h1 {
        font-size: 40px;
    }
    .hero .subtitle {
        font-size: 16px;
    }
    .content-grid {
        grid-template-columns: 1fr;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .section-title {
        font-size: 28px;
    }
    .container {
        padding: 0 16px;
    }
    .update-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Base typography for non‑hero content
   Many auxiliary pages (about, contact, privacy, terms, updates, monsters) do not define
   their own heading or body styles.  Without explicit rules, these pages inherit the
   default text colour from the body (`var(--text)`), making paragraphs and subheadings
   appear overly bright on a dark background.  To ensure consistent readability across
   the site, we define typographic styles scoped to the `<main>` element.  These rules
   soften body text, provide adequate spacing and align headings with the overall
   design. */

main h1,
main h2,
main h3 {
    color: var(--text);
    margin-bottom: 0.5rem;
    line-height: 1.25;
}

main p {
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-size: 16px;
}

main ul,
main ol {
    color: var(--text-muted);
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

main li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .footer-links {
        flex-direction: column;
        gap: 16px;
    }
}

/* Unified link styling for main content.
   Without this rule, anchor tags inside articles and update pages inherit the browser's default
   colour (blue) which clashes with our dark theme.  We restrict the selector to anchors
   within the <main> element and exclude card links to preserve the cards' custom styles. */
main a:not(.card-link) {
    color: var(--primary);
    text-decoration: underline;
    transition: color 0.2s ease;
}
main a:not(.card-link):hover {
    color: var(--primary-dark);
}
/* Disabled card links used in resource cards.  They appear muted and cannot be clicked. */
.card-link.disabled {
    color: var(--text-dim);
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none;
}