/* Font family override - use serif fonts */
body {
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
    line-height: 1.65; /* Increased from default for better readability */
}

/* Theme Definitions */

/* Dark Purple Theme - warm, sophisticated palette */
:root[data-theme="dark-purple"] {
    /* Backgrounds - warm dark with subtle purple undertones */
    --pico-background-color: #1a1620 !important;
    --pico-card-background-color: #252030 !important;
    
    /* Text colors */
    --pico-color: #e8e3f0 !important;
    --pico-h1-color: #f5f0ff !important;
    --pico-h2-color: #f5f0ff !important;
    --pico-h3-color: #f5f0ff !important;
    --pico-h4-color: #f5f0ff !important;
    --pico-h5-color: #f5f0ff !important;
    --pico-h6-color: #f5f0ff !important;
    --pico-muted-color: #a89ec0 !important;
    
    /* Links - warm gold accent */
    --pico-primary: #d4a574 !important;
    --pico-primary-hover: #e6b885 !important;
    --pico-primary-focus: rgba(212, 165, 116, 0.25) !important;
    
    /* Borders and code */
    --pico-border-color: #3a3545 !important;
    --pico-code-background-color: #252030 !important;
    --pico-code-color: #e8e3f0 !important;
}

/* Dark Blue Theme - cool, professional */
:root[data-theme="dark-blue"] {
    /* Backgrounds - deep blue-black */
    --pico-background-color: #0d1117 !important;
    --pico-card-background-color: #161b22 !important;
    
    /* Text colors */
    --pico-color: #e6edf3 !important;
    --pico-h1-color: #f0f6fc !important;
    --pico-h2-color: #f0f6fc !important;
    --pico-h3-color: #f0f6fc !important;
    --pico-h4-color: #f0f6fc !important;
    --pico-h5-color: #f0f6fc !important;
    --pico-h6-color: #f0f6fc !important;
    --pico-muted-color: #8b949e !important;
    
    /* Links - cyan accent */
    --pico-primary: #58a6ff !important;
    --pico-primary-hover: #79b8ff !important;
    --pico-primary-focus: rgba(88, 166, 255, 0.25) !important;
    
    /* Borders and code */
    --pico-border-color: #30363d !important;
    --pico-code-background-color: #161b22 !important;
    --pico-code-color: #e6edf3 !important;
}

/* Dark Green Theme - forest, natural */
:root[data-theme="dark-green"] {
    /* Backgrounds - deep forest */
    --pico-background-color: #0f1a0f !important;
    --pico-card-background-color: #1a2a1a !important;
    
    /* Text colors */
    --pico-color: #e8f0e8 !important;
    --pico-h1-color: #f0f8f0 !important;
    --pico-h2-color: #f0f8f0 !important;
    --pico-h3-color: #f0f8f0 !important;
    --pico-h4-color: #f0f8f0 !important;
    --pico-h5-color: #f0f8f0 !important;
    --pico-h6-color: #f0f8f0 !important;
    --pico-muted-color: #90a890 !important;
    
    /* Links - emerald accent */
    --pico-primary: #5eb85e !important;
    --pico-primary-hover: #72c872 !important;
    --pico-primary-focus: rgba(94, 184, 94, 0.25) !important;
    
    /* Borders and code */
    --pico-border-color: #2a3a2a !important;
    --pico-code-background-color: #1a2a1a !important;
    --pico-code-color: #e8f0e8 !important;
}

/* Light Warm Theme - cream and brown */
:root[data-theme="light-warm"] {
    /* Backgrounds - warm cream */
    --pico-background-color: #faf8f5 !important;
    --pico-card-background-color: #ffffff !important;
    
    /* Text colors */
    --pico-color: #3a3330 !important;
    --pico-h1-color: #2a2220 !important;
    --pico-h2-color: #2a2220 !important;
    --pico-h3-color: #2a2220 !important;
    --pico-h4-color: #2a2220 !important;
    --pico-h5-color: #2a2220 !important;
    --pico-h6-color: #2a2220 !important;
    --pico-muted-color: #6a6360 !important;
    
    /* Links - warm brown */
    --pico-primary: #8b5a3c !important;
    --pico-primary-hover: #704a30 !important;
    --pico-primary-focus: rgba(139, 90, 60, 0.25) !important;
    
    /* Borders and code */
    --pico-border-color: #e8e0d8 !important;
    --pico-code-background-color: #f0e8e0 !important;
    --pico-code-color: #3a3330 !important;
}

