/**
 * BetterDocs Override CSS - Civio Theme Integration
 * This file applies Civio theme styling to match the industry page structure
 */

/* ========================================
   DOCS BANNER SECTION (matches industry-banner)
======================================== */

.docs-banner {
  background: linear-gradient(135deg, var(--c-green-darkest) 0%, var(--c-purple-darkest) 100%);
  color: var(--c-white-lightest);
}

.docs-banner .chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--s-xsmall);
}

.docs-banner .chip {
  background: rgba(255, 255, 255, 0.2);
  color: var(--c-white-lightest);
  padding: 4px 12px;
  border-radius: var(--cr-smallest-round);
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 600;
}

/* ========================================
   DOCS CONTENT SECTION (matches main content structure)
======================================== */

.docs-content {
  background: var(--c-almost-black-lightest-on-white);
  padding: 0;
  min-height: 80vh;
}

.docs-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--s-medium);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--s-small);
}

/* Hide sidebars on smaller screens */
@media (max-width: 1200px) {
  .docs-layout {
    grid-template-columns: 280px 1fr;
    gap: var(--s-medium);
  }
}

@media (max-width: 900px) {
  .docs-layout {
    grid-template-columns: 1fr;
    gap: var(--s-small);
    padding: 0 var(--s-small);
  }
  
  .docs-sidebar {
    display: none;
  }
  
  .docs-main {
    padding: var(--s-medium);
  }
}

@media (max-width: 600px) {
  .docs-content {
    padding: var(--s-medium) 0;
  }
  
  .docs-main {
    padding: var(--s-small);
    margin: 0 var(--s-xsmall);
  }
}

/* ========================================
   SIDEBAR STYLING (clean and minimal)
======================================== */

.docs-sidebar {
  background: var(--c-white-lightest);
  border: 1px solid var(--c-almost-black-lightest);
  border-radius: var(--cr-small);
  padding: var(--s-xsmall);
  height: fit-content;
  position: sticky;
  top: var(--s-small);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.docs-sidebar .betterdocs-sidebar-content {
  background: transparent !important;
}

/* Search box styling */
body.civio-docs-single .docs-sidebar .betterdocs-search-form {
  margin-bottom: var(--s-small) !important;
}

body.civio-docs-single .docs-sidebar .betterdocs-search-form input {
  font-family: var(--ff-body) !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--c-almost-black-lightest) !important;
  border-radius: var(--cr-smallest) !important;
  background: var(--c-white-lightest) !important;
  width: 100% !important;
}

body.civio-docs-single .docs-sidebar .betterdocs-search-form input:focus {
  outline: none !important;
  border-color: var(--c-green-darkest) !important;
  box-shadow: 0 0 0 2px rgba(24, 175, 173, 0.2) !important;
}

/* Clean up BetterDocs sidebar styling */
body.civio-docs-single .docs-sidebar .betterdocs-category-header {
  margin-bottom: var(--s-xsmall) !important;
  padding-bottom: var(--s-xxsmall) !important;
  border-bottom: 1px solid var(--c-almost-black-lightest) !important;
}

body.civio-docs-single .docs-sidebar .betterdocs-category-header .betterdocs-category-title a {
  font-family: var(--ff-heading) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--c-almost-black-darkest) !important;
  text-decoration: none !important;
}

body.civio-docs-single .docs-sidebar .betterdocs-articles-list li a {
  font-family: var(--ff-body) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--c-almost-black-medium) !important;
  padding: 8px 12px !important;
  margin-bottom: 2px !important;
  border-radius: var(--cr-smallest) !important;
  transition: var(--tr-1) !important;
  text-decoration: none !important;
  display: block !important;
}

body.civio-docs-single .docs-sidebar .betterdocs-articles-list li a:hover,
body.civio-docs-single .docs-sidebar .betterdocs-articles-list li a.active {
  background: var(--c-green-lighter) !important;
  color: var(--c-almost-black-darkest) !important;
}

/* ========================================
   MAIN CONTENT STYLING (matches text-block styles)
======================================== */

.docs-main {
  background: var(--c-white-lightest);
  border-radius: var(--cr-small);
  border: 1px solid var(--c-almost-black-lightest);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: var(--s-small);
}

