/* ============================================================
   BRANCH'S SOFT SERVE — MOBILE RESPONSIVE STYLESHEET
   Covers all pages: index, menu, events, about, contact,
   hours, gallery, reviews, order, submit-review
   ============================================================ */

/* ── GLOBAL BASE ── */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ── NAVIGATION ── */
@media (max-width: 768px) {
  .main-nav { padding: 0 16px; }
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 0.78rem; }
  .brand-logo { font-size: 1.1rem; }
  .btn-order { padding: 8px 14px; font-size: 0.72rem; }
}

@media (max-width: 480px) {
  .site-header { padding: 0 12px; }
  .brand-logo { font-size: 1rem; }
}

/* ── HERO SECTIONS ── */
@media (max-width: 768px) {
  .hero-title, .page-hero h1 { font-size: 2rem !important; line-height: 1.15; }
  .hero-subtitle, .page-hero h2 { font-size: 1rem !important; }
  .hero-eyebrow { font-size: 0.72rem !important; }
  .hero-actions, .page-hero .hero-actions { flex-direction: column; align-items: center; gap: 12px; }
  .hero-actions a, .page-hero .hero-actions a { width: 100%; max-width: 320px; text-align: center; }
  .page-hero { padding: 60px 16px 40px; }
}

@media (max-width: 480px) {
  .hero-title, .page-hero h1 { font-size: 1.6rem !important; }
}

/* ── SECTION HEADERS ── */
@media (max-width: 768px) {
  .section-title, .section-title h2 { font-size: 1.6rem !important; }
  .section-desc { font-size: 0.9rem !important; }
  section { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── GRID LAYOUTS ── */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4,
  .menu-grid, .event-types-grid,
  .step-grid, .value-grid,
  .fundraiser-grid, .faq-grid,
  .client-grid, .award-grid,
  .timeline-grid, .about-grid { grid-template-columns: 1fr !important; }

  .pricing-cards { grid-template-columns: 1fr !important; }
  .qc-row { grid-template-columns: 1fr !important; }
  .qc-field-btn { width: 100%; }
  .qc-field-btn .btn-primary { width: 100%; }
}

@media (max-width: 600px) {
  .pricing-cards { grid-template-columns: 1fr !important; }
}

/* ── COMPARE TABLE ── */
@media (max-width: 768px) {
  .compare-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .compare-table { min-width: 480px; font-size: 0.82rem; }
  .compare-table th, .compare-table td { padding: 10px 12px !important; }
}

/* ── EVENTS PAGE ── */
@media (max-width: 768px) {
  .event-types-grid { grid-template-columns: 1fr !important; }
  .how-it-works-grid { grid-template-columns: 1fr !important; }
  .bf-row, .bf-row-2 { grid-template-columns: 1fr !important; }
  .bf-row-3 { grid-template-columns: 1fr !important; }
  .bf-time-picker { flex-wrap: wrap; }
  .avail-cal-wrap { padding: 0 4px; }
  .avail-cal-grid { font-size: 0.78rem; }
  .acg-day { width: 36px; height: 36px; font-size: 0.8rem; }
  .spb-inner { flex-direction: column; gap: 8px; text-align: center; }
  .events-stats .estats-inner { flex-direction: column; gap: 16px; }
  .estat-divider { display: none; }
  .pkg-compare-inner { padding: 0 4px; }
  .compare-cta { flex-direction: column; align-items: center; }
  .compare-cta a { width: 100%; max-width: 320px; text-align: center; }
  .pricing-card-body { padding: 16px !important; }
  .book-event-inner { padding: 24px 16px !important; }
  .bf-step-nav { flex-direction: column; }
  .bf-step-nav .btn-primary,
  .bf-step-nav .btn-outline-gold { width: 100%; text-align: center; }
}

/* ── MENU PAGE ── */
@media (max-width: 768px) {
  .menu-card { flex-direction: column; }
  .menu-img { width: 100% !important; height: 180px !important; }
  .menu-grid { grid-template-columns: 1fr !important; }
  .flavor-tags { flex-wrap: wrap; }
}

/* ── HOURS PAGE ── */
@media (max-width: 768px) {
  .hours-grid { grid-template-columns: 1fr !important; }
  .hours-table { font-size: 0.85rem; }
  .hours-table th, .hours-table td { padding: 8px 10px; }
  .location-cards { grid-template-columns: 1fr !important; }
}

/* ── GALLERY PAGE ── */
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}
@media (max-width: 400px) {
  .gallery-grid { grid-template-columns: 1fr !important; }
}

