/**
 * Save.ag Learn Section Styles
 * Brand Compliant - extends saveag-ui.css and public.css
 * WCAG 2.1 Level AA Compliant
 *
 * Color Palette Reference:
 * --color-primary: #506c44 (Primary Green)
 * --color-background: #f7f7ed (Off-White)
 * --color-secondary: #1f4332 (Dark Forest - best for text)
 * --color-accent-1: #975436 (Terracotta - controversy/warnings)
 * --color-accent-2: #c9863a (Amber - highlights, large text only)
 * --color-accent-3: #6bafb2 (Teal - nav bar, large text only)
 *
 * Contrast Ratios Verified:
 * - Secondary on Background: 9.8:1 (AAA)
 * - Primary on White: 5.2:1 (AA)
 * - White on Primary: 5.2:1 (AA)
 */

/* Import shared zone lookup widget styles */
@import url('/static/css/shared/zone-lookup.css');

/* =============================================================================
   ACCESSIBILITY: Screen Reader & Focus
   ============================================================================= */

/* Screen reader only - visible when focused */
.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;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background-color: var(--color-primary);
    color: white;
    text-decoration: none;
    z-index: 9999;
}

/* Enhanced focus indicators for all interactive elements */
.learn-section-card:focus-visible,
.page-card:focus-visible,
.lookup-category-card:focus-visible,
.learning-path-card:focus-visible,
.cluster-card:focus-visible,
.filter-select:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Ensure focus ring is visible on all backgrounds */
.topic-sidebar a:focus-visible,
.questions-list a:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* =============================================================================
   BREED HERO SECTION (Animal Pages)
   ============================================================================= */

.breed-hero {
    margin-bottom: 40px;
}

.breed-identity {
    margin-bottom: 16px;
}

.breed-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.breed-meta {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.meta-divider {
    color: rgba(0, 0, 0, 0.2);
    margin: 0 8px;
}

.breed-origin {
    color: var(--color-text-muted);
}

.breed-aliases {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
}

.breed-overview {
    background-color: rgba(247, 247, 237, 0.5);
    border-left: 3px solid var(--color-primary);
    padding: 16px 20px;
    border-radius: 4px;
    margin-top: 20px;
}

.breed-overview p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-secondary);
    margin: 0;
}

/* Mobile: Reduce sizing */
@media (max-width: 1024px) {
    .breed-name {
        font-size: 1.75rem;
    }

    .breed-overview p {
        font-size: 1rem;
    }
}

/* =============================================================================
   PRACTICE INTRO BLOCK (WHAT Section)
   ============================================================================= */

.practice-intro-block {
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(80, 108, 68, 0.15);
    border-radius: 8px;
    padding: 24px;
    margin: 32px 0;
}

.practice-intro-block p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-secondary);
    margin: 0 0 1rem 0;
}

.practice-intro-block p:last-child {
    margin-bottom: 0;
}

/* =============================================================================
   REGENERATIVE QUICK PROFILE PANEL
   ============================================================================= */

.regenerative-quick-profile {
    background: linear-gradient(135deg,
        rgba(80, 108, 68, 0.03) 0%,
        rgba(80, 108, 68, 0.06) 100%);
    border: 2px solid rgba(80, 108, 68, 0.2);
    border-radius: 8px;
    padding: 24px;
    margin: 32px 0;
    position: relative;
    overflow: hidden;
}

/* Optional: Subtle diagonal stripe texture */
.regenerative-quick-profile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 35px,
        rgba(80, 108, 68, 0.01) 35px,
        rgba(80, 108, 68, 0.01) 70px
    );
    pointer-events: none;
    z-index: 0;
}

.regenerative-quick-profile > * {
    position: relative;
    z-index: 1;
}

.quick-profile-header {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(80, 108, 68, 0.2);
}

.quick-profile-context {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(80, 108, 68, 0.2);
}

.quick-profile-section {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(80, 108, 68, 0.1);
}

.quick-profile-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.quick-profile-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-profile-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.quick-profile-label {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 0 0 8px 0;
}

.quick-profile-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-secondary);
}

.quick-profile-content p {
    margin: 0 0 8px 0;
}

.quick-profile-content p:last-child {
    margin-bottom: 0;
}

.quick-profile-content strong {
    font-weight: 600;
    color: var(--color-secondary);
}


/* Bulleted advantages list */
.quick-profile-advantages {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.quick-profile-advantages li {
    padding-left: 16px;
    position: relative;
    margin-bottom: 6px;
}

.quick-profile-advantages li:last-child {
    margin-bottom: 0;
}

.quick-profile-advantages li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* Bulleted key points list (materials-equipment) */
.quick-profile-bullets {
    list-style: disc;
    padding-left: 20px;
    margin: 8px 0 0 0;
}

.quick-profile-bullets li {
    margin-bottom: 6px;
    line-height: 1.6;
    color: var(--color-secondary);
}

/* Experience Level Badge */
.experience-level-badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: rgba(31, 67, 50, 0.08);
    border-radius: 4px;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.experience-level-badge.beginner {
    background-color: rgba(107, 175, 178, 0.12);
    color: var(--color-accent-3);
}

.experience-level-badge.intermediate {
    background-color: rgba(80, 108, 68, 0.12);
    color: var(--color-primary);
}

.experience-level-badge.advanced {
    background-color: rgba(151, 84, 54, 0.12);
    color: var(--color-accent-1);
}

.experience-rationale {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 6px 0 0 0;
}

/* Mobile: Stack icon above content on very small screens */
@media (max-width: 480px) {
    .quick-profile-section {
        flex-direction: column;
        gap: 8px;
    }
}

/* =============================================================================
   BREED SECTION EXPANDABLES (Numbered Sections 1-6)
   ============================================================================= */

.breed-section-expandable {
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(80, 108, 68, 0.15);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.breed-section-expandable[open] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.breed-section-header {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    gap: 16px;
    align-items: center;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(to right,
        rgba(80, 108, 68, 0.02) 0%,
        transparent 100%);
    transition: background-color 0.2s ease;
    min-height: 48px; /* Touch target */
}

.breed-section-header:hover {
    background-color: rgba(80, 108, 68, 0.04);
}

.breed-section-header::-webkit-details-marker {
    display: none;
}

/* Focus state for keyboard navigation */
.breed-section-header:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.section-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.section-header-content {
    flex: 1;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.section-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
    font-weight: 400;
}

.section-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.section-toggle::before {
    content: '+';
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-primary);
}

.breed-section-expandable[open] .section-toggle::before {
    content: '−';
}

.breed-section-content {
    padding: 24px;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Remove top margin from first paragraph to reduce gap after header */
.breed-section-content > p:first-child {
    margin-top: 0;
}

/* Constrain headings inside content sections to subsection size */
/* Parser-generated <h3>/<h4> render at base 1.75rem/1.5rem without this override */
/* Note: <h4 style="display:inline"> from parser is stripped by |sanitize filter */
.breed-section-content h2,
.breed-section-content h3,
.breed-section-content h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 1.25rem 0 0.5rem 0;
}

.breed-section-content > h2:first-child,
.breed-section-content > h3:first-child,
.breed-section-content > h4:first-child {
    margin-top: 0;
}

.breed-section-content strong {
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}

/* Disable nested collapsibles within numbered sections - show all content */
/* Exception: subsection-collapsible (honesty engine debates) and section-enrichment keep their toggles */
.breed-section-content details:not(.subsection-collapsible):not(.section-enrichment-collapsible) {
    display: block;
}

.breed-section-content details:not(.subsection-collapsible):not(.section-enrichment-collapsible) > summary {
    display: none;
}

.breed-section-content details:not(.subsection-collapsible):not(.section-enrichment-collapsible) > *:not(summary) {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* Practice & Transition Page Layout (.practice-12section)             */
/* Shared by: practice_detail_12section.html, transitioning/detail.html */
/* ═══════════════════════════════════════════════════════════════════ */

.practice-12section {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Intro block - subtle green card with overview content */
.practice-intro-block {
    background-color: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(80, 108, 68, 0.15);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 4px rgba(31, 67, 50, 0.06), 0 4px 12px rgba(31, 67, 50, 0.03);
}

.practice-intro-block p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.practice-intro-block p:last-child {
    margin-bottom: 0;
}

.practice-intro-block h4 {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    color: var(--color-secondary);
}

.practice-intro-block h4:first-child {
    margin-top: 0;
}

.practice-intro-block ul {
    list-style: disc;
    margin-left: 5px;
    padding-left: 20px;
    margin-bottom: 1rem;
    margin-top: 0.25rem;
}

.practice-intro-block p + ul {
    margin-top: 0.25rem;
}

/* Strong tags: block for standalone, inline in lists */
.practice-intro-block > p strong:only-child,
.practice-intro-block > div > p strong:only-child {
    display: block;
}

.practice-intro-block ol strong,
.practice-intro-block ul strong,
.practice-intro-block li strong {
    display: inline !important;
}

.practice-intro-block li {
    margin-bottom: 0.25rem;
    line-height: 1.6;
}

.practice-intro-block li:last-child {
    margin-bottom: 0;
}

/* Collapsible sections - subtle green card with numbered badge */
.practice-12section .practice-deeper-item {
    background-color: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(80, 108, 68, 0.15);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.practice-12section .practice-deeper-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    cursor: pointer;
    list-style: none;
    min-height: 60px;
}

.practice-12section .practice-deeper-toggle::-webkit-details-marker {
    display: none;
}

.practice-12section .practice-deeper-toggle::marker {
    display: none;
    content: '';
}

.practice-12section .deeper-title {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary);
}

.practice-12section .deeper-content {
    padding: 0 1.5rem 1.5rem;
}

/* Content typography within going deeper sections */
.practice-12section .deeper-content h2,
.practice-12section .deeper-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--color-secondary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.practice-12section .deeper-content > h2:first-child,
.practice-12section .deeper-content > h3:first-child {
    margin-top: 0;
}

.practice-12section .deeper-content h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--color-secondary);
    font-size: 1.1rem;
}

.practice-12section .deeper-content > h4:first-child {
    margin-top: 0;
}

.practice-12section .deeper-content h4 + p,
.practice-12section .deeper-content h4 + strong,
.practice-12section .deeper-content h4 + ul,
.practice-12section .deeper-content h4 + div {
    margin-top: 0;
    padding-top: 0;
}

.practice-12section .deeper-content p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.practice-12section .deeper-content p:first-child {
    margin-top: 0;
}

.practice-12section .deeper-content ul {
    list-style: disc;
    margin-left: 5px;
    padding-left: 20px;
    margin-bottom: 1rem;
}

.practice-12section .deeper-content li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.practice-12section .deeper-content ul ul {
    list-style: circle;
    margin-left: 5px;
    padding-left: 20px;
    margin-top: 0.5rem;
}

/* Quick Profile bullets in practice/transition pages */
.practice-12section .quick-profile-bullets {
    list-style: disc;
    margin-left: 1.5rem;
    line-height: 1.8;
}

.practice-12section .quick-profile-bullets li {
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

/* Toggle icon (+/−) for collapsible sections */
.practice-12section .section-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

.practice-12section .section-toggle::before {
    content: '+';
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-primary);
}

.practice-12section .practice-deeper-item[open] .section-toggle::before {
    content: '−';
}

/* Suppress generic .deeper-toggle::after for practices (using .section-toggle span instead) */
.practice-12section .practice-deeper-toggle::after,
.practice-12section .practice-deeper-item[open] .practice-deeper-toggle::after {
    content: none !important;
}

/* Full-view mode (printable single-page version) */
.full-view-mode.practice-12section .practice-deeper-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.5rem 0 !important;
    pointer-events: none;
    border-bottom: none;
}

.full-view-mode.practice-12section .practice-deeper-item {
    border: none;
    background: none;
    margin-bottom: 2.5rem;
}

.full-view-mode.practice-12section .deeper-content {
    padding: 1rem 0 0 0;
    border-top: none;
}

.full-view-mode.practice-12section .deeper-title {
    font-size: 1.3rem;
    font-weight: 700;
}

.full-view-mode.practice-12section .section-toggle {
    display: none !important;
}

.full-view-mode.practice-12section .section-number {
    position: static;
    margin-right: 0.5rem;
}

@media (max-width: 1024px) {
    .practice-12section {
        padding: 1rem 0.5rem;
    }

    .practice-12section .quick-profile {
        padding: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* Trait Chart Section (Radial Visualization + Methodology) */
/* ═══════════════════════════════════════════════════════════════════ */

.trait-chart-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #fafafa;
    border-radius: 8px;
}

.chart-container {
    text-align: center;
    margin-bottom: 2rem;
}

.trait-chart-svg {
    max-width: 600px;
    width: 100%;
    height: auto;
}

.trait-methodology {
    margin-top: 2rem;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    padding: 1rem;
    background: rgba(80, 108, 68, 0.06);
    box-sizing: border-box;
}

.trait-methodology summary {
    font-weight: 600;
    cursor: pointer;
    color: var(--color-secondary);
    list-style: none;
    position: relative;
    padding-right: 2rem;
}

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

.trait-methodology summary::before {
    content: '▸ ';
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.2s;
}

.trait-methodology[open] summary::before {
    transform: rotate(90deg);
}

/* Plus sign when closed */
.trait-methodology summary::after {
    content: '+';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-secondary);
}

/* Minus sign when open */
.trait-methodology[open] summary::after {
    content: '−';
}

.trait-methodology summary:hover {
    color: var(--color-primary);
}

.trait-methodology summary:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: 2px;
}

.methodology-content {
    margin-top: 1rem;
    padding: 1rem 2rem 0.5rem 2rem;
    border-top: 1px solid #e0e0e0;
}

.trait-explanation {
    margin-bottom: 1.5rem;
}

.trait-explanation h4 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    padding: 0;
}

.trait-explanation > p {
    line-height: 1.6;
    color: #333;
    padding: 0;
}

.trait-footnote {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.trait-derivation {
    font-size: 0.85rem;
    color: #555;
    background: #f7f7ed;
    padding: 0.75rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    line-height: 1.5;
}

.component-breakdown {
    margin-top: 1rem;
    padding: 1rem;
    background: #f7f7ed;
    border-radius: 4px;
    border-left: 4px solid var(--color-primary);
}

.component-breakdown > p {
    margin: 0.5rem 0;
}

.component-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.component-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.component-name {
    flex: 1;
    font-weight: 500;
}

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

.component-rating {
    color: var(--color-secondary);
    font-style: italic;
    font-size: 0.9rem;
}

.inverse-note {
    font-size: 0.75em;
    color: #666;
    background: #f0f0f0;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

.formula-result {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
    font-size: 1.05em;
    color: var(--color-primary);
}

.formula-result strong {
    font-weight: 600;
}

.direct-traits-note {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.direct-traits-note em {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* Trait Chart Thumbnail & Expandable Viewer */
/* ═══════════════════════════════════════════════════════════════════ */

/* Best Suited For section with thumbnail */
.best-suited-section {
    position: relative;
    min-height: 165px; /* Ensure section is tall enough for 150px thumbnail + spacing */
}

.best-suited-section .quick-profile-content {
    margin-right: 180px; /* Prevent text from flowing under thumbnail (150px + spacing) */
}

.best-suited-thumbnail {
    position: absolute;
    right: 1.5rem;
    top: 0;
    margin-bottom: 0.5rem; /* Space between thumbnail and next section */
}

.trait-chart-thumbnail-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: block;
    transition: opacity 0.3s ease;
}

.trait-chart-thumbnail-btn:hover .trait-chart-thumbnail-wrapper {
    transform: scale(1.05);
}

.trait-chart-thumbnail-btn:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: 4px;
    border-radius: 8px;
}

/* Hide thumbnail when expanded */
.trait-chart-thumbnail-btn[aria-expanded="true"] {
    opacity: 0;
    pointer-events: none;
}

.trait-chart-thumbnail-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.trait-chart-thumbnail {
    width: 100%;
    height: 100%;
    display: block;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: rgba(80, 108, 68, 0.06);
    transition: border-color 0.3s ease;
}

.trait-chart-thumbnail-btn:hover .trait-chart-thumbnail {
    border-color: var(--color-primary);
}

.trait-chart-expand-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: white;
    background: var(--color-secondary); /* Dark forest green */
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

.trait-chart-thumbnail-btn:hover .trait-chart-expand-hint {
    background: var(--color-primary);
}

/* Expandable Chart Viewer (appears between Best Suited For and Regenerative Advantages) */
.trait-chart-expanded {
    margin: 1rem 0;
    padding: 1.5rem;
    background: rgba(80, 108, 68, 0.06);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
    box-sizing: border-box;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.trait-chart-expanded-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-primary);
}

.trait-chart-expanded-header h2 {
    color: var(--color-secondary);
    font-size: 1.5rem;
    margin: 0;
}

.trait-chart-close-btn {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.trait-chart-close-btn:hover {
    opacity: 0.7;
}

.trait-chart-close-btn:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: 2px;
    border-radius: 2px;
}

.trait-chart-close-btn svg {
    stroke: var(--color-secondary);
    transition: opacity 0.2s ease;
}

.trait-chart-expanded-content {
    /* Inherits chart-container and methodology styles from above */
}

/* Mobile: Reduce padding and grid complexity */
@media (max-width: 1024px) {
    .breed-section-header {
        grid-template-columns: 32px 1fr 32px;
        gap: 12px;
        padding: 16px 20px;
    }

    .section-number {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .section-title {
        font-size: 1.0rem;
    }

    .section-subtitle {
        font-size: 0.8rem;
    }

    .breed-section-content {
        padding: 0 20px 20px 20px; /* No left indent on mobile */
    }

    .material-equipment-detail .breed-section-content {
        padding-left: 64px; /* Mobile: 20px padding + 32px badge + 12px gap */
    }
}

/* =============================================================================
   SECTION 1 SUBSECTIONS (Suitability Assessment)
   ============================================================================= */

.suitability-subsection {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(80, 108, 68, 0.1);
}

.suitability-subsection:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.subsection-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 8px 0;
}

.subsection-intro {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 16px 0;
    font-style: italic;
}

.subsection-subheading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 20px 0 12px 0;
}

