/* Frontend CSS for TDI Knowledge Base Plugin */

/* CSS Variables - Defaults (can be overridden by dynamic CSS) */
:root {
    --tdi-kb-heading-font: "Roboto", sans-serif;
    --tdi-kb-content-font: "Inter", sans-serif;
    --tdi-kb-primary-color: #318CD6;
    --tdi-kb-text-color: #444;
    --tdi-kb-heading-color: #318CD6;
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* General Styles */
.kb-single-term,
.kb-archive,
.kb-category-archive {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.container {
    max-width: 100%;
}

/* All h2 elements */
.kb-single-term h2,
.kb-archive h2,
.kb-category-archive h2,
.kb-related-terms h2,
.kb-category-filter h2,
.kb-category-nav h2,
.kb-alphabet-nav h2,
.kb-category-content-wrapper h2,
.kb-related-categories h2 {
    font-family: var(--tdi-kb-heading-font), "Roboto", sans-serif;
    font-weight: 500;
    font-size: 30px;
    color: #318CD6;
}

/* Breadcrumbs */
.kb-breadcrumbs {
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
    display: flex;
}

.kb-breadcrumbs a {
    color: #0073aa;
    text-decoration: none;
}

.kb-breadcrumbs a:hover {
    text-decoration: underline;
}

.kb-breadcrumbs .separator {
    margin: 0 8px;
    color: #999;
}

.kb-breadcrumbs .current {
    color: #333;
    font-weight: 500;
}

/* Single Term Styles */
.kb-term-header {
    max-width: 780px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    text-align: left;
}

.kb-term-title {
    font-size: 2.5em;
    margin: 0 0 15px 0;
    color: #333;
    line-height: 1.2;
    text-align: left;
}

.kb-term-abbreviation {
    color: #0073aa;
    font-weight: normal;
    font-size: 0.6em;
}

.kb-term-synonyms {
    font-size: 1em;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}

.kb-synonyms-label {
    font-weight: 600;
    color: #333;
    margin-right: 8px;
}

.kb-synonym {
    color: #444;
    font-style: italic;
}

.kb-term-short-description {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}

.kb-term-categories {
    margin-top: 15px;
}

.kb-category-tag {
    display: inline-block;
    background: #E2F2FF;
    border: 1px solid #318CD6;
    color: #318CD6;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    margin-right: 8px;
    margin-bottom: 8px;
    text-decoration: none;
    cursor: pointer;
}

.kb-category-tag:hover {
    background: #E2F2FF;
    border-color: #318CD6;
    color: #318CD6;
}

/* Table of Contents */
.kb-table-of-contents {
    max-width: 780px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 30px;
    text-align: left;
}

.kb-toc-title {
    font-size: 1.5em;
    margin: 0 0 15px 0;
    color: #333;
    font-weight: 600;
}

.kb-toc-list {
    margin: 0;
    padding-left: 20px;
    list-style: decimal;
}

.kb-toc-item {
    margin-bottom: 8px;
}

.kb-toc-link {
    color: #0073aa;
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 1em;
}

.kb-toc-link:hover {
    color: #005177;
    text-decoration: underline;
}

/* Term Content */
.kb-term-content {
    max-width: 780px;
    margin-bottom: 40px;
    text-align: left;
}

.kb-term-content section {
    margin-bottom: 30px;
    scroll-margin-top: 20px; /* Offset for fixed headers */
}

.kb-section {
    margin-bottom: 40px;
    padding-top: 20px;
}

.kb-section-heading {
    font-size: 1.8em;
    margin-top: 0px;
    margin-bottom: 8px;
    color: #333;
    padding-bottom: 8px;
}

.kb-section-content {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.kb-section-content p {
    margin-bottom: 15px;
}

.kb-section-content ul,
.kb-section-content ol {
    margin-bottom: 15px;
    padding-left: 30px;
}

.kb-section-content li {
    margin-bottom: 8px;
}

.kb-term-content h2 {
    font-family: var(--tdi-kb-heading-font), "Roboto", sans-serif;
    font-weight: 500;
    font-size: 30px;
    margin-bottom: 15px;
    color: #318CD6;
    padding-bottom: 8px;
}

/* All h3 elements */
.kb-single-term h3,
.kb-archive h3,
.kb-category-archive h3,
.kb-term-content h3,
.kb-section-content h3 {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    color: #000000;
    margin-top: 16px;
    margin-bottom: 8px;
    
}

.kb-description-content {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.kb-custom-field {
    margin-bottom: 25px;
}

.kb-custom-field h3 {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    color: #000000;
    margin-bottom: 10px;
}

.kb-field-content {
    font-size: 15px;
    line-height: 1.5;
    color: #444;
}

/* FAQ Section */
.kb-faq-section {
    max-width: none;
    width: 100%;
    background: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 40px;
}

.kb-faq-list {
    margin-top: 20px;
}

.kb-faq-item {
    border-top: 1px solid #e0e0e0;
    margin-bottom: 0;
}

.kb-faq-item:first-child {
    border-top: none;
}

.kb-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 1.1em;
    color: #333;
    font-weight: bold;
    transition: color 0.2s ease;
}

.kb-faq-question:hover {
    color: #0073aa;
}

.kb-faq-question-text {
    flex: 1;
    margin-right: 15px;
}

.kb-faq-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 0.8em;
    color: #666;
    flex-shrink: 0;
}

.kb-faq-item.active .kb-faq-question .kb-faq-arrow {
    transform: rotate(180deg);
}

.kb-faq-answer {
    font-size: 15px;
    line-height: 1.5;
    color: #444;
    padding-bottom: 15px;
    padding-top: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding-top 0.3s ease;
}

.kb-faq-item.active .kb-faq-answer {
    max-height: 5000px;
    opacity: 1;
    padding-top: 10px;
}

/* Related Terms */
.kb-related-terms {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.kb-related-terms h2 {
    margin-top: 0px;
    margin-bottom: 20px;
    color: #318CD6;
}

.kb-related-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.kb-related-item {
    background: #E2F2FF;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #318CD6;
    transition: box-shadow 0.3s ease;
    text-decoration: none;
    color: #318CD6;
    font-size: 1.1em;
    display: block;
    font-weight: 500;
    cursor: pointer;
}

.kb-related-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.kb-related-abbreviation {
    font-size: 14px;
    color: #666;
    font-style: italic;
}

/* Desktop styles for related terms */
@media (min-width: 769px) {
    .kb-related-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Author & Updates */
.kb-author-updates {
    margin-top: 20px;
    padding-top: 20px;
}

.kb-author-updates-title {
    margin: 0 0 15px 0;
}

.kb-author-updates-content {
    font-size: 1em;
    color: #333;
}

.kb-author-updates-item {
    margin-bottom: 10px;
    line-height: 1.5;
}

.kb-author-updates-item strong {
    font-weight: bold;
    color: #333;
}

/* Archive Styles */
.kb-archive-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.kb-archive-header h1 {
    font-size: 2.5em;
    margin: 0 0 15px 0;
    color: #333;
}

.kb-archive-description {
    color: #666;
    margin: 0;
}

/* Popular and New Terms Sections */
.kb-popular-terms-section,
.kb-new-terms-section {
    margin-bottom: 20px;
    border: 1px solid #D3E4F1;
    padding: 30px 40px;
}

.kb-new-terms-section {
    border-radius: 4px;
}

.kb-section-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    flex-wrap: wrap;
}

.kb-section-title {
    font-size: 1.8em;
    font-weight: bold;
    color: #318CD6;
    margin-top: 0px;
    margin-bottom: 20px;

    display: inline-block;
}

.kb-all-terms-link {
    color: #333;
    text-decoration: underline;
    font-size: 14px;
    transition: color 0.3s ease;
}

.kb-all-terms-link:hover {
    color: #318CD6;
    text-decoration: underline;
}

.kb-terms-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kb-term-button {
    background: #E2F2FF;
    border: 1px solid #318CD6;
    color: #318CD6;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 25%;
    min-width: 270px;
    height: 96px;
    box-sizing: border-box;
}

.kb-term-button:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
    color: #318CD6;
}

/* Browse Sections Container */
.kb-browse-sections {
    margin-bottom: 20px;
    border: 1px solid #D3E4F1;
    padding: 30px 40px;
    border-radius: 4px;
}

.kb-browse-sections > .kb-category-filter {
    margin-bottom: 30px;
}

.kb-browse-sections > .kb-category-filter:last-child {
    margin-bottom: 0;
}

.kb-browse-sections > .kb-alphabet-nav {
    margin-bottom: 0;
}

/* Category Filter */

.kb-category-filter h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #318CD6;
}

.kb-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kb-filter-btn {
    display: inline-block;
    background: #E2F2FF;
    border: 1px solid #318CD6;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    color: #318CD6;
    text-decoration: none;
}

.kb-filter-btn:hover {
    border-color: #318CD6;
    color: #318CD6;
    text-decoration: none;
}

.kb-filter-btn.active {
    background: #E2F2FF;
    border-color: #318CD6;
    color: #318CD6;
    text-decoration: none;
}

/* Search Sections Container */
.kb-search-sections {
    margin-bottom: 30px;
    border: 1px solid #D3E4F1;
    padding: 30px 40px;
    border-radius: 4px;
}

.kb-search-sections > .kb-category-nav {
    margin-bottom: 30px;
}

.kb-search-sections > .kb-category-nav:last-child {
    margin-bottom: 0;
}

.kb-search-sections > .kb-alphabet-nav {
    margin-bottom: 30px;
}

.kb-search-sections .kb-alphabet-nav h2 {
    margin-top: 0;
}

.kb-search-sections > .kb-terms-list {
    margin-top: 30px;
    margin-bottom: 0;
}

/* Category Navigation */
.kb-category-nav {
    margin-bottom: 30px;
}

.kb-category-nav h2 {
    margin-top: 0;
    margin-bottom: 24px;
    color: #333;
}

.kb-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kb-category-pill {
    display: inline-block;
    background: #E2F2FF;
    border: 1px solid #318CD6;
    color: #318CD6;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.kb-category-pill:hover {
    background: #318CD6;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(49, 140, 214, 0.2);
}

/* Alphabet Navigation */
.kb-alphabet-nav {
    margin-bottom: 30px;
}

.kb-alphabet-nav h2 {
    margin-top: 0;
    margin-bottom: 24px;
    color: #318CD6;
}

.kb-letter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.kb-letter-link {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #E2F2FF;
    border: 1px solid #318CD6;
    border-radius: 4px;
    text-decoration: none;
    color: #318CD6;
    font-weight: bold;
    transition: all 0.3s ease;
}

.kb-letter-link:hover {
    border-color: #318CD6;
    color: #318CD6;
    text-decoration: none;
}

.kb-letter-link.has-terms {
    background: #E2F2FF;
    border-color: #318CD6;
    color: #318CD6;
}

.kb-letter-link.no-terms {
    background: #F9F9F9;
    border-color: #E0E0E0;
    color: #E0E0E0;
    cursor: not-allowed;
}

.kb-letter-link.no-terms:hover {
    background: #F9F9F9;
    border-color: #E0E0E0;
    color: #E0E0E0;
}

/* Letter Sections */
.kb-letter-section {
    margin-bottom: 40px;
}

.kb-letter-header {
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}

.kb-terms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.kb-term-card {
    background: #E2F2FF;
    border: 1px solid #318CD6;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: block;
    text-decoration: none;
    color: inherit;
}

.kb-term-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
}

