/* moss - Typography-first design for Writers & Publishers */

/* CSS Custom Properties */
:root {
    /* Color System - Warm, paper-inspired */
    --moss-text-primary: #2c2825;
    --moss-text-secondary: #5d5853;
    --moss-text-muted: #8a8580;
    --moss-background: #faf8f5;
    --moss-background-alt: #f4f1ec;
    --moss-accent: #2d5a2d;
    --moss-accent-hover: #1e3d1e;
    --moss-border-light: #e6e2db;
    --moss-border-medium: #d1cdc4;
    
    /* Code Block Colors */
    --moss-code-background: #f8f6f3;
    --moss-code-border: #e0ddd6;
    
    /* Code Block Accent Colors - Warm Earth Tones */
    --moss-code-accent-primary: #2d5a2d;    /* moss green - systems/primary */
    --moss-code-accent-secondary: #5d5853;  /* warm gray - web languages */
    --moss-code-accent-tertiary: #8a8580;   /* muted brown - scripting */
    --moss-code-accent-quaternary: #6b5b4f; /* deeper brown - config/data */
    
    /* Typography Scale - Optimized for long-form reading (1.2-1.3 ratio) */
    --moss-font-base: 1.125rem;     /* 18px - optimal for long-form reading */
    --moss-font-sm: 1rem;           /* 16px */
    --moss-font-lg: 1.25rem;        /* 20px */
    --moss-font-xl: 1.375rem;       /* 22px - subtle H3 */
    --moss-font-2xl: 1.625rem;      /* 26px - non-distracting H2 */
    --moss-font-3xl: 2rem;          /* 32px - article H1 */
    
    /* Spacing Scale (8pt grid) */
    --moss-space-xs: 0.5rem;        /* 8px */
    --moss-space-sm: 1rem;          /* 16px */
    --moss-space-md: 1.5rem;        /* 24px */
    --moss-space-lg: 2rem;          /* 32px */
    --moss-space-xl: 3rem;          /* 48px */
    --moss-space-2xl: 4rem;         /* 64px */
    
    /* Layout */
    --moss-content-width: 65ch;     /* Optimal line length */
    --moss-site-max-width: 1200px;  /* Global max width for site layout */
    --moss-container-padding: clamp(1rem, 5vw, 2rem);
}

/* Base Styles */
* {
    box-sizing: border-box;
}

/* Universal Container - Single source of truth for layout width */
.container {
    max-width: var(--moss-site-max-width);
    margin: 0 auto;
    padding: 0 var(--moss-container-padding);
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Inter', system-ui, sans-serif;
    font-size: var(--moss-font-base);
    line-height: 1.7;
    color: var(--moss-text-primary);
    background: var(--moss-background);
    margin: 0;
    padding: var(--moss-space-lg) var(--moss-container-padding);
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--moss-text-primary);
    margin: var(--moss-space-xl) 0 var(--moss-space-md) 0;
}

h1 {
    font-size: var(--moss-font-3xl);
    margin-top: 0;
    border-bottom: 2px solid var(--moss-border-light);
    padding-bottom: var(--moss-space-sm);
}

h2 {
    font-size: var(--moss-font-2xl);
}

h3 {
    font-size: var(--moss-font-xl);
}

h4 {
    font-size: var(--moss-font-lg);
}

h5, h6 {
    font-size: var(--moss-font-base);
}

/* Body Text & Paragraphs */
p {
    margin: 0 0 var(--moss-space-md) 0;
    max-width: var(--moss-content-width);
}

p + p {
    margin-top: var(--moss-space-md);
}

/* Lists */
ul, ol {
    margin: var(--moss-space-md) 0;
    padding-left: var(--moss-space-lg);
}

li {
    margin-bottom: var(--moss-space-xs);
    line-height: 1.6;
}

li > ul, li > ol {
    margin-top: var(--moss-space-xs);
    margin-bottom: var(--moss-space-xs);
}

/* Links */
a {
    color: var(--moss-accent);
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--moss-accent-hover);
}

