/* 
 * Typography styles for markdown content
 * 
 * IMPORTANT: Manual Tailwind utility implementation required
 * Tailwind CDN doesn't support @apply or @layer directives
 * DO NOT convert to @apply - it won't work in production
 * 
 * These styles ensure consistent formatting for user-generated
 * markdown content where we can't add utility classes directly
 */

/* Accessibility: Keyboard navigation focus states */
/* Shows focus for keyboard users, hides for mouse users */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Remove default focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Essential typography for markdown content */
.content h2 { 
  /* @apply text-3xl font-bold mt-12 mb-6 */
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700; /* font-bold */
  margin-top: 3rem; /* mt-12 */
  margin-bottom: 1.5rem; /* mb-6 */
  color: #111827; 
  line-height: 1.3;
}
.content h3 { 
  /* @apply text-2xl font-bold mt-8 mb-4 */
  font-size: 1.5rem; /* text-2xl */
  font-weight: 700; /* font-bold */
  margin-top: 2rem; /* mt-8 */
  margin-bottom: 1rem; /* mb-4 */
  color: #111827;
  line-height: 1.3;
}
.content h4 { 
  /* @apply text-xl font-semibold mt-6 mb-3 */
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  margin-top: 1.5rem; /* mt-6 */
  margin-bottom: 0.75rem; /* mb-3 */
  color: #374151;
}
.content p { 
  margin-bottom: 1rem; 
  line-height: 1.75;
  color: #4B5563;
}
.content ul { 
  list-style-type: disc; 
  margin-left: 2rem; 
  margin-bottom: 1rem;
}
.content ul li {
  margin-bottom: 0.5rem;
  line-height: 1.75;
  color: #4B5563;
}
.content ol { 
  list-style-type: decimal; 
  margin-left: 2rem; 
  margin-bottom: 1rem;
}
.content ol li {
  margin-bottom: 0.5rem;
  line-height: 1.75;
  color: #4B5563;
}
.content strong { 
  font-weight: 600;
  color: #374151;
}
.content a { 
  color: #FF6B35; 
  text-decoration: underline;
}
.content a:hover { 
  color: #EA580C;
}
.content hr {
  border: 0;
  height: 1px;
  background: #E5E7EB;
  margin: 2rem 0;
}
/* Fix for lists inside lists */
.content ul ul,
.content ol ol,
.content ul ol,
.content ol ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Tables - styled to match the old HTML tables */
.content table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  margin-bottom: 2rem;
}

.content thead {
  background-color: #f3f4f6; /* bg-gray-100 */
}

.content th {
  text-align: left;
  padding: 0.75rem; /* p-3 */
  font-weight: 600;
  border: 1px solid #e5e7eb;
}

.content td {
  padding: 0.75rem; /* p-3 */
  border: 1px solid #e5e7eb;
}

.content tbody tr {
  border-bottom: 1px solid #e5e7eb; /* border-b */
}

.content tbody tr:hover {
  background-color: #f9fafb; /* bg-gray-50 */
}

/* Wrap tables in responsive containers */
.content table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

/* Style sections that follow headers */
.content h2 + p,
.content h2 + ul,
.content h2 + ol,
.content h2 + table,
.content h2 + blockquote {
  background-color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
}

/* Style blockquotes as info boxes */
.content blockquote {
  background-color: #f9fafb; /* bg-gray-50 */
  border-left: 4px solid #3b82f6; /* border-blue-500 */
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-style: normal;
  color: #374151;
}

/* Style blockquotes that start with specific words */
.content blockquote p:first-child strong:first-child {
  display: block;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

/* Info boxes - exact Tailwind equivalents */
.info-box {
  /* @apply bg-gray-50 rounded-lg p-6 mb-6 */
  background-color: #f9fafb; /* bg-gray-50 */
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1.5rem; /* p-6 */
  margin-bottom: 1.5rem; /* mb-6 */
}

.warning-box {
  /* @apply bg-yellow-50 border-l-4 border-yellow-500 rounded-lg p-6 mb-6 */
  background-color: #fef3c7; /* bg-yellow-50 */
  border-left-width: 4px; /* border-l-4 */
  border-left-color: #eab308; /* border-yellow-500 */
  border-left-style: solid;
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1.5rem; /* p-6 */
  margin-bottom: 1.5rem; /* mb-6 */
}

.danger-box {
  /* @apply bg-red-50 border-l-4 border-red-500 rounded-lg p-6 mb-6 */
  background-color: #fef2f2; /* bg-red-50 */
  border-left-width: 4px; /* border-l-4 */
  border-left-color: #ef4444; /* border-red-500 */
  border-left-style: solid;
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1.5rem; /* p-6 */
  margin-bottom: 1.5rem; /* mb-6 */
}

.success-box {
  /* @apply bg-green-50 border-l-4 border-green-500 rounded-lg p-6 mb-6 */
  background-color: #f0fdf4; /* bg-green-50 */
  border-left-width: 4px; /* border-l-4 */
  border-left-color: #22c55e; /* border-green-500 */
  border-left-style: solid;
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1.5rem; /* p-6 */
  margin-bottom: 1.5rem; /* mb-6 */
}

/* Card grids and layouts */
.card-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .card-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

/* Special content sections */
.content-section {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  margin-bottom: 3rem;
}

/* Code and technical formatting */
.content code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.875rem;
  background-color: #f3f4f6;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
}

