/* ============================================================
   WHAT'S FOR TEA — SHARED RESPONSIVE CSS
   Overrides min-width: 900px and makes all pages mobile-friendly
   Breakpoints: 768px (tablet), 480px (mobile)
   ============================================================ */

/* Remove the fixed min-width constraint */
html, body {
  min-width: 0 !important;
}

/* ============================================================
   TABLET (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* HEADER */
  .header-inner {
    padding: 0 20px !important;
    height: 64px !important;
    gap: 12px !important;
  }
  .site-nav {
    display: none !important;
  }
  .btn-cta {
    font-size: 13px !important;
    padding: 9px 16px !important;
  }

  /* HERO — homepage */
  .hero-wrap {
    padding: 0 16px !important;
    margin: 16px auto !important;
  }
  .hero {
    grid-template-columns: 1fr !important;
    padding: 32px 28px !important;
    gap: 24px !important;
  }
  .hero h1 {
    font-size: 1.7rem !important;
  }
  .hero-image {
    order: -1 !important;
  }

  /* SECTIONS */
  .section {
    padding: 40px 20px !important;
  }
  .section-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
  }

  /* RECIPE GRID — homepage (3-col → 1-col) */
  .recipe-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* WHY BLOCK */
  .why-wrap {
    padding: 0 16px 40px !important;
  }
  .why-section {
    padding: 40px 24px !important;
  }
  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* PLAN BANNER */
  .plan-wrap {
    padding: 0 16px 40px !important;
  }
  .plan-banner {
    flex-direction: column !important;
    padding: 36px 28px !important;
    gap: 20px !important;
    text-align: center !important;
  }
  .plan-banner h2 {
    font-size: 1.5rem !important;
  }

  /* FOOTER */
  .site-footer {
    padding: 32px 20px !important;
  }
  .footer-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 20px !important;
  }

  /* ALL RECIPES PAGE — 4-col → 2-col */
  .recipes-wrap {
    padding: 0 16px 40px !important;
  }
  .recipe-grid[id="recipeGrid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* RECIPE PAGE */
  .recipe-hero {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
    gap: 24px !important;
  }
  .recipe-body {
    grid-template-columns: 1fr !important;
    padding: 0 16px 40px !important;
    gap: 24px !important;
  }
  .ingredients-box {
    position: static !important;
  }
  .signup-wrap {
    padding: 0 16px 40px !important;
  }
  .signup-box {
    padding: 40px 24px !important;
  }
  .signup-form {
    flex-direction: column !important;
    align-items: center !important;
  }
  .signup-form input {
    width: 100% !important;
    max-width: 320px !important;
  }

  /* WEEKLY PLAN PAGE */
  .week-selector {
    padding: 32px 16px 20px !important;
  }
  .weeks-wrap {
    padding: 0 16px !important;
  }
  .featured-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .featured-card {
    grid-template-columns: 1fr !important;
  }
  .meals-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .cost-box {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 28px 20px !important;
  }

  /* BROWSE CATEGORIES */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* COST STRIP */
  div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* BREADCRUMB */
  .breadcrumb {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }

  /* ABOUT / CONTACT / PRIVACY / TERMS */
  .page-wrap, .content-wrap {
    padding: 32px 16px !important;
  }
}

/* ============================================================
   MOBILE (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {

  /* HEADER */
  .site-logo img {
    width: 44px !important;
    height: 44px !important;
  }
  .btn-cta {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  /* HERO */
  .hero {
    padding: 24px 20px !important;
  }
  .hero h1 {
    font-size: 1.45rem !important;
  }
  .hero-buttons {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .btn-primary, .btn-secondary {
    width: 100% !important;
    justify-content: center !important;
  }

  /* RECIPE GRID — all-recipes 2-col → 1-col on small phones */
  .recipe-grid[id="recipeGrid"] {
    grid-template-columns: 1fr !important;
  }

  /* MEALS GRID — weekly plan 2-col → 1-col */
  .meals-grid {
    grid-template-columns: 1fr !important;
  }

  /* RECIPE PAGE */
  .recipe-hero h1 {
    font-size: 1.6rem !important;
  }
  .recipe-meta {
    gap: 8px !important;
  }

  /* WHY SECTION */
  .why-section {
    padding: 32px 16px !important;
  }

  /* PLAN BANNER */
  .plan-banner {
    padding: 28px 20px !important;
  }

  /* WEEK TABS */
  .week-tabs {
    gap: 8px !important;
  }
  .week-tab {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
   MOBILE NAV HAMBURGER
   Show a simple menu toggle on mobile
   ============================================================ */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--black);
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .mobile-nav-open .site-nav {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--cream) !important;
    border-bottom: 1.5px solid rgba(3,2,2,0.08) !important;
    padding: 16px 20px !important;
    gap: 4px !important;
    z-index: 99 !important;
    box-shadow: 0 8px 24px rgba(3,2,2,0.08) !important;
  }
  .mobile-nav-open .site-nav a {
    padding: 12px 16px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }
}