/* Custom CSS optimized for PWA, performance, and SEO */

:root {
    --gap: clamp(16px, 2vw, 24px);
    --content-gap: clamp(20px, 3vw, 32px);
    --nav-width: min(1024px, 95vw);
    --main-width: min(900px, 95vw);
    --header-height: 60px;
    --footer-height: 40px;
    --radius: 10px;
    /* Light palette (neutral, not greenish) */
    --theme: #f5f7fb; /* page background */
    --entry: #ffffff; /* card background */
    --primary: #1f2937; /* text */
    --secondary: #6b7280; /* secondary text */
    --tertiary: #94a3b8; /* subtle */
    --content: #1f2937;
    --hljs-bg: #f6f7f9; /* code block bg */
    --code-bg: #f6f7f9; /* align with page to avoid tint */
    --border: #e6eaf0;
    --font-scale: clamp(1rem, 2vw, 1.2rem);
    --spacing-unit: max(1rem, 2vw);
    --serif-fonts: "Georgia", "Times New Roman", "Times", serif;
    --monospace-fonts:
        "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono",
        "Courier New", monospace;
    --base-font-size: clamp(1.06rem, 0.9rem + 0.5vw, 1.25rem);
    --base-line-height: 1.6;
}

.dark {
    /* Dark palette (Twitter X "Lights Out") */
    --theme: #000000; /* page background */
    --entry: #16181c; /* card background */
    --primary: #e7e9ea; /* text */
    --secondary: #8b98a5; /* secondary text */
    --tertiary: #2f3336; /* subtle/borders */
    --content: #e7e9ea;
    --hljs-bg: #0b0d0f; /* code block bg */
    --code-bg: #0b0d0f; /* code inline/bg */
    --border: #2f3336; /* borders */
}

/* Ensure list pages use page background color (not code-bg) */
.list {
    background: var(--theme) !important;
}

/* Link colors (dark mode: match X accent) */
.dark .post-content a,
.dark .entry-content a,
.dark .footer a {
    color: #1d9bf0;
}
@media (hover: hover) and (pointer: fine) {
    .dark .post-content a:hover,
    .dark .entry-content a:hover,
    .dark .footer a:hover {
        color: #8ecbff;
    }
}

/* Base styles */
body {
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu",
        "Cantarell", "Noto Sans", "Helvetica Neue", "Arial", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    background: var(--theme);
    color: var(--primary);
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Layout */
.main {
    position: relative;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    max-width: var(--nav-width);
    margin-inline: auto;
    padding-inline: var(--gap);
    padding-block-start: calc(var(--header-height) + var(--gap));
}

/* Header and Navigation */
.header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    background-color: var(--theme);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Ensure consistent box-sizing for all elements */
* {
    box-sizing: border-box;
}

/* General Styles for nav */
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: var(--nav-width);
    margin-inline: auto;
    padding-inline: var(--gap);
    height: var(--header-height);
    align-items: center;
    position: relative;
}

.nav a {
    color: var(--primary);
    text-decoration: none;
    margin: 0;
}

.logo a {
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    font-size: 20px;
}

/* Skip to main content link - Visually hide until focused */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary);
    color: #fff;
    padding: 0.5em 1em;
    z-index: 200;
    border-radius: var(--radius);
    font-size: 1rem;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}
.skip-link:focus {
    transform: translateY(0);
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Hamburger menu styles */
#hamburger-menu {
    cursor: pointer;
    position: absolute;
    right: var(--gap);
    top: 50%;
    transform: translateY(-50%);
    /* background-color: var(--theme); /* Removed background from icon */
    padding: 5px; /* Optional: keep padding for touch area if needed */
    border-radius: 4px; /* Optional: adjust icon styling if needed */
    /* Add styles for your hamburger icon here */
}
#hamburger-menu:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
#hamburger-input {
    position: absolute;
    left: -9999px;
}
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(44, 62, 80, 0.4);
    z-index: 99;
}
.overlay.active {
    display: block;
}
.menu.active {
    display: flex !important;
}

/* Menu styles */
.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu li {
    margin-left: 20px;
}

/* Mobile and Tablet Styles (up to 1024px to include iPads) */
@media screen and (max-width: 1024px) {
    nav {
        flex-direction: column;
        align-items: flex-start;
    }

    #hamburger-menu {
        display: block;
    }

    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        background-color: var(
            --theme
        ); /* Added background to the opened menu */
        /* Optional: Add a slight shadow or border if desired */
        /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
        /* border-top: 1px solid var(--border); */
    }

    .menu.active {
        display: flex;
    }

    .menu li {
        margin: 10px 0;
    }
}

/* Desktop Styles (above 1024px) */
@media screen and (min-width: 1025px) {
    #hamburger-menu {
        display: none;
    }

    .menu {
        display: flex;
    }
}

/* Responsive font sizes for logo */
@media screen and (max-width: 375px) {
    .logo a {
        font-size: 16px;
    }
}

@media screen and (min-width: 376px) and (max-width: 414px) {
    .logo a {
        font-size: 17px;
    }
}

@media screen and (min-width: 415px) and (max-width: 768px) {
    .logo a {
        font-size: 18px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .logo a {
        font-size: 20px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) {
    .logo a {
        font-size: 22px;
    }
}

@media screen and (min-width: 1367px) {
    .logo a {
        font-size: 24px;
    }
}

/* High-resolution mobile devices */
@media screen and (max-width: 1024px) and (min-resolution: 2dppx) {
    #hamburger-menu {
        display: block;
    }
    .menu {
        display: none;
    }
    .menu.active {
        display: flex;
    }
}

/* Ensure menu visibility for all screen sizes */
@media screen {
    #hamburger-menu,
    .menu {
        visibility: visible;
    }
}

/* Hover effects for non-touch devices */
@media (hover: hover) and (pointer: fine) {
    .nav a {
        transition: color 0.3s;
    }
    .nav a:hover {
        color: var(--secondary);
    }

    .post-entry {
        transition:
            transform 0.2s,
            box-shadow 0.3s;
    }

    .post-entry:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    }

    .post-tags a,
    .pagination a,
    .terms-tags a {
        transition:
            background-color 0.3s,
            color 0.3s,
            transform 0.2s;
    }

    .post-tags a:hover,
    .pagination a:hover,
    .terms-tags a:hover {
        background: var(--border);
        transform: translateY(-2px);
    }
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--serif-fonts);
    line-height: 1.2;
    margin-block: 1.5em 0.5em;
}