.kb-term-card-title {
    margin: 0 0 10px 0;
    font-size: 1.3em;
    text-align: center;
    color: #318CD6;
}

.kb-term-card-title a {
    color: #318CD6;
    text-decoration: none;
}

.kb-term-card-title a:hover {
    color: #318CD6;
}

.kb-term-card-abbreviation {
    font-size: 14px;
    color: #318CD6;
    font-weight: bold;
    margin-bottom: 10px;
}

.kb-term-card-description {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 15px;
}

.kb-term-card-categories {
    margin-top: 15px;
}

.kb-term-card-categories .kb-category-tag {
    font-size: 12px;
    padding: 2px 8px;
}

/* Category Archive */
.kb-category-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.kb-category-header h1 {
    font-size: 2.5em;
    margin: 0 0 15px 0;
    color: #333;
}

.kb-category-description {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 15px;
}

.kb-category-meta {
    color: #999;
    font-size: 14px;
}

/* Category Content Wrapper */
.kb-category-content-wrapper {
    border: 1px solid #D3E4F1;
    padding: 30px 40px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.kb-category-content-wrapper h2 {
    margin-top: 0;
}

.kb-related-categories {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
}

.kb-related-categories h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #318CD6;
}

.kb-related-cats-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kb-related-cat-link {
    background: #E2F2FF;
    border: 1px solid #318CD6;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    color: #318CD6;
    transition: all 0.3s ease;
}

