/*
 * The Green Almanac - Modern Vintage Stylesheet
 * Clean, modern design with vintage botanical touches
 * Color palette: Whites, Greens, Blacks
 */

/* === CSS Variables === */
:root {
    /* Colors */
    --color-primary: #0a2614;        /* Dark forest green (much darker) */
    --color-primary-light: #1a3a1f;  /* Medium forest green (darker) */
    --color-accent: #4a7c59;         /* Sage green */
    --color-accent-light: #6f9a6f;   /* Light sage */
    --color-success: #4e8f4e;        /* Muted green */
    
    --color-text: #1a1a1a;           /* Almost black */
    --color-text-light: #4a5568;     /* Gray text */
    --color-text-muted: #718096;     /* Muted gray */
    
    --color-bg: #ffffff;             /* Pure white */
    --color-bg-alt: #f8faf9;         /* Off-white with green tint */
    --color-bg-light: #f0f4f2;       /* Light green-gray */
    --color-bg-dark: #e8ede9;        /* Darker green-gray */
    
    --color-border: #d1d9d4;         /* Soft green-gray border */
    --color-border-light: #e5ebe7;   /* Very light border */
    
    /* Fonts */
    --font-body: Georgia, 'Times New Roman', serif; /* vintage feel: serif body */
    --font-heading: 'Goudy Old Style', 'Georgia', serif; /* vintage headings */
    --font-mono: 'Courier New', Courier, monospace;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    
    /* Layout */
    --max-width: 1400px; /* allow wider content to use available space */
    --max-width-narrow: 800px;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(26, 71, 42, 0.1);
    --shadow-md: 0 4px 6px rgba(26, 71, 42, 0.1);
    --shadow-lg: 0 10px 15px rgba(26, 71, 42, 0.1);
}

/* === Reset & Base === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    line-height: 1.6;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Vintage subtle paper texture (light, non-intrusive) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(0,0,0,0.01) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.03;
    z-index: 0;
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.3;
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
    color: var(--color-primary);
}

h1 { font-size: 2rem; letter-spacing: -0.02em; }
h2 { font-size: 1.6rem; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.375rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-bottom: 1px solid transparent;
}

a:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-accent-light);
}

strong, b {
    font-weight: 600;
    color: var(--color-primary);
}

/* === Layout === */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.container-narrow {
    max-width: var(--max-width-narrow);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* === Header === */
.site-header {
    background: var(--color-primary);
    color: white;
    padding: var(--spacing-md) 0.5rem;
    margin-bottom: var(--spacing-lg);
    border-bottom: 4px solid var(--color-accent);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.site-title {
    font-size: 2rem;
    /* use accent light color for a softer green title per request */
    color: var(--color-accent-light);
    text-decoration: none;
    /* reduce visual weight a bit so the header looks less heavy */
    font-weight: 500;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border: none;
    /* slightly stronger shadow to improve legibility against textured backgrounds */
    text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}

.site-title:hover {
    color: var(--color-accent-light);
    border: none;
}

/* Ensure the anchor inside the site title uses the intended color (overrides global a{} rule) */
.site-title a {
    color: var(--color-accent-light);
    text-decoration: none;
    border: none;
}

.site-title:hover a {
    color: var(--color-accent);
}

.site-title a:focus {
    outline: 2px solid rgba(74,124,89,0.18);
    outline-offset: 3px;
}

.site-title::before {
    content: ""; /* icon moved to inline SVG in header for consistent rendering */
}

.site-tagline {
    font-size: 0.9rem;
    color: var(--color-accent-light);
    font-style: italic;
    margin-top: 0.25rem;
}

/* === Navigation === */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.main-nav a {
    color: white;
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.main-nav a:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-accent-light);
    color: white;
}

/* Subtle grouping for library items */
.main-nav .nav-group-start {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.main-nav .nav-group-end {
    margin-right: 0.5rem;
    padding-right: 0.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

/* === Global Search in header === */
.global-search { padding: 0.75rem 0; }
.global-search .search-wrapper { max-width: 760px; margin: 0 auto; position: relative; }
.global-search input[type="search"] {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border-radius: 32px;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 2px 6px rgba(15,59,31,0.04);
    font-size: 1rem;
}

/* Spinner - small circular indicator */
#global-search-spinner {
    width: 18px;
    height: 18px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.08);
    border-top-color: var(--color-primary);
    display: none;
}
.search-spinner[aria-hidden="false"] { display: block; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(10,40,20,0.08);
    z-index: 9999;
    max-height: 360px;
    overflow: auto;
    display: none;
}
.search-results[aria-hidden="false"] { display: block; }
.search-result-item {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border-light);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item a { color: #1a73e8; text-decoration: underline; display: block; }
.search-result-item a:hover, .search-result-item[aria-selected="true"] a {
    background: white;
    color: #0d47a1;
    text-decoration: underline;
}
.search-result-item:hover { background: var(--color-bg-alt); cursor: pointer; }
.search-result-item .search-result-excerpt { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.25rem; }
.search-result-type { font-size: 0.8rem; color: var(--color-text-muted); margin-left: 0.35rem; }

/* Result badge/icon */
.result-badge { 
    display: inline-block; 
    font-size: 0.8rem; 
    padding: 0.15rem 0.45rem; 
    border-radius: 999px; 
    background: var(--color-bg-light); 
    color: var(--color-primary); 
    margin-right: 0.45rem; 
}

/* Type-specific badge colors - DARK for direct results */
.result-badge.badge-article { 
    background: #2d5f35; 
    color: #ffffff; 
    font-weight: 600;
}
.result-badge.badge-material { 
    background: #3d6f3d; 
    color: #ffffff; 
    font-weight: 600;
}
.result-badge.badge-calendar { 
    background: #e65100; 
    color: #ffffff; 
    font-weight: 600;
}

/* Related content badge styling - Use logo/footer accent-light color */
.result-badge.badge-related {
    background: #5a8c6a !important;  /* Darker, more saturated sage green */
    color: #ffffff !important;
    border: 1px solid #4a7c59;
    font-weight: 600;
}

/* Related indicator */
.related-indicator {
    font-size: 0.75rem;
    color: #3d6b4a;  /* Darker sage for better visibility */
    font-style: italic;
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Make related results use logo accent colors */
.search-result-item.related-result {
    opacity: 1;
}

.search-result-item.related-result a {
    color: #1a73e8;  /* Blue for clickability */
    text-decoration: underline;
}

.search-result-item.related-result a strong {
    color: #1a73e8;  /* Blue for clickability */
    font-weight: 700;
}

.search-result-item.related-result a:hover {
    color: #0d47a1;
    text-decoration: underline;
}

/* Make direct results BLUE and prominent for clickability */
.search-result-item:not(.related-result) a strong {
    color: #1a73e8;
    font-weight: 700;
}

/* Calendar-specific styling in search results */
.search-result-calendar .calendar-meta {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.search-result-calendar .meta-tag {
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    color: var(--color-text-light);
}

/* Inline metadata for search.php fallback page */
.calendar-meta-inline {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-left: 0.5rem;
}

/* Related content sections - Use logo/footer colors */
.related-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 2px dashed #5a8c6a;  /* Darker sage */
    opacity: 1;
    background: #eef7f1;  /* Subtle green tint but more visible */
    padding: var(--spacing-lg);
    border-radius: 6px;
}

.related-section h3 {
    color: #4a7c59;  /* Saturated sage */
    font-size: 0.95rem;
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

.related-section li {
    list-style: none;
}

.related-section a {
    color: #1a73e8;  /* Blue for clickability */
    font-weight: 600;
    text-decoration: underline;
}

.related-section a:hover {
    color: #0d47a1;  /* Darker blue on hover */
    text-decoration: underline;
}

.related-section a strong {
    color: #1a73e8;  /* Blue for clickability */
    font-weight: 700;
}

.via-text {
    font-size: 0.8rem;
    color: #5a8c6a;  /* Medium sage */
    font-style: italic;
}

/* Highlight matched terms */
.search-highlight { background: linear-gradient(90deg, #fff7c2, #fffbd6); font-weight: 700; }

@media (max-width: 768px) {
    .global-search input[type="search"] { min-width: 140px; }
}

/* === Hero Section === */
.hero {
    background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-bg-alt) 100%);
    padding: var(--spacing-lg) 0.5rem;
    margin-bottom: var(--spacing-lg);
    border-radius: 4px;
    border: 1px solid var(--color-border-light);
    text-align: center; /* ensure hero title and content are centered */
}

.hero h1,
.hero h2 {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
    text-align: center;
}

.hero p,
.hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-text-light);
    max-width: 700px;
    margin: 0 auto var(--spacing-md);
}

.hero-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

/* === Buttons === */
.btn {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.12s ease;
    border: 1px solid var(--color-primary);
    cursor: pointer;
    font-size: 0.95rem;
}

.btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg);
}