/* Regenerative traits list */
.regenerative-traits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.regenerative-traits-list li {
    padding-left: 16px;
    position: relative;
    margin-bottom: 8px;
    line-height: 1.6;
}

.regenerative-traits-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* Climate info block */
.climate-info {
    background-color: rgba(247, 247, 237, 0.5);
    border-left: 3px solid var(--color-primary);
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.climate-info p {
    margin: 6px 0;
    font-size: 0.95rem;
}

.regional-zones {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(80, 108, 68, 0.15);
}

.regional-zones p {
    margin: 4px 0;
    font-size: 0.9rem;
}

.climate-zone-link {
    color: var(--color-accent-3);
    text-decoration: underline;
}

.climate-zone-link:hover {
    color: var(--color-primary);
}

/* Suitability tables */
.suitability-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.95rem;
}

.suitability-table thead th {
    background-color: rgba(80, 108, 68, 0.08);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--color-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.suitability-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(80, 108, 68, 0.15);
    vertical-align: top;
}

.suitability-table tbody tr:last-child td {
    border-bottom: none;
}

/* Suitability level badges */
.suitability-level {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 600;
}

.suitability-level.suitability-exceptional {
    background-color: rgba(80, 108, 68, 0.12);
    color: var(--color-primary);
}

.suitability-level.suitability-typical {
    background-color: rgba(107, 175, 178, 0.12);
    color: var(--color-accent-3);
}

.suitability-level.suitability-limited {
    background-color: rgba(151, 84, 54, 0.12);
    color: var(--color-accent-1);
}

/* Mobile: Responsive tables */
@media (max-width: 1024px) {
    .suitability-table {
        font-size: 0.9rem;
    }

    .suitability-table thead th,
    .suitability-table tbody td {
        padding: 8px 10px;
    }
}

/* =============================================================================
   SECTION 3 ECONOMICS SUBSECTIONS
   ============================================================================= */

.economics-subsection {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(80, 108, 68, 0.1);
}

.economics-subsection:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.economics-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 8px 0;
}

.economics-intro {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 16px 0;
    font-style: italic;
}

/* =============================================================================
   LEARN HUB PAGE
   ============================================================================= */

.learn-hub-section {
    padding: var(--section-padding) 0;
}

/* Seven Sections Grid - 2x2 + 3 bottom */
.learn-sections-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    align-items: stretch;
}

/* Section Cards */
.learn-section-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(80, 108, 68, 0.15);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-fast);
    min-height: var(--touch-target-min);
}

.learn-section-card:hover {
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.section-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(80, 108, 68, 0.1);
    border-radius: var(--border-radius-sm);
    color: var(--color-primary);
}

.section-icon svg {
    width: 24px;
    height: 24px;
}

.section-content {
    flex: 1;
}

.section-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-xs) 0;
}

.section-card-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.section-toggle {
    color: var(--color-primary);
    font-size: 1.25rem;
    font-weight: 700;
    align-self: center;
    flex-shrink: 0;
}

/* =============================================================================
   BROWSE BY TOPIC
   ============================================================================= */

.browse-by-topic {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(31, 67, 50, 0.1);
}

.browse-by-topic-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-xs) 0;
}

.browse-by-topic-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.5;
}

/* Topic groups in 2-column card grid (mirrors section cards) */
.topic-groups-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    align-items: start;
}

/* Individual topic group card */
.topic-group-card {
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(80, 108, 68, 0.15);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast);
}

.topic-group-card:hover {
    box-shadow: var(--shadow-md);
}

.topic-group-card-summary {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    cursor: pointer;
    list-style: none;
}

.topic-group-card-summary::-webkit-details-marker {
    display: none;
}

.topic-group-card-content {
    flex: 1;
}

.topic-group-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.3;
}

.topic-group-count {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.topic-group-card-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Toggle: show + when closed, minus when open */
details.topic-group-card > summary > .section-toggle {
    font-size: 0;
    line-height: 0;
}

details.topic-group-card > summary > .section-toggle::before {
    font-size: 1.25rem;
    line-height: 1;
    content: "+";
}

details.topic-group-card[open] > summary > .section-toggle::before {
    content: "\2212";
}

/* Page links inside expanded card */
.topic-group-pages {
    list-style: none;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    margin: 0;
    columns: 2;
    column-gap: var(--spacing-lg);
    border-top: 1px solid rgba(31, 67, 50, 0.06);
}

.topic-group-pages li {
    padding: 0.25rem 0;
    line-height: 1.4;
    break-inside: avoid;
}

.topic-group-pages a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.875rem;
}

.topic-group-pages a:hover {
    text-decoration: underline;
    color: var(--color-secondary);
}

.topic-group-pages a:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Small cards (collapsed tier) */
.topic-group-card--small .topic-group-card-title {
    font-size: 1rem;
}

.topic-group-card--small .topic-group-card-desc {
    font-size: 0.85rem;
}

.topic-group-card--small .topic-group-pages {
    columns: 1;
}

.topic-group-card--small .topic-group-pages a {
    font-size: 0.825rem;
}

/* More Topics wrapper */
.more-topics {
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
}

.more-topics-toggle {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-secondary);
    cursor: pointer;
    padding: var(--spacing-md) 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.more-topics-toggle::-webkit-details-marker {
    display: none;
}

.more-topics-toggle .section-toggle {
    margin-left: auto;
}

details.more-topics > .more-topics-toggle > .section-toggle {
    font-size: 0;
    line-height: 0;
}

details.more-topics > .more-topics-toggle > .section-toggle::before {
    font-size: 1.25rem;
    line-height: 1;
    content: "+";
}

details.more-topics[open] > .more-topics-toggle > .section-toggle::before {
    content: "\2212";
}

.more-topics-count {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-left: 0.25em;
}

.more-topics > .topic-groups-grid {
    margin-top: var(--spacing-sm);
}

/* Recent Content Grid */
.recent-content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

/* Subsection Title */
.subsection-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

/* =============================================================================
   SECTION LANDING PAGE
   ============================================================================= */

.learn-section-page {
    padding: var(--section-padding) 0;
    min-height: 60vh;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

.breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb-sep {
    margin: 0 var(--spacing-xs);
    color: var(--color-text-muted);
}

.breadcrumb-current {
    color: var(--color-text-dark);
}

.breadcrumb-label {
    color: var(--color-text-muted);
}

/* Section Pages Grid */
.section-pages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

/* Page Cards */
.page-card {
    display: block;
    position: relative;
    padding: var(--spacing-lg);
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    min-height: var(--touch-target-min);
}

.page-card > .section-toggle {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
}

.page-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

.page-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.4;
}

.page-card-summary {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.5;
}

.page-card-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Related Sections */
.related-sections {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.related-sections-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.related-section-link {
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: rgba(80, 108, 68, 0.1);
    color: var(--color-primary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
}

.related-section-link:hover {
    background-color: var(--color-primary);
    color: white;
    text-decoration: none;
}

/* =============================================================================
   TOPIC PAGE
   ============================================================================= */

.topic-page {
    padding: var(--section-padding) 0;
}

/* Two-Column Layout */
.topic-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

/* Main Content */
.topic-main {
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

.topic-header {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.topic-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.3;
}

.topic-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-sm) 0;
}

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

/* Section Headings */
.section-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-primary);
}

.section-heading:first-of-type {
    margin-top: 0;
}

/* Short Answer */
.short-answer-text {
    font-size: 1rem; /* Match body text and Going Deeper sections */
    line-height: 1.7;
    color: var(--color-text-dark);
    margin: 0;
}

/* Going Deeper - Expandable Sections */
.going-deeper-section {
    margin-top: 8px;
    margin-bottom: var(--spacing-xl);
}

.deeper-item {
    margin-bottom: var(--spacing-md);
    background-color: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(80, 108, 68, 0.15);
}

.deeper-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    cursor: pointer;
    list-style: none;
    min-height: 48px; /* Touch target */
}

.deeper-heading::-webkit-details-marker {
    display: none;
}

.deeper-title {
    font-weight: 500;
    color: var(--color-secondary);
}

.deeper-toggle::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--color-primary);
    font-weight: 300;
}

.deeper-item[open] .deeper-toggle::after {
    content: '−';
}

.deeper-content {
    padding: 0 var(--spacing-md) var(--spacing-md);
}

.deeper-summary {
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.6;
}

/* Reduce spacing when followed by economics table */
.deeper-summary + .economics-table {
    margin-top: var(--spacing-sm);
}

/* Economics cards - non-collapsible cards in Section 4 */
.economics-card {
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(80, 108, 68, 0.15);
    border-radius: 6px;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
}

.economics-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-primary);
}

/* Economics tables - compact styling for plant detail pages */
.economics-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
}

.economics-table th {
    background-color: rgba(80, 108, 68, 0.08);
    padding: var(--spacing-sm);
    text-align: left;
    font-weight: 500;
    border-bottom: 2px solid var(--color-primary);
}

.economics-table td {
    padding: var(--spacing-sm);
    border-bottom: 1px solid rgba(80, 108, 68, 0.15);
}

/* Calculated row styling - visually distinct from data rows */
.breed-detail-table tr.calculated-row {
    border-top: 2px solid var(--color-primary);
    background-color: rgba(80, 108, 68, 0.05);
}

.breed-detail-table tr.calculated-row td {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

/* Calculation footnote - smaller, muted */
.calculation-footnote {
    margin-top: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--color-secondary);
    font-style: italic;
}

/* Coverage notice for sparse enrichment */
.coverage-notice {
    background-color: rgba(197, 84, 54, 0.08);
    border-left: 3px solid var(--color-accent-1);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-md) 0;
    border-radius: var(--border-radius-sm);
}

.coverage-notice p {
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.9rem;
}

/* Economics subsections */
.economics-subsection {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.economics-subsection:last-child {
    border-bottom: none;
}

.economics-subsection h4 {
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

.economics-subsection .quantitative-summary {
    background-color: rgba(80, 108, 68, 0.05);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-sm);
}

/* Timeline periods */
.timeline-periods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

@media (max-width: 1024px) {
    .timeline-periods {
        grid-template-columns: 1fr;
    }
}

.timeline-period {
    background-color: rgba(80, 108, 68, 0.03);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--color-primary);
}

.timeline-period h4 {
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    font-size: 1rem;
}

.timeline-period p {
    margin: 0;
    color: var(--color-text);
}

/* Ecosystem services and risk diversification lists */
.ecosystem-services-list,
.risk-diversification-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ecosystem-services-list li,
.risk-diversification-list li {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ecosystem-services-list li:last-child,
.risk-diversification-list li:last-child {
    border-bottom: none;
}

/* Go Even Deeper (nested collapsible within Going Deeper) */
.go-even-deeper {
    margin-top: var(--spacing-md);
    border-left: 2px solid var(--color-primary);
    padding-left: var(--spacing-md);
}

.go-even-deeper-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    cursor: pointer;
    list-style: none;
    min-height: 44px; /* Touch target */
}

.go-even-deeper-summary::-webkit-details-marker {
    display: none;
}

.go-even-deeper-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-primary);
}

.go-even-deeper-toggle::after {
    content: '+';
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 300;
}

.go-even-deeper[open] .go-even-deeper-toggle::after {
    content: '−';
}

.go-even-deeper-content {
    padding: var(--spacing-sm) 0 var(--spacing-md) 0;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.deeper-expanded {
    color: var(--color-text-dark);
    line-height: 1.7;
}

/* Going Deeper - Inline Source Links */
/* Legacy deeper-sources styles removed — superseded by section_enrichment macro */

/* Why This Matters */
.why-matters-list {
    margin: 0;
    padding-left: var(--spacing-lg);
    line-height: 1.7;
}

.why-matters-list li {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-dark);
}

/* What's Debated */
.whats-debated-section {
    margin-bottom: var(--spacing-xl);
}

.debated-text {
    color: var(--color-text-dark);
    line-height: 1.7;
}

.controversy-box {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: rgba(151, 84, 54, 0.08);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-md);
}

.controversy-icon {
    font-size: 1.5rem;
    color: var(--color-accent-1);
    flex-shrink: 0;
}

.controversy-content strong {
    color: var(--color-accent-1);
    display: block;
    margin-bottom: var(--spacing-xs);
}

.controversy-content p {
    margin: 0;
    line-height: 1.6;
    color: var(--color-text-dark);
}

.controversy-details {
    margin-top: var(--spacing-md);
}

.controversy-details summary {
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 500;
}

.controversy-positions {
    padding: var(--spacing-md) 0 0;
}

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

.position-label {
    font-weight: 500;
    font-size: 0.9rem;
}

.position-source {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-left: var(--spacing-xs);
}

/* Sources Grid */
.sources-section {
    margin-top: var(--spacing-xl);
}

.sources-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

/* Related Topics (Child Pages) */
.related-topics-section {
    margin-bottom: var(--spacing-xl);
}

.related-topics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.related-topic-card {
    background-color: rgba(80, 108, 68, 0.03);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: var(--spacing-md);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 48px; /* Touch target minimum */
}

.related-topic-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
    background-color: rgba(80, 108, 68, 0.06);
    transform: translateY(-2px);
}

.related-topic-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.related-topic-title {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 var(--spacing-xs) 0;
}

.related-topic-title a {
    color: var(--color-primary);
    text-decoration: none;
}

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

.related-topic-summary {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Best of the Best Section */
.best-content-section {
    margin-bottom: var(--spacing-xl);
}

.best-content-intro {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 0 0 var(--spacing-md) 0;
}

.best-category {
    margin-bottom: var(--spacing-lg);
}

.best-category:last-child {
    margin-bottom: 0;
}

.best-category-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-sm) 0;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

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

.best-item {
    margin-bottom: var(--spacing-sm);
}

.best-item:last-child {
    margin-bottom: 0;
}

/* Item Headers with Scores */
.item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.item-score {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent-2);
    white-space: nowrap;
    background-color: rgba(201, 134, 58, 0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    transition: all 0.2s ease;
}

/* Score badge gradient levels - visual distinction by quality tier */
/* WCAG 2.1 AA compliant: All colors verified ≥4.5:1 contrast on backgrounds */
.item-score[data-score^="9"],
.item-score[data-score^="10"] {
    background-color: rgba(201, 134, 58, 0.2);
    color: #7a4a1a;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(201, 134, 58, 0.3);
}

.item-score[data-score^="8"] {
    background-color: rgba(201, 134, 58, 0.15);
    color: #8b5420;
    font-weight: 600;
}

.item-score[data-score^="7"] {
    background-color: rgba(201, 134, 58, 0.08);
    color: #9d6126;
    font-weight: 500;
}

/* Research citation with score */
.research-citation {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.research-citation .item-score {
    margin-left: auto;
}

/* =============================================================================
   CLUSTER CARDS
   ============================================================================= */

.cluster-card {
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    min-height: var(--touch-target-min);
}

.cluster-card-compact {
    padding: var(--spacing-sm);
}

.cluster-header {
    margin-bottom: var(--spacing-sm);
}

.cluster-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.4;
}

.cluster-summary {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.5;
    flex: 1;
}

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

.meta-item {
    display: inline-block;
}

