/* ============================================================
   FAHIM ❤ HIBA — Responsive Stylesheet
   ============================================================ */

/* ── Large Desktop (> 1400px) ── */
@media (min-width: 1400px) {
  .gallery-grid { columns: 4; }
  .countdown-grid { gap: var(--space-8); }
  .flip-card { width: 140px; height: 160px; }
  .flip-top .digit, .flip-bottom .digit { font-size: 6rem; line-height: 160px; height: 160px; }
}

/* ── Desktop (1200px – 1399px) ── */
@media (max-width: 1200px) {
  .nav-links a { font-size: 0.7rem; padding: var(--space-2); }
}

/* ── Tablet Landscape (992px – 1199px) ── */
@media (max-width: 1100px) {
  #navbar { width: calc(100% - 2rem); }

  .nav-links {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }

  .timeline::before { left: 30px; }
  .timeline-item,
  .timeline-item:nth-child(even) {
    flex-direction: column;
    padding-left: 80px;
  }
  .timeline-card { width: 100%; }
  .timeline-dot {
    left: 30px;
    top: 0;
    transform: translateX(-50%);
    position: absolute;
  }

  .gallery-grid { columns: 2; }

  .venue-info {
    grid-template-columns: 1fr;
  }
  .venue-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .form-row { grid-template-columns: 1fr; }
}

/* ── Tablet Portrait (768px – 991px) ── */
@media (max-width: 768px) {
  :root {
    --section-y: 4rem;
  }

  .section-title { font-size: var(--text-3xl); }

  .countdown-grid { gap: var(--space-3); }
  .flip-card { width: 80px; height: 100px; }
  .flip-top .digit, .flip-bottom .digit {
    font-size: 3.2rem;
    line-height: 100px;
    height: 100px;
  }
  .flip-card.changing .flip-top .digit {
    animation: none;
    transform: translateY(50%);
  }
  .flip-card.changing .flip-bottom .digit {
    animation: none;
    transform: translateY(-50%);
  }

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

  .rsvp-form-wrapper { padding: var(--space-8) var(--space-6); }

  .invitation-scene { width: 290px; }
  .envelope, .envelope-body { width: 290px; }
  .invitation-card { width: 240px; }

  .details-grid { grid-template-columns: 1fr; max-width: 420px; }

  .blessings-wall {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .blessings-name-row { flex-direction: column; }

  .calendar-grid { padding: var(--space-4); }
  .calendar-day { font-size: var(--text-xs); }
  .calendar-day.highlighted { font-size: var(--text-xl); }
}

/* ── Mobile (< 580px) ── */
@media (max-width: 580px) {
  #navbar { top: 0; width: 100%; border-radius: 0; }
  .nav-inner { padding: var(--space-2) var(--space-4); border-radius: 0; border-top: none; border-left: none; border-right: none; }

  .hero-bismillah { font-size: 1.2rem; }
  .hero-ornament { display: none; }
  .hero-tagline { letter-spacing: 0.25em; font-size: 0.65rem; }
  .hero-invite-text { font-size: 1.1rem; }
  .hero-date-badge { font-size: 0.6rem; letter-spacing: 0.25em; padding: var(--space-2) var(--space-5); }

  .timeline-item, .timeline-item:nth-child(even) {
    padding-left: 60px;
  }
  .timeline::before { left: 20px; }
  .timeline-dot { left: 20px; width: 46px; height: 46px; font-size: 1.1rem; }

  .gallery-grid { columns: 2; gap: var(--space-2); }
  .gallery-grid .gallery-item { margin-bottom: var(--space-2); }

  .countdown-grid { gap: var(--space-2); }
  .flip-card { width: 70px; height: 88px; }
  .flip-top .digit, .flip-bottom .digit {
    font-size: 2.8rem;
    line-height: 88px;
    height: 88px;
  }
  .countdown-sep { font-size: 2rem; margin-bottom: 24px; }
  .countdown-label { font-size: 0.6rem; letter-spacing: 0.2em; }

  .dress-grid { gap: var(--space-3); }
  .dress-item { min-width: 120px; padding: var(--space-4); }

  .floating-btns { right: var(--space-3); bottom: var(--space-3); gap: var(--space-2); }
  .floating-btn { width: 44px; height: 44px; font-size: 1rem; }

  .venue-info { padding: var(--space-8) var(--space-6); }

  .parent-card { padding: var(--space-10) var(--space-6); }

  .rsvp-form-wrapper { padding: var(--space-6) var(--space-5); }
  .form-row { grid-template-columns: 1fr; }

  .qr-card { padding: var(--space-6); }

  .footer-logo { font-size: 2.8rem; }

  .quote-arabic { font-size: 1.3rem; }
  .quote-english { font-size: var(--text-md); }
}

/* ── Small Mobile (< 360px) ── */
@media (max-width: 360px) {
  .container { padding: 0 var(--space-4); }
  .gallery-grid { columns: 1; }
  .attend-toggle { flex-direction: column; }
  .countdown-grid { gap: var(--space-1); }
  .flip-card { width: 60px; height: 76px; }
  .flip-top, .flip-bottom { font-size: 2.4rem; }
}

/* ── Touch devices: remove hover effects ── */
@media (hover: none) {
  body { cursor: auto; }
  #cursor-dot, #cursor-ring, #cursor-heart { display: none; }
  button, a { cursor: pointer; }
}

/* ── Dark theme media query (auto) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:    #1a0f0d;
    --bg-secondary:  var(--dark);
    --bg-accent:     var(--dark-mid);
    --text-primary:  var(--cream-light);
    --text-secondary: var(--gold-light);
    --text-accent:   var(--gold);
    --text-muted:    rgba(248, 244, 239, 0.55);
    --border-color:  rgba(212, 175, 55, 0.15);
    --card-bg:       rgba(36, 26, 24, 0.7);
    --glass-bg:      rgba(36, 26, 24, 0.55);
    --glass-bg-md:   rgba(36, 26, 24, 0.7);
    --glass-bg-lg:   rgba(36, 26, 24, 0.85);
    --glass-border:  rgba(212, 175, 55, 0.15);
  }
}

/* ── Print ── */
@media print {
  #loader, #navbar, .floating-btns, .petals-container,
  #hero-canvas, #cursor-dot, #cursor-ring { display: none !important; }
  section { padding: 2rem 0; }
  * { animation: none !important; }
}