.btn-primary:hover {
    background: var(--color-primary-light);
}

.btn-secondary,
.btn-large {
    background: white;
    color: var(--color-primary);
    border-color: var(--color-border);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1.1rem;
}

.btn-secondary:hover,
.btn-large:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-accent);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.btn-accent {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-accent:hover {
    background: var(--color-accent-light);
    border-color: var(--color-accent-light);
}

/* === Grids === */
.articles-grid,
.sections-grid {
    display: grid;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.articles-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.sections-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

/* Browse by Section: make the tiles look like green action buttons */
.section-card {
    display: block;
    background: linear-gradient(180deg, rgba(74,124,89,0.06), rgba(74,124,89,0.02));
    border: 1px solid rgba(46,79,46,0.12);
    border-radius: 10px;
    padding: 1rem;
    text-decoration: none;
    color: var(--color-primary);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    box-shadow: 0 2px 6px rgba(15,59,31,0.03);
}
.section-card h3 { margin: 0 0 0.25rem 0; color: var(--color-primary); font-size: 1.15rem; }
.section-card p { margin: 0; color: var(--color-text-muted); }

.section-card:hover,
.section-card:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(15,59,31,0.08);
    background: linear-gradient(180deg, var(--color-accent-light), rgba(74,124,89,0.06));
    color: white;
}
.section-card:hover h3, .section-card:focus h3 { color: white; }
.section-card:focus { outline: 3px solid rgba(74,124,89,0.14); outline-offset: 2px; }

/* Make the link look like a pill/button on small screens */
@media (max-width: 480px) {
    .section-card { padding: 0.85rem; border-radius: 8px; }
}

.grid {
    display: grid;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-xl);
}

/* === Cards === */
.article-card,
.card {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    transition: all 0.12s ease;
}

/* Affordance for cards made clickable by JS */
.is-clickable { cursor: pointer; }
.is-clickable:focus { outline: 3px solid rgba(74,124,89,0.18); outline-offset: 3px; }