.meta-item:not(:last-child)::after {
    content: '•';
    margin-left: var(--spacing-sm);
    color: var(--color-text-muted);
}

.cluster-actions {
    margin-top: auto;
}

.cluster-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.cluster-link:hover {
    text-decoration: underline;
}

/* =============================================================================
   SIDEBAR
   ============================================================================= */

.topic-sidebar {
    position: sticky;
    top: var(--spacing-lg);
}

.sidebar-section {
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-md);
}

.sidebar-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

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

.related-pages-list li {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.related-pages-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.related-pages-list a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.5;
    display: block;
    padding: var(--spacing-xs) 0;
    min-height: var(--touch-target-min);
}

.related-pages-list a:hover {
    text-decoration: underline;
}

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

.sidebar-links li {
    padding: var(--spacing-xs) 0;
}

.sidebar-links a {
    color: var(--color-secondary);
    text-decoration: none;
    font-size: 0.9rem;
}

.sidebar-links a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.sidebar-ask {
    background-color: rgba(80, 108, 68, 0.05);
}

.sidebar-text {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.5;
}

.sidebar-btn {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.sidebar-btn:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: white;
}

/* Sidebar Content Blocks (Videos, Articles, Research) */
.sidebar-content-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-content-list .block-item {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.sidebar-content-list .block-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-content-list .item-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    display: block;
}

.sidebar-content-list .item-link:hover {
    text-decoration: underline;
}

.sidebar-content-list .item-title {
    display: block;
}

.sidebar-content-list .item-source {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

/* Subtle link styling for video titles - uses dark green for consistency (Phase 2.6)
   This departs from standard link conventions for visual consistency across content types */
.item-link-subtle {
    color: var(--color-secondary);
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 300;
}

.item-link-subtle .item-title {
    color: var(--color-secondary);
    font-size: 0.9rem;
    font-weight: 300;
}

.item-link-subtle:hover,
.item-link-subtle:hover .item-title {
    color: var(--color-primary);
    text-decoration: underline;
}

.sidebar-content-list .item-summary {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: var(--spacing-xs) 0 0 0;
    line-height: 1.4;
}

.sidebar-content-list .item-timestamp-badge {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: var(--spacing-xs) 0 0 0;
    display: none; /* Hide timestamp in sidebar for compactness */
}

.sidebar-content-list .research-citation {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
}

.sidebar-content-list .research-title {
    font-size: 0.875rem;
    line-height: 1.3;
}

.sidebar-content-list .research-journal {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: var(--spacing-xs);
}

.sidebar-content-list .external-link-icon {
    font-size: 0.7em;
    margin-left: 0.25em;
    opacity: 0.7;
}

/* =============================================================================
   LOOK UP SECTION
   ============================================================================= */

.lookup-section {
    padding: 1rem 0 var(--section-padding) 0;
}

.lookup-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.lookup-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-xl);
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    min-height: var(--touch-target-min);
}

.lookup-category-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

.category-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(80, 108, 68, 0.1);
    border-radius: 50%;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.category-icon svg {
    width: 32px;
    height: 32px;
}

.category-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

.category-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Common Lookups Tags */
.common-lookups-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.common-lookup-tag {
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: rgba(80, 108, 68, 0.1);
    color: var(--color-primary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
}

.common-lookup-tag:hover {
    background-color: var(--color-primary);
    color: white;
    text-decoration: none;
}

/* Lookup Grid and Cards */
.lookup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.lookup-grid--categories {
    grid-template-columns: repeat(2, 1fr);
}

.lookup-card {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    min-height: var(--touch-target-min);
}

.lookup-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

.lookup-card:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: 2px;
}

.lookup-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 6px 0;
}

.lookup-card-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 6px 0;
    flex-grow: 1;
}

.lookup-card-category,
.lookup-card-species,
.lookup-card-type {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background-color: rgba(80, 108, 68, 0.1);
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 6px;
}

.lookup-card-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: auto;
}

/* Category Cards (larger, more emphasis) */
.category-card {
    padding: 16px 20px;
    text-align: left;
    min-height: 60px;
    justify-content: center;
}

.category-card .lookup-card-title {
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.category-card .lookup-card-desc {
    margin-bottom: 0;
}

.category-card .lookup-card-meta {
    font-weight: 500;
    color: var(--color-primary);
}

/* Category Navigation */
.category-nav {
    margin-bottom: var(--spacing-lg);
}

.back-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    padding: var(--spacing-sm) 0;
    min-height: var(--touch-target-min);
}

.back-link:hover {
    text-decoration: underline;
}

.general-practices-link {
    text-align: center;
    margin-top: var(--spacing-lg);
}

/* Filter Bar (existing pills style) */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md);
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: transparent;
    color: var(--color-text-dark);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    min-height: var(--touch-target-min);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.filter-tag:hover {
    background-color: rgba(80, 108, 68, 0.1);
    border-color: var(--color-primary);
    text-decoration: none;
}

.filter-tag.active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* =============================================================================
   FOR YOUR FARM SECTION
   ============================================================================= */

.for-your-farm-section {
    padding: var(--section-padding) 0;
}

.farm-filter-form {
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-xl);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group-wide {
    grid-column: span 2;
}

.filter-label {
    font-weight: 500;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-sm);
    font-size: 0.9rem;
}

.filter-select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    background-color: white;
    color: var(--color-text-dark);
    min-height: var(--touch-target-min);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    cursor: pointer;
    min-height: var(--touch-target-min);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.filter-actions {
    text-align: center;
}

/* Active Filters */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: var(--spacing-md) 0;
}

.filter-tag {
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: rgba(80, 108, 68, 0.1);
    color: var(--color-primary);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
}

.refine-link {
    color: var(--color-primary);
    font-size: 0.9rem;
}

/* Quick Browse */
.quick-browse-section {
    margin-top: var(--spacing-xl);
}

.quick-browse-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.quick-browse-link {
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-sm);
    color: var(--color-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
}

.quick-browse-link:hover {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    text-decoration: none;
}

/* Results */
.results-section {
    margin-bottom: var(--spacing-xl);
}

.results-pages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.result-page-card {
    display: block;
    padding: var(--spacing-md);
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    min-height: var(--touch-target-min);
}

.result-page-card:hover {
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.result-page-card h3 {
    font-size: 1rem;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-xs) 0;
}

.result-page-card p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.results-content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

/* Empty State */
.empty-state-box {
    text-align: center;
    padding: var(--spacing-xxl, 4rem);
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
}

.empty-state-box h2 {
    color: var(--color-secondary);
    margin-bottom: var(--spacing-md);
}

.empty-state-box p {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

.empty-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

/* =============================================================================
   START HERE SECTION
   ============================================================================= */

.start-here-section {
    padding: var(--section-padding) 0;
}

.learning-paths-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.learning-path-card {
    display: block;
    padding: var(--spacing-lg);
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    min-height: var(--touch-target-min);
}

.learning-path-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

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

.path-audience {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    background-color: rgba(80, 108, 68, 0.1);
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
}

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

.path-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

.path-description {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.5;
}

.path-cta {
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Not Sure Section */
.not-sure-section {
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl);
}

.not-sure-text {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

.entry-points-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.entry-point {
    display: block;
    padding: var(--spacing-md);
    background-color: rgba(80, 108, 68, 0.05);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    min-height: var(--touch-target-min);
}

.entry-point:hover {
    background-color: rgba(80, 108, 68, 0.1);
    text-decoration: none;
}

.entry-point strong {
    display: block;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-xs);
}

.entry-point span {
    font-size: 0.9rem;
    color: var(--color-primary);
}

/* =============================================================================
   PATHWAY PAGE
   ============================================================================= */

.pathway-section {
    padding: var(--section-padding) 0;
}

.pathway-header {
    text-align: center;
}

.path-meta {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.path-audience-badge {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-primary);
    background-color: rgba(80, 108, 68, 0.1);
    padding: 4px 12px;
    border-radius: var(--border-radius-sm);
}

/* Pathway Steps */
.pathway-steps {
    max-width: 700px;
    margin: var(--spacing-xl) auto;
}

.pathway-step {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.step-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.step-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: white;
    border-radius: 50%;
    font-weight: 600;
}

.step-connector {
    width: 2px;
    flex: 1;
    min-height: 30px;
    background-color: rgba(80, 108, 68, 0.2);
    margin-top: var(--spacing-sm);
}

.step-content {
    flex: 1;
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.step-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-xs) 0;
}

.step-duration {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: var(--spacing-md);
}

.step-page-link {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
}

.step-page-link:hover {
    text-decoration: underline;
}

.step-page-summary {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: var(--spacing-xs) 0 0 0;
    line-height: 1.5;
}