.docs-article {
  max-width: none;
  line-height: 1.7;
  padding: var(--s-small);
}

/* Apply your theme's text-block styling */
.docs-article .text-content {
  /* This will inherit your theme's text-block styles */
}

.docs-article .text-block-body {
  /* This will use your theme's body text styles */
}

/* Ensure proper typography */
body.civio-docs-single .docs-article h1,
body.civio-docs-single .docs-article h2,
body.civio-docs-single .docs-article h3,
body.civio-docs-single .docs-article h4,
body.civio-docs-single .docs-article h5,
body.civio-docs-single .docs-article h6 {
  font-family: var(--ff-heading) !important;
  color: var(--c-almost-black-darkest) !important;
}

/* Apply theme's body text styles */
body.civio-docs-single .docs-article p,
body.civio-docs-single .docs-article li,
body.civio-docs-single .docs-article div {
  font-family: var(--ff-body) !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: var(--c-almost-black-darkest) !important;
  margin-bottom: var(--s-small) !important;
}

/* Heading spacing from theme */
body.civio-docs-single .docs-article h1 {
  font-size: 48px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  margin-top: var(--s-large) !important;
  margin-bottom: var(--s-medium) !important;
}

body.civio-docs-single .docs-article h2 {
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  margin-top: var(--s-large) !important;
  margin-bottom: var(--s-medium) !important;
}

body.civio-docs-single .docs-article h3 {
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  margin-top: var(--s-medium) !important;
  margin-bottom: var(--s-small) !important;
}

body.civio-docs-single .docs-article h4 {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin-top: var(--s-medium) !important;
  margin-bottom: var(--s-small) !important;
}

/* List styles from theme's _text-blocks.scss */
body.civio-docs-single .docs-article ul {
  list-style-type: disc !important;
  padding-left: 30px !important;
  margin-bottom: var(--s-medium) !important;
}

body.civio-docs-single .docs-article ol {
  list-style-type: decimal !important;
  list-style-position: outside !important;
  padding-left: 30px !important;
  margin-bottom: var(--s-medium) !important;
  margin-left: 0 !important;
}

/* Ensure list items display properly */
body.civio-docs-single .docs-article ul li,
body.civio-docs-single .docs-article ol li {
  font-family: var(--ff-body) !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: var(--c-almost-black-darkest) !important;
  margin-bottom: 0.5em !important;
  display: list-item !important;
  list-style: inherit !important;
}

body.civio-docs-single .docs-article ul li:last-child,
body.civio-docs-single .docs-article ol li:last-child {
  margin-bottom: 0 !important;
}

/* Override any BetterDocs list resets */
.docs-article ol,
.docs-article ul {
  list-style: revert !important;
}

.docs-article ol li {
  list-style-type: decimal !important;
  display: list-item !important;
}

.docs-article ul li {
  list-style-type: disc !important;
  display: list-item !important;
}

/* Blockquotes from theme */
body.civio-docs-single .docs-article blockquote {
  background: var(--c-almost-black-lightest-on-white) !important;
  border-left: 4px solid var(--c-green-darkest) !important;
  padding: var(--s-small) var(--s-medium) !important;
  margin: var(--s-medium) 0 !important;
  border-radius: var(--cr-smallest) !important;
  font-style: italic !important;
}

/* Links */
body.civio-docs-single .docs-article a {
  color: var(--c-green-darkest) !important;
  transition: var(--tr-1) !important;
  text-decoration: underline !important;
}

body.civio-docs-single .docs-article a:hover {
  color: var(--c-purple-darkest) !important;
}

/* ========================================
   DOCS META (update date, etc.)
======================================== */

.docs-meta {
  margin-top: var(--s-small);
  padding-top: var(--s-xsmall);
  border-top: 1px solid var(--c-almost-black-lightest);
}

.docs-meta .update-date {
  font-family: var(--ff-body) !important;
  font-size: 14px !important;
  color: var(--c-almost-black-medium) !important;
  font-style: italic !important;
  margin: 0 !important;
}

/* ========================================
   TABLE OF CONTENTS STYLING (now as header)
======================================== */

