/* ═══════════════════════════════════════════════════
   MEDUSA · Estilos Responsive
   Adapta la página a móviles, tablets y desktop
   Breakpoints:
     - xs: 0-480px (móviles pequeños)
     - sm: 481-768px (móviles grandes)
     - md: 769-1024px (tablets)
     - lg: 1025px+ (desktop)
   ═══════════════════════════════════════════════════ */

/* === MOBILE FIRST - Base styles (aplican a todos) === */
* { box-sizing: border-box; }

/* === XS: Móviles pequeños (0-480px) === */
@media (max-width: 480px) {
  /* Reduce font sizes */
  body { font-size: 14px; }

  /* Nav - apilar vertical */
  .nav-fixed {
    padding: 8px 12px !important;
    position: sticky !important;
    top: 0 !important;
  }
  .nav-fixed > div {
    flex-wrap: wrap;
    gap: 4px !important;
    justify-content: center !important;
  }
  .nav-fixed a {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  .nav-fixed span[style*="letter-spacing"] {
    font-size: 14px !important;
  }
  .theme-toggle-btn { padding: 4px 8px !important; font-size: 12px !important; }

  /* Hero sections - reduce sizes */
  .hero h1 { font-size: 2rem !important; }
  .hero-header h1 { font-size: 1.8rem !important; }
  .section-anchor h2 { font-size: 1.6rem !important; }
  .section-anchor h3 { font-size: 1.2rem !important; }
  .question-text { font-size: 0.95rem !important; }

  /* Hero jelly SVG */
  .jelly { width: 100px !important; height: 120px !important; }
  .hero p, .hero-header p, .section-anchor p { font-size: 0.9rem !important; }
  .hero .subtitle { font-size: 0.95rem !important; }

  /* Stat grids - 2 columns on tiny screens */
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-num { font-size: 1.5rem !important; }

  /* Nav cards - 1 column */
  .nav-cards { grid-template-columns: 1fr !important; }
  .grid-info { grid-template-columns: 1fr !important; }
  .grid-info .item { padding: 16px; }

  /* Info sections - reduce padding */
  .info-section,
  .section-anchor { padding: 32px 16px !important; }
  .section-anchor { padding-top: 80px !important; } /* offset for sticky nav */

  /* Filter sidebar on species - stack on top */
  .max-w-7xl { padding: 0 12px !important; }

  /* Cards - reduce padding */
  .card { padding: 16px !important; }
  .species-card .text-2xl,
  .species-card .text-xl { font-size: 1.1rem !important; }

  /* Quiz tabs - 1 column */
  #difficulty-tabs { grid-template-columns: 1fr !important; }
  .opt-btn { font-size: 0.9rem !important; padding: 10px 12px !important; }
  .next-btn { padding: 10px 20px !important; font-size: 0.9rem !important; }

  /* Header h1 sizes */
  h1, .text-3xl { font-size: 1.6rem !important; }
  h2 { font-size: 1.4rem !important; }

  /* Padding for main content */
  main { padding: 70px 12px 40px !important; }
  .max-w-7xl { padding: 0 8px !important; }
  .max-w-3xl { padding: 0 8px !important; }

  /* Species cards - reduce grid */
  #species-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Tab buttons - reduce padding */
  .tab-btn { padding: 12px !important; }
  .tab-btn > div { font-size: 0.85rem !important; }

  /* Buttons that float (to-top) */
  .to-top { padding: 8px 12px !important; font-size: 0.85rem !important; }

  /* Quiz container */
  .card { padding: 16px !important; }
  .question-text { font-size: 1rem !important; line-height: 1.5; }
}

/* === SM: Móviles grandes / tablets pequeñas (481-768px) === */
@media (min-width: 481px) and (max-width: 768px) {
  .nav-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-info { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .jelly { width: 130px !important; height: 160px !important; }

  /* Species: stack sidebar above grid */
  .max-w-7xl { grid-template-columns: 1fr !important; }
  aside { max-height: none !important; position: relative !important; top: 0 !important; margin-bottom: 16px; }
  #species-grid { grid-template-columns: 1fr !important; }

  /* Quiz */
  #difficulty-tabs { grid-template-columns: 1fr !important; }

  .hero h1 { font-size: 2.5rem !important; }
  .section-anchor h2 { font-size: 2rem !important; }
}

/* === MD: Tablets (769-1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-info { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-grid { grid-template-columns: repeat(5, 1fr) !important; }

  /* Species: narrower sidebar */
  .max-w-7xl { grid-template-columns: 240px 1fr !important; }

  .hero h1 { font-size: 3rem !important; }
  .section-anchor h2 { font-size: 2.2rem !important; }
}

/* === Universal responsive utilities === */

/* Make tables scrollable on small screens */
@media (max-width: 768px) {
  body {
    -webkit-text-size-adjust: 100%;
  }

  /* Prevent horizontal scroll on entire page */
  body, html {
    overflow-x: hidden;
  }

  /* Images should not overflow */
  img { max-width: 100%; height: auto; }
}

/* === Improve touch targets (min 44x44px) on mobile === */
@media (hover: none) and (pointer: coarse) {
  .nav-fixed a, .theme-toggle-btn, .tab-btn, .opt-btn, .next-btn,
  .habitat-btn, .habitat-value, .region-value, .btn-expand,
  .to-top, .leth-dot {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* === Print styles (for completeness) === */
@media print {
  .nav-fixed, .theme-toggle-btn, .to-top, .hero, .habitat-filters,
  #quiz-tabs, .next-btn, .expand-btn { display: none !important; }
  body { background: white !important; color: black !important; }
}
/* ═══════════════════════════════════════════════════
   MEJORAS: nav mobile + fix overflow H1
   ═══════════════════════════════════════════════════ */

/* Hide nav links on very small screens, show only logo + theme */
@media (max-width: 480px) {
  /* Nav links collapse to icons or hide */
  .nav-fixed > div > div:not(:last-child) {
    display: none;
  }
  /* Keep the brand visible */
  .nav-fixed > div > a {
    font-size: 16px !important;
  }
  /* Theme button always visible */
  .nav-fixed > div > div:last-child {
    display: flex !important;
  }
  /* Or hide entire nav, use a sticky top */
  .nav-fixed {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  /* The nav links container should hide if it has the right class */
  .nav-fixed > div {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
}

/* On slightly larger mobile, show all nav links but smaller */
@media (min-width: 481px) and (max-width: 768px) {
  .nav-fixed {
    padding: 8px 12px !important;
  }
  .nav-fixed > div {
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: center !important;
  }
  .nav-fixed a {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
}

/* Fix h1 and h2 overflow on mobile */
@media (max-width: 480px) {
  h1, h2, h3, h4 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  h1, .text-3xl, .text-4xl, .text-5xl { font-size: 1.5rem !important; }
  h2, .text-2xl { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }

  /* Card content padding */
  .card, [class*="card"] { padding: 12px !important; }
  .species-card { padding: 12px !important; }

  /* Quiz container */
  .opt-btn span:first-child { font-size: 0.85rem; }
  .question-text { font-size: 0.9rem !important; line-height: 1.4; padding-right: 8px; }

  /* Results layout */
  .card > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Section padding */
  .info-section, .section-anchor, .hero-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Fix long text overflow in cards */
@media (max-width: 480px) {
  .habitat-value, .region-value {
    font-size: 0.8rem !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }
}

/* Touch improvements */
@media (hover: none) and (pointer: coarse) {
  /* Make all clickable areas at least 44x44 for touch */
  .habitat-btn, button, .tab-btn, .opt-btn, .next-btn,
  .habitat-value, .region-value, .theme-toggle-btn,
  .to-top, .btn-expand {
    min-height: 44px;
  }
  /* Increase font size for readability */
  body {
    -webkit-text-size-adjust: 100%;
  }
}

/* Prevent zoom on input focus on iOS */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: 16px;
  }
}

/* Safe area insets for iPhone notch */
@supports (padding: max(0px)) {
  .nav-fixed {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* === FINAL FIXES for mobile === */
@media (max-width: 480px) {
  /* Force flex containers to wrap on mobile */
  .quiz-controls-row,
  div[style*="display: flex; justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .quiz-controls-row .next-btn,
  div[style*="display: flex; justify-content: space-between"] > button {
    width: 100% !important;
    text-align: center !important;
  }

  /* Specifically: every direct child of body with display:flex that has space-between should stack */
  body div[style*="display: flex; justify-content: space-between"]:not([class]) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Question text should fit in container */
  .question-text {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Quiz container max-width issue */
  .quiz-card-container,
  main[style*="max-width: 800px"] {
    max-width: 100% !important;
    padding: 0 8px !important;
  }

  /* H1 wrap - use word-break but also limit size */
  h1 {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* The Quiz: Pregunta X de N text might also overflow */
  div[style*="font-family: monospace; font-size: 13px"] {
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Force buttons to wrap nicely */
  div[style*="display: flex; justify-content: space-between; align-items: center; margin-top: 16px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  div[style*="display: flex; justify-content: space-between; align-items: center; margin-top: 16px"] > * {
    width: 100% !important;
  }
}

/* ═══ AGGRESSIVE H1 FIX for mobile (last attempt) ═══ */
@media (max-width: 480px) {
  /* The H1 with letter-spacing is wider than the container */
  /* Force it to wrap and shrink */
  h1[style*="letter-spacing"],
  h1 {
    font-size: 1.3rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    padding: 0 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* H1 with 3rem (the inline style) needs more aggressive override */
  h1[style*="font-size: 3rem"] {
    font-size: 1.3rem !important;
  }
  h1[style*="font-size: 3.5rem"] {
    font-size: 1.5rem !important;
  }

  /* Container for hero header */
  .hero-header {
    padding: 100px 12px 32px !important;
  }

  /* Force body and main to not exceed viewport */
  body, main {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* === Quiz title responsive (clamp) === */
.quiz-title {
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 8px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
  font-size: clamp(1.3rem, 5vw, 3rem);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* === Override: even smaller on tiny phones === */
@media (max-width: 380px) {
  .quiz-title { font-size: 1.1rem !important; letter-spacing: 0.01em !important; max-width: 100% !important; word-break: break-all !important; display: block !important; white-space: normal !important; word-wrap: break-word !important; }
  /* Force the brain emoji on its own line if needed */
  .quiz-title::first-letter { font-size: 1.2em; }
  /* The "Pregunta X de N" text is also wide; make it smaller */
  div[style*="font-family: monospace; font-size: 13px"] {
    font-size: 11px !important;
  }
  /* The H2 in quiz options feedback */
  .feedback { font-size: 0.85rem !important; }
}