.content pre {
  background-color: #1f2937;
  color: #e5e7eb;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.content pre code {
  background-color: transparent;
  padding: 0;
  font-size: 0.875rem;
}

/* Responsive table wrapper */
.table-wrapper {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

/* Collection grids (for consistency with layouts) */
.collection-grid {
  /* @apply grid md:grid-cols-2 lg:grid-cols-3 gap-8 */
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
  .collection-grid {
    grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
  }
}

@media (min-width: 1024px) {
  .collection-grid {
    grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
  }
}

.collection-card {
  /* @apply bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow */
  background-color: white; /* bg-white */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  overflow: hidden; /* overflow-hidden */
  transition-property: box-shadow; /* transition-shadow */
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.collection-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
}

.collection-card-body {
  /* @apply p-6 */
  padding: 1.5rem; /* p-6 */
}

/* Page sections */
.page-section {
  /* @apply mt-16 */
  margin-top: 4rem; /* mt-16 */
}

.section-title {
  /* @apply text-3xl font-bold mb-8 text-center */
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700; /* font-bold */
  margin-bottom: 2rem; /* mb-8 */
  text-align: center; /* text-center */
}

/* Feature lists */
.feature-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .feature-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Prose styling enhancements */
.prose {
  max-width: 65ch;
  color: #374151;
  line-height: 1.75;
}

.prose-lg {
  font-size: 1.125rem;
}

.prose-lg p {
  margin-bottom: 1.25rem;
}

.max-w-none {
  max-width: none;
}

/* Resource page visual hierarchy improvements */
.content h3 + p + ul,
.content h3 + p + ol {
  background-color: #fafbfc;
  border-left: 3px solid #FF6B35;
  padding: 1.5rem;
  padding-left: 2rem;
  margin: 1rem 0 2rem;
  border-radius: 0 0.5rem 0.5rem 0;
}

/* Compact list styling for sub-bullets */
.content h3 + p + ul li,
.content h3 + p + ol li {
  margin-bottom: 0.75rem;
}

/* Fix alignment for numbered lists inside bordered sections */
.content h3 + p + ol {
  margin-left: 0;
  padding-left: 1rem;
}

/* Section cards for H2 content blocks */
.content h2 {
  position: relative;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
}

.content h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 4rem;
  height: 2px;
  background: #FF6B35;
}

/* Visual break between major sections */
.content h2:not(:first-child) {
  margin-top: 4rem;
}

/* Key point emphasis */
.content ul li strong:first-child,
.content ol li strong:first-child {
  display: inline-block;
  color: #1f2937;
  font-weight: 700;
  margin-right: 0.25rem;
}

/* Numbered list visual enhancement */
.content ol {
  counter-reset: item;
  list-style: none;
  margin-left: 2rem;
  padding-left: 0;
}

.content ol > li {
  counter-increment: item;
  position: relative;
  padding-left: 3rem;
}

.content ol > li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0;
  background: #FF6B35;
  color: white;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Nested lists styling */
.content ul ul,
.content ol ul {
  margin-top: 0.75rem;
  margin-left: 1.5rem;
  background: none;
  border: none;
  padding: 0;
}

.content ul ul li,
.content ol ul li {
  font-size: 0.95rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

/* Grid layout for short lists */
.content h3 + p + ul:has(li:nth-child(-n+6):last-child) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem 2rem;
  padding: 1.5rem 2rem;
}

.content h3 + p + ul:has(li:nth-child(-n+6):last-child) li {
  margin-bottom: 0;
}

/* Highlight boxes for important sections */
.content p + ul:has(li:first-child:contains("Warning")),
.content p + ul:has(li:first-child:contains("Important")),
.content p + ul:has(li:first-child:contains("Note")) {
  background-color: #fef3c7;
  border-left-color: #f59e0b;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

/* Section intro paragraphs */
.content h2 + p,
.content h3 + p {
  font-size: 1.125rem;
  color: #4b5563;
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

/* Drill/exercise sections */
.content h3:contains("Drill") + p + ol,
.content h3:contains("Exercise") + p + ol,
.content h3:contains("Practice") + p + ol {
  background: linear-gradient(to right, #fef3c7 0%, #fef9e7 100%);
  border-left-color: #f59e0b;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Component/part lists styling */
.content p:contains("Components") + ul,
.content p:contains("Parts") + ul,
.content p:contains("Equipment") + ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
  background: #f9fafb;
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.content p:contains("Components") + ul li,
.content p:contains("Parts") + ul li,
.content p:contains("Equipment") + ul li {
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: 1px solid #e5e7eb;
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
}