h1 {
    font-size: 2.5rem;
}
h2 {
    font-size: 2.2rem;
}
h3 {
    font-size: 2rem;
}
h4 {
    font-size: 1.8rem;
}
h5 {
    font-size: 1.6rem;
}
h6 {
    font-size: 1.4rem;
}

.page-header h1,
.post-title {
    font-size: 2.5rem;
    margin-block-end: 0.5em;
    text-align: center;
}

.post-description {
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    color: var(--secondary);
    margin-block: -0.5em 1em;
    text-align: center;
}

.post-meta {
    color: var(--secondary);
    font-size: 0.95rem;
    text-align: center;
    margin-block-end: 1em;
}

.post-content {
    margin-block-start: 1.5em;
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
}

/* Content Elements */
.post-content p,
.post-content ul,
.post-content ol {
    margin-block-end: 1.2em;
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5em;
}

.post-content li {
    margin-block-end: 0.5em;
}

.post-content blockquote {
    margin-block: 1.5em;
    padding: 0.5em 1em;
    border-inline-start: 4px solid var(--border);
    background-color: var(--code-bg);
    color: var(--secondary);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.08);
}

.post-content code {
    font-family: var(--monospace-fonts);
    background: var(--code-bg);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

.post-content pre {
    background: var(--hljs-bg);
    padding: 1em;
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: 0.9em;
}

.post-content pre code {
    background: none;
    padding: 0;
}

/* Posts Grid */
.posts-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media screen and (max-width: 640px) {
    .posts-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1025px) {
    .posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.post-entry {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--entry);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin: 0; /* Remove margin for grid layouts */
}

/* Add margin back for list pages that don't use grid */
.list .post-entry {
    margin-block-end: var(--gap);
}

.post-entry .entry-cover {
    margin: 0;
    padding: 0;
}

.post-entry .entry-cover img {
    border-radius: var(--radius);
    width: 100%;
    height: auto;
    object-fit: cover;
}

.entry-header,
.entry-content,
.entry-footer {
    padding: 1em;
}

.entry-header h2 {
    font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.2rem);
    margin-block: 0 0.3em;
    text-align: center;
}

.entry-content {
    flex-grow: 1;
    font-size: 0.9rem;
    line-height: 1.4;
}

.entry-footer {
    color: var(--tertiary);
    font-size: 0.75rem;
    text-align: center;
    padding: 0.5em 0.6em;
}

.post-entry .post-date {
    display: block;
    text-align: center;
    color: var(--secondary);
    font-size: 0.95rem;
    margin-bottom: 0.5em;
}

/* Single Post */
.post-single {
    background: var(--entry);
    border-radius: var(--radius);
    padding: var(--content-gap);
    margin-block-end: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border);
    max-width: var(--main-width);
    margin-inline: auto;
}

.post-single .post-cover {
    margin: 1em auto;
    text-align: center;
    max-width: 768px; /* Adjust this value as needed */
}

.post-single .post-cover img {
    border-radius: var(--radius);
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Reduced padding for titles in single pages, tags, categories, and about pages */
.page-header,
.post-header {
    margin: 6px auto var(--content-gap);
}

/* Tags styling for single post pages */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-block: 1em;
}

.post-tags a {
    display: inline-block;
    padding: 0.3em 0.6em;
    margin: 0.2em;
    background: var(--entry);
    border-radius: var(--radius);
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    margin-block-start: var(--gap);
}

.pagination a {
    color: var(--primary);
    background: var(--entry);
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius);
    font-size: 1rem;
    transition:
        background-color 0.3s,
        color 0.3s,
        transform 0.2s;
}

.pagination a:hover {
    background: var(--border);
    color: var(--primary);
    transform: translateY(-2px);
}

/* Footer */
.footer {
    max-width: var(--nav-width);
    margin-inline: auto;
    margin-top: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: var(--secondary);
    font-size: 0.9rem;
    text-align: center;
    border-block-start: 1px solid var(--border);
}

/* Utility: ensure .hidden class exists (used by spinner) */
.hidden {
    display: none !important;
}

/* Infinite Scroll Styles */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--primary, #1f2937);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
    display: block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    margin: 1rem 0;
    background-color: #fee;
    border: 1px solid #fcc;
    border-radius: var(--radius, 4px);
    color: #c33;
    font-size: 0.9rem;
    text-align: center;
}

.error-message .retry-button {
    padding: 0.5rem 1rem;
    background-color: #c33;
    color: white;
    border: none;
    border-radius: var(--radius, 4px);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}

.error-message .retry-button:hover {
    background-color: #a22;
}

.dark .error-message {
    background-color: #4a2a2a;
    border-color: #8b3a3a;
    color: #f87171;
}

.dark .error-message .retry-button {
    background-color: #dc2626;
}

.dark .error-message .retry-button:hover {
    background-color: #b91c1c;
}

/* Tags and Categories Pages */
.terms-tags {
    text-align: center;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8em;
}

.terms-tags li {
    margin: 0.4em;
}

.terms-tags a {
    display: inline-block;
    padding: 0.5em 1em;
    background: var(--entry);
    border-radius: var(--radius);
    color: var(--primary);
    text-decoration: none;
    font-size: 1rem;
}

.terms-tags sup {
    color: var(--secondary);
    font-size: 0.8em;
    margin-inline-start: 2px;
}

/* Dark/Light toggle */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    body {
        font-size: var(--base-font-size);
    }

    .post-content,
    .post-description {
        font-size: var(--base-font-size);
    }

    .nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-inline: var(--gap);
    }

    .nav ul {
        display: flex;
        padding: 0;
        margin: 0;
    }

    .nav li {
        margin-inline: 10px;
    }

    .theme-toggle {
        margin-inline-start: 10px;
    }

    .post-entry {
        padding: 0.5em;
    }

    .entry-header,
    .entry-content,
    .entry-footer {
        padding: 0.5em;
    }

    .main {
        padding-inline: 0.5em;
    }

    .post-single {
        padding: 1em;
        margin-inline: 0;
        max-width: 100%;
    }

    .posts-grid {
        gap: 0.5em;
    }
}

@media screen and (max-width: 480px) {
    .entry-footer {
        flex-direction: column;
        align-items: center;
    }

    .entry-footer > * {
        margin-block: 0.25em;
    }

    .post-entry {
        padding: 0.3em;
        margin-block-end: 0.3em;
    }

    .entry-header,
    .entry-content,
    .entry-footer {
        padding: 0.3em;
    }

    .main {
        padding-inline: 0.3em;
    }

    .post-single {
        padding: 0.5em;
        margin-inline: 0;
        max-width: 100%;
    }

    .posts-grid {
        gap: 0.3em;
    }

    .post-content {
        padding: 0.3em;
    }
}