/* Light Cool Theme - pure and blue */
:root[data-theme="light-cool"] {
    /* Backgrounds - pure white */
    --pico-background-color: #ffffff !important;
    --pico-card-background-color: #f8f9fa !important;
    
    /* Text colors */
    --pico-color: #24292f !important;
    --pico-h1-color: #1a1f24 !important;
    --pico-h2-color: #1a1f24 !important;
    --pico-h3-color: #1a1f24 !important;
    --pico-h4-color: #1a1f24 !important;
    --pico-h5-color: #1a1f24 !important;
    --pico-h6-color: #1a1f24 !important;
    --pico-muted-color: #57606a !important;
    
    /* Links - vibrant blue */
    --pico-primary: #0969da !important;
    --pico-primary-hover: #0860ca !important;
    --pico-primary-focus: rgba(9, 105, 218, 0.25) !important;
    
    /* Borders and code */
    --pico-border-color: #d1d9e0 !important;
    --pico-code-background-color: #f3f4f6 !important;
    --pico-code-color: #24292f !important;
}

/* Light Pastel Theme - soft and playful */
:root[data-theme="light-pastel"] {
    /* Backgrounds - soft lavender */
    --pico-background-color: #faf9fc !important;
    --pico-card-background-color: #ffffff !important;
    
    /* Text colors */
    --pico-color: #4a4558 !important;
    --pico-h1-color: #3a3548 !important;
    --pico-h2-color: #3a3548 !important;
    --pico-h3-color: #3a3548 !important;
    --pico-h4-color: #3a3548 !important;
    --pico-h5-color: #3a3548 !important;
    --pico-h6-color: #3a3548 !important;
    --pico-muted-color: #7a7588 !important;
    
    /* Links - soft purple */
    --pico-primary: #8b5cf6 !important;
    --pico-primary-hover: #7c3aed !important;
    --pico-primary-focus: rgba(139, 92, 246, 0.25) !important;
    
    /* Borders and code */
    --pico-border-color: #e9e5f0 !important;
    --pico-code-background-color: #f3f0f8 !important;
    --pico-code-color: #4a4558 !important;
}

/* Legacy support for simple dark theme */
:root[data-theme="dark"] {
    /* Use dark-purple as default dark theme */
    --pico-background-color: #1a1620 !important;
    --pico-card-background-color: #252030 !important;
    --pico-color: #e8e3f0 !important;
    --pico-h1-color: #f5f0ff !important;
    --pico-h2-color: #f5f0ff !important;
    --pico-h3-color: #f5f0ff !important;
    --pico-h4-color: #f5f0ff !important;
    --pico-h5-color: #f5f0ff !important;
    --pico-h6-color: #f5f0ff !important;
    --pico-muted-color: #a89ec0 !important;
    --pico-primary: #d4a574 !important;
    --pico-primary-hover: #e6b885 !important;
    --pico-primary-focus: rgba(212, 165, 116, 0.25) !important;
    --pico-border-color: #3a3545 !important;
    --pico-code-background-color: #252030 !important;
    --pico-code-color: #e8e3f0 !important;
}

/* Font size increase overrides */
html {
    font-size: 100%; /* Base font size (16px) */
}

/* Increase responsive font scaling */
@media (min-width: 576px) {
    html { font-size: 106.25%; } /* Original PicoCSS size */
}

@media (min-width: 768px) {
    html { font-size: 112.5%; } /* Original PicoCSS size */
    header { margin-top: 5em; }
}

@media (min-width: 1024px) {
    html { font-size: 118.75%; } /* Original PicoCSS size */
}

@media (min-width: 1280px) {
    html { font-size: 125%; } /* Original PicoCSS size */
}

@media (min-width: 1536px) {
    html { font-size: 131.25%; } /* Original PicoCSS size */
}

/* Standard heading sizes */
h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}
h1 { font-size: 2rem; } /* Original PicoCSS size */
h2 { font-size: 1.75rem; } /* Original PicoCSS size */
h3 { font-size: 1.5rem; } /* Original PicoCSS size */
h4 { font-size: 1.25rem; } /* Original PicoCSS size */
h5 { font-size: 1.125rem; } /* Original PicoCSS size */
h6 { font-size: 1rem; } /* Original PicoCSS size */