/* ── REVIEWS PAGE ── */
@media (max-width: 768px) {
  .reviews-grid { grid-template-columns: 1fr !important; }
  .stats-row { flex-direction: column; gap: 16px; align-items: center; }
  .stat-divider { display: none; }
}

/* ── ABOUT PAGE ── */
@media (max-width: 768px) {
  .about-hero-inner { flex-direction: column; text-align: center; }
  .about-img { width: 100% !important; max-width: 320px; margin: 0 auto; }
  .timeline-item { flex-direction: column !important; }
  .timeline-line { display: none; }
  .comm-stats { flex-direction: column; gap: 16px; align-items: center; }
}

/* ── CONTACT PAGE ── */
@media (max-width: 768px) {
  .contact-main-inner { flex-direction: column; }
  .contact-form-col, .contact-info-col { width: 100% !important; }
  .quick-contact-grid { grid-template-columns: 1fr !important; }
}

/* ── ORDER PAGE ── */
@media (max-width: 768px) {
  .order-options { grid-template-columns: 1fr !important; }
  .order-card { padding: 20px !important; }
}

/* ── FOOTER ── */
@media (max-width: 768px) {
  .footer-inner { flex-direction: column; gap: 24px; text-align: center; }
  .footer-col { width: 100% !important; }
  .footer-social { justify-content: center; }
  .footer-links { justify-content: center; flex-wrap: wrap; }
}

/* ── BUTTONS ── */
@media (max-width: 480px) {
  .btn-primary, .btn-outline-gold {
    padding: 13px 20px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
  }
}

/* ── NEWSLETTER POPUP ── */
@media (max-width: 480px) {
  .newsletter-popup { width: 94vw !important; padding: 24px 16px !important; }
  .newsletter-popup h2 { font-size: 1.3rem !important; }
}

/* ── MARQUEE / TICKER ── */
@media (max-width: 480px) {
  .marquee-item { font-size: 0.78rem; padding: 0 16px; }
}

/* ── LOCATION BANNER ── */
@media (max-width: 480px) {
  .location-banner { font-size: 0.78rem; padding: 8px 12px; }
}

/* ── TRUSTED BY / CLIENT LOGOS ── */
@media (max-width: 768px) {
  .client-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── QUICK QUOTE RESULT ── */
@media (max-width: 480px) {
  .qcr-price { font-size: 1.8rem !important; }
  .qc-form { padding: 20px 14px !important; }
}

/* ── AVAILABILITY CALENDAR ── */
@media (max-width: 480px) {
  .avail-cal-inner { padding: 0 8px; }
  .acg-day { width: 32px !important; height: 32px !important; font-size: 0.75rem !important; }
  .avail-cal-month { font-size: 1rem !important; }
  .avail-cal-cta { flex-direction: column; align-items: center; }
  .avail-cal-cta a { width: 100%; max-width: 320px; text-align: center; }
}

/* ── FAQ ACCORDION ── */
@media (max-width: 768px) {
  .faq-grid { grid-template-columns: 1fr !important; }
  .faq-question { font-size: 0.9rem; padding: 14px 16px; }
  .faq-answer p { font-size: 0.87rem; }
}

/* ── SUBMIT REVIEW PAGE ── */
@media (max-width: 768px) {
  .review-form-inner { padding: 24px 16px !important; }
  .star-rating { gap: 6px; }
  .star-rating label { font-size: 1.8rem; }
}

/* ── PREVENT HORIZONTAL SCROLL ── */
html, body { overflow-x: hidden; max-width: 100vw; }