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

/* Table enhancements */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
}

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

table th {
    background: var(--tertiary);
    font-weight: 600;
    color: var(--primary);
}

table tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

:root {
    --gap: clamp(16px, 2vw, 24px);
    --content-gap: clamp(20px, 3vw, 32px);
    --nav-width: min(1024px, 95vw);
    --main-width: min(1200px, 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;
    /* Accent colors */
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-color: #667eea; /* Landing page accent */
    --light-color: #f7fafc; /* Landing page light */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
}

.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 */
    --accent-color: #6495ed; /* Landing page accent in dark mode */
}

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

/* Link colors (dark mode: match X accent) */
@media (hover: hover) and (pointer: fine) {
}

/* 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 - COMPREHENSIVE FIX */
.main {
    position: relative;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-block-start: calc(var(--header-height) + var(--gap)) !important;
}

/* Add consistent padding to all content */
.main > * {
    padding-inline: min(3vw, 60px);
}

/* List pages - full width content with minimal padding */
.list .main,
.page .main,
.tags .main,
.categories .main,
.search .main {
    padding-inline: 0;
    max-width: 100%;
}

/* List page headers and content - minimal padding like posts */
.list .page-header,
.page .page-header,
.tags .page-header,
.categories .page-header,
.search .page-header,
.list .posts-grid,
.page .posts-grid {
    padding-inline: min(2vw, 40px);
}

/* Hide the automatic post title heading since we use h1 in content */
.single .post-header h1.post-title {
    display: none;
}

/* Make TOC inline instead of sidebar to prevent content width restriction */
.single .toc {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    right: auto !important;
    top: auto !important;
    max-height: none !important;
    margin: 0 0 20px 0 !important;
    background: linear-gradient(135deg, var(--code-bg), var(--theme));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.single .toc.side {
    position: relative !important;
}

.single .toc .details {
    font-weight: 600;
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.single .toc .inner {
    padding: 0;
    margin: 0;
}

.single .toc a {
    color: var(--secondary);
    text-decoration: none;
    display: block;
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.single .toc a:hover {
    color: var(--accent);
    padding-inline-start: 4px;
}

/* 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;
    font-weight: 700;
    color: var(--primary);
}

h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--primary);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
}

h3 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--accent);
}

h4 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--primary);
}

h5 {
    font-size: 1.6rem;
    font-weight: 600;
}

h6 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--secondary);
}

/* Post content specific heading overrides */

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Better image captions */


.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;
}


/* Enhanced links in post content */


/* Content Elements */

/* Enhanced tables */














/* Posts Grid - Improved layout */
.posts-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

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

@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);
    }
}

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

.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;
}

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

/* Single Post - full width */
.post-single {
    background: var(--entry);
    border-radius: 0;
    padding: var(--content-gap);
    padding-inline: min(2vw, 40px);
    margin-block-end: 1rem;
    box-shadow: none;
    border: none;
    max-width: 100%;
}

.post-single .post-cover {
    margin: 1em auto;
    text-align: center;
    max-width: 100%;
}

.post-single .post-cover img {
    border-radius: var(--radius);
    max-width: 100%;
    max-height: 500px;
    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;
    gap: 0.5rem;
}

.post-tags a {
    display: inline-block;
    padding: 0.5em 1em;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
    border-radius: 20px;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(59, 130, 246, 0.2);
    transition: all 0.2s ease;
}

.post-tags a:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
}

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

.pagination a {
    color: var(--primary);
    background: var(--entry);
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.pagination a:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* 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); }
}

/* 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);
    }


    .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;
    }

    .main > * {
        padding-inline: 1.5em;
    }

    .single .post-single {
        padding-inline: 1.5em;
    }

    .posts-grid {
        gap: 1em;
    }

    .list .page-header,
    .page .page-header,
    .list .posts-grid {
        padding-inline: 1.5em;
    }

    /* Improved heading sizes on mobile */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Better spacing on mobile */

    /* Improved table on mobile */

}

@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;
    }

    .main > * {
        padding-inline: 1em;
    }

    .single .post-single {
        padding-inline: 1em;
    }

    .posts-grid {
        gap: 0.75em;
    }


    .list .page-header,
    .page .page-header,
    .list .posts-grid {
        padding-inline: 1em;
    }

    /* Even smaller headings on very small screens */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Improved TOC on small mobile */
    .single .toc {
        padding: 1rem;
    }
}

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

    .main > * {
        padding-inline: 0.75em;
    }

    .single .post-single {
        padding-inline: 0.75em;
    }

    .post-entry {
        padding: 0.2em;
    }

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

    .list .page-header,
    .page .page-header,
    .list .posts-grid {
        padding-inline: 0.75em;
    }


    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 */
@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,

/* Code blocks and inline code */

/* 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
   ======================================== */

/* Enhanced Hero Section - Above the Fold Improvements */

/* Hero Title Enhancement */

/* Hero Description Enhancement */