.container { 
    max-width: 900px; 
}

.right { 
    text-align: right; 
}

.center { 
    text-align: center; 
}

.decoration-none { 
    text-decoration: none; 
}

#theme-toggle {
    text-decoration: none !important;
}

#theme-toggle:hover {
    text-decoration: none !important;
    background: none;
}

.task-list-item { 
    list-style-type: none; 
}

/* Two-column layout */
.cols {
    display: flex;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}

.col1, .col2 {
    flex: 1 1 40%;
    min-width: 250px;
}

/* Add border between columns when side by side */
@media (min-width: 768px) {
    .cols {
        gap: 4rem; /* Total space between columns */
    }
    
    .col1 {
        position: relative;
    }
    
    .col1::after {
        content: "";
        position: absolute;
        right: -2rem; /* Half of the gap */
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: rgba(128, 128, 128, 0.2);
    }
}

/* Keep gap on mobile */
@media (max-width: 767px) {
    .cols {
        gap: 2rem;
    }
}

/* Ensure content inside columns has proper spacing */
.cols > div > *:first-child {
    margin-top: 0;
}

.cols > div > *:last-child {
    margin-bottom: 0;
}

/* Tag styling */
mark {
    border-radius: 0.375rem; /* 6px rounded corners */
    font-size: 0.875rem; /* Slightly smaller font size */
}

/* Improved line height for tag containers */
.posts-tags {
    line-height: 1.8; /* Increased from default for better multi-line spacing */
}

/* Section header with inline links */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
}

.section-header h2 {
    margin-bottom: 0;
    flex-grow: 1;
}

.header-link {
    font-size: 0.875rem;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.header-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Simplified article and social post styling */
.posts-post, .mastodon-post {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 2rem;
}

/* Remove ALL PicoCSS article styling globally */
article {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Ensure specific post types have no backgrounds */
article.posts-post, 
article.mastodon-post,
article.bluesky-post {
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Ensure links in titles are prominent */
.posts-title a {
    text-decoration: none;
    color: inherit;
}

.posts-title a:hover {
    text-decoration: underline;
}

/* Reduce gap between title and date */
.posts-title {
    margin-bottom: 0.25rem;
    background: transparent !important;
    padding: 0;
}

/* Ensure post headers have no background or borders */
.posts-header {
    background: transparent !important;
    border: none !important;
}

.posts-header h4 {
    background: transparent !important;
    padding: 0;
    margin: 0 0 0.25rem 0;
}

/* Remove borders from small/date elements */
.posts-header small,
.posts-date {
    border: none !important;
    border-bottom: none !important;
}

/* Clean up spacing */
.posts-snippet {
    margin: 0.5rem 0;
}

.mastodon-content {
    padding: 0;
}

/* Smaller, muted dates */
.posts-date, .bluesky-date {
    opacity: 0.7;
}

/* Theme selector styling */
.theme-selector-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-selector-toggle:hover svg {
    opacity: 0.8;
}

/* Theme dropdown styling */
.theme-dropdown {
    overflow: visible;
    white-space: nowrap;
    pointer-events: none; /* Prevent blocking clicks when hidden */
}

.theme-dropdown[style*="display: block"] {
    pointer-events: auto; /* Enable clicks when visible */
}

.theme-options {
    position: relative;
}

.theme-dropdown a {
    display: inline-block;
    line-height: 0;
}

/* Add subtle background for light theme strokes */
.theme-dropdown svg {
    background: var(--pico-card-background-color);
    border-radius: 50%;
}

.theme-dropdown a:hover {
    transform: scale(1.1);
}

/* Add active theme indicator */
.theme-dropdown a[data-theme-active] svg {
    filter: drop-shadow(0 0 4px currentColor);
}

/* Responsive behavior for small screens */
@media (max-width: 767px) {
    .cols {
        flex-direction: column;
        gap: 1rem;
    }
    
    .col1, .col2 {
        flex: 1 1 100%;
    }
}

/* Blockquote styling - remove border and italicize */
blockquote {
    border-left: none !important;
    border-inline-start: none !important;
    padding-left: 2rem !important;
    padding-inline-start: 2rem !important;
    font-style: italic;
    margin: 1.5rem 0;
}