/* AutoDoc Site Overrides - Template for site-specific customization */
/* This file provides empty templates for customizing autodoc styling */

/*
   AutoDoc CSS Layer Architecture:
   autodoc.reset → autodoc.variables → autodoc.base → autodoc.components → site.theme → site.overrides

   - autodoc.variables: CSS custom properties only
   - autodoc.base: Foundation styling (font, color, background)
   - autodoc.components: All AutoDoc UI components
   - site.theme: Override variables for framework integration
   - site.overrides: Component-specific customizations
*/

@layer site.theme, site.overrides;

/* ===========================================
   SITE THEME LAYER - Override autodoc variables
   =========================================== */
@layer site.theme {
  .autodoc {
    /* Map autodoc variables to Pico.css values */
    --autodoc-primary: var(--pico-primary);
    --autodoc-bg: var(--pico-background-color);
    --autodoc-text: var(--pico-color);
    --autodoc-border: var(--pico-muted-border-color);
    --autodoc-text-muted: var(--pico-muted-color);

    /* Use Pico.css typography */
    font-family: var(--pico-font-family);
  }
}

/* ===========================================
   SITE OVERRIDES LAYER - Component overrides
   =========================================== */
@layer site.overrides {
  /* Remove autodoc h1 border-bottom styling */
  h1,h2 {
    border-bottom: none ;
    border-block-end: none ;
  }
  .hero-section {
      border-bottom: none;
      background: none;
  }
  .hero-section::before {
      background: none;
  }
  .section:nth-child(2n) {
      background: none;
  }
  .section {
      padding: calc(var(--site-spacing-xl) * 1.2) 0
  }
  .btn,
  [role="button"],
  a.button {
    text-decoration: none !important;
  }
  #theme-toggle{
      background-color: transparent !important;
      border: none !important;
  }
  button.autodoc-filter-btn {
    background-color: transparent !important;
    background: none !important;
    padding-bottom: 1px !important;
    padding-top: 1px !important;
    color: var(--autodoc-primary) !important;
  }
  button.autodoc-filter-btn:not(.active) {
    color: var(--autodoc-text-muted) !important;
    font-weight: thin !important;
    border: none !important;
  }

  /* Group breadcrumb navigation to left */
  nav.breadcrumb {
    justify-content: flex-start !important;
  }

  @media (max-width: 995px) {
    .nav-menu:not(.show) {
      display: none !important;
    }
  }

  /* Set a max-width for fluid containers on large screens for readability */
    .container-fluid {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }


  .autodoc {
    /* Example component overrides:

    .example-card {
      /* Use framework card styling instead */
      /* @apply pico-card; */
      /* border-radius: var(--custom-radius); */
    }

    .stats-grid {
      /* Custom grid layout */
      /* grid-template-columns: repeat(4, 1fr); */
    }

    .control-btn {
      /* Use framework button styling */
      /* @apply btn btn-primary; */
    }

    */
  }
}

/* ===========================================
   FRAMEWORK INTEGRATION EXAMPLES
   =========================================== */

/* ===== FRAMEWORK INTEGRATION EXAMPLES ===== */

/* Pico.css Integration Example:
@layer site.theme {
  .autodoc {
    --autodoc-primary: var(--pico-primary);
    --autodoc-bg: var(--pico-background-color);
    --autodoc-text: var(--pico-color);
    --autodoc-border: var(--pico-muted-border-color);
    font-family: var(--pico-font-family);
  }
}

@layer site.overrides {
  .autodoc {
    // Disable AutoDoc layout constraints
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    // Let Pico handle non-autodoc elements
    :not([class*="autodoc"]):not([class*="example"]):not([class*="code-"]) {
      all: revert-layer !important;
    }
  }
}
*/

/* Complete Framework Override Example:
// Disable AutoDoc base styling entirely
@layer autodoc.base { .autodoc { } }

@layer site.theme {
  .autodoc {
    // Keep variables for AutoDoc components
    --autodoc-primary: var(--your-framework-primary);
    // Framework handles all non-autodoc styling
  }
}
*/

/* Tailwind Integration Example:
@layer site.overrides {
  .autodoc .example-card {
    @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700;
    @apply rounded-lg shadow-sm hover:shadow-md transition-shadow;
  }

  .autodoc .control-btn {
    @apply px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600;
  }
}
*/

/* Bootstrap Integration Example:
@layer site.overrides {
  .autodoc .example-card {
    @extend .card;
  }

  .autodoc .control-btn {
    @extend .btn, .btn-primary, .btn-sm;
  }

  .autodoc .stats-grid {
    @extend .row;
  }

  .autodoc .stat-card {
    @extend .col-md-3, .card;
  }
}
*/