/* Enhanced Divider */

/* Section Title Enhancement */

/* Research Areas Grid - Enhanced Visual Appeal */

.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;
}

/* 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 */

  /* 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 */
}

/* ========================================
   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;
}

.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-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;
}

/* 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 .highlight-card {
  background: var(--entry);
  border-color: var(--tertiary);
}

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

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

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

/* ========================================
   Self-hosted fonts (Inter, JetBrains Mono)
   woff2 files in /fonts/, preloaded from the head partial.
   Replaces the former Google Fonts request; zero third-party font hosts.
   ======================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-mono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-500.woff2') format('woff2')}

/* ========================================
   Key-takeaways box
   Rendered above the article body from frontmatter takeaways[]
   (layouts/_default/single.html). Flat card, no icon chrome.
   ======================================== */
.post-takeaways{background:var(--entry);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;padding:1.1rem 1.35rem;margin:1.75rem 0}
.post-takeaways h3{margin:0 0 .6rem;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary)}
.post-takeaways ul{margin:0;padding-left:1.2rem}
.post-takeaways li{margin:.4rem 0}
.post-takeaways li:last-child{margin-bottom:0}

/* ========================================
   Scrollable tables (layouts/_default/_markup/render-table.html)
   Horizontal scroll contained to the wrapper; never bleeds page-wide.
   ======================================== */
.table-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;margin:1.5rem 0}
.table-scroll table{margin:0}
.table-scroll::-webkit-scrollbar{height:8px}
.table-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.table-scroll::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion: no-preference){
  .table-scroll{scroll-behavior:smooth}
}

/* ========================================
   Heading self-links (layouts/_default/_markup/render-heading.html)
   Hidden until hover or keyboard focus; always faintly present on
   touch devices where hover does not exist.
   ======================================== */
.heading-anchor{margin-left:.4em;font-size:.75em;opacity:0;text-decoration:none;vertical-align:baseline}
:is(h1,h2,h3,h4,h5,h6):hover .heading-anchor,
.heading-anchor:focus-visible{opacity:.7}
.heading-anchor:focus-visible{outline:2px solid var(--accent);outline-offset:2px;opacity:1}
@media (hover:none){
  .heading-anchor{opacity:.35}
}

/* ========================================
   Back to top (layouts/partials/extend_footer.html)
   #top is the browser's scroll-to-top fragment; no JS, no extra id.
   ======================================== */
.back-to-top{margin:.6rem 0 0}
.back-to-top a{font-size:.85rem;color:var(--secondary)}
.back-to-top a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ========================================
   Cluster strip + hub (data/dna_cluster.yaml,
   layouts/partials/cluster-strip.html, layouts/_default/dna-cluster.html)
   Token-based styling; follows light/dark theme vars.
   ======================================== */
.cluster-strip{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;padding:.7rem 1rem;margin:0 0 1.4rem;font-size:.9rem}
.cluster-strip-label{margin:0 0 .25rem;color:var(--secondary)}
.cluster-strip-pos{white-space:nowrap}
.cluster-strip-nav{display:flex;justify-content:space-between;gap:1rem;margin:0;flex-wrap:wrap}
.cluster-strip-nav a{color:var(--primary)}
.cluster-strip-nav a:focus-visible,.cluster-title:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cluster-map{list-style:none;padding:0;margin:1.5rem 0}
.cluster-item{border:1px solid var(--border);border-radius:8px;padding:.9rem 1.2rem;margin:.8rem 0}
.cluster-item-head{display:flex;gap:.8rem;align-items:baseline;font-size:.8rem;color:var(--secondary);margin-bottom:.3rem}
.cluster-order{font-weight:700;color:var(--accent)}
.cluster-role{font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.cluster-date{margin-left:auto}
.cluster-title{font-weight:600;font-size:1.05rem}
.cluster-blurb{margin:.35rem 0 0;color:var(--secondary);font-size:.95rem}
.cluster-related{padding-left:1.2rem}
.cluster-related li{margin:.5rem 0}

/* The theme styles bare nav{} as the fixed-height header row
   (assets/css/common/base.css); the cluster strip is a content
   landmark, not the header, so it opts out explicitly. */
.post-wrapper nav.cluster-strip{display:block;height:auto;max-width:100%;margin:0 0 1.4rem;padding:.7rem 1rem}

/* The wide-screen menu wraps to a second row, but the theme pins the
   nav to the 60px header height, so the wrapped row overflowed the
   fixed header's painted background and rendered over article text.
   Let the nav box grow; the header background then covers both rows. */
.header nav.nav{height:auto;min-height:var(--header-height)}

/* On wide screens the menu wraps into a second header row (measured
   135px total header height vs the 60px --header-height that content
   offsets assume). Clear the extra row on every page. */
@media screen and (min-width: 1025px){
  .main{padding-block-start: calc(var(--header-height) + var(--gap) + 75px) !important;}
}