﻿/* ============================================================
   HerboilGuide - Knowledge Base Page Styles
   ============================================================ */

/* Hero */
.kb-hero {
    position: relative;
    background: linear-gradient(135deg,#1a2e0d 0%,#2d4a1e 40%,#3d5e2a 70%,#4a7a35 100%);
    min-height: 270px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 60px 0 38px;
}
.kb-hero::before {
    content:'';
    position:absolute;
    inset:0;
    background: radial-gradient(ellipse at 10% 50%,rgba(245,158,11,.18) 0%,transparent 60%),
                radial-gradient(ellipse at 88% 30%,rgba(74,122,53,.35) 0%,transparent 55%);
}
.kb-hero-side {
    position:absolute;
    top:0;bottom:0;width:180px;
    background:linear-gradient(to right,rgba(80,50,10,.45),transparent);
}
.kb-hero-side.right {right:0;left:auto;background:linear-gradient(to left,rgba(40,70,20,.4),transparent);}
.kb-hero-content {position:relative;z-index:2;text-align:center;color:#fff;max-width:700px;margin:0 auto;}
.kb-hero-content h1 {font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-0.5px;}
.kb-subtitle {font-family:'Playfair Display',serif;font-style:italic;font-size:1.05rem;color:rgba(255,255,255,.9);margin-bottom:8px;}
.kb-desc {font-size:.9rem;color:rgba(255,255,255,.76);line-height:1.6;margin-bottom:20px;}

/* Search */
.kb-search-form {display:flex;align-items:center;background:#fff;border-radius:50px;overflow:hidden;max-width:510px;margin:0 auto 20px;box-shadow:0 8px 32px rgba(0,0,0,.25);}
.kb-search-input {flex:1;border:none;outline:none;padding:13px 20px;font-size:.93rem;font-family:'Inter',sans-serif;color:#333;background:transparent;}
.kb-search-btn {background:linear-gradient(135deg,#F59E0B,#D97706);border:none;padding:13px 20px;cursor:pointer;color:#fff;font-size:1rem;transition:opacity .2s;}
.kb-search-btn:hover{opacity:.9;}

/* Stats Bar */
.kb-stats-bar {display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap;}
.kb-stat-item {display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.84);font-size:.86rem;font-weight:500;}
.kb-stat-item i{color:#F59E0B;}

/* Section */
.kb-section{padding:46px 0;background:var(--bg-color);}
.kb-section-title {font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;color:var(--text-dark);margin-bottom:18px;}

/* Category Grid */
.kb-category-grid {display:grid;grid-template-columns:repeat(9,1fr);gap:9px;}
.kb-category-card {background:var(--white);border:1.5px solid var(--mid-gray);border-radius:12px;padding:13px 5px 10px;text-align:center;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .25s ease;}
.kb-category-card:hover {border-color:#4B6B40;box-shadow:0 4px 16px rgba(75,107,64,.15);transform:translateY(-3px);}
.kb-cat-icon {width:40px;height:40px;background:#f0f5ee;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:#4B6B40;flex-shrink:0;transition:background .2s;}
.kb-category-card:hover .kb-cat-icon{background:#dff0d8;}
[data-theme="dark"] .kb-cat-icon{background:#1e2d1a;color:#7db86e;}
.kb-cat-name{font-size:.65rem;font-weight:600;color:var(--text-dark);line-height:1.3;}
.kb-cat-count{font-size:.62rem;color:#4B6B40;font-weight:500;}
[data-theme="dark"] .kb-cat-count{color:#7db86e;}

.kb-view-all-wrap{text-align:center;margin-top:16px;margin-bottom:32px;}
.kb-view-all-btn {display:inline-flex;align-items:center;gap:8px;padding:9px 22px;background:var(--white);border:1.5px solid var(--mid-gray);border-radius:8px;font-size:.86rem;font-weight:600;color:var(--text-dark);text-decoration:none;transition:all .2s;}
.kb-view-all-btn:hover{border-color:#4B6B40;color:#4B6B40;}

/* Divider */
.kb-divider{border:none;border-top:1px solid var(--mid-gray);margin:32px 0;}

/* Main Row */
.kb-main-row {display:grid;grid-template-columns:1fr 1fr 285px;gap:26px;align-items:start;}
.kb-popular-entities h3,.kb-alphabet h3 {font-family:'Inter',sans-serif;font-size:.95rem;font-weight:700;color:var(--text-dark);margin-bottom:12px;}

/* Entity Items */
.kb-entities-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.kb-entity-item {display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--mid-gray);text-decoration:none;transition:all .2s;}
.kb-entity-item:last-of-type{border-bottom:none;}
.kb-entity-item:hover{padding-left:4px;}
.kb-entity-item:hover .kb-entity-name{color:#4B6B40;}
[data-theme="dark"] .kb-entity-item{border-color:#374151;}
.kb-entity-thumb {width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,#e8f0e4,#c5d9bc);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;}
.kb-entity-info{flex:1;min-width:0;}
.kb-entity-name {font-size:.8rem;font-weight:600;color:var(--text-dark);display:block;transition:color .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kb-entity-desc {font-size:.7rem;color:var(--text-light);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kb-entity-arrow{color:var(--text-light);font-size:.7rem;flex-shrink:0;}
.kb-view-entities-btn {display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:8px 16px;background:var(--white);border:1.5px solid var(--mid-gray);border-radius:8px;font-size:.8rem;font-weight:600;color:var(--text-dark);text-decoration:none;transition:all .2s;}
.kb-view-entities-btn:hover{border-color:#4B6B40;color:#4B6B40;}

/* Alphabet */
.kb-alphabet-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:12px;}
.kb-alpha-btn {padding:7px 4px;background:var(--white);border:1.5px solid var(--mid-gray);border-radius:6px;text-align:center;font-size:.8rem;font-weight:600;color:var(--text-dark);text-decoration:none;display:block;transition:all .2s;}
.kb-alpha-btn:hover{background:#4B6B40;border-color:#4B6B40;color:#fff;}
.kb-alpha-all{grid-column:span 2;}
[data-theme="dark"] .kb-alpha-btn{background:#1F2937;border-color:#374151;color:#F3F4F6;}
[data-theme="dark"] .kb-alpha-btn:hover{background:#4B6B40;border-color:#4B6B40;color:#fff;}
.kb-browse-az-btn {display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:8px 16px;background:var(--white);border:1.5px solid var(--mid-gray);border-radius:8px;font-size:.8rem;font-weight:600;color:var(--text-dark);text-decoration:none;transition:all .2s;}
.kb-browse-az-btn:hover{border-color:#4B6B40;color:#4B6B40;}

/* Sidebar */
.kb-sidebar{display:flex;flex-direction:column;gap:16px;}
.kb-sidebar-card {background:var(--white);border:1.5px solid var(--mid-gray);border-radius:14px;padding:18px;}
[data-theme="dark"] .kb-sidebar-card{background:#1F2937;border-color:#374151;}
.kb-sidebar-card h4{font-family:'Inter',sans-serif;font-size:.88rem;font-weight:700;color:var(--text-dark);margin-bottom:13px;}
.kb-stats-list{list-style:none;display:flex;flex-direction:column;gap:9px;}
.kb-stats-list li{display:flex;align-items:center;justify-content:space-between;}
.kb-stats-label{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text-light);}
.kb-stats-label i{color:#4B6B40;width:14px;text-align:center;}
.kb-stats-value{font-size:.83rem;font-weight:600;color:var(--text-dark);}
.kb-featured-entity{display:flex;gap:11px;}
.kb-featured-img {width:62px;height:62px;border-radius:10px;background:linear-gradient(135deg,#d4edda,#a3c9a8);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.7rem;}
.kb-featured-info h5{font-family:'Inter',sans-serif;font-size:.83rem;font-weight:700;color:var(--text-dark);margin-bottom:4px;}
.kb-featured-info p{font-size:.74rem;color:var(--text-light);line-height:1.5;margin-bottom:7px;}
.kb-featured-link{font-size:.76rem;font-weight:600;color:#4B6B40;display:inline-flex;align-items:center;gap:4px;text-decoration:none;transition:gap .2s;}
.kb-featured-link:hover{gap:8px;}

/* Trust Bar */
.kb-trust-bar{background:var(--light-gray);border-top:1px solid var(--mid-gray);padding:26px 0;}
[data-theme="dark"] .kb-trust-bar{background:#111827;border-color:#374151;}
.kb-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.kb-trust-item{display:flex;align-items:center;gap:13px;}
.kb-trust-icon {width:40px;height:40px;border-radius:50%;background:#e8f0e4;display:flex;align-items:center;justify-content:center;font-size:.95rem;color:#4B6B40;flex-shrink:0;}
[data-theme="dark"] .kb-trust-icon{background:#1e2d1a;color:#7db86e;}
.kb-trust-item h5{font-size:.8rem;font-weight:700;color:var(--text-dark);margin-bottom:2px;}
.kb-trust-item p{font-size:.71rem;color:var(--text-light);}

/* Dark Mode */
[data-theme="dark"] .kb-hero{background:linear-gradient(135deg,#0d1a07 0%,#162710 40%,#1e3317 70%,#253d1c 100%);}
[data-theme="dark"] .kb-category-card{background:#1F2937;border-color:#374151;}
[data-theme="dark"] .kb-view-all-btn,[data-theme="dark"] .kb-view-entities-btn,[data-theme="dark"] .kb-browse-az-btn{background:#1F2937;border-color:#374151;color:#F3F4F6;}
[data-theme="dark"] .kb-search-input{color:#1F2937;}

/* Responsive */
@media(max-width:1100px){
    .kb-category-grid{grid-template-columns:repeat(6,1fr);}
    .kb-main-row{grid-template-columns:1fr 1fr;}
    .kb-sidebar{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
    .kb-category-grid{grid-template-columns:repeat(3,1fr);}
    .kb-main-row{grid-template-columns:1fr;}
    .kb-entities-grid{grid-template-columns:1fr;}
    .kb-sidebar{grid-template-columns:1fr;}
    .kb-trust-grid{grid-template-columns:1fr 1fr;}
    .kb-stats-bar{gap:14px;}
}
@media(max-width:480px){
    .kb-trust-grid{grid-template-columns:1fr;}
    .kb-alphabet-grid{grid-template-columns:repeat(4,1fr);}
}