.docs-toc {
  background: var(--c-white-lightest);
  border: 1px solid var(--c-almost-black-lightest);
  border-radius: var(--cr-medium);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: var(--s-small);
  overflow: hidden;
}

.docs-toc-header {
  padding: var(--s-xsmall);
  background: var(--c-almost-black-lightest-on-white);
  border-bottom: 1px solid var(--c-almost-black-lightest);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: var(--tr-1);
}

.docs-toc-header:hover {
  background: var(--c-green-lightest);
}

.docs-toc-toggle {
  background: var(--c-green-lightest);
  color: var(--c-green-darkest);
  border: 1px solid var(--c-green-light);
  padding: var(--s-xxsmall) var(--s-small);
  border-radius: var(--cr-small);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--tr-1);
}

.docs-toc-toggle:hover {
  background: var(--c-green-darkest);
  color: var(--c-white-lightest);
}

.docs-toc-content {
  padding: var(--s-xsmall);
  margin-top: 0;
  border-top: none;
  transition: var(--tr-1);
}

.docs-toc.collapsed .docs-toc-content {
  display: none;
}

body.civio-docs-single .docs-toc .betterdocs-toc .toc-title {
  font-family: var(--ff-heading) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--c-almost-black-darkest) !important;
  margin: 0 !important;
}

/* TOC List Styling - Fix spacing and list items */
body.civio-docs-single .docs-toc .betterdocs-toc ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

body.civio-docs-single .docs-toc .betterdocs-toc ul li {
  list-style: none !important;
  margin: 0 0 var(--s-xxsmall) 0 !important;
  padding: 0 !important;
  border-left: 2px solid var(--c-almost-black-lightest);
}

body.civio-docs-single .docs-toc .betterdocs-toc ul li:last-child {
  margin-bottom: 0 !important;
}

body.civio-docs-single .docs-toc .betterdocs-toc ul li a {
  font-family: var(--ff-body) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--c-almost-black-medium) !important;
  padding: var(--s-xxsmall) var(--s-small) !important;
  text-decoration: none !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transition: var(--tr-1) !important;
}

body.civio-docs-single .docs-toc .betterdocs-toc ul li a:hover,
body.civio-docs-single .docs-toc .betterdocs-toc ul li a.active {
  background: var(--c-green-lightest) !important;
  color: var(--c-green-darkest) !important;
  padding-left: calc(var(--s-small) + var(--s-xxsmall)) !important;
}

/* Nested TOC items */
body.civio-docs-single .docs-toc .betterdocs-toc ul ul {
  margin-top: var(--s-xxsmall) !important;
  padding-left: var(--s-small) !important;
}

body.civio-docs-single .docs-toc .betterdocs-toc ul ul li {
  border-left: 2px solid var(--c-green-lightest) !important;
}

body.civio-docs-single .docs-toc .betterdocs-toc ul ul li a {
  font-size: 13px !important;
  color: var(--c-almost-black-light) !important;
  padding-left: var(--s-small) !important;
}

/* ========================================
   DOCS FOOTER (social sharing, etc.)
======================================== */

.docs-footer {
  margin-top: var(--s-medium);
  padding-top: var(--s-small);
  border-top: 1px solid var(--c-almost-black-lightest);
}

