body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #fff; /* Base background */
    color: #333; /* Base text color */
}

/* Add max-width for content on larger screens */
body > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Add some padding */
    padding-right: 15px;
}

header, footer {
    background-color: #f8f9fa; /* Lighter gray */
    padding: 1em 0; /* Adjust padding */
    /* text-align: center; Removed to allow flex alignment */
}

/* Header Navigation */
header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Use flexbox */
    /* justify-content: center; /* Removed - we want items to fill space */
    width: 100%; /* Ensure ul takes full width */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    border: 1px solid #ddd; /* Optional: Add border around the nav bar */
    border-radius: 4px; /* Optional: Rounded corners for the bar */
    overflow: hidden; /* Ensure child borders fit nicely */
}

header nav li {
    flex-grow: 1; /* Allow items to grow equally */
    text-align: center; /* Center the text within the li */
    /* margin: 0 15px; */ /* Removed margin */
    border-left: 1px solid #ddd; /* Add separators between buttons */
}
header nav li:first-child {
    border-left: none; /* Remove separator from the first item */
}


/* Style for nested dropdown (basic) - This is no longer used but kept for reference */
header nav ul ul {
    display: none; /* Hide by default */
    position: absolute;
    background-color: #f0f0f0;
    padding: 10px;
    list-style: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
header nav li:hover > ul {
    display: block; /* Show on hover */
}
header nav ul ul li {
    margin: 5px 0;
    display: block; /* Stack vertically */
}


/* Styling the main nav links as buttons */
header nav > ul > li > a { /* Target only top-level links */
    display: block; /* Make link fill the li */
    padding: 10px 15px; /* Button padding */
    text-decoration: none;
    color: #005f73; /* Changed to Deep Teal/Blue */
    background-color: #f8f9fa; /* Light background */
    transition: background-color 0.2s ease; /* Smooth hover effect */
}
header nav > ul > li > a:hover {
    background-color: #e9ecef; /* Slightly darker on hover */
    color: #004c5c; /* Changed to Darker Teal/Blue */
    text-decoration: none; /* Ensure no underline on hover */
}

/* Keep footer nav links styled differently if needed */
footer nav a {
    text-decoration: none;
    color: #5a6268; /* Changed to Darker Gray */
    font-size: 0.9em;
    padding: 5px 0; /* Original padding for footer */
}
footer nav a:hover {
    text-decoration: underline; /* Allow underline for footer links */
}


.hero {
    background-color: #e9d8a6; /* Changed to Muted Gold/Beige */
    color: #333; /* Changed to Dark Gray */
    padding: 2em 15px;
    text-align: center;
    margin-bottom: 20px; /* Add space below hero */
}

.hero h2 {
    margin-top: 0;
}

.hero button {
    background-color: #005f73; /* Changed to Deep Teal/Blue */
    color: white;
    font-weight: bold;
    padding: 12px 25px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1em;
}
.hero button:hover {
    background-color: #004c5c; /* Changed to Darker Teal/Blue */
}

main {
    padding: 0 15px; /* Consistent padding */
}

.featured-posts {
    padding: 20px 0; /* Adjust padding */
    border-bottom: 1px solid #eee; /* Separator */
    margin-bottom: 20px;
}
.featured-posts h2 {
    text-align: center;
    margin-bottom: 1em;
}

.featured-posts ol {
    list-style-type: decimal;
    padding-left: 20px;
}
.featured-posts li {
    margin-bottom: 1em;
}

.newsletter {
    background-color: #e9ecef; /* Slightly different gray */
    padding: 30px 15px;
    text-align: center;
    margin-top: 20px;
}
.newsletter h2 {
    margin-top: 0;
}

.newsletter input[type="email"] {
    padding: 12px;
    border: 1px solid #ccc;
    margin-right: 5px;
    border-radius: 4px;
    min-width: 250px;
}

.newsletter button {
    background-color: #005f73; /* Changed to Deep Teal/Blue */
    color: white;
    padding: 12px 25px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
}
.newsletter button:hover {
    background-color: #004c5c; /* Changed to Darker Teal/Blue */
}


/* Blog Post Specific Styles */
article {
    padding-bottom: 20px;
}

article h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

.post-meta {
    font-style: normal; /* Remove italic */
    font-size: 0.9em;
    color: #5a6268; /* Changed to Darker Gray */
    margin-bottom: 1.5em;
    border-bottom: 1px solid #eee;
    padding-bottom: 1em;
}

.toc {
    background-color: #f8f9fa;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.toc h2 {
    margin-top: 0;
    font-size: 1.2em;
}
.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc li {
    margin-bottom: 5px;
}

.toc a {
    text-decoration: none;
    color: #005f73; /* Changed to Deep Teal/Blue */
}
.toc a:hover {
    text-decoration: underline;
}

article section {
    margin-bottom: 2em;
}

article h2 {
    font-size: 1.5em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3em;
    margin-bottom: 1em;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}
th, td {
    border: 1px solid #dee2e6;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f8f9fa;
}

.pros-cons {
    display: flex;
    gap: 20px;
}
.pros-cons > div {
    flex: 1;
}
.pros-cons h3 {
    margin-top: 0;
    font-size: 1.1em;
}
.pros-cons ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}
.pros-cons .pros li { color: #2a9d8f; } /* Changed to Complementary Teal/Green */
.pros-cons .cons li { color: #e76f51; } /* Changed to Muted Terracotta/Red */

.faq-section {
    margin-top: 20px;
}

.faq-question {
    cursor: pointer;
    background-color: #e9ecef;
    padding: 12px;
    margin-bottom: 2px; /* Reduce gap */
    font-weight: bold;
    border-radius: 3px;
}
.faq-question:hover {
    background-color: #d6d8db;
}

.faq-answer {
    padding: 15px;
    border: 1px solid #d6d8db;
    border-top: none; /* Remove top border as question has bottom margin */
    display: none; /* Initially hide answers */
    background-color: #f8f9fa;
    margin-bottom: 10px;
    border-radius: 0 0 3px 3px;
}

/* Footer Navigation */
footer nav ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0; /* Add space above */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
footer nav li {
    margin: 0 10px; /* Spacing for footer links */
}
footer nav a {
    color: #5a6268; /* Changed to Darker Gray */
    font-size: 0.9em;
}
footer p { /* Style the disclaimer */
    font-size: 0.9em;
    color: #5a6268; /* Changed to Darker Gray */
    margin-bottom: 10px;
}


/* Deals Page Specific */
.deals-countdown {
    font-size: 1.2em;
    font-weight: bold;
    color: #e76f51; /* Changed to Muted Terracotta/Red */
    text-align: center;
    margin-bottom: 1em;
}

/* 404 Page */
.error-message {
    text-align: center;
    font-size: 1.5em;
    color: #e76f51; /* Changed to Muted Terracotta/Red */
    margin-top: 40px;
}
.error-message a {
    color: #005f73; /* Changed to Deep Teal/Blue */
}

/* Category Page Styles */
.subcategories {
    margin-bottom: 20px;
    text-align: center;
}

.subcategories a {
    display: inline-block;
    padding: 8px 15px;
    background-color: #e9ecef;
    text-decoration: none;
    color: #005f73; /* Changed to Deep Teal/Blue */
    margin: 5px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.subcategories a:hover {
    background-color: #d6d8db;
}

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

/* Medium screens (tablets, smaller laptops) */
@media (max-width: 992px) {
    article h1 {
        font-size: 1.8em;
    }
    article h2 {
        font-size: 1.4em;
    }
    .pros-cons {
        flex-direction: column; /* Stack pros and cons */
    }
}

/* Small screens (phones) */
@media (max-width: 768px) {
    header nav ul {
        justify-content: space-around; /* Spread out a bit more */
    }
    header nav li {
        margin: 5px 10px; /* Adjust spacing */
    }
    .hero h2 {
        font-size: 1.5em;
    }
    .hero button {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    .newsletter input[type="email"] {
        min-width: auto; /* Allow shrinking */
        width: 80%;
        margin-bottom: 10px;
    }
    .newsletter button {
        width: 80%;
        padding: 10px 20px;
    }
    article h1 {
        font-size: 1.5em;
    }
    article h2 {
        font-size: 1.3em;
    }
    footer nav ul {
        flex-direction: column; /* Stack footer links */
        align-items: center;
    }
    footer nav li {
        margin: 5px 0;
    }
}

/* Very small screens */
@media (max-width: 576px) {
    body {
        font-size: 14px; /* Slightly smaller base font */
    }
    header h1 {
        font-size: 1.8em;
    }
    header nav li {
        margin: 5px; /* Further reduce spacing */
    }
    .hero {
        padding: 1.5em 10px;
    }
    .hero h2 {
        font-size: 1.3em;
    }
    .newsletter input[type="email"],
    .newsletter button {
        width: 90%;
    }
    article h1 {
        font-size: 1.4em;
    }
    article h2 {
        font-size: 1.2em;
    }
}