.step-external-link {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.step-external-link:hover {
    text-decoration: underline;
}

.step-type-badge {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background-color: rgba(0, 0, 0, 0.05);
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
    margin-left: var(--spacing-sm);
}

/* Pathway Next Steps */
.pathway-next {
    text-align: center;
    padding: var(--spacing-xl);
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    max-width: 700px;
    margin: var(--spacing-xl) auto 0;
}

.pathway-next p {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

.next-steps-grid {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.next-step-link {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: rgba(80, 108, 68, 0.1);
    color: var(--color-primary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
}

.next-step-link:hover {
    background-color: var(--color-primary);
    color: white;
    text-decoration: none;
}

/* =============================================================================
   RESPONSIVE: Mobile/Tablet (≤1024px)
   ============================================================================= */

@media (max-width: 1024px) {
    /* Hub Page */
    .learn-sections-grid {
        grid-template-columns: 1fr;
    }

    .recent-content-grid {
        grid-template-columns: 1fr;
    }

    .topic-groups-grid {
        grid-template-columns: 1fr;
    }

    .topic-group-pages {
        columns: 1;
    }

    /* Section Landing */
    .section-pages-grid {
        grid-template-columns: 1fr;
    }

    /* Topic Page - Stack layout */
    .topic-layout {
        grid-template-columns: 1fr;
    }

    .topic-sidebar {
        position: static;
    }

    .topic-title {
        font-size: 1.75rem;
    }

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

    /* Look Up */
    .lookup-categories {
        grid-template-columns: 1fr;
    }

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

    .lookup-grid--categories {
        grid-template-columns: 1fr;
    }

    .category-card {
        min-height: auto;
    }

    .filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    /* For Your Farm */
    .filter-grid {
        grid-template-columns: 1fr;
    }

    .filter-group-wide {
        grid-column: span 1;
    }

    .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .results-pages-grid,
    .results-content-grid {
        grid-template-columns: 1fr;
    }

    /* Start Here */
    .learning-paths-grid {
        grid-template-columns: 1fr;
    }

    .entry-points-grid {
        grid-template-columns: 1fr;
    }

    /* Related Topics - Single column on mobile */
    .related-topics-grid {
        grid-template-columns: 1fr;
    }

    /* Typography scaling */
    .section-heading {
        font-size: 1.1rem;
    }

    .short-answer-text {
        font-size: 1rem;
    }
}

/* ============================================================================
   Parent Page UI Restructure - New Styles (2025-12-26)
   ========================================================================= */

/* ============================================================================
   The Longer Answer Card
   ========================================================================= */

.longer-answer-section {
    margin-bottom: var(--spacing-xl);
}

.longer-answer-card {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    background-color: rgba(80, 108, 68, 0.02);
}

.longer-answer-card[open] {
    background-color: rgba(80, 108, 68, 0.05);
}

.longer-answer-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    min-height: 48px; /* Touch target */
}

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

.longer-answer-summary .section-heading {
    margin: 0;
    font-weight: 500; /* Match Going Deeper style (medium weight, not bold) */
    font-size: 1rem; /* Match Going Deeper style (not heading size) */
    text-decoration: none; /* No underline */
    border-bottom: none; /* Remove underline border */
    padding-bottom: 0; /* Remove padding when no border */
    color: var(--color-secondary); /* Match Going Deeper title color */
}

.toggle-icon {
    font-size: 1.25rem; /* Match Going Deeper toggle size */
    color: var(--color-primary);
    font-weight: 300; /* Match Going Deeper toggle weight */
}

.toggle-icon::before {
    content: '+'; /* Match Going Deeper: + instead of › */
}

.longer-answer-card[open] .toggle-icon::before {
    content: '−'; /* Match Going Deeper: − when open */
}

.longer-answer-content {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    line-height: 1.7;
}

.longer-answer-content p {
    margin-bottom: var(--spacing-md);
}

.longer-answer-content p:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   Why This Matters & What's Debated Cards (Conditional)
   ========================================================================= */

.why-matters-card,
.whats-debated-card {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    background-color: rgba(201, 134, 58, 0.02);
    margin-bottom: var(--spacing-xl);
}

.why-matters-card[open],
.whats-debated-card[open] {
    background-color: rgba(201, 134, 58, 0.05);
}

.card-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

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

.card-summary .section-heading {
    margin: 0;
}

.card-content {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ============================================================================
   Full Document View Button
   ========================================================================= */

.full-view-section {
    margin-bottom: 0;
    text-align: center;
}

.btn-full-view {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
}

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

.btn-subtitle {
    font-size: 0.85rem;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

/* ============================================================================
   Related Sections - Horizontal Layout
   ========================================================================= */

.related-sections-section {
    margin-bottom: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 2px solid rgba(0, 0, 0, 0.06);
}

.related-sections-nav {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

.related-section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--border-radius-sm);
    background-color: rgba(80, 108, 68, 0.03);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: background-color 0.2s, border-color 0.2s;
}

.related-section-link:hover {
    background-color: rgba(80, 108, 68, 0.1);
    border-color: var(--color-primary);
}

.section-icon {
    font-size: 1.25rem;
}

/* ============================================================================
   Learn More Sidebar Section
   ========================================================================= */

.sidebar-learn-more {
    background-color: rgba(201, 134, 58, 0.03);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.sidebar-learn-more .sidebar-title {
    color: var(--color-accent-2);
}

.sidebar-intro {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    font-style: italic;
}

/* Learn More Section - Content Blocks */
.sidebar-learn-more .content-block {
    margin-bottom: var(--spacing-sm);
    padding: 0.625rem 0.5rem 0.5rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
}

.sidebar-learn-more .content-block:last-child {
    margin-bottom: 0;
}

.sidebar-learn-more .block-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-learn-more .block-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Reduce spacing on block items inside Learn More */
.sidebar-learn-more .block-item {
    padding: 0.125rem 0 0.375rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.sidebar-learn-more .block-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Domain names in Learn More section - lighter green to match descriptive text */
.sidebar-learn-more .item-source {
    color: var(--color-primary);
}

/* ============================================================================
   Practice & Materials Detail Pages - What/Why/How Sections
   ========================================================================= */

.content-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.content-section {
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

.content-section .section-heading {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    color: var(--color-secondary);
}

.section-content {
    line-height: 1.7;
    color: var(--color-text-dark);
}

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

.section-content p:last-child {
    margin-bottom: 0;
}

.section-content ul,
.section-content ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.section-content li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.7;
}

/* Section subheadings within bulleted lists (e.g., "Physical Characteristics:") */
.section-subheading {
    display: block;
    margin-top: var(--spacing-lg);
    font-weight: 600;
}

/* ============================================================================
   Full View Mode (Print-Friendly Display)
   ========================================================================= */

/* Force all details elements to appear open in full-view mode */
.full-view-mode details {
    display: block;
}

.full-view-mode details[open] > summary,
.full-view-mode details > summary {
    display: block;
    list-style: none;
    cursor: default;
}

/* Hide toggle indicators */
.full-view-mode .section-toggle,
.full-view-mode .deeper-toggle {
    display: none;
}

/* Show all content without needing to click */
.full-view-mode details > *:not(summary) {
    display: block !important;
}

/* Remove interactive styling from summaries */
.full-view-mode summary::-webkit-details-marker {
    display: none;
}

.full-view-mode summary {
    pointer-events: none;
}

/* ============================================================================
   Breed Comparison Table (Animals Section)
   ========================================================================= */

.breed-section {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.breed-section:first-of-type {
    margin-top: 2rem;
}

.breed-table-container {
    overflow-x: auto;
    margin-top: var(--spacing-md);
}

.breed-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.breed-table thead {
    background: var(--color-primary);
    color: white;
}

.breed-table th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.breed-table th:last-child {
    border-right: none;
}

.breed-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.9rem;
}

.breed-table td:last-child {
    border-right: none;
}

/* First column (breed name) - left align and narrow width */
.breed-table th:first-child,
.breed-table td:first-child {
    text-align: left;
    font-weight: 500;
    width: 15%;
    max-width: 180px;
}

/* Data columns - ensure adequate width for dual units */
.breed-table th:not(:first-child),
.breed-table td:not(:first-child) {
    min-width: 120px;
}

/* Third column (Water) - compact to fit more columns */
.breed-table th:nth-child(3),
.breed-table td:nth-child(3) {
    min-width: 100px;
    font-size: 0.85rem;
}

/* Breed comparison table on species landing pages - more compact to prevent horizontal scroll */
.animal-species .breed-table th:not(:first-child),
.animal-species .breed-table td:not(:first-child) {
    min-width: 90px;
    max-width: 110px;
    font-size: 0.85rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    word-wrap: break-word;
    white-space: normal;
}

/* Breed name column - slightly wider */
.animal-species .breed-table th:first-child,
.animal-species .breed-table td:first-child {
    width: 18%;
    max-width: 160px;
    min-width: 120px;
}

/* Top Practices column - allow wrapping and slightly wider */
.animal-species .breed-table th:last-child,
.animal-species .breed-table td:last-child {
    min-width: 140px;
    max-width: 180px;
    white-space: normal;
    word-wrap: break-word;
}

/* Zebra striping - alternating row colors */
.breed-table tbody tr:nth-child(even) {
    background: var(--color-background);
}

.breed-table tbody tr:nth-child(odd) {
    background: white;
}

/* Hover effect */
.breed-table tbody tr:hover {
    background: rgba(80, 108, 68, 0.05);
}

/* Link styling within table */
.breed-table a {
    color: var(--color-primary);
    text-decoration: none;
}

.breed-table a:hover {
    text-decoration: underline;
    color: var(--color-secondary);
}

/* Table footnotes */
.table-footnotes {
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    background: rgba(80, 108, 68, 0.03);
    border-left: 3px solid var(--color-primary);
    border-radius: 4px;
}

.table-footnotes p {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

.table-footnotes p:last-child {
    margin-bottom: 0;
}

.table-footnotes strong {
    color: var(--color-primary);
    font-weight: 600;
}

/* ============================================================================
   Practice Zone Table Styling (Regional Suitability)
   ========================================================================= */

/* Practice-specific table adjustments */
.practice-zone-table td:first-child {
    line-height: 1.6;
    min-width: 250px;
}

.practice-zone-table td:first-child strong {
    display: inline;
    color: var(--color-secondary);
    font-size: 1.05rem;
}

.zone-locations {
    color: #666;
    font-size: 0.9rem;
}

/* Suitability badges (standard table) */
.suitability-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.suitability-ideal {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.suitability-adequate {
    background-color: rgba(107, 175, 178, 0.15);
    color: #1f4332;
    border: 1px solid rgba(107, 175, 178, 0.3);
}

.suitability-not-recommended {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Regenerative potential badges (irrigation table) */
.potential-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.potential-high {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.potential-moderate {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.potential-low {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Zone reference list */
.zone-reference-list {
    list-style: disc;
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}

.zone-reference-list li {
    margin-bottom: 0.25rem;
}

.zone-reference-list strong {
    color: var(--color-secondary);
}

/* ============================================================================
   Practice Establishment Costs Table Styling (Phase 2)
   ========================================================================= */

/* Main establishment costs table */
.establishment-costs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.95rem;
}

.establishment-costs-table thead {
    background-color: var(--color-primary);
    color: white;
}

.establishment-costs-table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    line-height: 1.4;
}

.establishment-costs-table td {
    padding: 0.6rem 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid #e0e0e0;
    line-height: 1.5;
}

/* Unit labels in column headers (smaller, lighter text) */
.unit-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.9;
    margin-top: 0.2rem;
}

/* Dual-unit formatting */
.dual-unit {
    display: inline-block;
}

.metric-unit {
    margin-left: 1rem;
    color: #666;
    font-size: 0.9em;
}

/* Component name column (vertical nested table) */
.component-name {
    font-weight: 600;
    color: var(--color-secondary);
    background-color: rgba(80, 108, 68, 0.05);
}

/* Total rows */
.total-row {
    background-color: rgba(80, 108, 68, 0.1);
    font-weight: 600;
    border-top: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.total-row td {
    padding: 0.8rem 0.75rem;
}

/* Scale range text (smaller, lighter) */
.scale-range {
    display: block;
    font-size: 0.85rem;
    color: #666;
    font-weight: 400;
    margin-top: 0.2rem;
}

/* Table notes */
.table-note {
    font-size: 0.9rem;
    color: #666;
    margin-top: 1rem;
    line-height: 1.6;
}

.table-note strong {
    color: var(--color-secondary);
}

/* Mobile responsive adjustments for establishment costs tables */
@media (max-width: 1024px) {
    .establishment-costs-table {
        font-size: 0.85rem;
    }

    .establishment-costs-table th,
    .establishment-costs-table td {
        padding: 0.5rem;
    }

    .metric-unit {
        display: block;
        margin-left: 0;
        margin-top: 0.2rem;
    }

    .unit-label {
        font-size: 0.7rem;
    }
}

/* Table note for practices */
.table-note {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-secondary);
}

/* ============================================================================
   Practice Establishment Costs Table Styling
   ========================================================================= */

/* Scale column - narrower since parenthetical info moved to key */
.deeper-content table th:nth-child(2),
.deeper-content table td:nth-child(2) {
    width: 8%;
    min-width: 65px;
    max-width: 85px;
    font-size: 0.85rem;
}

/* Component column - consistent width */
.deeper-content table th:first-child,
.deeper-content table td:first-child {
    width: 20%;
    min-width: 150px;
}

/* Cost and Most Spend columns - accommodate dual units */
.deeper-content table th:nth-child(3),
.deeper-content table th:nth-child(4),
.deeper-content table td:nth-child(3),
.deeper-content table td:nth-child(4) {
    width: 15%;
    min-width: 110px;
}

/* Why the Range column - wider to use freed space */
.deeper-content table th:nth-child(5),
.deeper-content table td:nth-child(5) {
    width: 42%;
    text-align: left;
    padding-left: var(--spacing-md);
}

/* 4-column cost tables (Cost Category + Small/Mid/Large) */
/* Target tables with exactly 4 columns by checking if 4th child is the last */
.deeper-content table th:nth-child(4):last-child,
.deeper-content table td:nth-child(4):last-child {
    /* Marker for 4-column tables */
}

/* For 4-column tables: wider first column */
.deeper-content table th:nth-child(1):nth-last-child(4),
.deeper-content table td:nth-child(1):nth-last-child(4) {
    width: 49% !important;
    min-width: 280px !important;
    white-space: nowrap;
}

/* For 4-column tables: data columns (Small, Mid, Large) */
.deeper-content table th:nth-child(2):nth-last-child(3),
.deeper-content table th:nth-child(3):nth-last-child(2),
.deeper-content table th:nth-child(4):nth-last-child(1),
.deeper-content table td:nth-child(2):nth-last-child(3),
.deeper-content table td:nth-child(3):nth-last-child(2),
.deeper-content table td:nth-child(4):nth-last-child(1) {
    width: 17% !important;
    min-width: 110px !important;
    text-align: center;
}

/* ============================================================================
   Responsive Adjustments for New Elements
   ========================================================================= */

@media (max-width: 1024px) {
    .related-sections-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .related-section-link {
        justify-content: center;
    }

    .longer-answer-card,
    .why-matters-card,
    .whats-debated-card {
        padding: var(--spacing-md);
    }

    .btn-full-view {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Practice/Materials Detail - Reduce padding on smaller screens */
    .content-section {
        padding: var(--spacing-lg);
    }

    /* Practice zone tables - Mobile adjustments */
    .practice-zone-table td:first-child {
        min-width: unset;
    }

    .suitability-badge,
    .potential-badge {
        font-size: 0.8rem;
        padding: 0.25rem 0.6rem;
    }
}

/* ============================================================================
   Animal Detail - Regenerative Suitability Cards
   ========================================================================= */

.suitability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.suitability-card {
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    transition: box-shadow 0.2s ease;
}

.suitability-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.suitability-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.suitability-attribute {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.95rem;
}

.suitability-level {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: capitalize;
}

.suitability-excellent {
    background: rgba(46, 125, 50, 0.1);
    color: #2e7d32;
}

.suitability-good {
    background: rgba(123, 157, 75, 0.1);
    color: #7b9d4b;
}

.suitability-moderate, .suitability-fair {
    background: rgba(201, 134, 58, 0.1);
    color: #c9863a;
}

.suitability-poor, .suitability-low {
    background: rgba(151, 84, 54, 0.1);
    color: #975436;
}

/* Comparative rating levels (exceptional/typical/limited) */
.suitability-exceptional {
    background: rgba(46, 125, 50, 0.1);
    color: #2e7d32;
}

.suitability-typical {
    background: rgba(33, 150, 243, 0.1);
    color: #1976d2;
}

.suitability-limited {
    background: rgba(201, 134, 58, 0.1);
    color: #c9863a;
}

.suitability-explanation {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-secondary);
}

/* ═══════════════════════════════════════════════════════════════════
   Climate Suitability Section (Phase 5B)
   ═══════════════════════════════════════════════════════════════════ */

.climate-suitability-section .section-intro {
    font-size: 0.938rem;
    line-height: 1.6;
    color: var(--color-secondary);
    margin-bottom: 2rem;
}

.climate-zones-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem 0;
}

.climate-zone-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background: #ffffff;
    transition: box-shadow 0.2s ease;
}

.climate-zone-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Bullet lists inside compatible practice cards */
.climate-zone-card ul {
    list-style: disc;
    margin-left: 5px;
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.climate-zone-card li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}

.zone-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
}

.suitability-badge {
    display: inline-block;
    padding: 0.5rem 1.125rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Reuse existing suitability colors for badges */
.suitability-badge.suitability-exceptional {
    background: rgba(46, 125, 50, 0.15);
    color: #2e7d32;
    border: 1px solid rgba(46, 125, 50, 0.3);
}

.suitability-badge.suitability-typical {
    background: rgba(33, 150, 243, 0.15);
    color: #1976d2;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.suitability-badge.suitability-limited {
    background: rgba(201, 134, 58, 0.15);
    color: #c9863a;
    border: 1px solid rgba(201, 134, 58, 0.3);
}


.regional-zones {
    margin: 0 0 1.25rem 0;
}

.regional-zones .zone-line {
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--color-secondary);
    margin: 0;
}

.regional-zones .zone-archetype-list {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-secondary);
    font-weight: 500;
    margin: 0 0 0.75rem 0;
}

.regional-zones .zone-summary {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-secondary);
    margin: 1rem 0 0 0;
}

.regional-zones strong {
    font-weight: 600;
    color: var(--color-secondary);
}

.climate-explanation {
    font-size: 0.938rem;
    line-height: 1.7;
    color: var(--color-secondary);
    margin: 0;
}

.alternative-breeds-inline {
    margin-top: 0.75rem;
    margin-left: 1rem;
    padding: 0.25rem 0;
    font-size: 0.813rem;
    line-height: 1.6;
    color: #666;
}

.alternative-breeds-inline .alternatives-label {
    font-weight: 500;
    font-style: italic;
    color: #666;
    margin-right: 0.375rem;
}

.alternative-breeds-inline .alt-breed {
    color: #666;
}

.filter-note {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-secondary);
    opacity: 0.75;
    margin-top: 2rem;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 4px;
}

.filter-note strong {
    font-weight: 600;
}

/* Mobile responsiveness for climate zone cards */
@media (max-width: 1024px) {
    .climate-zones-container {
        gap: 1.25rem;
    }

    .climate-zone-card {
        padding: 1.25rem;
    }

    .suitability-badge {
        font-size: 0.813rem;
        padding: 0.4rem 0.875rem;
    }

    .regional-zones .zone-line {
        font-size: 0.813rem;
    }

    .alternative-breeds-inline {
        font-size: 0.75rem;
        padding: 0.25rem 0;
        margin-left: 0;
    }

    .filter-note {
        padding: 0.875rem;
        font-size: 0.813rem;
    }
}

@media (max-width: 1024px) {
    .suitability-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   Breed Detail Tables (Individual Breed Pages)
   ========================================================================= */

/* Three-column suitability table (Attribute | Rating | Explanation) */
.breed-detail-table th:first-child,
.breed-detail-table td:first-child {
    width: 15%;
}

.breed-detail-table th:nth-child(2),
.breed-detail-table td:nth-child(2) {
    width: 18%;
}

.breed-detail-table th:last-child,
.breed-detail-table td:last-child {
    width: 67%;
    white-space: normal;
    word-break: normal;
}

/* Two-column economics tables (Metric | Value) - override for 2-column layout */
.breed-detail-table thead tr th:only-child ~ th:last-child {
    width: 70%;
}

.breed-detail-table thead tr th:first-child:not(:only-child):last-child {
    width: 30%;
}

/* More specific: when there are exactly 2 columns */
.breed-detail-table thead tr th:nth-child(2):last-child {
    width: 70%;
}

.breed-detail-table thead tr th:first-child:nth-last-child(2) {
    width: 30%;
}

.breed-detail-table td {
    vertical-align: top;
    padding: 12px 16px;
    line-height: 1.6;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.section-intro {
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
    color: var(--color-secondary);
}

.evidence-level {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Practice list in Top Practices row */
.practices-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.practice-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.practice-link {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.practice-link:hover {
    text-decoration: underline;
}

.practice-summary {
    font-size: 0.875rem;
    color: var(--color-secondary);
    line-height: 1.5;
}

/* ========================================================================
   CLIMATE ZONES PAGE
   ======================================================================== */

/* Highlight effect when navigating to a specific zone via anchor link */
.climate-zone-target:target {
    background: linear-gradient(135deg, rgba(201, 134, 58, 0.08) 0%, rgba(80, 108, 68, 0.05) 100%);
    box-shadow: 0 0 0 3px rgba(201, 134, 58, 0.2), var(--shadow-md);
    animation: highlightPulse 0.6s ease-out;
}

@keyframes highlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(201, 134, 58, 0.4), var(--shadow-sm);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(201, 134, 58, 0.15), var(--shadow-md);
    }
    100% {
        box-shadow: 0 0 0 3px rgba(201, 134, 58, 0.2), var(--shadow-md);
    }
}

.subsection-heading {
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
    font-weight: 700;
}

.subsection-intro {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: var(--color-secondary);
}

/* Climate zone links in tables */
.climate-zone-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.climate-zone-link:hover {
    color: var(--color-accent-2);
    text-decoration: underline;
}

.climate-description-hint {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin-top: 0.25rem;
    display: inline-block;
}

/* =============================================================================
   OTHER ANIMALS: Subcategories & Regenerative Context
   ============================================================================= */

/* Subcategory sections */
.subcategory-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid #d0d0c0;
}

.subcategory-section:last-child {
    border-bottom: none;
}

.subcategory-heading {
    font-size: 1.75rem;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}


.subcategory-description {
    font-size: 1rem;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-lg);
    font-style: italic;
}

}

/* Warning badge */
.warning-badge {
    font-size: 1.2rem;
    margin-left: var(--spacing-xs);
    vertical-align: middle;
}

/* Regenerative warning text */
.regenerative-warning {
    font-size: 0.875rem;
    color: var(--color-accent-1);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: rgba(151, 84, 54, 0.05);
    border-left: 3px solid var(--color-accent-1);
    border-radius: 0 4px 4px 0;
}

.regenerative-warning strong {
    font-weight: 600;
}

/* Mobile responsive subcategories */
@media (max-width: 1024px) {
    .subcategory-heading {
        font-size: 1.5rem;
    }
    
    .subcategory-icon {
        font-size: 1.75rem;
    }
}


/* Regenerative Context Warning Banner (detail pages) */
.regenerative-context-warning {
    margin: var(--spacing-lg) 0;
}

.warning-banner {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: #fdf6f0; /* Very light terracotta */
    border: 2px solid var(--color-accent-1);
    border-radius: 8px;
    align-items: flex-start;
}

.warning-icon {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.warning-content {
    flex: 1;
}

.warning-title {
    font-size: 1.25rem;
    color: var(--color-accent-1);
    margin: 0 0 var(--spacing-sm) 0;
    font-weight: 600;
}

.warning-text {
    font-size: 1rem;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.6;
}

.regenerative-application {
    font-size: 0.9375rem;
    color: var(--color-secondary);
    margin: var(--spacing-sm) 0 0 0;
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(151, 84, 54, 0.2);
}

/* Mobile responsive warning banner */
@media (max-width: 1024px) {
    .warning-banner {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    
    .warning-icon {
        font-size: 2rem;
    }
    
    .warning-title {
        font-size: 1.125rem;
    }
}


/* Regenerative Fit Legend */
.regenerative-fit-legend {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background-color: #f9f9f4; /* Slightly darker than background */
    border: 1px solid #d0d0c0;
    border-radius: 8px;
}

.legend-title {
    font-size: 1.25rem;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

.legend-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.legend-indicator {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.legend-item p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-secondary);
}

.legend-borders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-sm);
}

.legend-border-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.legend-border {
    width: 40px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
}

.legend-border.regen-fit-excellent {
    background-color: #4a7c59;
}

.legend-border.regen-fit-good {
    background-color: var(--color-primary);
}

.legend-border.regen-fit-fair {
    background-color: var(--color-accent-2);
}

.legend-border.regen-fit-poor {
    background-color: var(--color-accent-1);
}

.legend-label {
    font-size: 0.875rem;
    color: var(--color-secondary);
}

/* Mobile responsive legend */
@media (max-width: 1024px) {
    .legend-borders {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   PLANT DETAIL PAGE SPECIFIC STYLES
   ============================================================================= */

/* Plant meta line - compact latin name + also known as on single line */
.plant-meta-line {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: 0.25rem;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.plant-latin {
    font-style: italic;
}

.plant-separator {
    color: var(--color-text-muted);
    font-weight: 300;
}

.plant-aliases strong {
    font-weight: 500;
}

/* Constrain article width to prevent overflow beyond container */
.lookup-detail,
.plant-detail {
    max-width: var(--content-max-width);
    margin: 0 auto;
    box-sizing: border-box;
}

/* Top padding for detail and browse pages (practices get this from .practice-12section,
   topics/hub/sections get this from var(--section-padding)) */
.lookup-detail,
.lookup-browse {
    padding-top: 1rem;
}

/* Reduced spacing between title and meta line */
.plant-detail .detail-header {
    margin-bottom: var(--spacing-md);
}

.plant-detail .detail-title {
    margin-bottom: 0.25rem;
}

/* Overview external link - single line format within overview */
.overview-external-link {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.overview-external-link strong {
    color: var(--color-secondary);
}

.overview-external-link a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.overview-external-link a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}


/* =============================================================================
   REGENERATIVE HIGHLIGHTS (Why Section)
   ============================================================================= */

.regenerative-highlights {
    background: linear-gradient(135deg, #f0f7ed 0%, #fefffe 100%);
    border-left: 4px solid var(--color-primary);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(80, 108, 68, 0.1);
}

.highlights-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-sm) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.highlights-summary {
    font-size: 1rem;
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.6;
}

.highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--spacing-md);
}

.highlights-list li {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(80, 108, 68, 0.15);
}

.highlights-list li:last-child {
    border-bottom: none;
}

.highlights-list strong {
    color: var(--color-primary);
    font-weight: 600;
}

/* Mobile responsive */
@media (max-width: 1024px) {
    .regenerative-highlights {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    .highlights-title {
        font-size: 1.15rem;
    }

    .highlights-summary {
        font-size: 0.95rem;
    }

    .highlights-list {
        gap: var(--spacing-sm);
    }
}


/* =============================================================================
/* -----------------------------------------------------------------------------
   SUBSECTIONS (within Section 1)
   ----------------------------------------------------------------------------- */

.subsection {
    margin-bottom: var(--spacing-xl);
}

.subsection:last-child {
    margin-bottom: 0;
}

.subsection-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid rgba(80, 108, 68, 0.2);
}

.trait-category-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.trait-category-title:first-of-type {
    margin-top: 0;
}

/* -----------------------------------------------------------------------------
   ECONOMICS TABLES
   ----------------------------------------------------------------------------- */

.economics-table-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
}

.economics-table-title:first-of-type {
    margin-top: 0;
}

/* =============================================================================
   SEARCH FUNCTIONALITY (Animals & Plants)
   ============================================================================= */

/* Page header with search toggle */
.page-header--with-search {
    position: relative;
}

/* Top row: centered title + inline search */
.page-header-top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.5rem;
}

.page-header-top .page-title,
.page-header-top .breed-name,
.page-header-top .topic-title,
.page-header-top .detail-title {
    grid-column: 1;
    text-align: left;
    margin: 0;
}

/* Search inline container (positioned on the right) */
.search-inline-container {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

/* Search toggle button (magnifying glass icon) */
.search-toggle {
    width: 29px;
    height: 29px;
    padding: 0;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    background-color: white;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.search-toggle:hover {
    background-color: var(--color-primary);
    color: white;
    transform: scale(1.05);
}

.search-toggle:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.search-toggle[aria-expanded="true"] {
    background-color: var(--color-primary);
    color: white;
}

.search-toggle svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* Inline search form (expands from the right) */
.search-inline-form {
    position: absolute;
    right: 37px;
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-inline-form:not([hidden]) {
    width: 240px;
    opacity: 1;
}

.search-inline-form .search-form {
    width: 100%;
}

/* Search form container */
.search-header {
    margin: 2rem 0;
    max-width: 100%;
}

.search-form {
    display: flex;
    gap: 0;
    align-items: stretch;
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    overflow: hidden;
    background-color: white;
    transition: box-shadow 0.2s ease;
}

.search-form:focus-within {
    box-shadow: 0 0 0 3px rgba(80, 108, 68, 0.2);
}

.search-input {
    flex: 1;
    padding: 0.625rem 0.875rem;
    border: none;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    background-color: transparent;
    color: var(--color-secondary);
}

.search-input:focus {
    outline: none;
}

.search-input::placeholder {
    color: rgba(31, 67, 50, 0.5);
}

.search-button {
    padding: 0.625rem 0.875rem;
    background-color: var(--color-primary);
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-button:hover {
    background-color: var(--color-secondary);
}

.search-button:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: -3px;
}

.search-button svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Search results meta */
.search-results-meta {
    margin: 2rem 0 1.5rem 0;
    color: var(--color-text-muted);
}

.search-results-meta p {
    margin: 0;
    font-size: 0.95rem;
}

.search-results-meta strong {
    color: var(--color-secondary);
    font-weight: 500;
}

/* Search results list */
.search-results {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(80, 108, 68, 0.2);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background-color: white;
    border-bottom: 1px solid rgba(80, 108, 68, 0.1);
    text-decoration: none;
    color: var(--color-secondary);
    transition: background-color 0.2s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: rgba(80, 108, 68, 0.04);
}

.search-result-item:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
    z-index: 1;
}

.search-result-main {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-secondary);
}

.search-result-meta {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.search-result-species,
.search-result-category {
    background-color: rgba(80, 108, 68, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-weight: 500;
    color: var(--color-primary);
}

.search-result-scientific {
    font-style: italic;
    color: var(--color-text-muted);
}

/* Unified search: title row with inline badge */
.search-result-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* Content type badge (pill) */
.search-result-type-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.4;
}

.search-result-type-badge--practice {
    background-color: rgba(80, 108, 68, 0.12);
    color: var(--color-primary);
}

.search-result-type-badge--animal {
    background-color: rgba(151, 84, 54, 0.12);
    color: var(--color-accent-1);
}

.search-result-type-badge--plant {
    background-color: rgba(80, 108, 68, 0.18);
    color: #3d5a33;
}

.search-result-type-badge--material {
    background-color: rgba(201, 134, 58, 0.15);
    color: #8b6420;
}

.search-result-type-badge--transition {
    background-color: rgba(107, 175, 178, 0.18);
    color: #3a7d80;
}

.search-result-type-badge--topic {
    background-color: rgba(31, 67, 50, 0.12);
    color: var(--color-secondary);
}

.search-result-type-badge--page {
    background-color: rgba(31, 67, 50, 0.08);
    color: var(--color-text-muted);
}

/* Search result snippet text */
.search-result-snippet {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-arrow {
    flex-shrink: 0;
    margin-left: 1rem;
    color: var(--color-primary);
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.search-result-item:hover .search-result-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* No results state */
.search-no-results {
    padding: 3rem 1.5rem;
    text-align: center;
    background-color: rgba(80, 108, 68, 0.04);
    border-radius: var(--border-radius-md);
}

.search-no-results p {
    margin: 0 0 0.75rem 0;
    color: var(--color-secondary);
}

.search-no-results strong {
    font-weight: 500;
}

.search-suggestion {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Search prompt (before search) */
.search-prompt {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--color-text-muted);
}

.search-prompt p {
    margin: 0 0 0.5rem 0;
}

.search-hint {
    font-size: 0.9rem;
    color: rgba(31, 67, 50, 0.5);
}

/* Browse alternative link */
.search-alternative {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(80, 108, 68, 0.15);
    text-align: center;
}

.search-alternative p {
    margin: 0;
}

.search-alternative a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: rgba(80, 108, 68, 0.3);
    transition: text-decoration-color 0.2s ease;
}

.search-alternative a:hover {
    text-decoration-color: var(--color-primary);
}

/* -----------------------------------------------------------------------------
   MOBILE RESPONSIVE
   ----------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .breed-name {
        font-size: 2rem;
    }

    .breed-overview {
        padding: 12px 16px;
    }

    .breed-overview p {
        font-size: 1rem;
    }

    .regenerative-quick-profile {
        padding: 20px;
        margin: 24px 0;
    }

    .quick-profile-header {
        font-size: 1.1rem;
        margin-bottom: 16px;
    }

    .quick-profile-section {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    .breed-section-header {
        grid-template-columns: 36px 1fr 36px;
        gap: 12px;
        padding: 16px 20px;
    }

    .section-number {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 1.0rem;
    }

    .section-subtitle {
        font-size: 0.8rem;
    }

    .breed-section-content {
        padding: 20px;
    }

    .subsection-title {
        font-size: 1.1rem;
    }

    /* Search functionality mobile styles */
    .page-header-top {
        grid-template-columns: 1fr auto;
        gap: 1rem;
    }

    .page-header-top .page-title,
    .page-header-top .breed-name,
    .page-header-top .topic-title,
    .page-header-top .detail-title {
        grid-column: 1;
        text-align: left;
        font-size: 1.75rem;
    }

    .search-inline-container {
        grid-column: 2;
        justify-content: flex-end;
    }

    .search-toggle {
        width: 26px;
        height: 26px;
    }

    .search-toggle svg {
        width: 13px;
        height: 13px;
    }

    .search-inline-form:not([hidden]) {
        width: 200px;
        right: 34px;
    }

    .search-input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem 1rem;
    }

    .search-button {
        padding: 0.75rem 1rem;
    }

    .search-result-item {
        padding: 0.875rem 1rem;
    }

    .search-result-title {
        font-size: 1rem;
    }

    .search-result-meta {
        font-size: 0.8rem;
        gap: 0.5rem;
    }

    .search-result-arrow {
        width: 16px;
        height: 16px;
        margin-left: 0.75rem;
    }

    .search-no-results,
    .search-prompt {
        padding: 2rem 1rem;
    }

    .search-result-type-badge {
        font-size: 0.65rem;
        padding: 0.1rem 0.375rem;
    }

    .search-result-snippet {
        font-size: 0.813rem;
        -webkit-line-clamp: 2;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Practice Quick Profile Enhancements
   ═══════════════════════════════════════════════════════════════════════════ */

/* Benefit Items with Explanations */
.benefit-item {
    margin-bottom: 1.5rem;
}

.benefit-item:last-child {
    margin-bottom: 0;
}

.benefit-explanation {
    margin-top: 0.5rem;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    padding-left: 1rem;
    border-left: 3px solid var(--color-accent-2);
}

.climate-notes {
    margin-top: 0.75rem;
    font-style: italic;
    color: #666;
}

/* Implementation Badges */
.implementation-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.implementation-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Using brand colors for badges */
.implementation-badge.low {
    background-color: rgba(80, 108, 68, 0.1); /* Primary green tint */
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.implementation-badge.medium {
    background-color: rgba(201, 134, 58, 0.1); /* Amber tint */
    color: var(--color-accent-2);
    border-color: var(--color-accent-2);
}

.implementation-badge.high {
    background-color: rgba(151, 84, 54, 0.1); /* Terracotta tint */
    color: var(--color-accent-1);
    border-color: var(--color-accent-1);
}

.implementation-badge.skill {
    background-color: rgba(107, 175, 178, 0.1); /* Teal tint */
    color: var(--color-accent-3);
    border-color: var(--color-accent-3);
}

.implementation-timeline {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Implementation Timeline (Section 5)
   ═══════════════════════════════════════════════════════════════════════════ */

.section-intro {
    color: #666;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.timeline-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timeline-phase {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    background: var(--color-background);
    transition: box-shadow 0.2s ease;
}

.timeline-phase:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Using brand colors for timeline phases */
.timeline-phase.phase-immediate {
    border-left: 4px solid var(--color-primary);
    background: rgba(80, 108, 68, 0.05); /* Primary green very light tint */
}

.timeline-phase.phase-short_term {
    border-left: 4px solid var(--color-accent-2);
    background: rgba(201, 134, 58, 0.05); /* Amber very light tint */
}

.timeline-phase.phase-medium_term {
    border-left: 4px solid var(--color-accent-3);
    background: rgba(107, 175, 178, 0.05); /* Teal very light tint */
}

.timeline-phase.phase-long_term {
    border-left: 4px solid var(--color-secondary);
    background: rgba(31, 67, 50, 0.05); /* Dark forest very light tint */
}

.phase-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ddd;
}

.phase-badge {
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
    text-transform: capitalize;
}

.phase-timeframe {
    color: #666;
    font-size: 0.95rem;
    font-style: italic;
}

.phase-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.phase-benefits h4,
.phase-actions h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.phase-benefits ul {
    margin: 0 0 0 1.5rem;
    padding: 0;
    list-style: disc;
}

.phase-benefits li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    color: #444;
}

.phase-actions {
    padding: 1rem;
    background: rgba(80, 108, 68, 0.06);
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.phase-actions p {
    margin: 0;
    line-height: 1.6;
    color: #444;
}

.phase-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
    font-size: 0.9rem;
}

.phase-costs,
.phase-indicators {
    line-height: 1.6;
    color: #555;
}

.phase-costs strong,
.phase-indicators strong {
    color: #333;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile Responsive (≤1024px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .implementation-badges {
        flex-direction: column;
        gap: 0.5rem;
    }

    .implementation-badge {
        width: 100%;
        text-align: center;
        padding: 0.6rem 1rem;
    }

    .phase-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .phase-badge {
        font-size: 1rem;
    }

    .phase-timeframe {
        font-size: 0.9rem;
    }

    .phase-meta {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .timeline-phase {
        padding: 1rem;
    }

    .benefit-explanation {
        font-size: 0.9rem;
        padding-left: 0.75rem;
    }
}

/* =========================================================================
   TOPIC PAGE ENHANCEMENTS - Phase 4 (2026-01-22)
   Single-Column Layout + Regenerative Benefits + Integrated Header
   ========================================================================= */

/* Single-Column Layout */
.topic-main-single-column {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 0 1.5rem;
}

/* Expanded Header with Integrated Content */
.topic-header-expanded {
    margin-bottom: 2rem;
}

.topic-header-expanded .topic-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.topic-overview {
    font-size: 1rem; /* Match Going Deeper sections */
    line-height: 1.8;
    color: var(--color-secondary);
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(80, 108, 68, 0.15);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 0;
}

.topic-overview p {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important; /* Reduced significantly for tighter spacing */
}

.topic-overview p:last-of-type {
    margin-bottom: 0.5rem;
}

.longer-answer-expandable {
    margin-top: 0.5rem;
}

.longer-answer-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-accent-3);
    font-weight: 600;
    font-size: 1rem;
    padding: 0.25rem 0;
}

.longer-answer-toggle:hover {
    color: var(--color-primary);
}

.longer-answer-toggle .toggle-icon::after {
    content: '▼';
    font-size: 0.8rem;
}

.longer-answer-expandable[open] .longer-answer-toggle .toggle-icon::after {
    content: '▲';
}

.longer-answer-expanded {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.longer-answer-expanded p {
    margin-bottom: 0.5rem !important; /* Tighter spacing to match sections below */
}

/* Topic page inline infographic (e.g., what-is-regenerative-agriculture) */
.topic-infographic {
    float: right;
    margin: 0 0 1.5rem 2rem;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, rgba(107, 175, 178, 0.06) 0%, rgba(80, 108, 68, 0.04) 100%);
    border-radius: 12px;
    border: 1px solid rgba(107, 175, 178, 0.15);
    max-width: 340px;
}

.topic-infographic img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    transition: opacity 0.15s ease;
}

.topic-infographic:hover img {
    opacity: 0.85;
}

.infographic-expand-hint {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-accent-3, #6bafb2);
    margin-top: 0.4rem;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.topic-infographic:hover .infographic-expand-hint {
    opacity: 1;
}

/* Expanded state */
.topic-infographic.expanded {
    float: none;
    max-width: 560px;
    margin: 0.5rem auto 2rem;
    cursor: zoom-out;
}

.topic-infographic.expanded img {
    cursor: zoom-out;
}

.topic-infographic.expanded:hover img {
    opacity: 1;
}

.topic-infographic.expanded .infographic-expand-hint::after {
    content: 'Click to shrink';
}

.topic-infographic:not(.expanded) .infographic-expand-hint::after {
    content: 'Click to enlarge';
}

.topic-infographic .infographic-expand-hint {
    font-size: 0;
}

.topic-infographic .infographic-expand-hint::after {
    font-size: 0.75rem;
}

.longer-answer-expanded p:last-child {
    margin-bottom: 0;
}

/* Links to Learn More (below Read More) */
.links-to-learn-more {
    margin: 0;
    padding: 0;
}

.links-to-learn-more .longer-answer-toggle {
    padding: 0.25rem 0 0 0;
    margin: 0;
}

.links-to-learn-more .longer-answer-expanded {
    border-top: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0.5rem;
}

.links-to-learn-more .content-block {
    margin-bottom: 1.5rem;
}

.links-to-learn-more .content-block:last-child {
    margin-bottom: 0;
}

/* Key Points Section — Circular icon style (practices + topics + transitions) */
.topic-page .regenerative-quick-profile,
.practice-12section .regenerative-quick-profile {
    background: linear-gradient(135deg,
        rgba(80, 108, 68, 0.03) 0%,
        rgba(80, 108, 68, 0.06) 100%);
    border: 2px solid rgba(80, 108, 68, 0.2);
    border-radius: 8px;
    padding: 2rem;
    margin: 2.5rem 0;
}

.topic-page .quick-profile-header,
.practice-12section .quick-profile-header {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0 0 1.75rem 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.topic-page .quick-profile-section,
.practice-12section .quick-profile-section {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(107, 175, 178, 0.2);
}

.topic-page .quick-profile-section:last-child,
.practice-12section .quick-profile-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.quick-profile-content {
    flex: 1;
}

.topic-page .quick-profile-label,
.practice-12section .quick-profile-label {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
}

.topic-page .quick-profile-subtitle,
.practice-12section .quick-profile-subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem 0;
    font-style: italic;
}

/* Topic/practice pages use quick-profile-list (not quick-profile-bullets) */
.topic-page .quick-profile-list,
.practice-12section .quick-profile-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.topic-page .quick-profile-list li,
.practice-12section .quick-profile-list li {
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.6;
}

.topic-page .quick-profile-list li::before,
.practice-12section .quick-profile-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.2rem;
}

/* Going Deeper Section */
.topic-page .going-deeper-section,
.topic-page #going-deeper {
    margin: 2rem 0;
}