/* Article content links get underline on hover */
.main-content article a {
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.main-content article a:hover, .main-content article a:focus {
    border-bottom-color: var(--moss-accent-hover);
}



/* Main Navigation */
.main-nav {
    margin-bottom: var(--moss-space-2xl);
}

/* Navigation Content - handles border and layout */
.nav-content {
    border-bottom: 1px solid var(--moss-border-light);
    padding-bottom: var(--moss-space-md);
}

/* Mobile: Simple flexbox layout */
.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Desktop: Grid layout matching content */
@media (min-width: 48rem) {
    .nav-content {
        display: grid;
        grid-template-columns: 280px 1fr 120px;
        gap: var(--moss-space-xl);
        align-items: center;
    }
    
    .nav-left {
        justify-self: start;
    }
    
    .nav-right {
        justify-self: end;
        grid-column: 3;
    }
}

.nav-left {
    font-weight: 600;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--moss-space-md);
}

.main-nav a {
    color: var(--moss-text-secondary);
    border-bottom: none;
    text-decoration: none;
    white-space: nowrap;
}

.main-nav a:hover {
    color: var(--moss-accent);
}

.site-name {
    color: var(--moss-text-primary);
    font-size: var(--moss-font-lg);
    font-weight: 600;
}

.site-name:hover {
    color: var(--moss-accent);
}

/* Active navigation state */
.main-nav a.active {
    color: var(--moss-accent);
    border-bottom: 2px solid var(--moss-accent);
    padding-bottom: 2px;
}

.main-nav a.active:hover {
    color: var(--moss-accent-hover);
    border-bottom-color: var(--moss-accent-hover);
}

/* Navigation Divider */
.nav-divider {
    width: 1px;
    height: 24px;
    background-color: var(--moss-border-light);
    margin: 0 var(--moss-space-sm);
}

/* GitHub Link */
.github-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    color: var(--moss-text-secondary);
    border-bottom: none;
    transition: all 0.2s ease;
}

.github-link:hover {
    background: var(--moss-background-alt);
    color: var(--moss-accent);
}

.github-link svg {
    display: block;
}

/* Dark Mode Toggle */
.theme-toggle {
    background: none;
    border: none;
    border-radius: 4px;
    padding: 0.375rem;
    cursor: pointer;
    color: var(--moss-text-secondary);
    position: relative;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    background: var(--moss-background-alt);
    color: var(--moss-text-primary);
}

.theme-toggle:focus {
    outline: 2px solid var(--moss-accent);
    outline-offset: 2px;
}

.theme-toggle svg {
    display: block;
    transition: all 0.2s ease;
}

/* Toggle icon visibility based on theme - show call-to-action icon */
.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

html[data-theme="dark"] .theme-toggle .sun-icon {
    display: block;
}

html[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

/* Mobile Hamburger Menu */
.mobile-menu-button {
    display: none; /* Hidden by default, shown on mobile */
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--moss-text-secondary);
    transition: all 0.2s ease;
}

.mobile-menu-button:hover {
    background: var(--moss-background-alt);
    color: var(--moss-text-primary);
}

.mobile-menu-button svg {
    display: block;
}

/* Nav Links Container */
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--moss-space-md);
}

/* Nav Icons Container */
.nav-icons {
    display: flex;
    align-items: center;
    gap: var(--moss-space-md);
}

/* Mobile Navigation Styles */
@media (max-width: 48rem) {
    /* Reduce spacing on mobile */
    .nav-right {
        gap: 0.5rem;
    }

    .nav-icons {
        gap: 0.5rem;
    }

    .nav-divider {
        margin: 0 0.25rem;
    }

    .theme-toggle,
    .github-link {
        padding: 0.25rem;
    }

    /* Show hamburger, hide nav links by default on mobile */
    .mobile-menu-button {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--moss-background);
        border-bottom: 1px solid var(--moss-border-light);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        margin-top: var(--moss-space-md);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 100;
    }

    .nav-links.mobile-open {
        display: flex;
    }

    .nav-links a {
        padding: var(--moss-space-md) var(--moss-container-padding);
        border-bottom: 1px solid var(--moss-border-light);
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    .nav-links a:hover {
        background: var(--moss-background-alt);
    }

    /* Position nav-content relative for dropdown */
    .nav-content {
        position: relative;
    }
}

