/* ═══════════════════════════════════════════════════════════
   STJ Corporate Services — Global Mobile / Responsive CSS
   Covers all service pages, blog pages, and homepage
   ═══════════════════════════════════════════════════════════ */

/* ── Base resets for all pages ── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
table { width: 100%; }

/* ── Service page nav (simple nav-brand / nav-links style) ── */
@media (max-width: 768px) {
  nav {
    flex-wrap: wrap;
    padding: 12px 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
  }

  /* Hide desktop nav links, show burger */
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 12px;
    gap: 0 !important;
    background: #0f2d52;
    border-radius: 8px;
    overflow: hidden;
  }
  .nav-links.mob-open { display: flex; }
  .nav-links a {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.88rem !important;
  }
  .nav-links a:last-child { border-bottom: none; }

  /* Burger button — injected by mobile.js */
  .stj-mob-burger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
  }
  .stj-mob-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,0.8);
    border-radius: 2px;
    transition: 0.25s;
  }
  .stj-mob-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .stj-mob-burger.open span:nth-child(2) { opacity: 0; }
  .stj-mob-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hero sections */
  .hero {
    padding: 48px 16px 40px !important;
    text-align: center !important;
  }
  .hero h1, .hero-title { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
  .hero p, .hero-desc  { font-size: 1rem !important; }
  .hero-actions { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
  .hero-actions a, .hero-actions button { width: 100% !important; max-width: 340px; text-align: center; }

  /* Generic section padding */
  section, .section { padding-left: 16px !important; padding-right: 16px !important; }

  /* Two-column → single column */
  .two-col, .grid-2, .cols-2,
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* Content containers */
  .container, .content-wrap, .inner, .page-inner {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Tables — make scrollable on small screens */
  .table-wrap, table { overflow-x: auto; display: block; }
  th, td { white-space: nowrap; font-size: 0.82rem; padding: 8px 10px !important; }

  /* Step/process blocks */
  .steps, .process, .step-list { padding: 0 !important; }
  .step { flex-direction: column !important; gap: 8px !important; }

  /* FAQ accordions */
  .faq-item, .faq { margin-bottom: 12px !important; }

  /* CTA bars */
  .cta-bar, .cta-strip {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 24px 16px !important;
  }
  .cta-bar a, .cta-strip a { width: 100% !important; max-width: 300px; margin: 0 auto; }

  /* Footer */
  footer { padding: 32px 16px 20px !important; }
  .footer-top { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-grid, .footer-cols { flex-direction: column !important; gap: 20px !important; }

  /* Cards / grids */
  .card-grid, .services-grid, .blog-grid {
    grid-template-columns: 1fr !important;
  }

  /* Inline styles override for common grid patterns */
  div[style*="display:grid"], div[style*="display: grid"] {
    display: block !important;
  }
  div[style*="display:flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }
}

/* ── Tablet (iPad landscape & portrait) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero h1, .hero-title { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; }

  .container, .content-wrap, .inner {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* 3-col → 2-col on tablet */
  .grid-3, .cols-3,
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Tables */
  th, td { font-size: 0.85rem; }

  .footer-top { grid-template-columns: 1fr 1fr !important; }
}

/* ── Prayer times page specific ── */
@media (max-width: 768px) {
  .city-tabs { flex-wrap: wrap !important; gap: 6px !important; }
  .city-tab  { font-size: 0.75rem !important; padding: 6px 10px !important; }
  .prayer-cards { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .prayer-card  { padding: 10px 6px !important; }
  .prayer-time  { font-size: 1rem !important; }
  .month-table  { font-size: 0.75rem !important; }
  .clock-time   { font-size: clamp(2.5rem, 15vw, 5rem) !important; }
  #stj-search-overlay { padding-top: 16px !important; align-items: flex-start; }
  #stj-search-box     { border-radius: 0 0 14px 14px !important; width: 100% !important; }
}

@media (max-width: 480px) {
  .prayer-cards { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Blog pages ── */
@media (max-width: 768px) {
  .blog-content, .blog-body, article {
    padding: 0 16px !important;
    font-size: 0.95rem !important;
  }
  .blog-hero, .post-hero { padding: 40px 16px 32px !important; }
  .blog-meta { flex-wrap: wrap !important; gap: 8px !important; }
  .step-number { font-size: 1.2rem !important; min-width: 36px !important; height: 36px !important; }
  .quick-ref-table { font-size: 0.78rem !important; }
}

/* ── Search modal mobile ── */
@media (max-width: 600px) {
  #stj-search-overlay { padding-top: 0 !important; align-items: flex-start; }
  #stj-search-box {
    width: 100% !important;
    border-radius: 0 0 12px 12px !important;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
  }
  #stj-search-results { flex: 1; }
  #stj-search-footer  { display: none; }
}

/* ── Utility: touch-friendly tap targets ── */
@media (max-width: 768px) {
  a, button {
    min-height: 44px;
  }
  .nav-links a { min-height: 44px; display: flex !important; align-items: center; }
}