/* Practice-style numbered blocks for topic Going Deeper sections */
.topic-page .practice-deeper-item {
    background-color: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(80, 108, 68, 0.15);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.topic-page .practice-deeper-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
    min-height: 60px;
}

.topic-page .practice-deeper-toggle::-webkit-details-marker {
    display: none;
}

.topic-page .practice-deeper-toggle::marker {
    display: none;
    content: '';
}

.topic-page .section-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

.topic-page .section-toggle::before {
    content: '+';
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-primary);
}

.topic-page .practice-deeper-item[open] .section-toggle::before {
    content: '−';
}

/* Suppress generic .deeper-toggle::after for topic practice-style sections */
.topic-page .practice-deeper-toggle::after,
.topic-page .practice-deeper-item[open] .practice-deeper-toggle::after {
    content: none !important;
}

.topic-page .deeper-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(80, 108, 68, 0.1);
}

.topic-page .section-header-content {
    flex: 1;
}

.topic-page .deeper-title {
    margin: 0;
}

.topic-page .section-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
    font-weight: 400;
}

/* Section Number Badge (for Going Deeper) */
.section-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    background-color: var(--color-primary);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50%;
    margin-right: 1rem;
    flex-shrink: 0;
}

/* Deeper item styling to match plant pages */
.deeper-item {
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(80, 108, 68, 0.15);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s;
}

