/* ============================================================
   MOBILE RESPONSIVE FIXES
   Loaded last on every page. Adds the missing mobile menu
   (hamburger + slide-down panel) and tightens up small-screen
   spacing/typography. Pure additions — nothing here removes or
   rewrites the theme's original desktop styles.
   ============================================================ */

/* Hamburger button: hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--offwhite, #f5f1e8);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#mainNav.mobile-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mainNav.mobile-open .nav-toggle span:nth-child(2) { opacity: 0; }
#mainNav.mobile-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  /* The nav menu becomes a full-width dropdown panel, toggled by JS */
  #mainNav .nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(10,10,10,0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border, rgba(212,175,55,0.08));
    padding: 8px 6vw 18px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
  }
  #mainNav .nav-links li { width: 100%; }
  #mainNav .nav-links a {
    display: block;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(212,175,55,0.08);
    font-size: 12px;
  }
  #mainNav.mobile-open .nav-links {
    max-height: 80vh;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
  }

  .nav-right { gap: 0.6rem !important; align-items: center; }
  body.mobile-nav-open { overflow: hidden; }

  /* ── Mobile Search: collapse to icon-only, expand on tap ── */
  .nav-search-wrap {
    position: relative;
  }

  /* Hide the text input on mobile by default */
  .nav-search-input {
    width: 0 !important;
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease !important;
  }

  /* Show input when search is open */
  .nav-search-wrap.search-open .nav-search-input {
    width: 44vw !important;
    max-width: 200px !important;
    padding: 7px 32px 7px 10px !important;
    border-color: rgba(255,255,255,0.15) !important;
    background: rgba(255,255,255,0.07) !important;
    opacity: 1;
    pointer-events: auto;
  }

  /* Make search icon clickable/tappable */
  .nav-search-icon {
    pointer-events: auto !important;
    cursor: pointer;
    color: rgba(255,255,255,0.7) !important;
    padding: 6px;
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-search-icon:hover,
  .nav-search-icon:active {
    color: var(--luxury-gold, #d4af37) !important;
    background: rgba(212,175,55,0.08);
  }

  /* Search results dropdown: full-width on mobile */
  .nav-search-results {
    width: 90vw !important;
    max-width: 340px !important;
    right: -5vw !important;
    left: auto !important;
  }

  /* Hide CTA button text on very small screens to save space */
  .nav-cta {
    display: none !important;
  }
}

/* ── Small-screen polish (phones) ─────────────────────────── */
@media (max-width: 480px) {
  nav { padding: 0 5vw; height: 64px; }
  #mainNav .nav-links { top: 64px; }
  .nav-logo { font-size: 18px; }

  /* Search stays icon-only on small phones too */
  .nav-search-wrap.search-open .nav-search-input {
    width: 38vw !important;
    max-width: 160px !important;
  }

  .nav-search-results { width: 85vw !important; max-width: 300px !important; right: -5vw !important; }

  section, .section, [class$="-hero"], [class$="-section"] { padding-left: 6vw; padding-right: 6vw; }

  .hero-headline { font-size: clamp(40px, 13vw, 60px) !important; line-height: 1.05 !important; }
  h1 { font-size: clamp(34px, 10vw, 48px); }
  h2 { font-size: clamp(26px, 8vw, 38px); }

  .footer-top { gap: 32px !important; }

  .testimonial-nav { justify-content: center; }
  .why-awards { flex-wrap: wrap; gap: 1.5rem !important; }

  table { display: block; overflow-x: auto; white-space: nowrap; }
  img { max-width: 100%; height: auto; }
}

/* ── Fix "Story" section fully on mobile ──────────────────── */
@media (max-width: 768px) {
  .story { padding: 70px 6vw !important; }
  .story-grid { gap: 40px !important; }
  .story-content { padding: 0 !important; }

  .story-headline { font-size: clamp(28px, 8vw, 38px) !important; margin-bottom: 1.25rem !important; }

  .story-body,
  .story-body.reveal,
  .story-body.reveal-delay-2 {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal !important;
    box-sizing: border-box;
  }

  .story-rule { margin: 1.5rem 0 !important; }

  .story-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
  }
  .stat-num { font-size: 30px !important; }
  .stat-label { font-size: 8.5px !important; letter-spacing: 0.12em !important; }

  .img-placeholder,
  .story-image-wrap { aspect-ratio: 3/4; }
  .story-image-caption { padding: 1.25rem !important; font-size: 11.5px !important; }
}

@media (max-width: 420px) {
  .story-stats { grid-template-columns: 1fr 1fr 1fr !important; gap: 0.6rem !important; }
  .stat-num { font-size: 24px !important; }
  .stat-label { font-size: 7.5px !important; }
}
@media (max-width: 768px) {
  .img-placeholder {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .story-image,
  .img-placeholder img {
    object-position: center center !important;
    margin: 0 auto;
  }
  .story-image-wrap { text-align: center; }
}

@media (max-width: 600px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .contact-info-sidebar,
  .faq-sidebar,
  .filter-sidebar { grid-template-columns: 1fr !important; }
}

/* ── Fix "Limited Banner" section on mobile ───────────────── */
@media (max-width: 768px) {
  .limited-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    min-height: auto !important;
    padding: 70px 6vw 50px !important;
    text-align: left;
    overflow: hidden !important;
  }
  .banner-content { max-width: 100% !important; }
  .banner-headline { font-size: clamp(42px, 13vw, 72px) !important; }
  .banner-meta { flex-wrap: wrap !important; gap: 1.5rem 2.5rem !important; }
  .banner-bg-year { font-size: clamp(120px, 40vw, 220px) !important; opacity: 0.04; }

  .banner-bottle-img {
    display: block !important;
    position: static !important;
    margin: 32px auto 0 !important;
    width: 55% !important;
    max-width: 220px !important;
  }
}

@media (max-width: 480px) {
  .banner-release-tag { flex-wrap: wrap; gap: 8px !important; }
  .banner-headline { font-size: clamp(36px, 12vw, 56px) !important; }
  .banner-meta { gap: 1rem 1.5rem !important; }
  .banner-bottle-img { width: 65% !important; max-width: 180px !important; }
}