/* ==================================================
   Responsive Design — QR Code Generator
   Shared responsive styles for all pages
   ================================================== */

/* Hide hamburger on desktop */
.nav-toggle { display: none; }

/* ---------- Desktop: shared enhancements ---------- */
header { position: sticky; top: 0; z-index: 100; }

/* Footer grid injected by footer.js */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  padding: 32px 0 20px;
}

/* Ensure images are responsive */
img { max-width: 100%; height: auto; }

/* Normalize button sizes: match border-box so btn-primary and btn-ghost align */
.btn-primary { border: 1px solid transparent; }

/* ---------- Tablet & Mobile: < 768px ---------- */
@media (max-width: 768px) {

  /* Typography scaling */
  .hero h1 { font-size: 1.5rem !important; }
  .hero p   { font-size: 0.9rem !important; }
  .content h2, .seo-section h2 { font-size: 1.1rem !important; }
  .content h3, .seo-section h3 { font-size: 0.95rem !important; }
  .content p, .content li, .seo-section p, .seo-section li { font-size: 0.88rem !important; }

  /* Header */
  .header-inner { position: relative; height: 56px; }
  .logo { font-size: 1.05rem; }
  .logo svg { width: 24px; height: 24px; }

  /* Hamburger button — shown by nav.js on mobile */
  .nav-toggle {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer; padding: 0;
    z-index: 101;
  }
  .nav-toggle svg { width: 20px; height: 20px; stroke: var(--text-secondary); }

  /* Mobile nav dropdown */
  nav {
    display: none !important;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 6px 16px 10px;
    flex-direction: column;
    gap: 2px; z-index: 100;
  }
  nav.open { display: flex !important; }
  nav a { padding: 10px 12px; font-size: 0.9rem; border-radius: var(--radius-sm); }

  /* Hero spacing */
  .hero { padding: 24px 0 14px; }

  /* Trust badges */
  .trust-badges { gap: 6px; margin: 14px auto 22px; }
  .trust-badge  { font-size: 0.7rem; padding: 5px 10px; }

  /* Cards */
  .card-body   { padding: 16px; }
  .card-header { padding: 12px 16px; }

  /* Sections */
  .seo-section, .faq { padding: 24px 0 !important; }
  .inner-nav { padding: 20px 0; }
  .inner-nav-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .inner-nav-card  { padding: 12px; }
  .inner-nav-card .title { font-size: 0.8rem; }

  /* Breadcrumb */
  .breadcrumb { padding: 10px 0; font-size: 0.8rem; }

  /* Blog grid */
  .blog-grid { grid-template-columns: 1fr; gap: 16px; }
  .blog-card-content { padding: 18px; }

  /* Tool wrapper already in page CSS, reinforcing */
  .tool-wrapper, .tool { gap: 20px; margin-bottom: 32px; }

  /* Preview area */
  .preview-area { padding: 16px !important; }

  /* FAQ items */
  .faq-item { padding: 12px 0; }

  /* Toast notification */
  .toast {
    bottom: 16px; left: 16px; right: 16px;
    transform: none; text-align: center;
  }

  /* Buttons */
  .btn { padding: 10px 18px; font-size: 0.85rem; }
  /* Buttons in group: equal width */
  .btn-group .btn { width: 100%; }

  /* Scanner camera */
  #cameraView { max-height: 260px; }
  #cameraView video { max-height: 260px; }

  /* Upload zone */
  .upload-zone { padding: 24px 16px; }

  /* Content pages */
  .content { padding: 8px 0 32px; }
  .content ul { padding-left: 18px; }
}

/* ---------- Small Phone: < 480px ---------- */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.3rem !important; }
  .container { padding: 0 14px; }

  .logo { font-size: 0.95rem; }
  .logo svg { width: 22px; height: 22px; }

  .trust-badges { gap: 4px; }
  .trust-badge  { font-size: 0.63rem; padding: 4px 8px; }

  .inner-nav-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

  /* Make tabs scrollable instead of wrapping */
  .tabs, .scanner-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .scanner-tabs::-webkit-scrollbar { display: none; }
  .tab, .scanner-tab { white-space: nowrap; flex: 0 0 auto; font-size: 0.75rem; padding: 8px 12px; }


  /* Blog cards */
  .blog-card-content { padding: 14px; }
}

/* Features: single column on small phone */
@media (max-width: 480px) {
  .features { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .feature { padding: 16px 8px; }
  .feature-icon { width: 48px; height: 48px; margin-bottom: 10px; }
  .feature-icon svg { width: 24px; height: 24px; }
  .feature h3 { font-size: 0.95rem; }
  .feature p { font-size: 0.82rem; }
  .steps { padding: 24px 0; }
  .steps h2 { font-size: 1.1rem; }
  .steps ol { font-size: 0.88rem; padding-left: 16px; }
}