/* Breadcrumb Navigation */
.breadcrumb {
    font-size: 1.1em;
    color: var(--moss-text-muted);
    margin-bottom: 0; /* No margin when inside article-header */
}

.breadcrumb a {
    color: var(--moss-text-muted);
    text-decoration: none;
    border-bottom: none;
}

.breadcrumb a:hover {
    color: var(--moss-accent);
    text-decoration: underline;
}

/* Article Header - Breadcrumb and Date stacked vertically */
.article-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.5em;
    gap: var(--moss-space-sm);
}

.article-date {
    color: var(--moss-text-muted);
    font-size: 1.1em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Main Content - Minimal like stephango.com */
main {
    background: transparent;
    padding: 0;
    margin-bottom: var(--moss-space-2xl);
}

article {
    max-width: var(--moss-content-width);
}

/* Allow full width in page grid layout */
.page-wrapper article {
    max-width: none;
}

/* Article metadata (date) spacing and color */
.article-meta {
    margin-bottom: var(--moss-space-md);
}

.article-meta time {
    color: var(--moss-text-muted);
    font-size: var(--moss-font-base);
}

/* Date styling for listings and inline references */
.date {
    color: var(--moss-text-muted);
}

/* Article date at top of content */
.main-content > p:first-child {
    margin-bottom: var(--moss-space-lg);
}

/* Page Layout */
.page-wrapper {
    /* Simple wrapper, all styling in .container */
}

/* Mobile: Stack sidebar after content */
.page-wrapper .container {
    display: flex;
    flex-direction: column;
}

.main-content {
    order: 1; /* Content first on mobile */
}

.latest-sidebar {
    order: 2; /* Sidebar after content on mobile */
    margin-bottom: var(--moss-space-xl);
}

.latest-sidebar h3 {
    font-size: var(--moss-font-base);
    font-weight: 500;
    margin-bottom: var(--moss-space-md);
    color: var(--moss-text-secondary);
}

.latest-sidebar .date,
.topic-articles .date {
    margin-right: 0.5rem; /* 8px spacing between date and title */
}

.latest-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.latest-list li {
    margin-bottom: var(--moss-space-sm);
}

.latest-list .entry-date {
    display: block;
    font-size: var(--moss-font-sm);
    color: var(--moss-text-muted);
    margin-bottom: 0.25rem;
}

.latest-list a {
    color: var(--moss-text-secondary);
    text-decoration: none;
    font-size: var(--moss-font-sm);
    line-height: 1.5;
    display: block;
}

.latest-list a:hover {
    color: var(--moss-accent);
    text-decoration: underline;
}

.no-posts {
    color: var(--moss-text-muted);
    font-style: italic;
    margin: 0;
}

.topics {
    margin-top: var(--moss-space-xl);
    border-top: 1px solid var(--moss-border-light);
    padding-top: var(--moss-space-lg);
}

.topics h3 {
    font-size: var(--moss-font-lg);
    font-weight: 500;
    margin-bottom: var(--moss-space-md);
    color: var(--moss-text-primary);
}

.topic-tags {
    margin: 0;
    line-height: 1.6;
}

.topic-tags a {
    color: var(--moss-text-secondary);
    text-decoration: none;
}

.topic-tags a:hover {
    color: var(--moss-accent);
}

/* Desktop: 3-column grid layout */
@media (min-width: 48rem) {
    .page-wrapper .container {
        display: grid;
        grid-template-columns: 280px 1fr 120px;
        gap: var(--moss-space-xl);
        align-items: start;
        flex-direction: initial; /* Reset flexbox */
    }
    
    .latest-sidebar {
        margin-bottom: 0;
        order: initial; /* Reset order */
    }
    
    .main-content {
        order: initial; /* Reset order */
    }
}

/* Code */
code {
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
    font-size: 0.9em;
    background: var(--moss-background-alt);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    color: var(--moss-text-primary);
}

pre {
    background: var(--moss-code-background);
    border: 1px solid var(--moss-code-border);
    border-radius: 6px;
    padding: 1.5rem;
    overflow-x: auto;
    position: relative;
    margin: 1.5rem 0;
    line-height: 1.5;
    /* Add subtle shadow for depth */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

pre code {
    background: none;
    padding: 0;
    font-size: 0.875rem;
}

/* Language-specific accent borders - Warm Earth Tones */
/* Systems Languages - Primary moss green */
pre:has(code[class*="language-rust"]),
pre:has(code[class*="language-c"]),
pre:has(code[class*="language-cpp"]),
pre:has(code[class*="language-c++"]),
pre:has(code[class*="language-go"]) {
    border-left: 3px solid var(--moss-code-accent-primary);
}

/* Web Technologies - Warm gray */
pre:has(code[class*="language-css"]),
pre:has(code[class*="language-scss"]),
pre:has(code[class*="language-sass"]),
pre:has(code[class*="language-html"]),
pre:has(code[class*="language-xml"]),
pre:has(code[class*="language-javascript"]),
pre:has(code[class*="language-js"]),
pre:has(code[class*="language-typescript"]),
pre:has(code[class*="language-ts"]) {
    border-left: 3px solid var(--moss-code-accent-secondary);
}

/* Scripting Languages - Muted brown */
pre:has(code[class*="language-python"]),
pre:has(code[class*="language-py"]),
pre:has(code[class*="language-ruby"]),
pre:has(code[class*="language-rb"]),
pre:has(code[class*="language-php"]),
pre:has(code[class*="language-bash"]),
pre:has(code[class*="language-sh"]),
pre:has(code[class*="language-shell"]) {
    border-left: 3px solid var(--moss-code-accent-tertiary);
}

/* Configuration/Data Languages - Deeper brown */
pre:has(code[class*="language-json"]),
pre:has(code[class*="language-yaml"]),
pre:has(code[class*="language-yml"]),
pre:has(code[class*="language-toml"]),
pre:has(code[class*="language-ini"]) {
    border-left: 3px solid var(--moss-code-accent-quaternary);
}

/* Blockquotes */
blockquote {
    border-left: 4px solid var(--moss-accent);
    margin: var(--moss-space-lg) 0;
    padding-left: var(--moss-space-lg);
    color: var(--moss-text-secondary);
    font-style: italic;
    font-size: var(--moss-font-lg);
}

blockquote p {
    margin: var(--moss-space-sm) 0;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: var(--moss-space-lg) 0;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--moss-space-lg) 0;
    border: 1px solid var(--moss-border-medium);
    border-radius: 6px;
    overflow: hidden;
}

th, td {
    padding: var(--moss-space-sm) var(--moss-space-md);
    text-align: left;
    border-bottom: 1px solid var(--moss-border-light);
}

th {
    background: var(--moss-background-alt);
    font-weight: 600;
    color: var(--moss-text-primary);
}

tr:last-child td {
    border-bottom: none;
}

/* Horizontal Rule */
hr {
    border: none;
    height: 1px;
    background: var(--moss-border-light);
    margin: var(--moss-space-2xl) 0;
}

/* Responsive Design */
@media (max-width: 48rem) {
    :root {
        --moss-font-base: 1rem;         /* 16px on mobile */
        --moss-font-2xl: 1.5rem;        /* 24px - H2 on mobile */
        --moss-font-3xl: 1.75rem;       /* 28px - H1 on mobile */
    }

    body {
        padding: var(--moss-space-md);
    }

    main {
        padding: var(--moss-space-lg);
    }

    .article-date {
        font-size: 1em;
    }
}

/* Blog Feed Styling */
.blog-feed {
    max-width: var(--moss-content-width);
}

.blog-entry {
    margin-bottom: var(--moss-space-2xl);
    padding-bottom: var(--moss-space-xl);
    border-bottom: 1px solid var(--moss-border-light);
}

.blog-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.blog-entry-header {
    margin-bottom: var(--moss-space-md);
}

.blog-entry-title {
    margin: 0 0 var(--moss-space-xs) 0;
    font-size: var(--moss-font-xl);
    line-height: 1.3;
}

.blog-entry-title a {
    color: var(--moss-text-primary);
    text-decoration: none;
    border-bottom: none;
}

.blog-entry-title a:hover {
    color: var(--moss-accent);
}

.blog-entry-date {
    font-size: var(--moss-font-sm);
    color: var(--moss-text-secondary);
    font-weight: 500;
    display: block;
    margin-bottom: var(--moss-space-sm);
}

.blog-entry-excerpt {
    color: var(--moss-text-secondary);
    line-height: 1.6;
}

.blog-entry-excerpt p {
    margin-bottom: var(--moss-space-sm);
}

.read-more {
    font-weight: 500;
    color: var(--moss-accent) !important;
    border-bottom: 1px solid transparent !important;
}

.read-more:hover {
    border-bottom-color: var(--moss-accent-hover) !important;
}

/* Content Table */
.content-table {
    margin: var(--moss-space-xl) 0;
}

.content-table h1, .content-table h2 {
    margin-bottom: var(--moss-space-lg);
    color: var(--moss-text-primary);
}

.content-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--moss-space-md);
}