/* Styles for very small screens */
@media screen and (max-width: 360px) {
    .main {
        padding-inline: 0.2em;
    }

    .post-entry {
        padding: 0.2em;
    }

    .entry-header,
    .entry-content,
    .entry-footer {
        padding: 0.2em;
    }

    .post-single {
        padding: 0.3em;
    }

    .post-content,
    .post-description {
        font-size: var(--base-font-size);
    }

    h1,
    .page-header h1,
    .post-title {
        font-size: 2rem;
    }

    .pagination a {
        padding: 0.5rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* PWA Optimizations */
@media (display-mode: standalone) {
    body {
        padding-block-start: env(safe-area-inset-top);
        padding-block-end: env(safe-area-inset-bottom);
        padding-inline-start: env(safe-area-inset-left);
        padding-inline-end: env(safe-area-inset-right);
    }

    .header {
        padding-block-start: env(safe-area-inset-top);
    }
}

/* Print Styles */
@media print {
    .header,
    .footer,
    .pagination {
        display: none;
    }

    body {
        font-size: 12pt;
    }

    .main {
        max-width: 100%;
        padding: 0;
    }
}

/* Focus styles for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Use :is() for simplified selectors */
:is(.post-tags, .pagination, .terms-tags) a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Ensure proper contrast for dark mode */
@media (prefers-color-scheme: dark) {
    :focus-visible {
        outline-color: var(--secondary);
    }
}

/* Post Navigation Styles */
.post-navigation-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: var(--main-width);
    margin-inline: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    gap: var(--gap);
}

.post-nav-item {
    flex-basis: calc(50% - (var(--gap) / 2));
    max-width: calc(50% - (var(--gap) / 2));
    background: var(--entry);
    border-radius: var(--radius);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.2s,
        box-shadow 0.3s;
    overflow: hidden;
}

.post-nav-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.post-nav-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: var(--primary);
}

.post-nav-cover {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
}

.post-nav-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius) var(--radius) 0 0;
}

.post-nav-info {
    padding: calc(var(--gap) / 2);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
}

.post-nav-label {
    font-size: 0.8rem;
    color: var(--secondary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.post-nav-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media screen and (max-width: 768px) {
    .post-navigation-container {
        flex-direction: column;
    }

    .post-nav-item {
        flex-basis: 100%;
        max-width: 100%;
        margin-bottom: calc(var(--gap) / 2);
    }
}

/* Lazy Loading Styles */
img.lazyload {
    opacity: 0;
    transition: opacity 0.3s;
}

img.lazyloaded {
    opacity: 1;
}

/* Styles for the Takeaways Box */
.takeaways-box {
    background-color: #f0f8ff; /* Light blue background, adjust as needed */
    border: 1px solid #add8e6; /* Light blue border */
    border-radius: var(--radius, 8px); /* Use theme radius if available */
    padding: clamp(15px, 2vw, 20px); /* Responsive padding */
    margin-block: 1.5em 1.5em; /* Space above and below the box */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

.takeaways-box h2 {
    /* Style the heading inside the box */
    margin-top: 0;
    margin-bottom: 0.75em; /* Space below heading */
    font-size: 1.4rem; /* Slightly larger heading */
    color: #005a87; /* Darker blue for heading */
    border-bottom: 1px solid var(--border, #e0e6ed); /* Separator line */
    padding-bottom: 0.4em; /* Space below separator */
}

.takeaways-box ul {
    /* Style the list inside */
    padding-left: 20px; /* Indentation for list */
    margin-bottom: 0; /* Remove default bottom margin */
    list-style-type: "✅ "; /* Use checkmark as bullet */
}

.takeaways-box ul li {
    /* Style list items */
    margin-bottom: 0.6em; /* Space between items */
    line-height: var(
        --base-line-height,
        1.6
    ); /* Ensure consistent line height */
}

/* Optional: Adjust for dark mode if needed */
.dark .takeaways-box {
    background-color: #2a3b4d; /* Darker background for dark mode */
    border-color: #4a5568; /* Darker border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark .takeaways-box h2 {
    color: #a0cff7; /* Lighter heading color for dark mode */
    border-bottom-color: #4a5568;
}

.dark .takeaways-box ul {
    list-style-type: "✅ "; /* Ensure checkmark is visible in dark mode */
}

/* Styles for the Disclaimer Box */
.disclaimer-box {
    border: 1px solid #f0ad4e; /* Warning yellow border */
    background-color: #fcf8e3; /* Light yellow background */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: var(--radius, 4px);
    color: var(--content); /* Use theme text color */
}

.disclaimer-box strong {
    color: #c09853; /* Darker yellow for the heading text */
}

/* Dark Mode Styles for Disclaimer Box */
.dark .disclaimer-box {
    background-color: #4a412a; /* Darker background for dark mode */
    border-color: #a88c4f; /* Adjusted border color for dark mode */
    color: var(--content); /* Ensure text color adapts */
}

.dark .disclaimer-box strong {
    color: #f0ad4e; /* Lighter yellow for heading in dark mode */
}

/* ... rest of existing css ... */

/* Dark mode refinements to match X Lights Out */
.dark .header {
    background-color: var(--theme);
    border-bottom: 1px solid var(--tertiary);
    box-shadow: none;
}

.dark .footer {
    border-top: 1px solid var(--tertiary);
}

.dark .post-entry {
    border-color: var(--tertiary);
    box-shadow: none;
}

.dark .pagination a {
    background: var(--entry);
    border: 1px solid var(--tertiary);
}

.dark .pagination a:hover {
    background: var(--tertiary);
}

.dark :focus-visible {
    outline-color: #1d9bf0; /* X accent */
}

.dark ::selection {
    background-color: rgba(29, 155, 240, 0.35);
    color: #e7e9ea;
}

::selection {
    background-color: rgba(17, 24, 39, 0.15);
}

/* Additional X dark mode mirroring */
/* Links: X uses blue, no underline by default; underline on hover */
.dark .post-content a,
.dark .entry-content a,
.dark .footer a,
.dark a {
    color: #1d9bf0;
}
.dark .post-content a,
.dark .toc a:hover {
    border-bottom: none;
}
@media (hover: hover) and (pointer: fine) {
    .dark a:hover {
        text-decoration: underline;
        color: #8ecbff;
    }
}
.dark a:visited {
    color: #1d9bf0;
}

/* Inputs and form controls */
.dark input,
.dark textarea,
.dark select {
    background-color: #16181c;
    color: #e7e9ea;
    border: 1px solid #2f3336;
}
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    outline: 2px solid #1d9bf0;
    outline-offset: 0;
    border-color: #1d9bf0;
}
.dark ::placeholder {
    color: #71767b;
    opacity: 1;
}

/* Buttons */
.dark button,
.dark .btn,
.dark input[type="button"],
.dark input[type="submit"],
.dark .pagination a.primary {
    background-color: #1d9bf0;
    color: #0f1419;
    border: 1px solid #1d9bf0;
}
@media (hover: hover) and (pointer: fine) {
    .dark button:hover,
    .dark .btn:hover,
    .dark input[type="button"]:hover,
    .dark input[type="submit"]:hover,
    .dark .pagination a.primary:hover {
        background-color: #1a8cd8;
        border-color: #1a8cd8;
    }
}

/* Overlays and menus */
.dark .overlay {
    background: rgba(0, 0, 0, 0.65);
}

/* Progress bar */
#progressBar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--scrollAmount, 0%);
    height: 3px;
    background-color: #1d9bf0;
    z-index: 1000;
    transition: width 0.2s ease;
}

.dark #progressBar {
    background-color: #1d9bf0;
}

/* Tables and borders */
.dark table,
.dark th,
.dark td,
.dark hr,
.dark .post-content table th,
.dark .post-content table td {
    border-color: #2f3336;
}

/* Code blocks and inline code */
.dark .post-content pre {
    background: #0b0d0f;
}
.dark .post-content code {
    background: #0b0d0f;
    color: #e7e9ea;
}

/* Tags/pills */
.dark .post-tags a,
.dark .terms-tags a {
    background: #16181c;
    border: 1px solid #2f3336;
    color: #e7e9ea;
}

/* Breadcrumbs, meta, muted text */
.dark .post-meta,
.dark .breadcrumbs,
.dark .entry-footer,
.dark .post-entry .post-date {
    color: #8b98a5;
}

/* Nav adjustments */
.dark .nav a,
.dark .logo a {
    color: #e7e9ea;
}

/* ========================================
   Measslainte Landing Page Enhancements
   ======================================== */

/* Add proper color variables for landing page */
:root {
  --accent-color: #667eea;
  --light-color: #f7fafc;
}

.dark {
  --accent-color: #6495ed;
}

/* Enhanced Hero Section - Above the Fold Improvements */
.post-content {
  text-align: center;
  padding: 5rem 0 3rem 0;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

/* Hero Title Enhancement */
.post-content h1:first-child {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--primary);
  line-height: 1.2;
  background: linear-gradient(135deg, var(--primary), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeInUp 0.8s ease-out;
}

/* Hero Description Enhancement */
.post-content p:first-of-type {
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  color: var(--secondary);
  line-height: 1.8;
  margin-bottom: 2rem;
  font-weight: 400;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* Enhanced Divider */
.post-content hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
  margin: 3rem auto;
  max-width: 200px;
  border-radius: 2px;
  opacity: 0.8;
}

/* Section Title Enhancement */
.post-content h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.post-content h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  border-radius: 2px;
}

/* CTA Button Section */
.cta-section {
  margin: 3rem 0 2rem 0;
  text-align: center;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.cta-button {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-color), var(--primary));
  color: white;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  color: white;
  text-decoration: none;
}