.article-card:hover,
.card:hover {
    border-color: var(--color-accent-light);
    transform: translateY(-2px);
}

.article-card h3,
.card-title {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-xs);
    color: var(--color-primary);
}

.article-card h3 {
    margin-top: var(--spacing-xs);
}

.article-card h3 a {
    text-decoration: none;
    border: none;
}

/* Block-level link that fills the card so the whole card is clickable */
.card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.card-link .card-content { /* ensure inner padding stays intact */
    display: block;
}
.card-link:focus { outline: none; }

.article-card h3 a:hover {
    color: var(--color-accent);
}

.card-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
}

.card-footer {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.card-excerpt {
    color: var(--color-text-light);
    line-height: 1.6;
}

/* === Badges === */
.badge,
.section-badge,
.difficulty-badge,
.format-badge,
.season-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.section-badge {
    background: #1a3a1f;
    color: #ffffff;
    font-weight: 700;
}

.difficulty-badge {
    background: var(--color-bg-dark);
    color: var(--color-primary);
}

.difficulty-basic {
    background: var(--color-success);
    color: white;
}

.difficulty-intermediate {
    background: var(--color-accent);
    color: white;
}

.difficulty-advanced {
    background: var(--color-primary);
    color: white;
}

.format-badge {
    background: var(--color-accent-light);
    color: white;
}

.season-badge {
    background: var(--color-bg-dark);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}

/* === Library Layout === */
.library-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--spacing-md);
}

.filters-sidebar,
.sidebar {
    background: var(--color-bg-light);
    padding: var(--spacing-sm);
    border-radius: 4px;
    border: 1px solid var(--color-border-light);
    margin-bottom: var(--spacing-md);
    height: fit-content;
    position: sticky;
    top: 0.5rem;
}

.sidebar h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-accent-light);
}

.filter-group {
    margin-bottom: var(--spacing-sm);
}

.filter-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--color-primary);
}

.filter-group select,
.filter-group input {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    background: white;
    transition: border-color 0.12s ease;
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.1);
}

.filter-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Inline filter rows: align label and control side-by-side for compact checkboxes */
.filter-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.filter-inline label {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 600;
    color: var(--color-primary);
}
.filter-inline input[type="checkbox"] {
    width: auto;
    height: auto;
    margin: 0;
}

/* === Article Detail === */
.article-detail {
    max-width: var(--max-width-narrow);
    margin: 0 auto;
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.article-header,
.page-header {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 3px solid var(--color-border-light);
}

.page-header {
    text-align: center;
    padding: var(--spacing-sm) 0;
}

/* Center top-level page titles inside containers */
.container h1 {
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.page-header h1 {
    margin-bottom: 0.25rem;
}

.page-header p {
    font-size: 1rem;
    color: var(--color-text-light);
    margin: 0;
}

/* Breadcrumbs (compact, vintage) */
.breadcrumb {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
}
.breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px dotted rgba(0,0,0,0.05);
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb strong {
    color: var(--color-text);
    font-weight: 700;
}

/* === Article Materials (migrated from article.php) === */
.article-materials {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-sm);
    background: var(--color-bg-alt);
    border-radius: 6px;
    border: 1px solid var(--color-border-light);
}

.article-materials h2 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    color: var(--color-primary);
}

.materials-intro {
    margin-bottom: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.materials-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.material-item {
    background: white;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.material-info {
    padding: 0.75rem;
}

.material-info h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    color: var(--color-primary);
}

.material-info h3 a {
    color: var(--color-primary);
    text-decoration: none;
}

.material-info h3 a:hover { text-decoration: underline; }

.material-info .other-names { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; }

.material-widget { padding: 0.5rem; background: var(--color-bg); border-top: 1px solid var(--color-border-light); }

@media print {
    .article-materials { background: white; border: 1px solid black; page-break-inside: avoid; }
    .material-widget, .material-purchase { display: none; }
}

/* === Material Detail Page === */
.material-detail {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-md);
}

.material-header {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.material-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.material-badge { padding: 0.4rem 0.75rem; border-radius: 12px; font-size: 0.85rem; font-weight: 700; }

.material-header h1 { font-size: 1.6rem; color: var(--color-primary); margin-bottom: 0.25rem; }
.material-technical { font-size: 0.95rem; color: var(--color-text-muted); font-style: italic; margin-bottom: 0.5rem; }
.material-other-names { font-size: 0.92rem; color: var(--color-text-muted); margin-bottom: 0.75rem; }

.material-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; padding: 0.75rem; background: var(--color-bg-alt); border-radius: 6px; margin-top: 0.75rem; }
.meta-item .meta-label { font-size: 0.75rem; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; margin-bottom: 0.25rem; }
.meta-value { font-size: 0.98rem; color: var(--color-primary); font-weight: 700; font-family: var(--font-mono); }