body.civio-docs-single .docs-footer .betterdocs-social-share {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

body.civio-docs-single .docs-footer .betterdocs-social-share h4 {
  font-family: var(--ff-heading) !important;
  font-size: 18px !important;
  color: var(--c-almost-black-darkest) !important;
  margin-bottom: var(--s-xsmall) !important;
}

/* ========================================
   COMMENTS SECTION
======================================== */

.docs-comments {
  background: var(--c-almost-black-lightest-on-white);
}

body.civio-docs-single .docs-comments .comment-form h3 {
  font-family: var(--ff-heading) !important;
  font-size: 24px !important;
  color: var(--c-almost-black-darkest) !important;
}

body.civio-docs-single .docs-comments .comment-form input,
body.civio-docs-single .docs-comments .comment-form textarea {
  font-family: var(--ff-body) !important;
  border: 1px solid var(--c-almost-black-lightest) !important;
  border-radius: var(--cr-smallest) !important;
  padding: 8px 12px !important;
}

body.civio-docs-single .docs-comments .comment-form button,
body.civio-docs-single .docs-comments .comment-form input[type="submit"] {
  background: var(--c-green-darkest) !important;
  color: var(--c-white-lightest) !important;
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: var(--cr-smallest) !important;
  padding: 12px 24px !important;
  transition: var(--tr-1) !important;
  cursor: pointer !important;
}

body.civio-docs-single .docs-comments .comment-form button:hover,
body.civio-docs-single .docs-comments .comment-form input[type="submit"]:hover {
  background: var(--c-purple-darkest) !important;
}

/* ========================================
   CLEAN UP BETTERDOCS OVERRIDES
======================================== */

/* Hide BetterDocs elements that don't fit the clean design */
body.civio-docs-single .betterdocs-credit,
body.civio-docs-single .betterdocs-print-pdf,
body.civio-docs-single .betterdocs-entry-footer,
body.civio-docs-single div[class*="betterdocs-article-reactions"] {
  display: none !important;
}

/* Hide author meta info */
body.civio-docs-single .meta-info-tem.author,
body.civio-docs-single .meta-info-item.author {
  display: none !important;
}

/* Hide comments section completely */
body.civio-docs-single .comment-respond,
body.civio-docs-single #respond,
body.civio-docs-single .comments-area,
body.civio-docs-single #comments {
  display: none !important;
}

/* Hide duplicate header and footer elements inside #page */
body.civio-docs-single #page #header,
body.civio-docs-single #page #footer {
  display: none !important;
}

/* Override any remaining BetterDocs wrapper styles */
body.civio-docs-single .betterdocs-wrapper,
body.civio-docs-single .betterdocs-content-wrapper,
body.civio-docs-single .betterdocs-content-area {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure clean layout */
body.civio-docs-single .betterdocs-single-wrapper {
  background: transparent !important;
}

/* Hide duplicate BetterDocs headers/footers */
body.civio-docs-single .betterdocs-wrapper > header,
body.civio-docs-single .betterdocs-wrapper > footer,
body.civio-docs-single .betterdocs-single-wrapper > header,
body.civio-docs-single .betterdocs-single-wrapper > footer {
  display: none !important;
}

/* Force override any BetterDocs list style resets */
body.civio-docs-single .docs-article ol {
  list-style: decimal !important;
  list-style-type: decimal !important;
  list-style-position: outside !important;
  padding-left: 30px !important;
  margin-left: 0 !important;
}

body.civio-docs-single .docs-article ol li {
  list-style: decimal !important;
  list-style-type: decimal !important;
  display: list-item !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

body.civio-docs-single .docs-article ul {
  list-style: disc !important;
  list-style-type: disc !important;
  list-style-position: outside !important;
  padding-left: 30px !important;
  margin-left: 0 !important;
}

body.civio-docs-single .docs-article ul li {
  list-style: disc !important;
  list-style-type: disc !important;
  display: list-item !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ========================================
   DOCS ARCHIVE PAGE STYLING
======================================== */

/* Hide duplicate BetterDocs elements on archive page */
body.civio-docs-archive .betterdocs-wrapper > header,
body.civio-docs-archive .betterdocs-wrapper > footer,
body.civio-docs-archive .betterdocs-single-wrapper > header,
body.civio-docs-archive .betterdocs-single-wrapper > footer,
body.civio-docs-archive #page #header,
body.civio-docs-archive #page #footer {
  display: none !important;
}

body.civio-docs-archive .docs-archive-content {
  background: var(--c-almost-black-lightest-on-white);
  padding: var(--s-medium) 0;
}

body.civio-docs-archive .docs-archive-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s-small);
}

/* Search Section */
body.civio-docs-archive .docs-search-section {
  text-align: center;
  margin-bottom: var(--s-medium);
}

body.civio-docs-archive .search-wrapper {
  max-width: 600px;
  margin: 0 auto;
}

body.civio-docs-archive .docs-search-section .betterdocs-search-form {
  margin: 0;
}

