/* Responsive Typography Fixes for Templates
   This file contains responsive adjustments for text sizes
   to ensure proper display on mobile devices */

/* Base responsive typography */
@media (max-width: 768px) {
  /* General text size reduction for mobile */
  body, p, div, span, li, td, th {
    font-size: 0.875rem !important; /* 14px */
  }

  /* Heading size adjustments for mobile */
  h1, .h1, .markdown-content h1 {
    font-size: 1.5rem !important; /* 24px */
  }

  h2, .h2, .markdown-content h2 {
    font-size: 1.25rem !important; /* 20px */
  }

  h3, .h3, .markdown-content h3 {
    font-size: 1.125rem !important; /* 18px */
  }

  h4, .h4, .markdown-content h4 {
    font-size: 1rem !important; /* 16px */
  }

  h5, .h5, .markdown-content h5,
  h6, .h6, .markdown-content h6 {
    font-size: 0.875rem !important; /* 14px */
  }

  /* Code blocks and pre elements */
  pre, code, .code-container {
    font-size: 0.75rem !important; /* 12px */
  }

  /* Method badges */
  .method-badge, [class*="method-"] {
    font-size: 0.75rem !important; /* 12px */
    padding: 0.25rem 0.5rem !important;
  }

  /* Sidebar and navigation */
  .sidebar, .nav-container, .nav-item, .nav-link {
    font-size: 0.875rem !important; /* 14px */
  }

  /* Tab text */
  .tab, .tabs button {
    font-size: 0.875rem !important; /* 14px */
  }

  /* Input fields */
  input, select, textarea, button {
    font-size: 0.875rem !important; /* 14px */
  }

  /* URL display */
  .endpoint-url, .url-display {
    font-size: 0.75rem !important; /* 12px */
    word-break: break-all;
  }

  /* Table content */
  table {
    font-size: 0.75rem !important; /* 12px */
  }

  /* Badge and label text */
  .badge, .label, [class*="badge-"], [class*="type-"] {
    font-size: 0.75rem !important; /* 12px */
  }
  
  /* Ensure buttons have adequate tap targets on mobile */
  button, .btn, a.btn, .copy-btn, .collapse-trigger {
    min-height: 2.5rem;
    min-width: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Fix padding for better mobile experience */
  .card, .card-body, .endpoint-card, .endpoint-body, .content-section {
    padding: 0.75rem !important;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  /* Further reduce sizes for very small screens */
  body, p, div, span, li, td, th {
    font-size: 0.8125rem !important; /* 13px */
  }

  h1, .h1, .markdown-content h1 {
    font-size: 1.375rem !important; /* 22px */
  }

  h2, .h2, .markdown-content h2 {
    font-size: 1.25rem !important; /* 20px */
  }

  /* Adjust padding and margins for better spacing */
  .card, .card-body, .card-header, .card-footer,
  .content-section, .endpoint-section {
    padding: 0.75rem !important;
  }

  /* Ensure buttons are properly sized */
  button, .btn {
    padding: 0.375rem 0.75rem !important;
  }
}

/* Template-specific classes to ensure our fixes are applied correctly */
.default-template body,
.minimalist-template body,
.dark-template body,
.corporate-template body,
.glassmorphism-template body,
.retro-template body,
.material-template body,
.modern-template body,
.techAPI-template body {
  /* This ensures all templates receive our responsive fixes */
  font-size: inherit;
}

/* Special template-specific overrides */
/* These ensure our responsive rules aren't overridden by template-specific styles */

/* Glassmorphism template */
@media (max-width: 768px) {
  .glass-docs .project-title,
  .glass-docs .section-title {
    font-size: 1.5rem !important;
  }
  
  .glass-docs .endpoint-title {
    font-size: 1.125rem !important;
  }
  
  .glass-docs .nav-title,
  .glass-docs .nav-link {
    font-size: 0.875rem !important;
  }
  
  .glass-docs .endpoint-url {
    font-size: 0.75rem !important;
    word-break: break-all;
  }
}

/* Retro template */
@media (max-width: 768px) {
  .retro-docs .terminal-title,
  .retro-docs .project-title {
    font-size: 1.25rem !important;
  }
  
  .retro-docs .endpoint-url,
  .retro-docs .terminal-body {
    font-size: 0.75rem !important;
  }
  
  .retro-docs .nav-title,
  .retro-docs .nav-link {
    font-size: 0.875rem !important;
  }
  
  /* Adjust blinking cursor size */
  .retro-docs .blink {
    font-size: 0.875rem !important;
  }
}

/* Material template */
@media (max-width: 768px) {
  .material-docs .card-title h2 {
    font-size: 1.25rem !important;
  }
  
  .material-docs .endpoint-header {
    font-size: 1rem !important;
  }
  
  .material-docs .nav-section-title,
  .material-docs .nav-item {
    font-size: 0.875rem !important;
  }
  
  .material-docs .endpoint-url {
    font-size: 0.75rem !important;
    word-break: break-all;
  }
}

/* TechAPI template */
@media (max-width: 768px) {
  .tech-api-docs .tech-title {
    font-size: 1.5rem !important;
  }
  
  .tech-api-docs .tech-component-title {
    font-size: 1.125rem !important;
  }
  
  .tech-api-docs .tech-nav-section-title,
  .tech-api-docs .tech-nav-item {
    font-size: 0.875rem !important;
  }
  
  .tech-api-docs .endpoint-url {
    font-size: 0.75rem !important;
    word-break: break-all;
  }
}

/* Corporate template */
@media (max-width: 768px) {
  .corporate-docs .endpoint-header,
  .corporate-docs .collapse-trigger h3 {
    font-size: 1.125rem !important;
  }
  
  .corporate-docs .endpoint-url {
    font-size: 0.75rem !important;
    word-break: break-all;
  }
  
  .corporate-docs .tab {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
  }
}

/* Dark template */
@media (max-width: 768px) {
  .dark-theme .doc-card .card-header {
    font-size: 1.125rem !important;
  }
  
  .dark-theme .endpoint-url {
    font-size: 0.75rem !important;
    word-break: break-all;
  }
  
  .dark-theme .tab {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
  }
}

/* Modern template */
@media (max-width: 768px) {
  .modern-docs .endpoint-header {
    font-size: 1.125rem !important;
  }
  
  .modern-docs .endpoint-url {
    font-size: 0.75rem !important;
    word-break: break-all;
  }
  
  .modern-docs .tab {
    font-size: 0.875rem !important;
  }
}

/* Minimalist template */
@media (max-width: 768px) {
  .minimalist-docs .endpoint-title {
    font-size: 1.125rem !important;
  }
  
  .minimalist-docs .endpoint-url {
    font-size: 0.75rem !important;
    word-break: break-all;
  }
  
  .minimalist-docs code,
  .minimalist-docs pre {
    font-size: 0.75rem !important;
  }
}