.content-section { background: white; border: 1px solid var(--color-border); border-radius: 6px; padding: var(--spacing-md); margin-bottom: var(--spacing-md); }
.content-section h2 { font-size: 1.2rem; color: var(--color-primary); margin-bottom: 0.75rem; border-bottom: 2px solid var(--color-primary); padding-bottom: 0.35rem; font-weight: 700; }
.content-section ul { list-style: none; padding-left: 0; }
.content-section li { margin-bottom: var(--spacing-sm); }
.content-section:not(.related-section) a { color: #1a73e8; font-weight: 600; text-decoration: underline; }
.content-section:not(.related-section) a:hover { color: #0d47a1; text-decoration: underline; }

.safety-warning { background: #fff8e6; border-left: 4px solid #f0c36d; padding: 0.75rem; margin: 0.75rem 0; border-radius: 4px; }
.safety-warning h3 { color: #8b5a00; margin: 0 0 0.25rem 0; }

.specifications { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.75rem; }
.specifications dl { display: grid; grid-template-columns: 160px 1fr; gap: 0.5rem; margin: 0; }
.specifications dt { font-weight: 700; color: var(--color-text-muted); }
.specifications dd { margin: 0; color: var(--color-text); }

.purchase-section { background: var(--color-primary); color: white; border-radius: 6px; padding: var(--spacing-md); margin-bottom: var(--spacing-md); text-align: center; }
.purchase-button { display: inline-block; padding: 0.5rem 1rem; background: white; color: var(--color-primary); text-decoration: none; font-weight: 700; border-radius: 4px; }

/* Make purchase-button more prominent and accessible */
.purchase-button {
    border: 2px solid rgba(255,255,255,0.12);
    padding: 0.6rem 1.1rem;
    border-radius: 6px;
}
.purchase-button:focus { outline: 3px solid rgba(255,255,255,0.18); outline-offset: 2px; }
.purchase-button:hover { background: rgba(255,255,255,0.95); color: var(--color-primary); transform: translateY(-1px); }

/* Compact Learn More variant used on material detail pages */
.purchase-section.purchase-learnmore {
    background: transparent;
    padding: 0.5rem 0;
    margin-bottom: var(--spacing-md);
    text-align: center;
}
.purchase-section.purchase-learnmore .material-cta {
    background: var(--color-accent);
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    box-shadow: 0 6px 12px rgba(10,40,20,0.06);
}
.purchase-section.purchase-learnmore .material-cta:hover {
    background: var(--color-accent-light);
}

.related-articles { background: white; border: 1px solid var(--color-border); border-radius: 6px; padding: var(--spacing-md); margin-bottom: var(--spacing-md); }
.article-list { display: grid; gap: 0.5rem; }
.article-item { display: flex; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px; text-decoration: none; color: inherit; }
.back-button { display: inline-block; padding: 0.5rem 0.75rem; background: var(--color-primary); color: white; text-decoration: none; font-weight: 700; border-radius: 4px; margin-top: var(--spacing-md); }

@media (max-width: 768px) {
    .material-detail { padding: var(--spacing-sm); }
    .material-header h1 { font-size: 1.25rem; }
}

/* Product / Technical sheet layout for material details */
.material-top {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--spacing-md);
    align-items: start;
    margin-bottom: var(--spacing-md);
}

.product-card {
    /* Core card styling for product / technical sheet */
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    position: relative; /* allows sticky behavior on larger screens */
}

.product-card .price, .product-card .cta-wrap { text-align: center; }


/* Quick-meta contains a set of fast links/quick stats. Hide by default
    to reduce duplication with the footer/utility links. If you need to show
    it on a specific page, add the class `show-quick-meta` to the body. */
.product-card .quick-meta { display: none; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.show-quick-meta .product-card .quick-meta { display: grid; }
.product-card .quick-meta .meta { font-size: 0.85rem; color: var(--color-text-muted); }

.product-card .product-badges { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.5rem; }


.product-card .product-badges { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.5rem; }

.product-card .product-image {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    height: 180px; /* larger, gives more visual weight */
    border-radius: 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-text-muted);
    font-size:0.95rem;
    overflow: hidden;
}

.product-card .product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.product-image-fallback {
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    color:var(--color-text-muted);
    font-size:0.95rem;
}

/* Hide homepage quick-links by default if a full footer exists. You can re-enable
   by adding `show-quick-links` to the body element on pages that need them. */
.quick-links { display: none; }
.show-quick-links .quick-links { display: block; }

/* Slight visual polish for product card */
.product-card {
    box-shadow: 0 6px 18px rgba(10, 40, 20, 0.06);
    padding: calc(var(--spacing-md) + 0.25rem);
}

/* Reduce visual noise for badges inside the product-card */
.product-card .material-badge { font-size: 0.85rem; padding: 0.35rem 0.6rem; border-radius: 999px; }

.product-card .cta {
    display: inline-block;
    padding: 0.6rem 0.9rem;
    background: var(--color-accent); /* improved contrast against dark headers */
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.06);
}

.product-card .cta:focus {
    outline: 3px solid rgba(74,124,89,0.18);
    outline-offset: 2px;
}

.product-card .cta:hover {
    background: var(--color-accent-light);
    color: white;
    transform: translateY(-1px);
}

/* Make CTA more prominent on narrow viewports (full width) */
@media (max-width: 900px) {
    .product-card .cta { display: block; width: 100%; }
}

/* Sticky product card on wider screens to keep the quick info visible */
@media (min-width: 900px) {
    .product-card { position: sticky; top: calc(var(--spacing-md) + 0.5rem); }
}

@media (max-width: 900px) {
    .material-top { grid-template-columns: 1fr; }
    .product-card { order: 2; }
}

.article-info,
.article-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-md);
}

.article-meta {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.article-seasons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--color-bg-alt);
    border-radius: var(--border-radius-sm);
}

.article-body {
    margin-bottom: var(--spacing-xl);
    line-height: 1.8;
}

.article-body h2 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.article-body ul,
.article-body ol {
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.article-body li {
    margin-bottom: var(--spacing-xs);
}

.article-chemicals {
    background: var(--color-bg-light);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-accent-light);
    margin: var(--spacing-xl) 0;
}

