/* ==========================================================================
   COUPONSSPHERE - Responsive Adaptations & Hamburger Menu
   ========================================================================== */

/* Large Screens / Laptop Breakpoint (max-width: 1200px) */
@media (max-width: 1200px) {
  .nav-menu {
    display: none; /* Hide inline navigation list */
  }

  .mobile-nav-toggle {
    display: flex !important; /* Show hamburger button */
  }

  /* Hamburger Drawer Menu */
  .nav-menu.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-header);
    padding: 20px 24px;
    border-bottom: 3px solid var(--primary);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
    z-index: 999;
    gap: 8px;
    align-items: stretch;
    animation: slideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .nav-menu.mobile-open .nav-link {
    width: 100%;
    padding: 12px 18px;
    font-size: 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-surface);
  }

  .nav-menu.mobile-open .nav-link:hover,
  .nav-menu.mobile-open .nav-link.active {
    background-color: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
  }

  .header-actions .btn-primary {
    display: none; /* Hide duplicate header CTA on hamburger view to avoid clutter */
  }
}

/* Tablets (max-width: 868px) */
@media (max-width: 868px) {
  .hero-main-title {
    font-size: 2.2rem;
  }

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

  .ecosystem-diagram {
    flex-direction: column;
  }

  .eco-arrow {
    transform: rotate(90deg);
  }

  .journey-step-card {
    min-width: 100%;
  }

  .corporate-section-box {
    padding: 2.5rem 1.5rem;
  }

  .cart-drawer {
    width: 100%;
  }
}

/* Mobile Small (max-width: 480px) */
@media (max-width: 480px) {
  .header-container {
    padding: 10px 14px;
  }

  .brand-logo {
    font-size: 1.15rem;
  }

  .logo-badge {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }

  .hero-main-title {
    font-size: 1.75rem;
  }

  .search-main-input {
    font-size: 0.88rem;
    padding-left: 44px;
  }

  .search-btn {
    padding: 0 14px;
    font-size: 0.85rem;
  }

  .section-heading {
    font-size: 1.6rem;
  }

  .cta-banner-box {
    padding: 2.5rem 1.25rem;
  }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}