body.civio-docs-archive .docs-search-section .betterdocs-search-form input {
  font-family: var(--ff-body) !important;
  font-size: 18px !important;
  padding: 16px 24px !important;
  border: 2px solid var(--c-almost-black-lightest) !important;
  border-radius: var(--cr-medium) !important;
  background: var(--c-white-lightest) !important;
  width: 100% !important;
  transition: var(--tr-1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.civio-docs-archive .docs-search-section .betterdocs-search-form input:focus {
  outline: none !important;
  border-color: var(--c-green-darkest) !important;
  box-shadow: 0 0 0 3px rgba(24, 175, 173, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Categories Section */
body.civio-docs-archive .docs-categories-section {
  margin-bottom: var(--s-medium);
}

body.civio-docs-archive .section-heading {
  font-family: var(--ff-heading) !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  color: var(--c-almost-black-darkest) !important;
  margin-bottom: var(--s-medium) !important;
  text-align: center;
}

/* 3-Column Responsive Grid for Categories */
body.civio-docs-archive .docs-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-medium);
  margin-bottom: var(--s-medium);
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  body.civio-docs-archive .docs-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  body.civio-docs-archive .docs-categories-grid {
    grid-template-columns: 1fr;
  }
}

/* Category Cards - Matching Homepage Style */
body.civio-docs-archive .docs-category-card {
  background: var(--c-white-lightest);
  border: 1px solid var(--c-almost-black-lightest);
  border-radius: var(--cr-medium);
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  height: 100%;
}

body.civio-docs-archive .docs-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--c-green-light);
}

body.civio-docs-archive .category-link {
  display: flex;
  flex-direction: column;
  padding: var(--s-medium);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

body.civio-docs-archive .category-icon {
  margin-bottom: var(--s-small);
  text-align: center;
}

body.civio-docs-archive .category-icon .icon {
  font-size: 48px;
  display: block;
  margin-bottom: var(--s-xsmall);
}

body.civio-docs-archive .category-content {
  flex: 1;
  text-align: center;
}

body.civio-docs-archive .category-title {
  font-family: var(--ff-heading) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--c-almost-black-darkest) !important;
  margin-bottom: var(--s-small) !important;
  line-height: 1.3;
}

body.civio-docs-archive .category-description {
  font-family: var(--ff-body) !important;
  font-size: 15px !important;
  color: var(--c-almost-black-medium) !important;
  margin-bottom: var(--s-medium) !important;
  line-height: 1.5;
}

body.civio-docs-archive .category-meta {
  margin-top: auto;
  padding-top: var(--s-small);
  border-top: 1px solid var(--c-almost-black-lightest);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

body.civio-docs-archive .docs-count {
  color: var(--c-almost-black-medium);
  font-weight: 500;
}

body.civio-docs-archive .view-all {
  color: var(--c-green-darkest);
  font-weight: 600;
  transition: var(--tr-1);
  background: var(--c-green-lightest);
  padding: var(--s-xxsmall) var(--s-small);
  border-radius: var(--cr-small);
  font-size: 13px;
}

body.civio-docs-archive .docs-category-card:hover .view-all {
  background: var(--c-green-darkest);
  color: var(--c-white-lightest);
}

/* Recent Articles Section */
body.civio-docs-archive .docs-recent-section {
  margin-bottom: var(--s-medium);
}

/* 2x2 Grid for Articles (4 articles total) */
body.civio-docs-archive .docs-articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-medium);
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  body.civio-docs-archive .docs-articles-grid {
    grid-template-columns: 1fr;
  }
}

/* Article Cards - Matching Homepage Style */
body.civio-docs-archive .docs-article-card {
  background: var(--c-white-lightest);
  border: 1px solid var(--c-almost-black-lightest);
  border-radius: var(--cr-medium);
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  height: 100%;
}

body.civio-docs-archive .docs-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--c-green-light);
}

body.civio-docs-archive .article-link {
  display: flex;
  flex-direction: column;
  padding: var(--s-medium);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

body.civio-docs-archive .article-meta {
  margin-bottom: var(--s-small);
}

/* Fix category chip colors in Recent Articles */
body.civio-docs-archive .article-meta .chip {
  background: var(--c-green-lightest) !important;
  color: var(--c-green-darkest) !important;
  border: 1px solid var(--c-green-light) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: var(--s-xxsmall) var(--s-small) !important;
  border-radius: var(--cr-small) !important;
  text-decoration: none !important;
}

body.civio-docs-archive .article-title {
  font-family: var(--ff-heading) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--c-almost-black-darkest) !important;
  margin-bottom: var(--s-small) !important;
  line-height: 1.3;
}

