/**
 * PIZZA YES — LAHORE, PAKISTAN
 * Responsive CSS & Breakpoint Rules (Zero-Overlapping Guarantee)
 * Screen testing: 320px, 375px, 390px, 430px, 768px, 1024px, 1280px, 1440px, 1920px
 */

/* ========================================================
   DESKTOP LARGE & EXTRA WIDE (1440px - 1920px+)
   ======================================================== */
@media (min-width: 1440px) {
  :root {
    --container-max-width: 1320px;
  }
}

/* ========================================================
   DESKTOP COMPACT / LAPTOP BREAKPOINT (Switching before collision: < 1140px)
   ======================================================== */
@media (max-width: 1140px) {
  /* Switch desktop menu to mobile drawer early to eliminate ANY button/nav collisions */
  .desktop-nav {
    display: none !important;
  }

  .mobile-toggle {
    display: flex !important;
  }

  .header-actions {
    gap: 10px;
  }

  .header-order-btn {
    padding: 8px 16px;
    font-size: 0.82rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .order-layout-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
  }
}

/* ========================================================
   TABLET BREAKPOINT (max-width: 991px)
   ======================================================== */
@media (max-width: 991px) {
  :root {
    --header-height-desktop: 72px;
  }

  .top-bar-inner {
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .top-bar {
    height: auto;
    padding: 6px 0;
  }

  .top-bar-left, .top-bar-right {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .hero-section {
    min-height: auto;
    padding: 50px 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-headline {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-ctas {
    justify-content: center;
  }

  .hero-trust-badges {
    justify-content: center;
  }

  .hero-image-wrap {
    margin-top: 20px;
  }

  .hero-pizza-img {
    max-width: 400px;
    transform: none !important;
  }

  .hero-floating-badge {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
  }

  .order-layout-grid {
    grid-template-columns: 1fr;
  }

  .order-summary-panel {
    position: static;
    margin-top: 24px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .map-container {
    min-height: 350px;
  }

  .lightbox-nav-btn {
    display: none; /* Swipe & keyboard preferred on touch devices */
  }
}

/* ========================================================
   MOBILE LANDSCAPE / TABLET PORTRAIT (max-width: 768px)
   ======================================================== */
@media (max-width: 768px) {
  .logo-img {
    height: 42px;
    max-width: 180px;
  }

  .section-title {
    font-size: 2rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .food-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }

  .deals-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .verification-note {
    text-align: center;
  }

  /* Cart Drawer takes full mobile width for comfortable ordering */
  .cart-drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .floating-actions-container {
    right: 14px;
    bottom: 18px;
  }

  .floating-whatsapp-btn,
  .floating-call-btn {
    width: 52px;
    height: 52px;
  }

  .whatsapp-tooltip {
    display: none; /* Hide hover tooltip on touch screens */
  }
}

/* ========================================================
   MOBILE PHONES (max-width: 576px - iPhone 14/15, Galaxy S)
   ======================================================== */
@media (max-width: 576px) {
  :root {
    --header-height-desktop: 66px;
  }

  .site-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .top-bar {
    display: none; /* Hide top bar on ultra small screens to preserve vital vertical space */
  }

  .header-order-btn {
    display: none; /* Use mobile drawer CTA or header cart to avoid button collision */
  }

  .logo-img {
    height: 38px;
    max-width: 160px;
  }

  .header-actions {
    gap: 8px;
  }

  .header-cart-btn {
    width: 38px;
    height: 38px;
  }

  .mobile-toggle {
    width: 38px;
    height: 38px;
  }

  .hero-section {
    padding: 35px 0 45px;
  }

  .hero-headline {
    font-size: 2rem;
  }

  .hero-subheading {
    font-size: 1rem;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  .food-grid {
    grid-template-columns: 1fr; /* Clean single column cards */
  }

  .food-card-thumb-wrap {
    height: 220px;
  }

  .deal-card-header {
    height: 180px;
  }

  .order-form-panel,
  .order-summary-panel {
    padding: 20px 16px;
  }

  .order-modal-card {
    padding: 22px 16px;
  }

  .py-section {
    padding: 55px 0;
  }

  .cat-filter-btn {
    padding: 7px 14px;
    font-size: 0.8rem;
  }
}

/* ========================================================
   ULTRA-COMPACT PHONES (320px - 375px e.g. iPhone SE)
   ======================================================== */
@media (max-width: 375px) {
  .logo-img {
    height: 34px;
    max-width: 140px;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .hero-headline {
    font-size: 1.8rem;
  }

  .food-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .food-card-actions {
    width: 100%;
    margin-top: 8px;
  }

  .food-card-actions .btn {
    width: 100%;
  }

  .deal-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .deal-card-footer .btn {
    width: 100%;
    margin-top: 10px;
  }
}

/* ========================================================
   PRINT STYLES
   ======================================================== */
@media print {
  .top-bar,
  .site-header,
  .floating-actions-container,
  .cart-drawer,
  .cart-drawer-overlay,
  .mobile-nav,
  .mobile-nav-overlay,
  .btn-add-cart,
  .footer-bottom {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .food-card, .deal-card {
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }
}