/* Shared responsive rules (opt-in via common classes + gentle overrides) */

@media (max-width: 1024px) {
  .tw-topbar__inner {
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  /* Qiraat tree and isnad — single column */
  .qiraat-tree__branches {
    grid-template-columns: 1fr;
  }
  .lesson-flow-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .tw-brand__subtitle {
    display: none;
  }

  .tw-navbtn {
    padding: 8px 9px;
    font-size: 13px;
  }

  /* Make wide tables scroll instead of breaking layout */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce large headings a bit */
  h1 {
    font-size: 2em;
  }
}

@media (max-width: 480px) {
  .tw-navbtn span.tw-hide-xs {
    display: none;
  }
  /* Arabic on tiny screens — keep readable for harakat */
  .arabic,
  .arabic-text {
    font-size: 1.5em;
  }
  /* Stack flow cards vertically */
  .lesson-flow-grid {
    grid-template-columns: 1fr !important;
  }
  /* Narrower margins */
  .lesson-page,
  .mushaf-page {
    padding: 8px;
  }
  /* Responsive tables: stack cells */
  .lesson-table td,
  .lesson-table th {
    display: block;
    text-align: left;
    padding: 6px 8px;
  }
  .lesson-table thead {
    display: none;
  }
  .lesson-table tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--tw-border, #ddd);
    border-radius: 8px;
  }
  /* FAB button: default 88x88 takes 13% of screen on iPhone SE.
     Shrink to standard Material Design FAB size 56x56. */
  .font-switcher__toggle {
    width: 56px;
    height: 56px;
    font-size: 24px;
    bottom: 16px;
    right: 16px;
  }
}

/* Mobile-friendly interactive ayah */
@media (max-width: 600px) {
  .ia-header {
    flex-wrap: wrap;
    gap: 6px;
  }
  .ia-reciter-select {
    font-size: 12px;
    max-width: 120px;
  }
  .ia-btn {
    min-width: 36px;
    min-height: 36px;
  }
  .ia-arabic {
    font-size: 1.6em;
    line-height: 2.2;
  }
  .ia-transliteration {
    font-size: 0.8em;
  }
  .ia-legend {
    font-size: 10px;
    gap: 4px 8px;
  }
}

/* Mobile quiz options - larger touch targets */
@media (max-width: 600px) {
  .lesson-quiz__option {
    padding: 14px 16px;
    min-height: 44px;
    font-size: 15px;
  }
  .lesson-example__arabic {
    font-size: 1.5em;
  }
  .lesson-term__arabic {
    font-size: 1.3em;
  }
}