/*
    Modern CSS Reset & CSS Variables
    Using variables makes theme switching extremely efficient.
*/
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Smooth transition for theme change */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ---------------------------------------------------- */
/* 1. LIGHT MODE (DEFAULT) COLOR VARIABLES              */
/* ---------------------------------------------------- */
:root {
    --color-bg-body: #f8f8f8;
    --color-bg-main: #ffffff;
    --color-text-primary: #333;
    --color-text-secondary: #666;
    --color-primary-blue: #0056b3;
    --color-border-main: #ddd;
    --color-border-header: var(--color-primary-blue);
    --color-bg-nav: #f2f7fd;
    --color-border-nav-title: #c0c0c0;
    --color-link: var(--color-primary-blue);
    --color-link-hover: #004085;

    /* Warning/Critical Colors */
    --color-warning: #e67e22;
    --color-bg-warning-box: #fffbe6;
    --color-border-warning-box: #ffc107;
    --color-callout-bg: #fff3cd;
    --color-callout-text: #856404;

    --color-critical: #c0392b;
    --color-bg-critical-box: #fbe6e6;
    --color-border-critical-box: var(--color-critical);
}

/* ---------------------------------------------------- */
/* 2. DARK MODE (OVERRIDE) COLOR VARIABLES              */
/* ---------------------------------------------------- */
body.dark-mode {
    --color-bg-body: #121212;
    --color-bg-main: #1e1e1e;
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #b0b0b0;
    --color-primary-blue: #7bb5ff; /* Lighter blue for dark theme contrast */
    --color-border-main: #333;
    --color-border-header: #7bb5ff;
    --color-bg-nav: #252525;
    --color-border-nav-title: #555;
    --color-link: #7bb5ff;
    --color-link-hover: #a0c9ff;

    /* Dark Mode Warning/Critical Colors */
    --color-warning: #ff8c42; /* Lighter orange */
    --color-bg-warning-box: #36291a;
    --color-border-warning-box: #e67e22;
    --color-callout-bg: #36291a;
    --color-callout-text: #ffd38a; /* Lighter text for contrast on dark background */

    --color-critical: #ff5e5e; /* Lighter red */
    --color-bg-critical-box: #3d1c1c;
    --color-border-critical-box: #c0392b;
}

/* ---------------------------------------------------- */
/* 3. GENERAL STYLES - USING VARIABLES                  */
/* ---------------------------------------------------- */
body {
    font-family: 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-body);
}

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--color-bg-main);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Dark mode shadow adjustment */
body.dark-mode main {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Header/Title */
header {
    text-align: center;
    padding: 40px 0 20px;
    border-bottom: 3px solid var(--color-border-header);
    margin-bottom: 40px;
    position: relative; /* For the toggle button positioning */
}

header h1 {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--color-primary-blue);
    letter-spacing: -0.5px;
}

/* Theme Toggle Button Styling */
#theme-toggle {
    position: absolute;
    top: 25px;
    right: 20px;
    background: var(--color-bg-nav);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-main);
    padding: 10px 15px;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#theme-toggle:hover {
    background: var(--color-border-main);
}

/* Navigation/Timeline (Table of Contents) */
nav {
    margin-bottom: 50px;
    padding: 20px;
    background-color: var(--color-bg-nav);
    border-radius: 8px;
}

nav h2 {
    font-size: 1.3em;
    margin-bottom: 15px;
    color: var(--color-primary-blue);
    border-bottom: 1px dashed var(--color-border-nav-title);
    padding-bottom: 5px;
}

.timeline-list {
    list-style-type: none;
}

.timeline-list > li {
    margin-bottom: 15px;
    font-size: 1.1em;
}

.sub-list {
    list-style-type: none;
    padding-left: 20px;
    margin-top: 5px;
}

/* Highlight warning items in the timeline */
.sub-list li.warning a {
    color: var(--color-warning);
    font-weight: bold;
}

.sub-list li.critical a {
    color: var(--color-critical);
    font-weight: bold;
}

/* Main Review Entry Styles */
.review-entry, .update-section {
    padding: 30px 0;
    border-top: 1px solid var(--color-border-main);
}

/* Date */
.initial-post time, .update-date {
    color: var(--color-primary-blue);
}
.initial-post time {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Update section date/heading */
.update-date {
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--color-border-main);
    padding-bottom: 5px;
}

/* Paragraph spacing */
p {
    margin-bottom: 1.5em;
    text-align: justify;
}

/* Callout text style for important advice */
.callout-text {
    font-style: italic;
    background-color: var(--color-callout-bg);
    border-left: 5px solid var(--color-border-warning-box);
    padding: 15px;
    margin: 20px 0;
    color: var(--color-callout-text);
}

.small-text {
    font-size: 0.9em;
    color: var(--color-text-secondary);
    margin-top: -1em;
}

/* Special Boxes for Warnings and Conclusions */
.warning-box {
    border: 1px solid var(--color-border-warning-box);
    background-color: var(--color-bg-warning-box);
    padding: 20px;
    margin-top: 40px;
    border-radius: 8px;
}

.critical-box {
    border: 1px solid var(--color-border-critical-box);
    background-color: var(--color-bg-critical-box);
    padding: 20px;
    margin-top: 40px;
    border-radius: 8px;
}

.critical-box .update-date {
    color: var(--color-critical);
    border-bottom-color: var(--color-critical);
}

/* Link Styles */
a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: var(--color-link-hover);
}

/* Footer */
footer {
    border-top: 3px solid var(--color-border-main);
    padding-top: 30px;
    margin-top: 50px;
    text-align: center;
}

.contact-info {
    font-size: 1.1em;
    color: var(--color-text-secondary);
}