.cta-button:hover::before {
  left: 100%;
}

.cta-subtitle {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--secondary);
  font-style: italic;
}

/* Research Areas Grid - Enhanced Visual Appeal */
.research-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
  padding: 0 1rem;
}

.highlights-grid {
  display: contents;
}

.highlight-card {
  background: var(--entry);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--accent-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.highlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, var(--accent-color), transparent);
  border-radius: 50%;
  transform: translate(30px, -30px);
  opacity: 0.1;
}

.highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  border-left-color: var(--primary);
}

.highlight-card h3 {
  color: var(--primary);
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.highlight-card p {
  color: var(--secondary);
  line-height: 1.7;
  font-size: 0.95rem;
}

/* Content Divider */
.content-divider {
  text-align: center;
  margin: 4rem 0 2rem 0;
  padding: 2rem;
  background: linear-gradient(135deg, var(--light-color), var(--entry));
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Enhanced Post Grid - Better Visual Flow */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
  margin-top: 2rem;
}

.post-entry {
  background: var(--entry);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.post-entry:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(-8px) scale(1.02);
}

.post-entry .entry-cover {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.post-entry .entry-cover img {
  transition: all 0.4s ease;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.post-entry:hover .entry-cover img {
  transform: scale(1.1) rotate(1deg);
}

.post-entry .entry-header {
  padding: 1.5rem;
  padding-bottom: 1rem;
  flex: 1;
  position: relative;
}

.post-entry .entry-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.3s ease;
}

.post-entry:hover .entry-header::before {
  opacity: 1;
  transform: scaleX(1);
}

.post-entry .entry-header h2 {
  margin: 0 0 0.75rem;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--primary);
  transition: color 0.2s ease;
}

.post-entry:hover .entry-header h2 {
  color: var(--accent-color);
}

/* Enhanced Entry Tags */
.entry-tags {
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.entry-tags .tag {
  display: inline-block;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(44, 62, 80, 0.1));
  color: var(--primary);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border: 1px solid rgba(44, 62, 80, 0.1);
  transition: all 0.2s ease;
}

.entry-tags .tag:hover {
  background: var(--accent-color);
  color: white;
  transform: translateY(-1px);
}

/* Enhanced Entry Meta - HIDE READ MORE BUTTONS */
.entry-meta {
  display: none; /* Hide the entire meta bar with Read More buttons */
}

/* Make entire post card clickable */
.post-entry .entry-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  text-decoration: none;
}

/* Completely remove Read More buttons */
.post-entry .read-more {
  display: none !important;
}

/* Newsletter/Subscribe Section */
.subscribe-section {
  background: linear-gradient(135deg, var(--light-color), var(--entry));
  padding: 3rem 2rem;
  margin: 4rem 0;
  border-radius: 20px;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.subscribe-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--accent-color), transparent);
  opacity: 0.1;
  border-radius: 50%;
}

.subscribe-section h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

