/* ============================================
   CSS Detective Challenge — Independent Practice
   This stylesheet has 7 intentional bugs
   across multiple categories. Can you find
   and fix them all?

   Bug categories:
     - Loading / linking issues
     - Syntax errors
     - Selector mismatches
     - Specificity conflicts
     - Value errors

   Use DevTools to diagnose each one.
   Document your fixes in HTML comments when done.
   ============================================ */

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

body {
    font-family: Georgia, serif;
    line-height: 1.6;
    color: #333;
}

/* ── Header ────────────────────────────────── */

/* BUG 1: Missing semicolon on first property */
.site-header {
    background-color: #1a1a2e
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header h1 {
    color: #e0e0e0;
    font-size: 1.8rem;
}

/* ── Navigation ────────────────────────────── */

/* BUG 2: Selector typo — HTML uses "main-nav", CSS says "main_nav" */
.main_nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.main-nav a {
    color: #e0e0e0;
    text-decoration: none;
}

.main-nav a:hover {
    color: #ffd700;
}

/* ── Hero Section ──────────────────────────── */

/* BUG 3: Missing closing bracket */
.hero {
    background-color: #16213e;
    color: white;
    text-align: center;
    padding: 4rem 2rem;

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* BUG 4: Space in value breaks the property */
.tagline {
    font-size: 1.2 rem;
    font-style: italic;
    opacity: 0.9;
}

/* ── Content Area ──────────────────────────── */
.content {
    display: flex;
    gap: 2rem;
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.featured-post {
    flex: 2;
}

.featured-post h3 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.post-meta {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* BUG 5: Specificity conflict — this element selector loses to the
   more specific rule below, so the link stays dark */
a.read-more {
    color: #e94560;
    font-weight: bold;
    text-decoration: none;
}

.featured-post .read-more {
    color: #333;
}

/* ── Sidebar ───────────────────────────────── */
.sidebar {
    flex: 1;
}

.widget {
    background: #f8f8f8;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
}

.widget h4 {
    margin-bottom: 0.75rem;
    color: #1a1a2e;
}

/* BUG 6: Missing colon in property declaration */
.topic-list {
    list-style none;
    padding-left: 0;
}

.topic-list li {
    padding: 0.3rem 0;
    border-bottom: 1px solid #e0e0e0;
}

/* BUG 7: !important overrides intended button styling — the
   widget rule forces white text but the button should be white
   bg with dark text */
.newsletter {
    background: #1a1a2e !important;
    color: white !important;
}

.subscribe-btn {
    background: white;
    color: #1a1a2e;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

/* ── Footer ────────────────────────────────── */
.site-footer {
    background: #1a1a2e;
    color: #999;
    text-align: center;
    padding: 1.5rem;
    margin-top: 3rem;
}