/*
Theme Name: Documentation Theme
Description: A modern WordPress documentation theme with tree-structured navigation and clean, responsive design.
Author: BitbearX
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: docs-theme
Tags: documentation, responsive, modern, categories, mobile-friendly

This theme is designed for documentation websites with:
- Tree-structured category navigation (20% width sidebar)
- Main content area (80% width)
- Mobile-responsive design
- Modern, clean styling with Tailwind CSS
*/

/* Tailwind is loaded via CDN in functions.php. These imports were invalid and removed. */

/* Custom Theme Styles */

/* Smooth scrolling for better UX */
html {
  scroll-behavior: smooth;
}

/* Better focus styles for accessibility */
*:focus {
  outline: 1px solid #3b82f6 !important;
  /* outline-offset: 2px !important; */
}

/* Category tree styling */
.category-navigation .docs-tree,
#mobile-category-tree .docs-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-navigation .docs-tree li,
#mobile-category-tree .docs-tree li {
  list-style: none;
}

.category-navigation .category-row,
#mobile-category-tree .category-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.category-navigation .category-link,
#mobile-category-tree .category-link {
  display: inline-flex;
  align-items: center;
  width: 100%;
  font-weight: 500;
  color: #1f2937;
  text-decoration: none;
  transition: color 0.2s ease;
}

.category-navigation .category-link:hover,
#mobile-category-tree .category-link:hover {
  color: #2563eb;
}

.category-navigation .category-link.is-current,
#mobile-category-tree .category-link.is-current {
  color: #2563eb;
  font-weight: 600;
}

.category-navigation .tree-toggle,
#mobile-category-tree .tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  color: #6b7280;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.category-navigation .tree-toggle:hover,
#mobile-category-tree .tree-toggle:hover,
.category-navigation .tree-toggle:focus,
#mobile-category-tree .tree-toggle:focus {
  background-color: #e5e7eb;
  color: #2563eb;
}

.category-navigation .tree-toggle-placeholder,
#mobile-category-tree .tree-toggle-placeholder {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.category-navigation .toggle-icon,
#mobile-category-tree .toggle-icon {
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.category-navigation li.is-open > .category-row .toggle-icon,
#mobile-category-tree li.is-open > .category-row .toggle-icon {
  transform: rotate(45deg);
}

.category-navigation li.is-active > .category-row .category-link,
#mobile-category-tree li.is-active > .category-row .category-link {
  color: #2563eb;
}

.category-navigation .tree-children,
#mobile-category-tree .tree-children {
  margin: 0;
  padding-left: 1.25rem;
}

body.docs-tree-ready .category-navigation .tree-children,
body.docs-tree-ready #mobile-category-tree .tree-children {
  display: none;
}

body.docs-tree-ready .category-navigation .tree-children.is-open,
body.docs-tree-ready #mobile-category-tree .tree-children.is-open {
  display: block;
}

.category-navigation .post-link,
#mobile-category-tree .post-link {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 0.125rem 0.5rem;
  padding-left: 2rem;
  color: #4b5563;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.category-navigation .post-link:hover,
#mobile-category-tree .post-link:hover {
  color: #2563eb;
}

.category-navigation .post-item.is-current .post-link,
#mobile-category-tree .post-item.is-current .post-link {
  color: #2563eb;
  font-weight: 600;
  background-color: #eff6ff;
  border-radius: 0.375rem;
  padding-left: 2rem;
}

.post-item {
  margin-top: 0.5rem;
  margin-button: 0.5rem;
}

/* Mobile menu animation */
#mobile-menu {
  transition: transform 0.3s ease-in-out;
}

/* Prose styling for content */
.prose {
  max-width: none;
}

.prose h1 {
  @apply text-3xl font-bold text-gray-900 mb-6 leading-tight;
}

.prose h2 {
  @apply text-2xl font-semibold text-gray-900 mb-4 mt-8 leading-tight;
}

.prose h3 {
  @apply text-xl font-semibold text-gray-900 mb-3 mt-6 leading-tight;
}

.prose h4 {
  @apply text-lg font-semibold text-gray-900 mb-2 mt-4 leading-tight;
}

.prose p {
  @apply text-gray-700 leading-relaxed mb-4;
}

.prose ul,
.prose ol {
  @apply mb-4 pl-6;
}

.prose li {
  @apply text-gray-700 leading-relaxed mb-2;
}

.prose a {
  @apply text-blue-600 hover:text-blue-700 underline;
}

.prose blockquote {
  @apply border-l-4 border-blue-200 pl-4 italic text-gray-700 bg-blue-50 py-2 my-6 rounded-r;
}

.prose code {
  @apply bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono;
}

.prose pre {
  @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-6;
}

.prose pre code {
  @apply bg-transparent text-inherit p-0;
}

.prose table {
  @apply w-full border-collapse border border-gray-300 my-6;
}

.prose th {
  @apply bg-gray-50 border border-gray-300 px-4 py-2 text-left font-semibold text-gray-900;
}

.prose td {
  @apply border border-gray-300 px-4 py-2 text-gray-700;
}

/* WordPress specific styling */
.wp-block-image {
  @apply mb-6;
}

.wp-block-quote {
  @apply border-l-4 border-blue-200 pl-4 italic text-gray-700 bg-blue-50 py-2 my-6 rounded-r;
}

/* Search result highlighting */
mark {
  @apply bg-yellow-200 text-gray-900 px-1 rounded;
}

/* Comment form styling */
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-comment {
  @apply mb-4;
}

.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-comment label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.comment-form-author input,
.comment-form-email input,
.comment-form-url input,
.comment-form-comment textarea {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

/* Pagination styling */
.page-numbers {
  @apply inline-flex items-center px-3 py-2 text-sm leading-4 border border-gray-300 bg-white text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500;
}

.page-numbers.current {
  @apply bg-blue-600 border-blue-600 text-white;
}

.page-numbers.prev,
.page-numbers.next {
  @apply font-medium;
}

/* Widget styling */
.widget {
  @apply mb-8;
}

.widget-title {
  @apply text-lg font-semibold text-gray-900 mb-4;
}

.widget ul {
  @apply list-none p-0;
}

.widget li {
  @apply mb-2;
}

.widget a {
  @apply text-gray-600 hover:text-blue-600;
}

/* Loading states */
.loading {
  @apply opacity-50 pointer-events-none;
}

/* Print styles */
@media print {
  .hidden\:print {
    display: none !important;
  }

  aside,
  header,
  footer,
  .no-print {
    display: none !important;
  }

  main {
    width: 100% !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .text-gray-500 {
    color: #374151 !important;
  }

  .text-gray-400 {
    color: #6b7280 !important;
  }

  .border-gray-200 {
    border-color: #9ca3af !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* Dark mode support (for future enhancement) */
@media (prefers-color-scheme: dark) {
  body.dark-mode {
    @apply bg-gray-900 text-gray-100;
  }

  body.dark-mode .bg-white {
    @apply bg-gray-800;
  }

  body.dark-mode .text-gray-900 {
    @apply text-gray-100;
  }

  body.dark-mode .border-gray-200 {
    @apply border-gray-700;
  }
}