/*
  responsive.css - Fluid scaling for tablet/iPad and larger screens
  Drop this in your web root and add to every HTML page:
  <link rel="stylesheet" href="responsive.css" />
  
  Mobile (< 768px): no changes — everything stays as-is
  Tablet (768px+):  text, buttons, tables all scale up
  Desktop (1024px+): maxes out at comfortable reading size
*/

/* ── Typography ─────────────────────────────────── */
@media (min-width: 768px) {

  body {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
  }

  h1, .h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
  h2, .h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
  h3, .h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); }
  h4, .h4 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
  h5, .h5 { font-size: clamp(1rem, 1.5vw, 1.2rem); }

  .small, small { font-size: clamp(0.8rem, 1.3vw, 0.95rem); }

  /* ── Buttons ──────────────────────────────────── */
  .btn {
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    padding: clamp(0.4rem, 1vw, 0.65rem) clamp(0.75rem, 2vw, 1.25rem);
    border-radius: clamp(0.4rem, 1vw, 0.6rem);
  }

  .btn-lg {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    padding: clamp(0.6rem, 1.2vw, 0.85rem) clamp(1rem, 2.5vw, 1.5rem);
  }

  .btn-sm {
    font-size: clamp(0.8rem, 1.3vw, 0.95rem);
    padding: clamp(0.3rem, 0.8vw, 0.45rem) clamp(0.5rem, 1.2vw, 0.8rem);
  }

  /* ── Tables ───────────────────────────────────── */
  .table {
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  }

  .table th,
  .table td {
    padding: clamp(0.5rem, 1.2vw, 0.85rem) clamp(0.5rem, 1.5vw, 1rem);
  }

  /* ── Cards ────────────────────────────────────── */
  .card-header {
    padding: clamp(0.75rem, 1.5vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
  }

  .card-body {
    padding: clamp(0.75rem, 2vw, 1.5rem);
  }

  /* ── Accordion ────────────────────────────────── */
  .accordion-button {
    font-size: clamp(0.95rem, 1.7vw, 1.15rem);
    padding: clamp(0.75rem, 1.5vw, 1.1rem) clamp(1rem, 2vw, 1.4rem);
  }

  /* ── Badges ───────────────────────────────────── */
  .badge {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    padding: clamp(0.3rem, 0.6vw, 0.45rem) clamp(0.4rem, 0.9vw, 0.65rem);
  }

  /* ── Form elements (signup page) ─────────────── */
  .form-control,
  .form-select {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    padding: clamp(0.4rem, 1vw, 0.65rem) clamp(0.6rem, 1.2vw, 0.9rem);
  }

  .form-label {
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  }

  /* ── Alerts ───────────────────────────────────── */
  .alert {
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    padding: clamp(0.75rem, 1.5vw, 1.1rem) clamp(1rem, 2vw, 1.4rem);
  }

  /* ── Selector page tiles ──────────────────────── */
  .list-group-item {
    font-size: clamp(0.95rem, 1.7vw, 1.15rem);
    padding: clamp(0.6rem, 1.5vw, 1rem) clamp(0.75rem, 2vw, 1.25rem);
  }

  /* ── Scroll hint / status bar ─────────────────── */
  .scroll-hint,
  .refresh-hint,
  .status-bar {
    font-size: clamp(0.85rem, 1.4vw, 1rem);
    padding: clamp(0.5rem, 1.2vw, 0.85rem) clamp(0.75rem, 1.5vw, 1.1rem);
  }

  /* ── Container max-width on large iPad/desktop ── */
  .col-lg-8 {
    max-width: min(800px, 90vw);
  }
}

/* ── Large iPad / Desktop (1024px+) ─────────────── */
@media (min-width: 1024px) {

  body {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  }

  h1, .h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
  h2, .h2 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); }
  h3, .h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
  h4, .h4 { font-size: clamp(1.2rem, 1.8vw, 1.6rem); }
  h5, .h5 { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }

  .btn {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
  }

  .table {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
  }

  .table th,
  .table td {
    padding: clamp(0.65rem, 1.2vw, 1rem) clamp(0.75rem, 1.5vw, 1.2rem);
  }

  .accordion-button {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    padding: clamp(0.9rem, 1.5vw, 1.25rem) clamp(1.2rem, 2vw, 1.6rem);
  }

  .form-control,
  .form-select {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
  }

  .list-group-item {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    padding: clamp(0.75rem, 1.5vw, 1.15rem) clamp(1rem, 2vw, 1.5rem);
  }
}