/* ============================================================
   responsive.css — Universal Mobile-Friendly CSS
   PakLaw.online — Sab tools mein include karo
   Usage: har tool ki style.css ke BAAD yeh link karo
   <link rel="stylesheet" href="/includes/responsive.css">
   ============================================================ */

/* ── 1. BOX SIZING & BASE RESET ─────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── 2. BODY & ROOT ──────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  min-width: 0;
}

/* ── 3. IMAGES & MEDIA — kabhi overflow nahi hogi ───────────── */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── 4. TABLES — scroll hogi mobile pe ──────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  word-break: break-word;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ── 5. TYPOGRAPHY — fluid font sizes ───────────────────────── */
h1 { font-size: clamp(22px, 5vw, 42px); line-height: 1.15; }
h2 { font-size: clamp(18px, 4vw, 32px); line-height: 1.2;  }
h3 { font-size: clamp(16px, 3vw, 24px); line-height: 1.3;  }
h4 { font-size: clamp(14px, 2.5vw, 20px); }

p, li {
  line-height: 1.7;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── 6. FORMS — mobile pe finger-friendly ───────────────────── */
input, select, textarea, button {
  font-size: 16px !important; /* iOS zoom rokne ke liye 16px zaroori hai */
  max-width: 100%;
  border-radius: 8px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  min-height: 44px; /* touch target */
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* ── 7. BUTTONS — tap target minimum 44px ───────────────────── */
button,
a.btn,
.btn,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  touch-action: manipulation; /* double-tap delay remove */
}

/* ── 8. GRIDS — auto responsive ─────────────────────────────── */

/* 2 column grids → 1 column on mobile */
.grid-2,
.col-2,
[class*="grid-cols-2"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* 3 column grids → auto fit */
.grid-3,
.col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* 4 column grids */
.grid-4,
.col-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ── 9. FLEX ROWS → wrap on mobile ──────────────────────────── */
.flex-row,
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── 10. CONTAINERS — max width + padding ───────────────────── */
.container,
.wrapper,
.inner,
main {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4%, 48px);
  padding-right: clamp(16px, 4%, 48px);
}

/* ── 11. PANELS / CARDS ──────────────────────────────────────── */
.card,
.panel,
.sla-panel,
.tool-panel,
[class*="-panel"],
[class*="-card"] {
  width: 100%;
  min-width: 0; /* flex/grid overflow fix */
}

/* ── 12. NAVIGATION — mobile hamburger support ──────────────── */

/* Mobile menu toggle — add class "nav-open" to body via JS */
@media (max-width: 768px) {
  .nav-links,
  .navbar-links,
  .site-nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background: inherit;
    padding: 12px 0;
  }

  .nav-open .nav-links,
  .nav-open .navbar-links,
  .nav-open .site-nav ul {
    display: flex;
  }

  .nav-toggle,
  .hamburger,
  .menu-toggle {
    display: flex !important;
  }
}

.nav-toggle,
.hamburger,
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

/* ── 13. SCROLL IMPROVEMENTS ────────────────────────────────── */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Thin scrollbar styling */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* ── 14. UTILITY CLASSES ─────────────────────────────────────── */

/* Hide on mobile */
.hide-mobile  { display: block; }
.show-mobile  { display: none;  }

/* Text alignment */
.text-center-mobile { }

/* Full width on mobile */
.full-mobile { }

/* Spacing helpers */
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* ── 15. PRINT ───────────────────────────────────────────────── */
@media print {
  .no-print,
  nav,
  .navbar,
  footer,
  .site-footer,
  button,
  .btn-action {
    display: none !important;
  }

  body { font-size: 12pt; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 10pt; }
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: TABLET (max 960px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {

  /* 2-col grids → 1 col */
  .grid-2,
  .col-2,
  [class*="grid-cols-2"],
  .sla-columns,
  .tool-columns,
  [class*="-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* 3-col grids → 2 col */
  .grid-3,
  .col-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 4-col grids → 2 col */
  .grid-4,
  .col-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Panels full width */
  .sla-panel,
  .tool-panel,
  [class*="-panel"] {
    width: 100% !important;
  }

  /* Action grids */
  .action-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Field rows */
  .field-row {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: MOBILE (max 640px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* All multi-col grids → single column */
  .grid-2,
  .grid-3,
  .grid-4,
  .col-2,
  .col-3,
  .col-4,
  .features-grid,
  [class*="grid-cols-"],
  [class*="-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Action buttons → full width */
  .action-grid {
    grid-template-columns: 1fr !important;
  }

  .btn-action--full {
    grid-column: auto !important;
  }

  /* Panels padding reduce */
  .sla-panel,
  .tool-panel,
  [class*="-panel"],
  .card,
  .panel {
    padding: 18px 16px !important;
  }

  /* Hero sections */
  [class*="-hero"],
  .hero,
  .page-hero {
    padding: 36px 5% 28px !important;
    min-height: auto !important;
  }

  /* Score card vertical */
  .score-card {
    flex-direction: column !important;
    text-align: center !important;
  }

  /* Utility */
  .hide-mobile  { display: none !important; }
  .show-mobile  { display: block !important; }
  .text-center-mobile { text-align: center !important; }
  .full-mobile  { width: 100% !important; }

  /* Flex rows → column */
  .flex-row,
  .row {
    flex-direction: column;
  }

  /* Word limit input full width */
  .field-input--sm {
    max-width: 100% !important;
  }

  /* Formatted text max height reduce */
  .formatted-text {
    max-height: 320px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: SMALL MOBILE (max 420px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {

  /* Stat pills wrap */
  [class*="-stats"],
  .stat-pills,
  .hero-stats {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Panel headers */
  .panel-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Textarea header */
  .textarea-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Formatted header */
  .formatted-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Toast bottom position */
  .copy-toast {
    bottom: 16px !important;
    right: 16px !important;
    left: 16px !important;
    text-align: center !important;
  }
}