/* --- GLOBAL STYLES --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4F7837; }

body {
    background-color: #fafaf9;
    background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 32px 32px;
}

/* --- LIBRARY & CARD STYLES --- */
.card { transition: all 0.2s ease-in-out; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.group:hover .card-title { transition: color 0.2s; }

/* --- COMMERCIAL TYPOLOGY (REVISED FOR CONTRAST) --- */

/* 1. TRANSLATION (The Core Product) - Brand Green */
.type-translation { border-left: 4px solid #4F7837 !important; }
.badge-translation { background-color: #4F7837 !important; color: white !important; }
.group[data-type="translation"]:hover .card-title { color: #4F7837; }

/* 2. METHODOLOGY (The Soil) - Bronze/Earth */
.type-methodology { border-left: 4px solid #854d0e !important; } 
.badge-methodology { background-color: #854d0e !important; color: white !important; }
.group[data-type="methodology"]:hover .card-title { color: #854d0e; }

/* 3. ANALYSIS (The Value-Add) - Royal Blue */
.type-analysis { border-left: 4px solid #2563eb !important; }
.badge-analysis { background-color: #2563eb !important; color: white !important; }
.group[data-type="analysis"]:hover .card-title { color: #2563eb; }

/* 4. GUIDE (Orientation) - Warm Ochre */
.type-guide { border-left: 4px solid #d97706 !important; } 
.badge-guide { background-color: #d97706 !important; color: white !important; }
.group[data-type="guide"]:hover .card-title { color: #d97706; }

/* 5. REVIEW (Critique) - Brick Red */
.type-review { border-left: 4px solid #be123c !important; } 
.badge-review { background-color: #be123c !important; color: white !important; }
.group[data-type="review"]:hover .card-title { color: #be123c; }

/* Pointer for clickable metadata */
.cursor-filter { cursor: pointer; transition: opacity 0.2s; }
.cursor-filter:hover { opacity: 0.7; }

/* Tag Styling */
.tag-pill { 
    display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 700; 
    text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 4px; 
    border: 1px solid #e5e7eb; background-color: #ffffff; color: #64748b; 
    cursor: pointer; transition: all 0.2s; 
}
.tag-pill:hover { background-color: #f1f5f9; color: #334155; border-color: #cbd5e1; }

.dark-card .tag-pill { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #e5e7eb; }
.dark-card .tag-pill:hover { background-color: rgba(255, 255, 255, 0.2); color: #ffffff; }

.badge-link:hover { opacity: 0.8; cursor: pointer; }
.format-link:hover { text-decoration: underline; cursor: pointer; }
.btn-disabled { color: #9ca3af; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; cursor: default; }

/* --- FAQ / ACCORDION STYLES --- */
.accordion-content {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.accordion-content.active {
    opacity: 1;
}

/* --- PDF FACTORY (PRINT STYLES) --- */
@media print {
    header, footer, nav, .badge-link, button, #controls, #load-more-container, .mt-20.bg-brand-800 { display: none !important; }
    body { background: white !important; color: black !important; font-size: 11pt; line-height: 1.5; }
    article { width: 100%; margin: 0; padding: 0; }
    h1, h2, h3 { color: #26381C !important; page-break-after: avoid; }
    a { text-decoration: none !important; color: black !important; }
    a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
    blockquote, pre, table, figure { page-break-inside: avoid; }
}

/* --- PROSE LINK STYLING (High Visibility) --- */
/* This ensures in-text links are impossible to miss */
.prose a {
    color: #4F7837; /* Brand Green */
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}

.prose a:hover {
    color: #14532d; /* Darker Green */
    background-color: #f0fdf4; /* Very light green highlight */
}