.deeper-item:hover {
    border-color: rgba(80, 108, 68, 0.3);
}

.deeper-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    gap: 0;
}

.deeper-title-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.deeper-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1.3;
}

.deeper-subtitle {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.deeper-toggle {
    margin-left: auto;
    flex-shrink: 0;
}

/* Deeper content area */
.deeper-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(80, 108, 68, 0.1);
}

/* Reduce paragraph spacing in Going Deeper sections */
.deeper-content p {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important; /* Significantly reduced for tighter spacing */
}

.deeper-content p:last-child {
    margin-bottom: 0;
}

/* Subtitle preview/full toggle for numbered sections */
.section-subtitle-full,
.deeper-subtitle-full {
    display: none;
}

details[open] .section-subtitle-preview,
details[open] .deeper-subtitle-preview {
    display: none;
}

details[open] .section-subtitle-full,
details[open] .deeper-subtitle-full {
    display: block;
}

/* Section intro (subtitle at top of expanded content) */
.section-intro {
    font-size: 1rem;
    color: var(--color-text);
    margin: 1rem 0 1.5rem 0;
    line-height: 1.6;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(80, 108, 68, 0.1);
}

/* Full Content Display (no nested collapsible) */
.deeper-full-content {
    margin: 1rem 0;
    line-height: 1.7;
}

.deeper-full-content p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Ask Section */
.ask-section {
    background: rgba(107, 175, 178, 0.08);
    border-radius: 8px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
}

.ask-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0 0 0.75rem 0;
}

.ask-text {
    font-size: 1.05rem;
    color: var(--color-secondary);
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

.btn-ask {
    background: var(--color-primary);
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    display: inline-block;
    transition: background 0.2s, transform 0.1s;
}

.btn-ask:hover {
    background: var(--color-secondary);
    transform: translateY(-1px);
}

/* Key Points Section */
.key-points {
    background-color: rgba(107, 175, 178, 0.08);
    border-left: 4px solid var(--color-accent-3);
    border-radius: 4px;
    padding: 1.25rem;
    margin: 1.25rem 0;
}

.key-points-heading {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent-3);
    margin: 0 0 0.75rem 0;
}

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

.key-points-list li {
    margin-bottom: 0.6rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.6;
}

.key-points-list li:last-child {
    margin-bottom: 0;
}

.key-points-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-accent-3);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Legacy deeper-sources-wrapper styles removed — superseded by section_enrichment macro */

/* Column grid layout (reuses existing block styles) */
.sources-columns {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.source-column {
    padding: 1rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-left: 4px solid;
}

/* Column colors - reusing existing block patterns */
.block-internal {
    border-left-color: var(--color-primary);
}

.block-videos {
    border-left-color: var(--color-accent-2);
}

.block-curated {
    border-left-color: var(--color-accent-3);
}

.block-community {
    border-left-color: var(--color-accent-1);
}

.block-research {
    border-left-color: var(--color-secondary);
}

.column-heading {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-secondary);
}

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

.source-list li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.source-list li:last-child {
    margin-bottom: 0;
}

.source-list a {
    color: var(--color-accent-3);
    text-decoration: none;
    transition: color 0.2s;
}

.source-list a:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

/* Legacy deeper-sources-citations removed — superseded by citations_section macro */

.sources-heading {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: var(--color-accent-3);
}

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

.citation-item {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-secondary);
}

.citation-item:last-child {
    margin-bottom: 0;
}

.citation-item em {
    font-style: italic;
}