body.civio-docs-archive .article-excerpt {
  font-family: var(--ff-body) !important;
  font-size: 15px !important;
  color: var(--c-almost-black-medium) !important;
  line-height: 1.6;
  margin-bottom: var(--s-small) !important;
  flex: 1;
}

body.civio-docs-archive .article-date {
  font-size: 13px;
  color: var(--c-almost-black-light);
  font-style: italic;
  margin-top: auto;
  padding-top: var(--s-small);
  border-top: 1px solid var(--c-almost-black-lightest);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  body.civio-docs-archive .section-heading {
    font-size: 28px !important;
  }
  
  body.civio-docs-archive .category-link,
  body.civio-docs-archive .article-link {
    padding: var(--s-small);
  }
  
  body.civio-docs-archive .docs-archive-content {
    padding: var(--s-medium) 0;
  }
}

/* ========================================
   DOCS CATEGORY PAGE STYLING
======================================== */

/* Hide duplicate BetterDocs elements on category page */
body.civio-docs-taxonomy .betterdocs-wrapper > header,
body.civio-docs-taxonomy .betterdocs-wrapper > footer,
body.civio-docs-taxonomy .betterdocs-single-wrapper > header,
body.civio-docs-taxonomy .betterdocs-single-wrapper > footer,
body.civio-docs-taxonomy #page #header,
body.civio-docs-taxonomy #page #footer {
  display: none !important;
}

/* Hide category chip in header */
body.civio-docs-taxonomy .chips-wrapper {
  display: none !important;
}

body.civio-docs-taxonomy .docs-category-content {
  background: var(--c-almost-black-lightest-on-white);
  padding: var(--s-medium) 0;
}

body.civio-docs-taxonomy .docs-category-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s-small);
}

/* Search Section */
body.civio-docs-taxonomy .docs-search-section {
  text-align: center;
  margin-bottom: var(--s-medium);
}

body.civio-docs-taxonomy .search-wrapper {
  max-width: 600px;
  margin: 0 auto;
}

body.civio-docs-taxonomy .docs-search-section .betterdocs-search-form {
  margin: 0;
}

body.civio-docs-taxonomy .docs-search-section .betterdocs-search-form input {
  font-family: var(--ff-body) !important;
  font-size: 18px !important;
  padding: 16px 24px !important;
  border: 2px solid var(--c-almost-black-lightest) !important;
  border-radius: var(--cr-medium) !important;
  background: var(--c-white-lightest) !important;
  width: 100% !important;
  transition: var(--tr-1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.civio-docs-taxonomy .docs-search-section .betterdocs-search-form input:focus {
  outline: none !important;
  border-color: var(--c-green-darkest) !important;
  box-shadow: 0 0 0 3px rgba(24, 175, 173, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Articles Section */
body.civio-docs-taxonomy .docs-articles-section {
  margin-bottom: var(--s-large);
}

body.civio-docs-taxonomy .section-heading {
  font-family: var(--ff-heading) !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  color: var(--c-almost-black-darkest) !important;
  margin-bottom: var(--s-medium) !important;
  text-align: center;
}

/* 3-Column Grid for Category Articles */
body.civio-docs-taxonomy .docs-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-medium);
  margin-bottom: var(--s-medium);
}

@media (max-width: 1024px) {
  body.civio-docs-taxonomy .docs-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  body.civio-docs-taxonomy .docs-articles-grid {
    grid-template-columns: 1fr;
  }
}

/* Article Cards - Same as Archive */
body.civio-docs-taxonomy .docs-article-card {
  background: var(--c-white-lightest);
  border: 1px solid var(--c-almost-black-lightest);
  border-radius: var(--cr-medium);
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  height: 100%;
}

body.civio-docs-taxonomy .docs-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--c-green-light);
}

body.civio-docs-taxonomy .article-link {
  display: flex;
  flex-direction: column;
  padding: var(--s-medium);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

body.civio-docs-taxonomy .article-title {
  font-family: var(--ff-heading) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--c-almost-black-darkest) !important;
  margin-bottom: var(--s-small) !important;
  line-height: 1.3;
}