.subscribe-section p {
  font-size: 1.1rem;
  color: var(--secondary);
  margin-bottom: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .post-content {
    padding: 3rem 1rem 2rem 1rem;
  }

  .posts-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1rem 0;
  }

  .research-highlights {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .highlight-card {
    padding: 1.5rem;
  }

  .cta-button {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }

  .subscribe-section {
    padding: 2rem 1.5rem;
    margin: 2rem 1rem;
  }
}

/* Dark Mode Enhancements */
@media (prefers-color-scheme: dark) {
  .post-content h1:first-child {
    background: linear-gradient(135deg, var(--primary), #6495ed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .highlight-card,
  .post-entry {
    background: var(--entry);
    border-color: var(--border);
  }

  .subscribe-section {
    background: linear-gradient(135deg, var(--entry), var(--theme));
    border-color: var(--border);
  }
}

/* Focus and Accessibility Improvements */
.cta-button:focus,
.post-entry:focus,
.highlight-card:focus {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

/* Dark mode cover image improvements */
.dark .post-single .post-cover img,
.dark .post-entry .entry-cover img {
  filter: brightness(0.9) contrast(1.1);
}

/* Specific fix for SVG images in dark mode */
.dark .post-single .post-cover img[src$=".svg"],
.dark .post-entry .entry-cover img[src$=".svg"] {
  filter: brightness(0.8) contrast(1.2) hue-rotate(10deg);
  background-color: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: var(--radius);
}

/* ========================================
   EVIDENCE GRADING SYSTEM STYLES
   ======================================== */

/* Evidence TL;DR Section */
.evidence-tldr {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(16, 185, 129, 0.05));
  border-left: 4px solid #10b981;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.evidence-tldr-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: #10b981;
}

.evidence-tldr-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.evidence-tldr-content {
  font-size: 0.95rem;
  line-height: 1.7;
}

.evidence-tldr-content ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.evidence-tldr-content li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.evidence-tldr-content li:last-child {
  border-bottom: none;
}

.dark .evidence-tldr {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(102, 126, 234, 0.08));
  border-left-color: #059669;
}

/* Evidence Table */
.evidence-table-wrapper {
  margin: 2rem 0;
  overflow-x: auto;
}

.evidence-table-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

.evidence-table-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.evidence-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.evidence-table-wrapper th,
.evidence-table-wrapper td {
  padding: 0.75rem 1rem;
  text-align: left;
  border: 1px solid var(--border);
}

.evidence-table-wrapper th {
  background: var(--code-bg);
  font-weight: 600;
  color: var(--primary);
}

.evidence-table-wrapper tr:nth-child(even) {
  background: var(--code-bg);
}

.evidence-table-wrapper tr:hover {
  background: rgba(102, 126, 234, 0.05);
}

.dark .evidence-table-wrapper th {
  background: #1a202c;
}

.dark .evidence-table-wrapper tr:nth-child(even) {
  background: #1a202c;
}

/* Counter Evidence Section */
.evidence-counter {
  background: rgba(239, 68, 68, 0.05);
  border-left: 4px solid #ef4444;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.evidence-counter-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: #ef4444;
}

.evidence-counter-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.evidence-counter-intro {
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: 1rem;
  font-style: italic;
}

.evidence-counter-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.evidence-counter-content th,
.evidence-counter-content td {
  padding: 0.75rem 1rem;
  text-align: left;
  border: 1px solid var(--border);
}

.evidence-counter-content th {
  background: rgba(239, 68, 68, 0.1);
  font-weight: 600;
}

.dark .evidence-counter {
  background: rgba(239, 68, 68, 0.1);
}

.dark .evidence-counter-content th {
  background: rgba(239, 68, 68, 0.2);
}

/* Evidence Badges */
.evidence-badge-wrapper {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}

.evidence-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.evidence-badge-level {
  background: var(--evidence-color, #6b7280);
  color: white;
}

.evidence-badge-confidence {
  background: var(--evidence-color, #6b7280);
  color: white;
}

.evidence-badge-label {
  color: var(--secondary);
  font-size: 0.85rem;
}

/* Declaration Box */
.evidence-declaration {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(251, 146, 60, 0.05));
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.evidence-declaration-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: #f59e0b;
}

.evidence-declaration-header strong {
  font-size: 1.1rem;
}

.evidence-declaration-content {
  margin-bottom: 1rem;
}

.evidence-declaration-footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(245, 158, 11, 0.2);
}

.dark .evidence-declaration {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(251, 146, 60, 0.08));
  border-color: rgba(245, 158, 11, 0.4);
}

/* Evidence Legend */
.evidence-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  background: var(--code-bg);
  border-radius: 8px;
  font-size: 0.85rem;
  margin: 1rem 0;
}

.evidence-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.evidence-legend-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .evidence-tldr,
  .evidence-counter,
  .evidence-declaration {
    padding: 1rem;
  }

  .evidence-table-wrapper,
  .evidence-counter-content {
    font-size: 0.85rem;
  }

  .evidence-table-wrapper table,
  .evidence-counter-content table {
    display: block;
    overflow-x: auto;
  }
}

/* ========================================
   Mobile TOC Fix - Prevent Content Overlap
   ======================================== */