.content-table th {
    background: var(--moss-background-alt);
    padding: var(--moss-space-sm) var(--moss-space-md);
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--moss-border-medium);
}

.content-table td {
    padding: var(--moss-space-sm) var(--moss-space-md);
    border-bottom: 1px solid var(--moss-border-light);
}

.content-table tr:hover {
    background: var(--moss-background-alt);
}

.content-table a {
    color: var(--moss-text-primary);
    font-weight: 500;
}

.content-table a:hover {
    color: var(--moss-accent);
}

/* Post Metadata */
.post-meta {
    margin-bottom: var(--moss-space-lg);
    padding: var(--moss-space-sm) 0;
    border-bottom: 1px solid var(--moss-border-light);
}

.post-meta .meta {
    font-size: var(--moss-font-sm);
    color: var(--moss-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--moss-space-sm);
    flex-wrap: wrap;
}

.post-meta .topic {
    background: var(--moss-background-alt);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: var(--moss-font-sm);
    color: var(--moss-accent);
    border: 1px solid var(--moss-border-light);
}

/* Dark mode support */
[data-theme="dark"] {
    --moss-text-primary: #e8e6e3;
    --moss-text-secondary: #b8b5b0;
    --moss-text-muted: #8a8580;
    --moss-background: #1a1816;
    --moss-background-alt: #242018;
    --moss-border-light: #3a362f;
    --moss-border-medium: #4a453c;
    --moss-accent: #4a7c4a;
    --moss-accent-hover: #5a8c5a;
    
    /* Code Block Colors - Dark Mode */
    --moss-code-background: #1e1e1e;
    --moss-code-border: #3a3a3a;
    
    /* Code Block Accent Colors - Dark Mode Variants */
    --moss-code-accent-primary: #4a7c4a;    /* lighter moss green */
    --moss-code-accent-secondary: #b8b5b0;  /* lighter warm gray */
    --moss-code-accent-tertiary: #a8a19a;   /* lighter muted brown */
    --moss-code-accent-quaternary: #9b8b7f; /* lighter deeper brown */
}

/* Auto dark mode for users without manual preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --moss-text-primary: #e8e6e3;
        --moss-text-secondary: #b8b5b0;
        --moss-text-muted: #8a8580;
        --moss-background: #1a1816;
        --moss-background-alt: #242018;
        --moss-border-light: #3a362f;
        --moss-border-medium: #4a453c;
        --moss-accent: #4a7c4a;
        --moss-accent-hover: #5a8c5a;
        
        /* Code Block Colors - Dark Mode */
        --moss-code-background: #1e1e1e;
        --moss-code-border: #3a3a3a;
        
        /* Code Block Accent Colors - Dark Mode Variants */
        --moss-code-accent-primary: #4a7c4a;    /* lighter moss green */
        --moss-code-accent-secondary: #b8b5b0;  /* lighter warm gray */
        --moss-code-accent-tertiary: #a8a19a;   /* lighter muted brown */
        --moss-code-accent-quaternary: #9b8b7f; /* lighter deeper brown */
    }
}

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}