.article-chemicals h2 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.chemical-card {
    padding: var(--spacing-md);
    background: white;
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-md);
    border-left: 4px solid var(--color-accent);
}

.chemical-card:last-child {
    margin-bottom: 0;
}

.formula {
    font-family: var(--font-mono);
    background: var(--color-bg-dark);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    color: var(--color-primary);
}

/* === Embedded Products (AbanteCart) === */
.article-products {
    background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-bg-alt) 100%);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-accent-light);
    margin: var(--spacing-xl) 0;
    box-shadow: var(--shadow-md);
}

.article-products h2 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.75rem;
}

.products-intro {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
    font-size: 1.05rem;
}

.embedded-products {
    display: grid;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.product-embed-wrapper {
    background: white;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-border-light);
    transition: all 0.3s ease;
}

.product-embed-wrapper:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.product-embed-wrapper h3 {
    color: var(--color-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-sm) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
}

/* AbanteCart Widget Styling */
.abantecart-widget-container {
    display: block !important;
    margin-top: var(--spacing-sm);
}

.abantecart_product {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

.abantecart_name {
    color: var(--color-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    margin-bottom: var(--spacing-sm) !important;
}

.abantecart_image img {
    border-radius: var(--border-radius-sm);
    max-width: 100%;
    height: auto;
}

.abantecart_blurb {
    color: var(--color-text) !important;
    margin: var(--spacing-sm) 0 !important;
}

.abantecart_addtocart button,
.abantecart_addtocart a {
    background: var(--color-primary) !important;
    color: white !important;
    border: 2px solid var(--color-primary) !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--border-radius-sm) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.abantecart_addtocart button:hover,
.abantecart_addtocart a:hover {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    transform: translateY(-1px);
}

/* === Call to Action === */
.cta-box {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    margin: var(--spacing-xl) 0;
    text-align: center;
    color: white;
    box-shadow: var(--shadow-md);
}

.cta-box h3 {
    color: white;
    margin-bottom: var(--spacing-md);
}

.cta-box .btn {
    background: white;
    color: var(--color-primary);
    border-color: white;
}

.cta-box .btn:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-bg-alt);
}

/* === Footer === */
.site-footer {
    background: var(--color-primary);
    color: white;
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    margin-top: var(--spacing-2xl);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.footer-section h3,
.footer-section h4 {
    color: var(--color-accent-light);
    margin-bottom: var(--spacing-md);
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    margin-bottom: var(--spacing-xs);
}

.footer-section a {
    color: white;
    border-bottom-color: transparent;
}

.footer-section a:hover {
    color: var(--color-accent-light);
    border-bottom-color: var(--color-accent-light);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-accent-light);
    font-size: 0.9rem;
}

/* === Pagination === */
.pagination {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin: var(--spacing-xl) 0;
}

.pagination a,
.pagination span {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.pagination .active span,
.pagination .current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.pagination ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-xs);
    justify-content: center;
    flex-wrap: wrap;
}

/* === Responsive === */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 2rem;
        --spacing-2xl: 2.5rem;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    .hero h1,
    .hero h2 {
        font-size: 2.25rem;
    }
    
    .grid-sidebar,
    .library-layout {
        grid-template-columns: 1fr;
    }
    
    .filters-sidebar,
    .sidebar {
        position: static;
    }
    
    .header-content {
        flex-direction: column;
        text-align: center;
    }
    
    .main-nav ul {
        justify-content: center;
    }
    
    .article-detail {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    
    .btn {
        width: 100%;
        text-align: center;
    }
    
    .grid-2,
    .grid-3,
    .grid-4,
    .articles-grid,
    .sections-grid {
        grid-template-columns: 1fr;
    }
}

/* === Utility Classes === */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }
.text-green { color: var(--color-accent); }
.text-dark-green { color: var(--color-primary); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.hidden { display: none; }

.no-print {
    /* Will be hidden in print.css */
    display: block;
}

.print-only {
    display: none;
}

/* === Materials Section (Homepage) === */
.featured-materials {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--color-border);
    position: relative;
}

.featured-materials h2,
.featured-calendars h2,
.featured-articles h2,
.recent-articles h2,
.sections-overview h2,
.browse-topics h2 {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section-subtitle {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-lg);
}

/* Decorative separator between homepage sections */
.featured-materials,
.featured-calendars,
.recent-articles {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--color-border);
    position: relative;
}

.featured-materials::before,
.featured-calendars::before,
.recent-articles::before {
    content: "◆";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg);
    color: var(--color-border);
    padding: 0 var(--spacing-md);
    font-size: 0.75rem;
}