/* Mobile TOC - make it inline and collapsible */
@media screen and (max-width: 1399px) {
  /* Force TOC to be inline, not fixed */
  .toc,
  .toc.side {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 1;
  }

  /* Ensure TOC doesn't cover content */
  .toc {
    clear: both;
    display: block;
  }

  /* Collapse TOC details on mobile by default */
  .toc details {
    display: block;
  }

  .toc details[open] {
    display: block;
  }

  /* Style the summary like a button on mobile */
  .toc details summary {
    cursor: pointer;
    padding: 12px 16px;
    background: var(--tertiary, #f0f4f8);
    border: 1px solid var(--border, #e0e6ed);
    border-radius: 8px;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .toc details summary::-webkit-details-marker {
    display: none;
  }

  .toc details summary::after {
    content: '+';
    font-size: 1.2em;
    font-weight: bold;
  }

  .toc details[open] summary::after {
    content: '−';
  }

  /* TOC content when open */
  .toc .inner {
    padding: 16px;
    margin-top: 8px;
    background: var(--tertiary, #f0f4f8);
    border-radius: 8px;
    max-height: 50vh;
    overflow-y: auto;
  }

  /* TOC links */
  .toc a {
    display: block;
    padding: 6px 0;
    color: var(--primary, #2c3e50);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }

  .toc a:hover {
    color: var(--link, #1d9bf0);
    border-bottom-color: var(--link, #1d9bf0);
  }

  /* Remove fixed positioning side effects */
  .main > .post-content {
    margin-right: 0 !important;
    clear: both;
  }

  /* Ensure content flows below TOC */
  .main {
    padding-top: 0;
  }
}

/* Small mobile specific adjustments */
@media screen and (max-width: 768px) {
  .toc .inner {
    padding: 12px;
    font-size: 0.9em;
  }

  .toc details summary {
    padding: 10px 12px;
    font-size: 0.95em;
  }

  /* Add spacing after TOC so content doesn't feel cramped */
  .toc + .post-content {
    margin-top: 20px;
  }
}

/* ========================================
   Back to Top Button
   ======================================== */

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--primary, #2c3e50);
  color: var(--theme, #ffffff);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--link, #1d9bf0);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.back-to-top:active {
  transform: translateY(-1px);
}

.back-to-top:focus-visible {
  outline: 3px solid var(--link, #1d9bf0);
  outline-offset: 3px;
}

.back-to-top svg {
  width: 24px;
  height: 24px;
}

/* Dark mode adjustments */
.dark .back-to-top {
  background: var(--entry, #ffffff);
  color: var(--primary, #2c3e50);
}

.dark .back-to-top:hover {
  background: var(--link, #1d9bf0);
  color: var(--theme, #ffffff);
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
  }

  .back-to-top svg {
    width: 20px;
    height: 20px;
  }
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary, #1f2937);
  transition: color 0.2s ease;
  border-radius: 50%;
}

.dark-mode-toggle:hover {
  background: var(--tertiary, #94a3b8);
  color: var(--link, #1d9bf0);
}

.dark-mode-toggle:focus {
  outline: 2px solid var(--link, #1d9bf0);
  outline-offset: 2px;
}

.dark-mode-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
}

.dark .dark-mode-toggle {
  color: var(--primary, #e7e9ea);
}

.dark .dark-mode-toggle:hover {
  background: var(--tertiary, #2f3336);
  color: var(--link, #1d9bf0);
}

/* Logo switches container */
.logo-switches {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ========================================
   Homepage Posts Grid Wrapper
   ======================================== */

.posts-grid-wrapper {
  max-width: var(--nav-width);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 60px) var(--gap);
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media screen and (max-width: 640px) {
  .posts-grid-wrapper {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
  .posts-grid-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1025px) {
  .posts-grid-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Ensure first entry doesn't break the grid layout */
.posts-grid-wrapper .first-entry {
  grid-column: 1 / -1;
  margin-bottom: var(--gap);
}

/* ========================================
   Homepage Hero Section
   ======================================== */

.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vw, 100px) var(--gap);
  margin-top: calc(var(--header-height) * -1);
  padding-top: calc(var(--header-height) + clamp(40px, 8vw, 100px));
  overflow: hidden;
}

.hero-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--theme) 0%, var(--entry) 100%);
  z-index: 0;
}

.hero-particles {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(29, 155, 240, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(180, 151, 75, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 40% 20%, rgba(29, 155, 240, 0.03) 0%, transparent 40%);
  animation: particleFloat 20s ease-in-out infinite;
}

@keyframes particleFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: min(900px, 95vw);
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: var(--entry);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.hero-title {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 16px 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 24px 0;
  line-height: 1.3;
}

.hero-description {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--secondary);
  line-height: 1.7;
  margin: 0 0 32px 0;
  max-width: 700px;
  margin-inline: auto;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
  margin: 32px 0;
}

.hero-stats .stat {
  padding: 12px 24px;
  background: var(--entry);
  border-radius: 8px;
  font-weight: 600;
  color: var(--primary);
  border: 1px solid var(--border);
  font-size: 0.95rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 40px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
}

.cta-button.primary {
  background: var(--primary, #2c3e50);
  color: var(--theme, #ffffff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cta-button.primary:hover {
  background: var(--link, #1d9bf0);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(29, 155, 240, 0.3);
}

.cta-button.secondary {
  background: var(--entry);
  color: var(--primary);
  border: 2px solid var(--border);
}

.cta-button.secondary:hover {
  border-color: var(--link, #1d9bf0);
  color: var(--link, #1d9bf0);
  transform: translateY(-2px);
}

/* Research Highlights Section */
.research-highlights {
  padding: clamp(60px, 10vw, 100px) var(--gap);
  background: var(--entry);
}

.section-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 60px);
  max-width: 700px;
  margin-inline: auto;
}

.section-header h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 16px 0;
  color: var(--primary);
}

.section-header p {
  font-size: 1.1rem;
  color: var(--secondary);
  line-height: 1.6;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 32px);
  max-width: var(--nav-width);
  margin: 0 auto;
}

.highlight-card {
  background: var(--theme);
  border-radius: 16px;
  padding: 32px;
  border: 1px solid var(--border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.highlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--link, #1d9bf0), var(--primary, #2c3e50));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.highlight-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  border-color: var(--link, #1d9bf0);
}

.highlight-card:hover::before {
  opacity: 1;
}

.highlight-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.icon-bg {
  position: absolute;
  inset: -8px;
  background: linear-gradient(135deg, rgba(29, 155, 240, 0.1), rgba(180, 151, 75, 0.1));
  border-radius: 50%;
  z-index: -1;
}

.highlight-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--primary);
}

.highlight-card p {
  font-size: 1rem;
  color: var(--secondary);
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.learn-more {
  display: inline-flex;
  align-items: center;
  color: var(--link, #1d9bf0);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: gap 0.2s ease;
  gap: 8px;
}

.learn-more:hover {
  gap: 12px;
}

/* Content Divider */
.content-divider {
  padding: clamp(40px, 6vw, 60px) var(--gap);
  background: var(--theme);
  text-align: center;
}

.divider-content h2 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  margin: 0 0 16px 0;
  color: var(--primary);
}

.divider-content p {
  font-size: 1.1rem;
  color: var(--secondary);
  max-width: 600px;
  margin: 0 auto 24px auto;
  line-height: 1.6;
}

.view-all-btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--primary);
  color: var(--theme);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.view-all-btn:hover {
  background: var(--link);
  transform: translateY(-2px);
}

/* Dark Mode Hero Adjustments */
.dark .hero-background {
  background: linear-gradient(135deg, var(--theme) 0%, var(--entry) 100%);
}

.dark .hero-badge {
  background: var(--entry);
  border-color: var(--tertiary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .hero-stats .stat {
  background: var(--entry);
  border-color: var(--tertiary);
}

.dark .highlight-card {
  background: var(--entry);
  border-color: var(--tertiary);
}

.dark .highlight-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.dark .cta-button.primary {
  background: var(--entry);
  color: var(--primary);
  border: 1px solid var(--tertiary);
}

.dark .cta-button.primary:hover {
  background: var(--link);
  color: var(--theme);
}

.dark .view-all-btn {
  background: var(--entry);
  color: var(--primary);
}

.dark .view-all-btn:hover {
  background: var(--link);
  color: var(--theme);
}

/* Mobile Responsive Adjustments */
@media screen and (max-width: 768px) {
  .hero-section {
    min-height: 70vh;
    padding-top: calc(var(--header-height) + 40px);
  }

  .hero-stats {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-stats .stat {
    text-align: center;
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-button {
    justify-content: center;
  }

  .highlights-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   About Page Styles
   ======================================== */

.about-hero {
  text-align: center;
  padding: clamp(60px, 10vw, 100px) var(--gap) clamp(40px, 6vw, 60px);
  background: linear-gradient(135deg, var(--theme) 0%, var(--entry) 100%);
  position: relative;
  overflow: hidden;
}

.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(29, 155, 240, 0.03) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(180, 151, 75, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.about-hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.about-badge {
  display: inline-block;
  padding: 8px 20px;
  background: var(--entry);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: 24px;
}

.about-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  margin: 0 0 16px 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-tagline {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--secondary);
  line-height: 1.6;
  margin: 0;
}

/* Credentials Section */
.about-credentials {
  padding: clamp(60px, 10vw, 100px) var(--gap);
  background: var(--entry);
}

.credentials-section h2 {
  text-align: center;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 48px 0;
  color: var(--primary);
}

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 32px);
  max-width: var(--nav-width);
  margin: 0 auto;
}

.credential-item {
  background: var(--theme);
  border-radius: 16px;
  padding: 32px;
  border: 1px solid var(--border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.credential-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--link, #1d9bf0), var(--primary, #2c3e50));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.credential-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  border-color: var(--link, #1d9bf0);
}

.credential-item:hover::before {
  opacity: 1;
}

.credential-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.credential-item h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--primary);
}

.credential-item p {
  font-size: 1rem;
  color: var(--secondary);
  line-height: 1.6;
  margin: 0;
}

/* Story Section */
.about-story {
  padding: clamp(60px, 10vw, 100px) var(--gap);
  background: var(--theme);
}

.story-content {
  max-width: 800px;
  margin: 0 auto;
}

.story-content h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 32px 0;
  color: var(--primary);
  text-align: center;
}

.story-content h3 {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 48px 0 16px 0;
  color: var(--primary);
}

.story-content h3:first-of-type {
  margin-top: 0;
}

.story-content p {
  font-size: 1.1rem;
  color: var(--secondary);
  line-height: 1.7;
  margin: 0 0 16px 0;
}

.story-content ul {
  margin: 16px 0 24px 0;
  padding-left: 24px;
}

.story-content li {
  font-size: 1.1rem;
  color: var(--secondary);
  line-height: 1.7;
  margin: 8px 0;
}

.story-content ul ul {
  margin-top: 12px;
  padding-left: 24px;
}

.story-content a {
  color: var(--link, #1d9bf0);
  text-decoration: none;
  font-weight: 500;
}

.story-content a:hover {
  text-decoration: underline;
}

/* CTA Section */
.about-cta {
  padding: clamp(60px, 10vw, 100px) var(--gap);
  background: var(--entry);
  text-align: center;
}

.cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.cta-content h2 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  margin: 0 0 16px 0;
  color: var(--primary);
}

.cta-content > p {
  font-size: 1.1rem;
  color: var(--secondary);
  line-height: 1.6;
  margin: 0 0 32px 0;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 24px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
}

.cta-btn.primary {
  background: var(--primary, #2c3e50);
  color: var(--theme, #ffffff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cta-btn.primary:hover {
  background: var(--link, #1d9bf0);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(29, 155, 240, 0.3);
}

.cta-btn.secondary {
  background: var(--theme);
  color: var(--primary);
  border: 2px solid var(--border);
}

.cta-btn.secondary:hover {
  border-color: var(--link, #1d9bf0);
  color: var(--link, #1d9bf0);
  transform: translateY(-2px);
}

.cta-note {
  font-size: 1rem;
  color: var(--secondary);
  line-height: 1.6;
  margin: 0;
}

/* Dark Mode About Page */
.dark .about-hero {
  background: linear-gradient(135deg, var(--theme) 0%, var(--entry) 100%);
}

.dark .about-badge {
  background: var(--entry);
  border-color: var(--tertiary);
}

.dark .credential-item {
  background: var(--entry);
  border-color: var(--tertiary);
}

.dark .credential-item:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.dark .cta-btn.primary {
  background: var(--entry);
  color: var(--primary);
  border: 1px solid var(--tertiary);
}

.dark .cta-btn.primary:hover {
  background: var(--link);
  color: var(--theme);
}

.dark .cta-btn.secondary {
  background: var(--theme);
  border-color: var(--tertiary);
}

/* Mobile Responsive About Page */
@media screen and (max-width: 768px) {
  .about-hero {
    padding: 40px var(--gap);
  }

  .credentials-grid {
    grid-template-columns: 1fr;
  }

  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-btn {
    justify-content: center;
  }
}

/* ========================================
   Topic Navigation / Filtering
   ======================================== */

.topic-nav-container {
  padding: clamp(40px, 6vw, 60px) var(--gap);
  background: var(--entry);
}

.topic-nav-header {
  text-align: center;
  margin-bottom: 40px;
}

.topic-nav-header h2 {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--primary);
}

.topic-nav-header p {
  font-size: 1.1rem;
  color: var(--secondary);
  margin: 0;
}

.topic-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 24px);
  max-width: var(--nav-width);
  margin: 0 auto 40px auto;
}

.topic-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--theme);
  border-radius: 12px;
  border: 2px solid var(--border);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.topic-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--topic-color, #1d9bf0);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.topic-card:hover {
  transform: translateY(-4px);
  border-color: var(--topic-color, #1d9bf0);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.topic-card:hover::before {
  opacity: 1;
}

.topic-card-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--topic-color), var(--topic-color));
  opacity: 0.15;
  border-radius: 12px;
}

.topic-card-content {
  flex: 1;
  min-width: 0;
}

.topic-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: var(--primary);
}

.topic-card-link {
  font-size: 0.9rem;
  color: var(--topic-color, #1d9bf0);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s ease;
}

.topic-card:hover .topic-card-link {
  gap: 8px;
}

.topic-nav-footer {
  text-align: center;
}

.view-all-topics {
  display: inline-block;
  padding: 12px 28px;
  background: var(--primary);
  color: var(--theme);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.view-all-topics:hover {
  background: var(--link);
  transform: translateY(-2px);
}

/* Dark Mode Topic Navigation */
.dark .topic-card {
  background: var(--theme);
  border-color: var(--tertiary);
}

.dark .topic-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.dark .topic-card-icon {
  opacity: 0.2;
}

.dark .view-all-topics {
  background: var(--entry);
  color: var(--primary);
}

.dark .view-all-topics:hover {
  background: var(--link);
  color: var(--theme);
}

/* Mobile Responsive Topic Navigation */
@media screen and (max-width: 768px) {
  .topic-nav-grid {
    grid-template-columns: 1fr;
  }

  .topic-card {
    padding: 20px;
  }

  .topic-card-icon {
    width: 50px;
    height: 50px;
    font-size: 2rem;
  }
}

/* ========================================
   Print-Friendly PDF Styles
   ======================================== */

@media print {
  /* Hide non-essential elements */
  .header,
  .footer,
  .top-link,
  .back-to-top,
  .dark-mode-toggle,
  .hamburger-menu,
  .overlay,
  .progress-bar,
  #progressBar,
  .toc,
  .post-meta,
  .pagination,
  .load-more-container,
  .related-posts,
  .comments-section,
  .sidebar,
  .nav,
  .lang-switch,
  .logo-switches,
  .share-buttons,
  .tag-list,
  .categories-list,
  .about-cta,
  .topic-nav-footer,
  .view-all-topics,
  .view-all-btn,
  .hero-cta,
  .research-highlights,
  .content-divider,
  .cta-button,
  .cta-btn,
  .ads,
  iframe:not([src*="youtube.com/embed"]),
  script,
  noscript {
    display: none !important;
  }

  /* Page setup */
  @page {
    size: A4;
    margin: 20mm;
  }

  /* Base styles for print */
  body {
    font-size: 12pt;
    line-height: 1.6;
    color: #000;
    background: #fff;
    text-align: left;
  }

  /* Main content area */
  .main {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Article content */
  .post-single,
  .post-content,
  .article-content,
  .entry-content {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    color: #000;
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  h1 {
    font-size: 24pt;
    margin-top: 0;
    margin-bottom: 16pt;
    border-bottom: 2px solid #000;
    padding-bottom: 8pt;
  }

  h2 {
    font-size: 18pt;
    margin-top: 20pt;
    margin-bottom: 12pt;
    page-break-before: avoid;
  }

  h3 {
    font-size: 14pt;
    margin-top: 16pt;
    margin-bottom: 10pt;
  }

  h4 {
    font-size: 12pt;
    margin-top: 12pt;
    margin-bottom: 8pt;
  }

  /* Paragraphs and links */
  p {
    margin-bottom: 10pt;
    orphans: 3;
    widows: 3;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
    word-break: break-all;
  }

  /* Lists */
  ul, ol {
    margin-left: 20pt;
    margin-bottom: 10pt;
  }

  li {
    margin-bottom: 5pt;
  }

  /* Code blocks */
  pre, code {
    background: #f5f5f5;
    border: 1px solid #ddd;
    font-family: "Courier New", Courier, monospace;
    font-size: 10pt;
  }

  pre {
    padding: 10pt;
    page-break-inside: avoid;
    overflow-wrap: break-word;
    white-space: pre-wrap;
  }

  code {
    padding: 2pt 4pt;
  }

  /* Blockquotes */
  blockquote {
    margin: 15pt 20pt;
    padding: 10pt 15pt;
    border-left: 4px solid #000;
    background: #f9f9f9;
    page-break-inside: avoid;
  }

  /* Tables */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 15pt 0;
    page-break-inside: avoid;
  }

  th, td {
    border: 1px solid #000;
    padding: 8pt;
    text-align: left;
  }

  th {
    background: #f0f0f0;
    font-weight: bold;
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
    page-break-inside: avoid;
  }

  figure {
    margin: 15pt 0;
    page-break-inside: avoid;
  }

  figcaption {
    font-size: 10pt;
    color: #333;
    text-align: center;
    margin-top: 5pt;
  }

  /* Evidence badges and tables */
  .evidence-badge,
  .evidence-level,
  .evidence-table {
    page-break-inside: avoid;
  }

  .evidence-table {
    border: 1px solid #000;
  }

  /* Page break controls */
  .post-content > *,
  .entry-content > * {
    page-break-inside: avoid;
  }

  .post-content h2,
  .entry-content h2 {
    page-break-before: always;
  }

  .post-content h2:first-of-type,
  .entry-content h2:first-of-type {
    page-break-before: avoid;
  }

  /* Print header/footer */
  @page :first {
    margin-top: 0;
  }

  @page {
    @top-right {
      content: counter(page);
      font-size: 10pt;
    }

    @bottom-left {
      content: "Measslainte - Evidence-Based Natural Health Research";
      font-size: 9pt;
    }

    @bottom-right {
      content: "© " attr(data-year) " Measslainte";
      font-size: 9pt;
    }
  }

  /* Hide video embeds */
  iframe[src*="youtube.com"],
  iframe[src*="vimeo.com"],
  video,
  audio {
    display: none !important;
  }

  /* Show URLs for important links only */
  a[href^="/tags/"]::after,
  a[href^="/categories/"]::after {
    content: "";
  }

  /* Ensure colors print correctly */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Remove background effects for print */
  .hero-background,
  .hero-particles,
  .highlight-card::before,
  .credential-item::before,
  .topic-card::before {
    display: none !important;
  }

  /* Simplify card styles for print */
  .highlight-card,
  .credential-item,
  .topic-card {
    border: 1px solid #000;
    box-shadow: none;
    page-break-inside: avoid;
    margin-bottom: 15pt;
  }

  /* Evidence grading for print */
  .evidence-badge {
    border: 1px solid #000;
    background: #fff;
  }

  .evidence-level-strong {
    background: #d4edda !important;
    border-color: #28a745 !important;
  }

  .evidence-level-moderate {
    background: #fff3cd !important;
    border-color: #ffc107 !important;
  }

  .evidence-level-limited {
    background: #f8d7da !important;
    border-color: #dc3545 !important;
  }
}

/* Print button for articles */
.print-article-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--entry);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}

.print-article-btn:hover {
  background: var(--link);
  color: var(--theme);
  border-color: var(--link);
}

@media print {
  .print-article-btn {
    display: none !important;
  }
}