.kb-related-cat-link:hover {
    background: #E2F2FF;
    color: #318CD6;
    border-color: #318CD6;
}

/* No Terms Message */
.kb-no-terms {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 16px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .kb-single-term,
    .kb-archive,
    .kb-category-archive {
        padding: 15px;
    }
    
    .kb-term-title {
        font-size: 2em;
    }
    
    .kb-terms-grid {
        grid-template-columns: 1fr;
    }
    
    .kb-related-list {
        grid-template-columns: 1fr;
    }
    
    .kb-filter-buttons {
        justify-content: center;
    }
    
    .kb-letter-nav {
        gap: 3px;
    }
    
    .kb-letter-link {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
    }
    
    .kb-letter-header {
        font-size: 1.5em;
    }
    
    .kb-popular-terms-section,
    .kb-new-terms-section {
        padding: 20px 25px;
    }
    
    .kb-browse-sections {
        padding: 20px 25px;
    }
    
    .kb-category-content-wrapper {
        padding: 20px 25px;
    }
    
    .kb-section-title {
        font-size: 1.5em;
    }
    
    .kb-terms-buttons {
        gap: 8px;
    }
    
    .kb-term-button {
        padding: 8px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .kb-term-title {
        font-size: 1.8em;
    }
    
    .kb-archive-header h1,
    .kb-category-header h1 {
        font-size: 2em;
    }
    
    .kb-faq-section,
    .kb-related-terms {
        padding: 20px;
    }
    
    .kb-popular-terms-section,
    .kb-new-terms-section {
        padding: 15px 20px;
    }
    
    .kb-browse-sections {
        padding: 15px 20px;
    }
    
    .kb-category-content-wrapper {
        padding: 15px 20px;
    }
    
    .kb-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .kb-section-title {
        font-size: 1.4em;
    }
    
    .kb-term-button {
        font-size: 12px;
        padding: 6px 12px;
    }
}