/* === PRINT STYLES (PDF Export) === */
@media print {
  /* Hide everything except the meal plan content */
  .sidebar, .mobile-topbar, .mobile-sidebar-overlay,
  .btn, .nav-fixed, .nav-fixed *, .pwa-banner, .toast-container,
  #toastContainer, .date-navigator, .totals-bar,
  .grocery-header button, .modal-overlay,
  #upgradePrompt, #softUpgradeBanner, #retentionBanner,
  #zeroPlansBanner, #xpStrip, #badgesCard, #referralBanner,
  .page-header .btn, #generateBtn, #swapAllBtn,
  #printBtn, #shareBtn, .quick-actions-grid,
  [id$="Banner"], .email-popup-overlay { display: none !important; }

  @page {
    size: A4;
    margin: 1.5cm 1.5cm 2cm 1.5cm;
  }

  html, body { background: white !important; color: #111 !important; font-size: 11pt; }
  .app-layout { display: block !important; }
  .main-content { margin: 0 !important; padding: 0 !important; }
  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
    margin-bottom: 0.5cm;
  }
  .meal-card { page-break-inside: avoid; }

  /* Print header */
  body::before {
    content: "Mealzy — AI Meal Plan";
    display: block;
    font-size: 20pt;
    font-weight: 900;
    color: #2e7d4f;
    border-bottom: 2px solid #2e7d4f;
    padding-bottom: 0.3cm;
    margin-bottom: 0.5cm;
  }

  /* Ensure meal grid prints cleanly */
  .meals-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.4cm !important; }
  .meal-card img { display: none !important; } /* skip images for clean PDF */
  .meal-card .meal-image-wrap { display: none !important; }

  /* Grocery list print */
  .grocery-category { break-inside: avoid; }
  .grocery-list-columns { display: block !important; }

  a[href]::after { content: none !important; } /* don't print URLs */
}

/* === UTILITY === */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-4); }
.mt-3 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-4); }
.mb-3 { margin-bottom: var(--space-6); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-2); }
.gap-2 { gap: var(--space-4); }
.w-full { width: 100%; }
.hidden { display: none !important; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.page-content { max-width: 760px; margin: 0 auto; padding: 5rem var(--space-6) 4rem; }

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-forest);
  color: white;
  padding: var(--space-2) var(--space-4);
  z-index: 9999;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { top: 0; }