body.civio-docs-taxonomy .article-excerpt {
  font-family: var(--ff-body) !important;
  font-size: 15px !important;
  color: var(--c-almost-black-medium) !important;
  line-height: 1.6;
  margin-bottom: var(--s-small) !important;
  flex: 1;
}

body.civio-docs-taxonomy .article-date {
  font-size: 13px;
  color: var(--c-almost-black-light);
  font-style: italic;
  margin-top: auto;
  padding-top: var(--s-small);
  border-top: 1px solid var(--c-almost-black-lightest);
}

/* Other Categories Section */
body.civio-docs-taxonomy .docs-other-categories {
  margin-bottom: var(--s-medium);
}

/* 3-Column Grid for Other Categories */
body.civio-docs-taxonomy .docs-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-medium);
  margin-bottom: var(--s-medium);
}

@media (max-width: 1024px) {
  body.civio-docs-taxonomy .docs-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  body.civio-docs-taxonomy .docs-categories-grid {
    grid-template-columns: 1fr;
  }
}

/* Category Cards - Same as Archive */
body.civio-docs-taxonomy .docs-category-card {
  background: var(--c-white-lightest);
  border: 1px solid var(--c-almost-black-lightest);
  border-radius: var(--cr-medium);
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  height: 100%;
}

body.civio-docs-taxonomy .docs-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--c-green-light);
}

body.civio-docs-taxonomy .category-link {
  display: flex;
  flex-direction: column;
  padding: var(--s-medium);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

body.civio-docs-taxonomy .category-icon {
  margin-bottom: var(--s-small);
  text-align: center;
}

body.civio-docs-taxonomy .category-icon .icon {
  font-size: 48px;
  display: block;
  margin-bottom: var(--s-xsmall);
}

body.civio-docs-taxonomy .category-content {
  flex: 1;
  text-align: center;
}

body.civio-docs-taxonomy .category-title {
  font-family: var(--ff-heading) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--c-almost-black-darkest) !important;
  margin-bottom: var(--s-small) !important;
  line-height: 1.3;
}

body.civio-docs-taxonomy .category-description {
  font-family: var(--ff-body) !important;
  font-size: 15px !important;
  color: var(--c-almost-black-medium) !important;
  margin-bottom: var(--s-medium) !important;
  line-height: 1.5;
}

body.civio-docs-taxonomy .category-meta {
  margin-top: auto;
  padding-top: var(--s-small);
  border-top: 1px solid var(--c-almost-black-lightest);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

body.civio-docs-taxonomy .docs-count {
  color: var(--c-almost-black-medium);
  font-weight: 500;
}

body.civio-docs-taxonomy .view-all {
  color: var(--c-green-darkest);
  font-weight: 600;
  transition: var(--tr-1);
  background: var(--c-green-lightest);
  padding: var(--s-xxsmall) var(--s-small);
  border-radius: var(--cr-small);
  font-size: 13px;
}

body.civio-docs-taxonomy .docs-category-card:hover .view-all {
  background: var(--c-green-darkest);
  color: var(--c-white-lightest);
}

/* No Articles Message */
body.civio-docs-taxonomy .no-articles {
  text-align: center;
  padding: var(--s-large);
  color: var(--c-almost-black-medium);
  font-size: 18px;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  body.civio-docs-taxonomy .section-heading {
    font-size: 28px !important;
  }
  
  body.civio-docs-taxonomy .category-link,
  body.civio-docs-taxonomy .article-link {
    padding: var(--s-small);
  }
  
  body.civio-docs-taxonomy .docs-category-content {
    padding: var(--s-medium) 0;
  }
}
}

/* ========================================
   BREADCRUMBS INTEGRATION
======================================== */

/* Use your existing breadcrumbs styling by default */
body.civio-docs-single .docs-banner .breadcrumbs-wrapper {
  /* This will inherit your theme's breadcrumb styles */
}

/* Hide any BetterDocs breadcrumbs that might conflict */
body.civio-docs-single .betterdocs-breadcrumb:not(.docs-banner .betterdocs-breadcrumb) {
  display: none !important;
}