/* Mobile Responsive Adjustments (1024px and below) */
@media (max-width: 1024px) {
    .topic-main-single-column {
        padding: 0 1rem 2rem 1rem;
    }

    .topic-header-expanded .topic-title {
        font-size: 1.75rem;
    }

    .topic-overview {
        font-size: 1rem;
        line-height: 1.7;
        padding: 1rem;
    }

    .topic-infographic {
        float: none;
        display: flex;
        justify-content: center;
        margin: 0.25rem auto 1.5rem;
        padding: 1rem 0.75rem;
        max-width: 100%;
    }

    .topic-page .regenerative-quick-profile,
    .practice-12section .regenerative-quick-profile {
        padding: 1.5rem 1rem;
        margin: 1.5rem 0;
    }

    .topic-page .quick-profile-header,
    .practice-12section .quick-profile-header {
        font-size: 1.1rem;
    }

    .quick-profile-section {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .quick-profile-icon {
        width: 50px;
        height: 50px;
        margin: 0 auto;
    }

    .quick-profile-icon svg {
        width: 28px;
        height: 28px;
    }

    .topic-page .quick-profile-label,
    .practice-12section .quick-profile-label {
        font-size: 1rem;
        text-align: center;
    }

    .topic-page .quick-profile-subtitle,
    .practice-12section .quick-profile-subtitle {
        text-align: center;
    }

    .deeper-heading {
        padding: 1rem;
    }

    .deeper-title {
        font-size: 1rem;
    }

    .deeper-subtitle {
        font-size: 0.85rem;
    }

    .deeper-content {
        padding: 0 1rem 1rem 1rem;
    }

    .sources-columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .source-column {
        margin-bottom: 0;
    }

    .key-points {
        padding: 1rem;
        margin: 1rem 0;
    }

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

    .ask-title {
        font-size: 1.3rem;
    }

    .ask-text {
        font-size: 1rem;
    }

    .btn-ask {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

/* ============================================================================
   CLIMATE ZONE BROWSING STYLES
   ============================================================================ */

/* Zone Selector Container */
.zone-selector-container {
    background: rgba(80, 108, 68, 0.06);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    margin-top: var(--spacing-lg);
}

.zone-browse .container {
    max-width: 1200px;
}

/* Action Cards (Step 1 link on main pages) */
.action-card-container {
    margin-top: var(--spacing-lg);
}

.action-card {
    display: block;
    background: rgba(80, 108, 68, 0.06);
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
}

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

.action-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}

.action-card-desc {
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.action-card-cta {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 600;
}

/* Zone Chips (Radio button grid for Australian/EU zones) */
.zone-chips-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.zone-chips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.zone-chip-label {
    display: block;
    cursor: pointer;
}

.zone-chip-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.zone-chip {
    display: block;
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(80, 108, 68, 0.06);
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-sm);
    text-align: center;
    transition: all var(--transition-fast);
    font-weight: 500;
}

.zone-chip-label:hover .zone-chip {
    border-color: var(--color-primary);
}

.zone-chip-input:checked + .zone-chip {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.zone-chip-input:focus-visible + .zone-chip {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Checkbox Cards (Step 3 category selection) */
.checkbox-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.checkbox-card {
    display: block;
    position: relative;
    cursor: pointer;
    background: rgba(80, 108, 68, 0.06);
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    transition: all var(--transition-fast);
}

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

.checkbox-card:has(.checkbox-card-input:checked) {
    border-left: 4px solid var(--color-primary);
    background-color: rgba(46, 125, 50, 0.05);
}

.checkbox-card:has(.checkbox-card-input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.checkbox-card-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.checkbox-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

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

.checkbox-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.checkbox-card-count {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(0, 0, 0, 0.8);
}

.checkbox-card-desc {
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

/* Zone Warning Banner (adequate-only categories) */
.zone-warning-banner {
    background-color: rgba(201, 134, 58, 0.1);
    border-left: 4px solid #c9863a;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-lg);
}

.zone-warning-banner strong {
    color: #c9863a;
}

/* Form Elements */
.zone-form,
.category-form {
    max-width: 800px;
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    font-size: 1rem;
}

.form-select {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-family: inherit;
    background-color: white;
    transition: border-color var(--transition-fast);
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-select:hover {
    border-color: rgba(0, 0, 0, 0.3);
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    align-items: center;
}

/* Results Page Styles */
.category-results-section {
    margin-bottom: var(--spacing-xxl);
}

.category-results-heading {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.category-results-count {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
}

.suitability-group {
    margin-bottom: var(--spacing-xl);
}

.suitability-group-heading {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: rgba(0, 0, 0, 0.85);
}

/* Active Filters Display */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing-md);
}

.filter-label {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
}

.filter-tag {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    text-decoration: none;
    color: inherit;
}

.filter-tag.active {
    background-color: rgba(80, 108, 68, 0.1);
    color: var(--color-primary);
    font-weight: 500;
}

.filter-tag--reset {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--color-primary);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.filter-tag--reset:hover {
    border-color: var(--color-primary);
    background-color: rgba(80, 108, 68, 0.05);
}

/* Empty State */
.empty-state-box {
    background: rgba(80, 108, 68, 0.06);
    border: 2px dashed rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xxl);
    text-align: center;
    margin: var(--spacing-xl) 0;
}

.empty-state-box h2 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
    color: rgba(0, 0, 0, 0.7);
}

.empty-state-box p {
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: var(--spacing-lg);
}

/* Mobile Responsive (1024px breakpoint) */
@media (max-width: 1024px) {
    .checkbox-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .zone-chips-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-results-heading {
        font-size: 1.5rem;
    }

    .suitability-group-heading {
        font-size: 1.125rem;
    }
}

@media (max-width: 640px) {
    .checkbox-card-grid {
        grid-template-columns: 1fr;
    }

    .zone-chips-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
        width: 100%;
    }

    .form-actions .btn {
        width: 100%;
    }

    .zone-selector-container {
        padding: var(--spacing-lg);
    }

    .action-card {
        padding: var(--spacing-lg);
    }

    .action-card-title {
        font-size: 1.25rem;
    }

    .category-results-heading {
        font-size: 1.25rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .active-filters {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Zone Browsing Pages (Hybrid)
   ========================================================================== */

/* Zone System Index */

/* Zone Lookup Card - Single line with icon + text + search */
.zone-lookup-card {
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    padding: 1rem;
    margin: 1.5rem 0 2rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.zone-lookup-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.zone-lookup-content {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.zone-lookup-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.zone-lookup-help {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-text);
    white-space: nowrap;
}

.zone-lookup-help strong {
    font-weight: 600;
}

.zone-lookup-form {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.zone-lookup-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.zone-lookup-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.zone-lookup-button {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.zone-lookup-button:hover {
    background: var(--color-secondary);
}

.zone-lookup-button svg {
    width: 20px;
    height: 20px;
}

.zone-card {
    padding: 0.75rem !important;
}

.zone-card .lookup-card-title {
    margin-bottom: 0.25rem;
}

.zone-temp {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 0.25rem 0;
}

.zone-characteristics {
    font-size: 0.9rem;
    margin: 0 0 0.25rem 0;
}

.zone-cities {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
}

/* Zone Landing - Category cards */
.zone-info {
    background: rgba(80, 108, 68, 0.06);
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
}

.zone-info p {
    margin: 0.5rem 0;
}

.category-count {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0.5rem 0;
}

.suitability-breakdown {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

/* Category Detail - Suitability sections */
.suitability-section {
    margin-bottom: 3rem;
}

.suitability-section h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

/* Organism cards */
.organism-score {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0.25rem 0;
    color: var(--color-text-secondary);
}

.organism-meta {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0;
}

/* Results summary */
.results-summary {
    background: rgba(80, 108, 68, 0.06);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 2rem;
    text-align: center;
    font-weight: 500;
}

.zone-summary {
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 1rem 0;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-secondary);
}

.empty-state p {
    margin: 0.5rem 0;
}

.empty-state a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Zone system links (on landing pages) */
.zone-system-links {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0.75rem 0;
}

.zone-system-links li {
    margin: 0.25rem 0;
    line-height: 1.4;
}

.zone-system-links-spaced {
    margin-top: 0.25rem;
}

.zone-system-links-spaced li {
    margin: 0.5rem 0;
}

.zone-system-links a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.zone-system-links a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

.zone-system-note {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-left: 0.25rem;
}

.zone-note {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border, #e0e0e0);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* Reduce padding on zone browsing cards */
.lookup-card.category-card .zone-system-links,
.lookup-card.category-card .zone-note {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.lookup-card.category-card p.lookup-card-desc {
    margin-bottom: 0.5rem;
}

.zone-coming-soon {
    margin: 0.5rem 0;
    color: var(--color-text-secondary);
}

.zone-browse-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.zone-browse-button:hover {
    background: var(--color-secondary);
}

/* Page Title Alignment - Zone Pages */
.page-header .page-title {
    text-align: left;
    margin: 0 0 1.5rem 0;
}

/* Zone Metadata Card - Compressed single line */
.zone-metadata-card {
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin: 1rem 0 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.9rem;
    line-height: 1.4;
}

.zone-meta-item strong {
    font-weight: 600;
    color: var(--color-text);
}

.zone-meta-item:last-of-type {
    margin-left: auto;
}

.zone-meta-separator {
    color: var(--color-text-muted);
    font-weight: 300;
}

/* Suitability Explanation */
.suitability-explanation {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: rgba(80, 108, 68, 0.06);
    border-left: 3px solid var(--color-primary);
    border-radius: 4px;
}

.suitability-explanation p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text);
}

.suitability-explanation em {
    font-style: italic;
    font-weight: 500;
}

/* Zone Category Tables - Expandable Cards */
.zone-category-tables {
    margin: 2rem 0;
}

.category-table-card {
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.category-table-card[open] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.category-table-header {
    padding: 1rem 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(80, 108, 68, 0.06);
    border-radius: 4px;
    transition: background 0.2s ease;
    list-style: none;
}

.category-table-header::-webkit-details-marker {
    display: none;
}

.category-table-header::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-primary);
    margin-left: 1rem;
    flex-shrink: 0;
}

.category-table-card[open] .category-table-header::after {
    content: '−';
}

.category-table-header:hover {
    background: rgba(80, 108, 68, 0.10);
}

.category-table-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0;
    flex: 1;
}

.category-table-count {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.category-table-content {
    padding: 0;
}

/* Plants Table */
.zone-plants-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin: 0;
}

.zone-plants-table thead {
    background: var(--color-primary);
    color: white;
}

.zone-plants-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Phase 4d: 3-column layout for regenerative scores (Name | Score | Description) */
.zone-plants-table .col-name {
    width: 18%;
}

.zone-plants-table .col-score {
    width: 9%;
    text-align: center;
}

/* Score footnote indicator linking to explanation */
.score-footnote {
    color: var(--color-accent-1, #975436);
    text-decoration: none;
    font-weight: bold;
    margin-left: 2px;
    vertical-align: super;
    font-size: 0.8em;
}

.score-footnote:hover {
    text-decoration: underline;
}

.zone-plants-table .col-description {
    width: 73%;
}

/* Fallback for old 2-column tables */
.zone-plants-table th:first-child:not(.col-name) {
    width: 25%;
}

.zone-plants-table th:last-child:not(.col-description) {
    width: 75%;
}

.zone-plants-table tbody tr {
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    transition: background 0.2s ease;
}

.zone-plants-table tbody tr:hover {
    background: rgba(80, 108, 68, 0.06);
}

.zone-plants-table tbody tr:last-child {
    border-bottom: none;
}

.zone-plants-table td {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    vertical-align: top;
}

.zone-plants-table .plant-name {
    white-space: nowrap;
}

.zone-plants-table .plant-name a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.zone-plants-table .plant-name a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

.zone-plants-table .plant-description {
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* View All Link */
.view-all-link {
    margin: 0;
    padding: 1rem 1.5rem;
    text-align: right;
    border-top: 1px solid var(--color-border, #e0e0e0);
}

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

.view-all-link a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* Empty Category Message */
.empty-category-message {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Minor Breeds Table (for categories below threshold) */
.minor-breeds-table .species-header-row {
    background: rgba(80, 108, 68, 0.06);
    border-top: 2px solid var(--color-primary);
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.minor-breeds-table .species-header {
    font-weight: 700;
    color: var(--color-secondary);
    font-size: 1rem;
    padding: 0.75rem 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.minor-breeds-table .breed-row {
    background: white;
}

.minor-breeds-table .breed-row:hover {
    background: rgba(80, 108, 68, 0.06);
}

/* =============================================================================
   Phase 4d: Sortable Tables & Regenerative Scores
   ============================================================================= */

/* Sortable Column Headers */
.sortable-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background 0.2s ease;
}

.sortable-header:hover {
    background: var(--color-secondary);
}

.sortable-header:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: -3px;
}

.sort-indicator {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.6;
}

/* Show neutral indicator on non-active sortable headers */
.sortable-header:not(.active-sort) .sort-indicator::after {
    content: '⇅';
    font-size: 0.7rem;
}

.sortable-header.active-sort .sort-indicator {
    opacity: 1;
}

/* Score Column */
.plant-score {
    text-align: center;
    white-space: nowrap;
    font-weight: 500;
}

.score-link {
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.score-link:hover {
    background: var(--color-primary);
    color: white;
    text-decoration: none;
}

/* Category Count Badge */
.category-count {
    font-weight: 400;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

/* Score Explanation Footer */
.score-explanation {
    margin: 1rem 0 0 0;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    background: rgba(80, 108, 68, 0.06);
}

.score-explanation summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.score-explanation summary:hover {
    background: rgba(0, 0, 0, 0.02);
}

.score-explanation summary:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: -3px;
}

.score-explanation-content {
    padding: 0.75rem 1rem 1rem 1rem;
    border-top: 1px solid var(--color-border, #e0e0e0);
    font-size: 0.9rem;
    line-height: 1.6;
}

.score-explanation-content p {
    margin: 0 0 0.75rem 0;
}

.score-explanation-content p:last-child {
    margin-bottom: 0;
}

.score-explanation-content ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.score-explanation-content li {
    margin-bottom: 0.25rem;
}

.score-explanation-content em {
    color: var(--color-text-secondary);
}

/* Full Category List Page */
.full-category-list {
    margin: 2rem 0;
}

/* Organism Tiers */
.organism-tier {
    margin-bottom: 1.5rem;
}

.tier-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}

/* Organism List - Multi-column layout */
.organism-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.organism-item {
    padding: 0.5rem 0.75rem;
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: block;
}

.organism-item:hover {
    background: rgba(80, 108, 68, 0.06);
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
}

/* Organism Expansion - Nested <details> */
.organism-expansion {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border, #e0e0e0);
}

.expansion-toggle {
    padding: 0.75rem 1rem;
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-primary);
    list-style: none;
    transition: all 0.2s ease;
}

.expansion-toggle::-webkit-details-marker {
    display: none;
}

.expansion-toggle::before {
    content: '+';
    font-size: 1.25rem;
    font-weight: 300;
    margin-right: 0.5rem;
}

.organism-expansion[open] .expansion-toggle::before {
    content: '−';
}

.expansion-toggle:hover {
    background: rgba(80, 108, 68, 0.06);
    border-color: var(--color-primary);
}

.empty-category {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Back links */
.back-link {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border, #e0e0e0);
}

.back-link a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-link a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* Mobile responsiveness */
@media (max-width: 1024px) {
    .zone-lookup-content {
        flex-wrap: wrap;
    }

    .zone-lookup-help {
        white-space: normal;
        flex: 1 1 100%;
    }

    .zone-lookup-form {
        flex: 1 1 100%;
    }

    .zone-metadata-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .zone-meta-separator {
        display: none;
    }

    .category-table-card {
        margin-bottom: 0.75rem;
    }

    .category-table-header {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
    }

    .category-table-title {
        font-size: 1.1rem;
    }

    .category-table-count {
        flex: 1 1 100%;
        margin-top: 0.25rem;
        font-size: 0.85rem;
    }

    .zone-plants-table {
        font-size: 0.85rem;
    }

    .zone-plants-table th,
    .zone-plants-table td {
        padding: 0.5rem;
    }

    .zone-plants-table th:first-child,
    .zone-plants-table th:last-child {
        width: auto;
    }

    /* Phase 4d: Mobile 3-column adjustments (Name | Score | Description) */
    .zone-plants-table .col-name {
        width: 22%;
    }

    .zone-plants-table .col-score {
        width: 12%;
    }

    .zone-plants-table .col-description {
        width: 66%;
    }

    .zone-plants-table .plant-name {
        white-space: normal;
        min-width: 80px;
    }

    .plant-score {
        font-size: 0.85rem;
    }

    .sort-indicator {
        margin-left: 0.25rem;
        font-size: 0.65rem;
    }

    .score-explanation summary {
        font-size: 0.85rem;
        padding: 0.6rem 0.75rem;
    }

    .score-explanation-content {
        font-size: 0.85rem;
        padding: 0.6rem 0.75rem 0.75rem 0.75rem;
    }

    .view-all-link {
        padding: 0.75rem 1rem;
        text-align: center;
    }

    .minor-breeds-table .species-header {
        font-size: 0.9rem;
        padding: 0.5rem;
    }

    .organism-list {
        grid-template-columns: 1fr;
    }

    .suitability-breakdown {
        flex-direction: column;
        gap: 0.25rem;
    }

    .suitability-section h2 {
        font-size: 1.25rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .zone-info {
        padding: 0.75rem;
    }
}

/* =============================================================================
   MATERIALS-EQUIPMENT SPECIFIC OVERRIDES
   ============================================================================= */

/* Tighter spacing for materials-equipment KEY POINTS section */
.material-equipment-key-points {
    padding: 20px 24px !important;
    margin: 24px 0 !important;
}

.material-equipment-key-points .quick-profile-header {
    margin: 0 0 16px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid rgba(80, 108, 68, 0.2) !important;
    text-align: center !important;
}

.material-equipment-key-points .quick-profile-section {
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.material-equipment-key-points .quick-profile-section:last-child {
    margin-bottom: 0 !important;
}

.material-equipment-key-points .quick-profile-label {
    margin: 0 0 6px 0 !important;
}

.material-equipment-key-points .quick-profile-bullets {
    margin: 0 !important;
}

/* Align Going Deeper content with header text (past the number badge) */
/* Header grid: 24px padding + 40px badge + 16px gap = 80px text start */
.material-equipment-detail .breed-section-content {
    padding-left: 80px;
}

/* =============================================================================
   CLIMATE ZONE LOOKUP WIDGET
   ============================================================================= */

/* Container - inherits card styling from parent .lookup-card */
.zone-lookup-collapsed,
.zone-lookup-expanded,
.zone-lookup-loading,
.zone-lookup-success,
.zone-lookup-disambiguation,
.zone-lookup-error {
    position: relative;
}

/* Collapsed State - Inline Form (Always Visible) */
.zone-lookup-collapsed {
    /* Inherits padding from parent .lookup-card */
}

.zone-lookup-collapsed .lookup-card-title {
    text-align: center;
}

.zone-lookup-collapsed .lookup-card-desc {
    text-align: center;
    margin-bottom: 1.25rem;
}

/* Form Styling (Always Visible) */
.zone-lookup-form {
    margin: 0;
}

.zone-lookup-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.zone-lookup-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid rgba(80, 108, 68, 0.3);
    border-radius: 6px;
    font-size: 1rem;
    background: white;
    transition: border-color 0.2s ease;
}

.zone-lookup-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.zone-lookup-submit-btn {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zone-lookup-submit-btn svg {
    display: block;
}

.zone-lookup-submit-btn:hover {
    background: var(--color-secondary);
}

.zone-lookup-submit-btn:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: 2px;
}

/* Close button for results states */
.zone-lookup-close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.zone-lookup-close-button:hover {
    background: rgba(80, 108, 68, 0.1);
}

.zone-lookup-close-button:focus-visible {
    outline: 2px solid var(--color-accent-3);
    outline-offset: 2px;
}

.zone-lookup-note {
    margin: 0.75rem 0 0 0;
    padding: 0.75rem;
    background: rgba(107, 175, 178, 0.1);
    border-left: 3px solid var(--color-accent-3);
    font-size: 0.875rem;
    color: rgba(31, 67, 50, 0.9);
    line-height: 1.5;
}

.zone-lookup-note strong {
    color: var(--color-secondary);
}

.zone-lookup-examples {
    margin: 0.75rem 0 0 0;
    font-size: 0.875rem;
    color: rgba(31, 67, 50, 0.8);
    line-height: 1.5;
}

.zone-lookup-examples strong {
    color: var(--color-secondary);
}

.zone-lookup-examples em {
    font-style: normal;
    color: var(--color-primary);
    font-weight: 500;
}

/* Coordinate Help Section */
.zone-lookup-help {
    margin: 0.75rem 0 0 0;
    padding: 0;
}

.zone-lookup-help-toggle {
    font-size: 0.875rem;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 0.5rem 0;
}

.zone-lookup-help-toggle::-webkit-details-marker {
    display: none;
}

.zone-lookup-help-toggle::before {
    content: '▸ ';
    display: inline-block;
    margin-right: 0.25rem;
    transition: transform 0.2s ease;
}

.zone-lookup-help[open] .zone-lookup-help-toggle::before {
    transform: rotate(90deg);
}

.zone-lookup-help-toggle:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

.zone-lookup-help-content {
    font-size: 0.875rem;
    color: rgba(31, 67, 50, 0.8);
    line-height: 1.6;
    padding: 0.5rem 0 0.5rem 1.5rem;
}

.zone-lookup-help-content strong {
    color: var(--color-secondary);
}

.zone-lookup-help-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.zone-lookup-help-content li {
    margin: 0.25rem 0;
}

.zone-lookup-help-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.zone-lookup-help-content a:hover {
    color: var(--color-secondary);
}

.zone-lookup-help-note {
    margin: 0.5rem 0 0 0;
    font-style: italic;
    color: rgba(31, 67, 50, 0.6);
}

/* Loading State */
.zone-lookup-loading {
    text-align: center;
    padding: 2rem 0;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zone-lookup-spinner {
    margin: 0 auto 1rem;
    width: 48px;
    height: 48px;
}

.spinner-ring {
    width: 100%;
    height: 100%;
    border: 4px solid rgba(80, 108, 68, 0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spinner-rotation 0.8s linear infinite;
}

@keyframes spinner-rotation {
    to {
        transform: rotate(360deg);
    }
}

.zone-lookup-loading-message {
    margin: 0;
    font-size: 1rem;
    color: var(--color-secondary);
}

/* Success State - padding handled by parent .lookup-card */
.zone-lookup-success {
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(80, 108, 68, 0.2);
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.zone-result-content {
    padding: 1rem;
}

.zone-result-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(31, 67, 50, 0.7);
    margin: 0 0 0.375rem 0;
    line-height: 1.4;
}

.zone-result-icon {
    flex-shrink: 0;
    color: var(--color-primary);
    width: 16px;
    height: 16px;
}

.zone-result-zone {
    font-size: 1rem;
    color: var(--color-secondary);
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.zone-result-zone strong {
    font-weight: 600;
    color: var(--color-primary);
}

.zone-result-actions {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-top: 0;
}

.zone-result-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    flex: 1;
}

.zone-result-button-primary {
    background: var(--color-primary);
    color: white;
}

.zone-result-button-primary:hover {
    background: var(--color-secondary);
}

.zone-result-button-secondary {
    background: rgba(80, 108, 68, 0.08);
    color: var(--color-primary);
    border: 1px solid rgba(80, 108, 68, 0.2);
}

.zone-result-button-secondary:hover {
    background: rgba(80, 108, 68, 0.15);
    border-color: rgba(80, 108, 68, 0.3);
}

.zone-result-button:focus-visible {
    outline: 2px solid var(--color-accent-3);
    outline-offset: 2px;
}

.zone-result-button svg {
    width: 16px;
    height: 16px;
}

.zone-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.zone-result-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0;
}

.zone-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zone-badge-exact {
    background: rgba(107, 175, 178, 0.2);
    color: var(--color-accent-3);
}

.zone-badge-analog {
    background: rgba(201, 134, 58, 0.2);
    color: var(--color-accent-2);
}

.zone-result-zone {
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
    text-align: center;
}

.zone-code {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.zone-koppen-note {
    display: block;
    font-size: 0.875rem;
    color: rgba(31, 67, 50, 0.7);
}

.zone-result-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-secondary);
    margin: 1rem 0;
}

.location-icon {
    flex-shrink: 0;
    color: var(--color-primary);
}

.zone-result-organisms {
    background: rgba(80, 108, 68, 0.05);
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
}

.organism-count {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 0.75rem 0;
}

.category-breakdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.category-breakdown li {
    font-size: 0.875rem;
    color: rgba(31, 67, 50, 0.8);
    padding: 0.5rem;
    background: white;
    border-radius: 4px;
}

.zone-result-link {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s ease;
    margin-top: 1rem;
}

.zone-result-link:hover {
    background: var(--color-secondary);
}

.zone-result-link:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: 2px;
}

.zone-analog-note {
    background: rgba(201, 134, 58, 0.08);
    border-left: 3px solid var(--color-accent-2);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 4px;
}

.zone-analog-note p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(31, 67, 50, 0.85);
}

.zone-analog-note strong {
    color: var(--color-secondary);
    font-weight: 600;
}

/* Zone Footnote - Expandable zone determination explanation */
.zone-footnote {
    margin: 0.75rem 0;
    padding: 0;
}

.zone-footnote summary {
    font-size: 0.875rem;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
    padding: 0.5rem 0;
    user-select: none;
}

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

.zone-footnote summary::before {
    content: '+ ';
    display: inline-block;
    margin-right: 0.25rem;
    font-weight: 600;
}

.zone-footnote[open] summary::before {
    content: '− ';
}

.zone-footnote summary:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

.zone-footnote .footnote-content {
    font-size: 0.875rem;
    color: rgba(31, 67, 50, 0.8);
    line-height: 1.6;
    padding: 0.75rem 0 0.5rem 1.5rem;
}

.zone-footnote .footnote-content p {
    margin: 0 0 0.75rem 0;
}

.zone-footnote .footnote-content p:last-child {
    margin-bottom: 0;
}

.zone-footnote .footnote-content strong {
    color: var(--color-secondary);
    font-weight: 600;
}

.zone-result-zone sup {
    font-size: 0.75em;
    color: var(--color-primary);
}

/* Disambiguation State */
.zone-disambiguation-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 0.5rem 0;
}

.zone-disambiguation-hint {
    font-size: 0.9rem;
    color: rgba(31, 67, 50, 0.7);
    margin: 0 0 1rem 0;
}

.zone-disambiguation-choices {
    display: grid;
    gap: 0.75rem;
}

.zone-disambiguation-choice {
    background: rgba(80, 108, 68, 0.06);
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    padding: 1rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zone-disambiguation-choice:hover {
    background: rgba(80, 108, 68, 0.05);
    border-color: var(--color-accent-3);
}

.zone-disambiguation-choice:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: 2px;
}

.choice-name {
    font-weight: 500;
    color: var(--color-secondary);
}

.choice-coords {
    font-size: 0.875rem;
    color: rgba(31, 67, 50, 0.6);
}

/* Error State */
.zone-lookup-error {
    text-align: center;
    padding: 1rem 0;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zone-error-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.zone-error-message {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-accent-1);
    margin: 0 0 0.5rem 0;
}

.zone-error-help {
    font-size: 0.875rem;
    color: rgba(31, 67, 50, 0.7);
    margin: 0 0 1.5rem 0;
}

.zone-lookup-try-again-btn {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.zone-lookup-try-again-btn:hover {
    background: var(--color-secondary);
}

.zone-lookup-try-again-btn:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: 2px;
}

/* Mobile Responsive (≤1024px) */
@media (max-width: 1024px) {
    .zone-lookup-collapsed,
    .zone-lookup-expanded,
    .zone-lookup-loading,
    .zone-lookup-success,
    .zone-lookup-disambiguation,
    .zone-lookup-error {
        /* Padding/margin handled by parent .lookup-card */
    }

    .zone-result-title,
    .zone-disambiguation-title {
        font-size: 1.125rem;
    }

    .zone-code {
        font-size: 1.5rem;
    }

    .zone-lookup-input {
        font-size: 0.9rem;
        padding: 0.625rem 0.875rem;
    }

    .zone-lookup-submit-btn {
        padding: 0.625rem;
    }

    .zone-lookup-submit-btn svg {
        width: 18px;
        height: 18px;
    }

    .category-breakdown {
        grid-template-columns: 1fr;
    }

    .zone-result-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .zone-disambiguation-choice {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .zone-footnote summary {
        font-size: 0.8125rem;
        padding: 0.375rem 0;
    }

    .zone-footnote .footnote-content {
        font-size: 0.8125rem;
        padding: 0.625rem 0 0.5rem 1rem;
    }

    /* Trait chart section - mobile responsive */
    .trait-chart-section {
        padding: 1rem;
    }

    .chart-container {
        text-align: center;
        margin-bottom: 1rem;
    }

    .trait-chart-svg {
        max-width: 100%;
        height: auto;
    }

    .component-list {
        padding-left: 0;
    }

    .component-list li {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.5rem 0;
    }

    .component-name {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    /* Trait chart thumbnail - mobile responsive */
    .best-suited-section {
        padding-bottom: 180px; /* Make room for centered thumbnail below */
    }

    .best-suited-section .quick-profile-content {
        margin-right: 0; /* Remove right margin on mobile (thumbnail is below) */
    }

    .best-suited-thumbnail {
        position: static; /* Remove absolute positioning */
        text-align: center;
        margin: 1rem auto 0;
    }

    .trait-chart-thumbnail-wrapper {
        width: 140px;
        height: 140px;
        margin: 0 auto;
    }

    .trait-chart-thumbnail-btn:hover .trait-chart-thumbnail-wrapper {
        transform: none; /* Disable hover transform on mobile */
    }

    .trait-chart-expand-hint {
        font-size: 0.7rem;
        padding: 0.4rem 0.5rem;
    }

    /* Expandable chart viewer - mobile responsive */
    .trait-chart-expanded {
        padding: 1rem;
        margin: 1rem 0 0 0;
    }

    .trait-chart-expanded-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .trait-chart-expanded-header h2 {
        font-size: 1.1rem;
    }
}

/* ============================================================================
   CITATIONS SECTION (Phase 3 Integration - 2026-02-01)
   Academic references with dual-link strategy (97.5% linkability)
   ============================================================================ */

.citations-section {
    margin-top: 4rem;
    padding: 2rem;
    background: rgba(80, 108, 68, 0.03);
    border-top: 2px solid rgba(80, 108, 68, 0.2);
}

.citations-heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(80, 108, 68, 0.2);
}

/* Citation groups (by type) */
.citations-group {
    margin-bottom: 2.5rem;
}

.citations-group:last-child {
    margin-bottom: 0;
}

.citations-group-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 1rem;
}

/* Citation list (numbered) */
.citations-list {
    list-style: decimal;
    padding-left: 2rem;
    margin: 0;
}

/* Individual citation item */
.citation-item {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Citation content (APA text) */
.citation-content {
    margin-bottom: 0.75rem;
    color: var(--color-text);
    font-size: 0.95rem;
}

/* Citation links container */
.citation-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Internal link button (primary action - our content) */
.citation-link-internal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease;
}

.citation-link-internal:hover {
    background: #3f5737; /* Darker green */
    color: white;
}

.citation-link-internal:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: 2px;
}

/* External link button (secondary action - third-party) */
.citation-link-external {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.citation-link-external:hover {
    background: rgba(31, 67, 50, 0.05);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.citation-link-external:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: 2px;
}

/* External link icon */
.citation-link-external .external-link-icon {
    font-size: 0.85em;
    margin-left: 0.25rem;
}

/* Mobile responsive (≤1024px) */
@media (max-width: 1024px) {
    .citations-section {
        padding: 1.5rem 1rem;
        margin-top: 3rem;
    }

    .citations-heading {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .citations-group-heading {
        font-size: 1.1rem;
    }

    .citations-list {
        padding-left: 1.5rem;
    }

    .citation-content {
        font-size: 0.9rem;
    }

    /* Stack links vertically on mobile */
    .citation-links {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .citation-link-internal,
    .citation-link-external {
        width: 100%;
        justify-content: center;
        padding: 0.6rem 1rem;
    }
}

/* Print styles - ensure citations print properly */
@media print {
    .citations-section {
        background: white;
        border-top-color: #ccc;
        page-break-before: auto;
    }

    .citation-link-internal::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    .citation-link-external::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    .external-link-icon {
        display: none;
    }
}

/* Practice Cost Tables - Scale Column Width Constraint */
/* Reduce Scale column width since we moved size definitions to footnotes */
/* Override the default 15% width set on line 3394 */
.deeper-content .breed-table th:first-child,
.deeper-content .breed-table td:first-child,
.breed-table.establishment-costs-table th:first-child,
.breed-table.establishment-costs-table td:first-child {
    width: 80px;
    max-width: 140px; /* Allow wider for Factor columns */
    min-width: 60px;
}

/* Ensure Scale column text doesn't wrap unnecessarily */
/* But allow wrapping for longer Factor text */
.deeper-content .breed-table td:first-child,
.breed-table.establishment-costs-table td:first-child {
    white-space: normal; /* Changed from nowrap to allow text wrapping */
    word-wrap: break-word;
}

/* Reduce Annual Operating column width (typically 4th column in cost tables) */
.deeper-content .breed-table th:nth-child(4),
.deeper-content .breed-table td:nth-child(4),
.breed-table.establishment-costs-table th:nth-child(4),
.breed-table.establishment-costs-table td:nth-child(4) {
    max-width: 105px;
    min-width: 95px;
}

/* Reduce Total Investment column width (typically 5th column in cost tables) */
.deeper-content .breed-table th:nth-child(5),
.deeper-content .breed-table td:nth-child(5),
.breed-table.establishment-costs-table th:nth-child(5),
.breed-table.establishment-costs-table td:nth-child(5) {
    max-width: 105px;
    min-width: 95px;
}

/* =============================================================================
   TOPIC SECTION LANDING PAGE
   ============================================================================= */

/* Big Picture Card (Full Width) */
.big-picture-card {
    margin: 2rem 0 2rem 0;
    grid-column: 1 / -1; /* Span all columns if in a grid */
}

/* Topic Cards Grid (Two Columns) */
.topic-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0 3rem 0;
}

.topic-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background: rgba(80, 108, 68, 0.06);
    border: 1px solid rgba(80, 108, 68, 0.15);
    border-radius: 6px;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.topic-card > .section-toggle {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}

.topic-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(80, 108, 68, 0.1);
    transform: translateY(-1px);
}

.topic-card-title {
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1.3;
}

.topic-card-summary {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    /* Big Picture Card - Mobile */
    .big-picture-card {
        margin: 1.5rem 0 1.5rem 0;
    }

    /* Topic Cards Grid - Stack on Mobile */
    .topic-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin: 1.5rem 0 2rem 0;
    }

    .topic-card {
        padding: 1.25rem;
    }

    .topic-card-title {
        font-size: 1.15rem;
    }
}

/* =============================================================================
   TOPIC PAGE - PRACTICE-STYLE TOGGLE
   ============================================================================= */

/* Practice-style toggle for "Read More: Complete Description" */
.practice-style-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.75rem 0;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.toggle-icon-triangle {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.85rem;
}

details[open] .toggle-icon-triangle {
    transform: rotate(90deg);
}

/* =============================================================================
   Related Pages (inside Going Deeper collapsible)
   ============================================================================= */

.related-pages-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 2rem;
}

.related-pages-list li {
    margin: 0.5rem 0;
    break-inside: avoid;
}

.related-pages-list a {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.related-pages-list a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .related-pages-list {
        columns: 1;
    }
}


/* =============================================================================
   Section Enrichment Cards (Phase 4c-1)
   ============================================================================= */

.section-enrichment {
    border-top: 1px solid #e0e0e0;
    padding-top: 1rem;
}

.section-enrichment-collapsible {
    border-top: 1px solid #e0e0e0;
    margin-top: 1rem;
    padding-top: 0.75rem;
}

.section-enrichment-collapsible.topic-read-more {
    border-top: none;
    margin-top: 0.5rem;
    padding-top: 0;
}

.section-enrichment-collapsible > summary {
    color: var(--color-primary);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    list-style: disclosure-closed inside;
}

.section-enrichment-collapsible[open] > summary {
    list-style: disclosure-open inside;
    margin-bottom: 0.25rem;
}

.section-enrichment-collapsible .section-enrichment {
    border-top: none;
    padding-top: 0;
}

.section-enrichment-collapsible .section-enrichment-heading {
    display: none;
}

.section-enrichment-heading {
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
    margin: 0 0 0.25rem 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.enrichment-cards {
    columns: 2;
    column-gap: 1rem;
    margin-top: 1rem;
}

.enrichment-card {
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 1rem;
    break-inside: avoid;
    margin-bottom: 1rem;
}

.enrichment-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e8e8e8;
}

/* Save.ag card header - tighter spacing for logo */
.enrichment-card-header img[alt="Save.ag"] {
    padding: 0;
    margin: 0;
}

.enrichment-card-header span {
    font-weight: 500;
    color: var(--color-secondary);
}

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

.enrichment-list li {
    margin-bottom: 0.75rem;
}

.enrichment-list li:last-child {
    margin-bottom: 0;
}

.enrichment-list a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.4;
}

.enrichment-list a:hover {
    text-decoration: underline;
}

.enrichment-list p {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.4;
}

/* Mobile: Single column */
@media (max-width: 1024px) {
    .enrichment-cards {
        columns: 1;
    }

    .enrichment-card {
        padding: 0.875rem;
    }

    .enrichment-list-video {
        grid-template-columns: 1fr;
    }
}

/* Video description text */
.enrichment-description {
    display: block;
    font-size: 0.875rem;
    color: var(--color-secondary);
    line-height: 1.4;
}

/* Video card link row */
.enrichment-video-links {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
}

.enrichment-video-links a {
    color: var(--color-primary);
    text-decoration: none;
}

.enrichment-video-links a:hover {
    text-decoration: underline;
}

.enrichment-link-sep {
    color: #999;
    margin: 0 0.5rem;
}

/* Source domain attribution for external links */
.enrichment-source {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.125rem;
}

/* Video card - full width above the grid */
.enrichment-card-video {
    width: 100%;
    margin-bottom: 1rem;
}

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

.enrichment-list-video li {
    margin-bottom: 0;
}

/* Video item with thumbnail - text/links left, thumbnail right */
.enrichment-video-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.enrichment-video-content {
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.enrichment-video-thumb-link {
    flex-shrink: 0;
    line-height: 0; /* Remove gap below image */
}

.enrichment-video-thumb {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    transition: opacity 0.15s ease;
}

.enrichment-video-thumb-link:hover .enrichment-video-thumb {
    opacity: 0.85;
}

/* Mobile: stack vertically */
@media (max-width: 1024px) {
    .enrichment-video-item {
        flex-direction: column;
        gap: 0.5rem;
    }

    .enrichment-video-thumb {
        width: 100%;
        max-width: 200px;
        height: auto;
        aspect-ratio: 120 / 90;
    }
}

/* Single card full width */
.enrichment-cards-single {
    columns: 1;
}

.enrichment-cards-single .enrichment-card {
    max-width: 100%;
}

/* =============================================================================
   TRANSITION SCALE CALLOUTS
   ============================================================================= */

.scale-callout,
.scale-callouts {
    background-color: var(--color-background);
    border-left: 4px solid var(--color-secondary);
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 4px;
}

.scale-callout h4 {
    color: var(--color-secondary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.scale-tier {
    margin-bottom: 1.5rem;
}

.scale-tier:last-child {
    margin-bottom: 0;
}

.scale-tier p,
.scale-callouts p {
    margin: 0 0 1rem 0;
    line-height: 1.7;
}

.scale-tier p:last-child,
.scale-callouts p:last-child {
    margin-bottom: 0;
}

.scale-tier strong,
.scale-callouts strong {
    color: var(--color-secondary);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* Honesty Engine Debate Grid */
/* ═══════════════════════════════════════════════════════════════════ */

.debate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
    .debate-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* Honesty Engine Subsection Collapsibles (debates, positions)       */
/* ═══════════════════════════════════════════════════════════════════ */

.subsection-collapsible {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background-color: #fafafa;
}

.subsection-summary {
    cursor: pointer;
    list-style: none;
    padding: 0.25rem 0;
    font-weight: 500;
    color: var(--color-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subsection-summary h4 {
    font-size: 1.0rem;
    font-weight: 500;
}

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

.subsection-toggle-icon {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-primary);
    margin-left: 1rem;
    flex-shrink: 0;
}

.subsection-collapsible[open] .subsection-toggle-icon::before {
    content: '\2212';
}

.subsection-collapsible:not([open]) .subsection-toggle-icon::before {
    content: '+';
}

.subsection-content {
    padding-top: 0.25rem;
}

/* =============================================================================
   GOING DEEPER HEADING
   ============================================================================= */

.going-deeper-heading {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 2.5rem 0 0.5rem 0;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(80, 108, 68, 0.2);
    text-align: center;
}

@media (max-width: 1024px) {
    .going-deeper-heading {
        font-size: 1.1rem;
        margin: 1.5rem 0 0.5rem 0;
    }
}

/* =============================================================================
   ASK ABOUT THIS LINK
   ============================================================================= */

.ask-about-link {
    text-align: center;
    margin: 0.5rem 0 1.5rem 0;
}

.ask-about-link a {
    display: inline-block;
    color: var(--color-primary);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 1.25rem;
    border: 1.5px solid rgba(80, 108, 68, 0.3);
    border-radius: 6px;
    transition: background-color 0.2s, border-color 0.2s;
}

.ask-about-link a:hover {
    background-color: rgba(80, 108, 68, 0.08);
    border-color: var(--color-primary);
}

.ask-about-link a:focus-visible {
    outline: 3px solid var(--color-accent-3);
    outline-offset: 2px;
}

@media (max-width: 1024px) {
    .ask-about-link {
        margin: 0.5rem 0 1rem 0;
    }

    .ask-about-link a {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
}