/* Remove separator styling from buttons */
.featured-materials .text-center,
.featured-calendars .text-center,
.recent-articles .text-center {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.material-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.75rem;
    transition: all 0.12s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

/* === Materials Page (page-scoped rules moved from materials.php) === */
.materials-page .materials-container { max-width: 1400px; margin: 0 auto; padding: 2rem; }
.materials-page .category-nav { background: white; border: 2px solid #000; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; }
.materials-page .category-tabs { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.materials-page .category-tab { padding: 0.75rem 1.5rem; background: white; border: 2px solid #ddd; text-decoration: none; color: #333; font-weight: 600; border-radius: 4px; transition: all 0.2s; }
.materials-page .category-tab:hover { border-color: #2c5f2d; background: #f8f9fa; }
.materials-page .category-tab.active { background: #2c5f2d; color: white; border-color: #2c5f2d; }
.materials-page .subcategory-filter { border-top: 1px solid #ddd; padding-top: 1rem; margin-top: 1rem; }
.materials-page .subcategory-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.materials-page .subcategory-tag { padding: 0.5rem 1rem; background: #f8f9fa; border: 1px solid #ddd; text-decoration: none; color: #333; font-size: 0.9rem; border-radius: 20px; transition: all 0.2s; }
.materials-page .subcategory-tag:hover { background: #e9ecef; border-color: #999; }
.materials-page .subcategory-tag.active { background: #2c5f2d; color: white; border-color: #2c5f2d; }
.materials-page .search-filter-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; }
.materials-page .search-box { flex: 1; min-width: 300px; }
.materials-page .search-box input { width: 100%; padding: 0.75rem 1rem; border: 2px solid #ddd; border-radius: 4px; font-size: 1rem; }
.materials-page .filter-toggles { display: flex; gap: 1rem; }
.materials-page .filter-toggle { padding: 0.75rem 1.5rem; background: white; border: 2px solid #ddd; text-decoration: none; color: #333; font-weight: 600; border-radius: 4px; transition: all 0.2s; }
.materials-page .filter-toggle.active { background: #2c5f2d; color: white; border-color: #2c5f2d; }
.materials-page .clear-filters { padding: 0.75rem 1.5rem; background: #dc3545; color: white; border: none; text-decoration: none; font-weight: 600; border-radius: 4px; }

/* Compact active filters shown near results header */
.active-filters.compact {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.active-filters.compact .filters-list { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.active-filters.compact .filter-item {
    background: var(--color-bg-alt);
    color: var(--color-text);
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--color-border-light);
}
.active-filters.compact .filter-remove {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 700;
    margin-left: 0.25rem;
}
.active-filters.compact .filter-remove:hover { color: var(--color-primary); }

/* Results header - General styles for all listing pages */
.results-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 1rem; 
}
.results-count { 
    font-size: 1.2rem; 
    color: #666; 
}
.results-count strong { 
    color: var(--color-primary); 
    font-weight: 700;
}

/* Materials page styles */
.materials-page .material-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.materials-page .material-badge { padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; }
.materials-page .badge-substance { background: #155724; color: #fff; }
.materials-page .badge-equipment { background: #0c5460; color: #fff; }
.materials-page .badge-tool { background: #856404; color: #fff; }
.materials-page .badge-container { background: #721c24; color: #fff; }
.materials-page .badge-safety { background: #8b4513; color: #fff; }
.materials-page .badge-consumable { background: #333; color: #fff; }
.materials-page .badge-featured { background: #ffc107; color: #000; }
.materials-page .badge-essential { background: #28a745; color: white; }
.materials-page .material-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; color: #2c5f2d; }
.materials-page .material-technical { font-size: 0.9rem; color: #666; font-style: italic; margin-bottom: 0.5rem; }
.materials-page .material-formula { font-family: 'Courier New', monospace; font-weight: bold; color: #2c5f2d; margin-bottom: 1rem; }
.materials-page .material-description { flex: 1; color: #333; line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.materials-page .material-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid #eee; }
.materials-page .material-category-icon { font-size: 1.5rem; }
.materials-page .material-cta { padding: 0.5rem 1rem; background: #2c5f2d; color: white; border-radius: 4px; font-weight: 600; font-size: 0.9rem; }
.materials-page .material-card:hover .material-cta { background: #1a3a1b; }

/* Calendars Page Styles */
.calendars-page .badge-calendar { background: #1565c0; color: #fff; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: bold; }
.calendars-page .badge-moon_phases { background: #8b4513; color: #fff; }
.calendars-page .badge-planting { background: #155724; color: #fff; }
.calendars-page .badge-tasks { background: #856404; color: #fff; }
.calendars-page .badge-frost_dates { background: #0c5460; color: #fff; }
.calendars-page .badge-companion_planting { background: #2d5a3d; color: #fff; }
.calendars-page .badge-pest_control { background: #721c24; color: #fff; }
.calendars-page .badge-weather { background: #084298; color: #fff; }
.calendars-page .badge-reference { background: #333; color: #fff; }
.calendars-page .calendar-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: #2d4a5a; }
.calendars-page .card-footer { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.calendars-page .card-footer .region,
.calendars-page .card-footer .zones { font-size: 0.85rem; color: #666; }
.calendars-page .season-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: bold; }
.calendars-page .season-spring { background: #d4edda; color: #155724; }
.calendars-page .season-summer { background: #fff3cd; color: #856404; }
.calendars-page .season-fall { background: #f8d7da; color: #721c24; }
.calendars-page .season-winter { background: #d1ecf1; color: #0c5460; }

/* Ensure material CTA is always high contrast and keyboard focusable when converted to a link */
.material-cta {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    background: var(--color-primary);
    color: white;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.12s ease, transform 0.12s ease;
}
.material-cta:hover { background: var(--color-primary-light); transform: translateY(-1px); }
.material-cta:focus { outline: 3px solid rgba(15,59,31,0.18); outline-offset: 2px; }
.materials-page .empty-state { text-align: center; padding: 4rem 2rem; background: white; border: 2px dashed #ddd; border-radius: 8px; }
.materials-page .empty-state h2 { font-size: 1.8rem; margin-bottom: 1rem; color: #666; }
.materials-page .empty-state p { color: #999; margin-bottom: 2rem; }
.materials-page .pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.materials-page .pagination a, .materials-page .pagination span { padding: 0.75rem 1.25rem; background: white; border: 2px solid #ddd; text-decoration: none; color: #333; font-weight: 600; border-radius: 4px; }
.materials-page .pagination a:hover { border-color: #2c5f2d; background: #f8f9fa; }
.materials-page .pagination .current { background: #2c5f2d; color: white; border-color: #2c5f2d; }
.materials-page .pagination .disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 768px) {
    .materials-page .page-header h1 { font-size: 1.8rem; }
    .materials-page .category-tabs { flex-direction: column; }
    .materials-page .category-tab { text-align: center; }
    .materials-page .search-filter-bar { flex-direction: column; }
    .materials-page .search-box { width: 100%; }
    .materials-page .materials-grid { grid-template-columns: 1fr; }
}

/* === Universal Listing Styles (Library Base Design) === */
/* Shared grid for all listing pages */
.articles-grid,
.materials-grid,
.calendars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

/* Shared card base for all listing pages */
.article-card,
.material-card,
.calendar-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.75rem;
    transition: all 0.12s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.article-card:hover,
.material-card:hover,
.calendar-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Card content structure */
.card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Universal badges */
.section-badge,
.difficulty-badge,
.material-badge,
.calendar-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Difficulty badges */
.difficulty-basic { background: #d4edda; color: #155724; }
.difficulty-intermediate { background: #fff3cd; color: #856404; }
.difficulty-advanced { background: #f8d7da; color: #721c24; }

/* Section badges */
.section-badge {
    background: #1a3a1f;
    color: #ffffff;
    font-weight: 700;
}

/* Card titles */
.article-card h3,
.material-card h3,
.calendar-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
    line-height: 1.3;
}

/* Card excerpt/description */
.excerpt,
.material-description,
.calendar-description {
    flex: 1;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

/* Card footer */
.card-footer,
.material-footer,
.calendar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    margin-top: auto;
    border-top: 1px solid var(--color-border-light);
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* Empty state - shared */
.no-results,
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--color-bg-light);
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
}

.no-results p,
.empty-state p {
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

.no-results h2,
.empty-state h2 {
    color: var(--color-text);
    margin-bottom: 1rem;
}

/* Pagination - shared (remove materials-page scoping) */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.pagination a,
.pagination span {
    padding: 0.5rem 0.75rem;
    background: white;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    border-radius: 4px;
    min-width: 2.5rem;
    text-align: center;
}

.pagination a:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-light);
}

.pagination .current {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.pagination .disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .articles-grid,
    .materials-grid,
    .calendars-grid {
        grid-template-columns: 1fr;
    }
}

/* === Calendar-Specific Styles === */
/* Calendar type badges */
.badge-moon_phases { background: #e3f2fd; color: #1565c0; }
.badge-planting { background: #e8f5e9; color: #2e7d32; }
.badge-frost_dates { background: #f3e5f5; color: #6a1b9a; }
.badge-tasks { background: #fff3e0; color: #e65100; }
.badge-weather { background: #e0f7fa; color: #00695c; }
.badge-companion_planting { background: #f1f8e9; color: #558b2f; }
.badge-pest_control { background: #fce4ec; color: #c2185b; }
.badge-reference { background: #f5f5f5; color: #616161; }
.badge-featured { background: #ffc107; color: #000; }
.badge-essential { background: #28a745; color: white; }

/* Calendar meta tags */
.calendar-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.meta-tag {
    font-size: 0.75rem;
    color: var(--color-text-light);
    padding: 0.25rem 0.5rem;
    background: var(--color-bg-light);
    border-radius: 4px;
}

.meta-tag.season-spring { background: #e8f5e9; color: #2e7d32; font-weight: 600; }
.meta-tag.season-summer { background: #fff3cd; color: #856404; font-weight: 600; }
.meta-tag.season-fall { background: #fff3e0; color: #f57c00; font-weight: 600; }
.meta-tag.season-winter { background: #e3f2fd; color: #1565c0; font-weight: 600; }
.meta-tag.season-year-round { background: #f5f5f5; color: #616161; font-weight: 600; }

.calendar-format-icon {
    font-size: 1.2rem;
}

/* Material-specific styles */
.material-technical {
    font-size: 0.85rem;
    color: var(--color-text-light);
    font-style: italic;
    margin-bottom: 0.5rem;
}

.material-formula {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.material-category-icon {
    font-size: 1.2rem;
}

/* Category-specific badge colors - Dark backgrounds with light text for better contrast */
.badge-substance { background: #155724; color: #fff; }
.badge-equipment { background: #0c5460; color: #fff; }
.badge-tool { background: #856404; color: #fff; }
.badge-container { background: #721c24; color: #fff; }
.badge-safety { background: #8b4513; color: #fff; }
.badge-consumable { background: #333; color: #fff; }

/* Article section badge colors - Dark with high contrast */
.badge-seasons-projects { background: #5a4a8a; color: #fff; }
.badge-farming-garden { background: #2d5a3d; color: #fff; }
.badge-home-workshop { background: #8b4513; color: #fff; }

/* Format label in footer */
.format {
    font-weight: 600;
    color: var(--color-text-light);
}

.material-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.material-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.material-icon {
    font-size: 1.5rem;
}

.material-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
}

.material-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: var(--color-primary);
}

.material-technical {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: var(--spacing-xs);
}

.material-formula {
    font-family: var(--font-mono);
    font-weight: bold;
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
    font-size: 1rem;
}

.material-description {
    flex: 1;
    color: var(--color-text-light);
    line-height: 1.5;
    font-size: 0.92rem;
}

/* Technical/spec table for material main area */
.material-specs {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}
.material-specs tbody tr { border-bottom: 1px solid var(--color-border-light); }
.material-specs th,
.material-specs td {
    padding: 0.6rem 0.9rem;
    vertical-align: top;
}
.material-specs th {
    width: 36%;
    text-align: left;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-bg-alt);
}
.material-specs td {
    color: var(--color-text);
}
.material-specs td.mono { font-family: var(--font-mono); color: var(--color-primary); font-weight: 700; }

@media (max-width: 768px) {
    .material-specs th { display: block; width: 100%; padding-top: 0.65rem; }
    .material-specs td { display: block; width: 100%; padding-bottom: 0.65rem; }
    .material-specs tbody tr { border-bottom: 1px solid var(--color-border-light); }
}

/* Utility: visually hidden for caption accessibility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* === Print Compatibility === */
@media print {
    .site-header,
    .main-nav,
    .sidebar,
    .filters-sidebar,
    .cta-box,
    .site-footer,
    .pagination,
    .no-print {
        display: none;
    }
    
    .print-only {
        display: block;
    }
    
    body {
        color: #000;
        background: #fff;
    }
    
    .article-detail {
        box-shadow: none;
        padding: 0;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
}

/* === Article page specific rules moved from article.php === */
/* Narrow the page chrome and let article content use more horizontal space */
.container.article-container {
    max-width: 1400px; /* allow wider content */
    padding-left: 1rem;
    padding-right: 1rem;
}
.article-detail {
    background: none;
    padding: 0.75rem 0.5rem; /* reduce internal padding */
    margin-bottom: 1rem;
    border-radius: 6px;
    box-shadow: none;
}
.article-detail .breadcrumb { margin-bottom: 0.5rem; }
.article-meta { gap: 0.5rem; font-size: 0.95rem; margin-bottom: 0.5rem; }
.article-body { padding: 0; max-width: none; }

/* Material items styling (from article.php) */
.article-materials {
    margin: 3rem 0;
    padding: 2rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
}

.article-materials h2 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    color: #111;
}

.materials-intro {
    margin-bottom: 2rem;
    color: #6b7280;
}

.materials-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.material-item {
    background: white;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    overflow: hidden;
}

.material-info {
    padding: 1.5rem;
}

.material-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: #111;
}

.material-info h3 a {
    color: #2563eb;
    text-decoration: none;
}

.material-info h3 a:hover {
    text-decoration: underline;
}

.material-info .other-names {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.material-info .other-names em {
    font-style: italic;
}

.material-widget {
    padding: 1.5rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Ensure embedded widgets (iframes/objects) are centered and responsive */
.material-widget iframe,
.material-widget embed,
.material-widget object,
.material-widget .abantecart-widget-container {
    max-width: 100%;

    height: auto;
}

/* Print styles for materials (moved) */
@media print {
    .article-materials {
        background: white;
        border: 2px solid black;
        page-break-inside: avoid;
    }
    
    .material-widget,
    .material-purchase {
        display: none;
    }
    
    .material-info h3 a {
        color: black;
        text-decoration: none;
    }
    
    .material-info h3 a::after {
        content: " (see thegreenalmanac.com for purchasing info)";
        font-weight: normal;
        font-size: 0.85rem;
    }
}

/* === Homepage Browse Topics Section === */
.browse-topics {
    margin: 4rem 0;
    padding: 3rem 2rem;
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
    text-align: center;
}

.browse-topics h2 {
    margin-bottom: 0.5rem;
}

.browse-topics .section-subtitle {
    color: var(--color-text-muted);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.browse-topics .tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

.browse-topics .tag-cloud-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 1.2rem;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.browse-topics .tag-cloud-item:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.browse-topics .tag-count {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.browse-topics .tag-cloud-item:hover .tag-count {
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
    .browse-topics {
        padding: 2rem 1rem;
    }
    
    .browse-topics .tags-cloud {
        gap: 0.5rem;
    }
    
    .browse-topics .tag-cloud-item {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* === Tag Page Styles === */
.tag-page .page-header {
    text-align: center;
    margin-bottom: 3rem;
}

.tag-page .page-header h1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tag-page .page-header h1 svg {
    opacity: 0.7;
}

.tag-articles,
.tag-materials {
    margin-bottom: 4rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-border);
}

.section-header h2 {
    margin: 0;
}

.section-description {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

.view-all-link {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.view-all-link:hover {
    color: var(--color-primary);
}

/* Related Tags Cloud */
.related-tags {
    margin-top: 4rem;
    padding: 2rem;
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
}

.related-tags h3 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.tag-cloud-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.tag-cloud-item:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.tag-count {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.tag-cloud-item:hover .tag-count {
    color: rgba(255, 255, 255, 0.8);
}

.pagination-wrapper {
    margin-top: 2rem;
}

/* Responsive adjustments for tag page */
@media (max-width: 768px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .view-all-link {
        align-self: flex-end;
    }
}

/* Article Tags - Pill Style Buttons */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border-light);
}

.article-tags strong {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-right: 0.25rem;
}

.article-tags .tag {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    background: #f5f5f5;
    border: 1px solid #d0d0d0;
    border-radius: 999px;
    color: #333;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.article-tags .tag:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}