/* ============================================================
   DR. KIZA SUNGURA — RESPONSIVE OVERRIDES
   Mobile-first fixes: Nav, Hamburger, Grids, Typography, Spacing
   Breakpoints: 480px · 640px · 768px · 1024px · 1280px
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   1. NAV — Mobile layout tightening
   ══════════════════════════════════════════════════════════ */

/* Hide WhatsApp nav button on small screens to save space */
@media (max-width: 767px) {
  .nav__inner {
    gap: var(--space-3);
    padding-inline: var(--space-4);
  }

  /* Hide the WhatsApp "Piga Simu" button in the nav on mobile
     (the floating WA button + footer WA cover this) */
  .btn--whatsapp {
    display: none;
  }

  /* Make lang toggle a bit smaller */
  .lang-toggle__btn {
    padding: var(--space-1) var(--space-2);
    font-size: 0.65rem;
  }
}

/* ── Hamburger animated icon (X transform) ── */
.nav__hamburger span {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity   0.25s ease;
}

.nav__hamburger--open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__hamburger--open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__hamburger--open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ── Mobile Menu — stagger for 8 links (added booking) ── */
.nav__mobile--open .nav__mobile-link:nth-child(1) { transition-delay: 60ms;  }
.nav__mobile--open .nav__mobile-link:nth-child(2) { transition-delay: 110ms; }
.nav__mobile--open .nav__mobile-link:nth-child(3) { transition-delay: 160ms; }
.nav__mobile--open .nav__mobile-link:nth-child(4) { transition-delay: 210ms; }
.nav__mobile--open .nav__mobile-link:nth-child(5) { transition-delay: 260ms; }
.nav__mobile--open .nav__mobile-link:nth-child(6) { transition-delay: 310ms; }
.nav__mobile--open .nav__mobile-link:nth-child(7) { transition-delay: 360ms; }
.nav__mobile--open .nav__mobile-link:nth-child(8) { transition-delay: 410ms; }

/* Highlighted link (Booking) styling in mobile menu */
.nav__mobile-link.nav__link--highlight {
  color: var(--color-emerald) !important;
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-6);
  margin-top: var(--space-2);
  background: rgba(16, 185, 129, 0.07);
}

/* ── Nav highlight pill (desktop) ── */
.nav__link--highlight {
  color: var(--color-emerald) !important;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-pill);
  padding-inline: var(--space-4) !important;
  background: rgba(16, 185, 129, 0.07);
}
.nav__link--highlight::after { display: none; }
.nav__link--highlight:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--color-emerald-light) !important;
}


/* ══════════════════════════════════════════════════════════
   2. HERO SECTION
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Push hero text up so it doesn't overlap the fixed nav */
  .hero {
    padding-top: 80px;
  }

  /* Tighten hero text on small screens */
  .hero__eyebrow {
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
  }

  .hero__title {
    font-size: clamp(2.2rem, 10vw, 3.5rem) !important;
    line-height: 1.15;
  }

  .hero__sub {
    font-size: var(--text-sm);
    max-width: 90%;
  }

  /* Stack hero CTA buttons vertically */
  .hero__cta {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .hero__cta .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Scroll-indicator hidden on tiny screens */
  .hero__scroll-indicator {
    display: none;
  }
}


/* ══════════════════════════════════════════════════════════
   3. SECTION SPACING
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .section {
    padding-block: var(--space-12) var(--space-12);
  }

  .section__header {
    margin-bottom: var(--space-8);
  }

  .section__title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }
}


/* ══════════════════════════════════════════════════════════
   4. GRID LAYOUTS — force single column on mobile
   ══════════════════════════════════════════════════════════ */

/* Treatment grid */
@media (max-width: 639px) {
  .treatments-grid,
  .services-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .treatments-grid,
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Stats strip */
@media (max-width: 639px) {
  .trust-strip__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .stat-number {
    font-size: var(--text-2xl);
  }
}

/* About / two-column prose sections */
@media (max-width: 767px) {
  .about-grid,
  .two-col-grid,
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}

/* Testimonials carousel */
@media (max-width: 767px) {
  .carousel__slide {
    min-width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════
   5. CARDS — padding and font adjustments on mobile
   ══════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  .treatment-card,
  .service-card,
  .pricing-card,
  .card-glass {
    padding: var(--space-6);
  }

  .pricing-card--recommended {
    transform: none; /* remove scale on mobile — it clips */
  }

  /* Pricing grid: single column on phones */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4);
  }
}


/* ══════════════════════════════════════════════════════════
   6. PAGE HERO (inner pages)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .page-hero {
    padding-block: calc(80px + var(--space-10)) var(--space-8);
    text-align: center;
  }

  .page-hero--lg { padding-top: calc(80px + var(--space-12)); }
  .page-hero--md { padding-top: calc(80px + var(--space-10)); }
  .page-hero--sm { padding-top: calc(80px + var(--space-8)); }

  .page-hero__eyebrow {
    justify-content: center;
  }
}


/* ══════════════════════════════════════════════════════════
   7. BOOKING FORM
   ══════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  .booking-form {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }

  /* All groups full width on mobile */
  .form-group {
    grid-column: 1 / -1;
  }

  .booking-form__submit {
    flex-direction: column;
  }

  .booking-form__submit .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ══════════════════════════════════════════════════════════
   8. BLOG GRID
   ══════════════════════════════════════════════════════════ */

@media (max-width: 479px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-card__img,
  .blog-card__img-placeholder {
    height: 180px;
  }
}


/* ══════════════════════════════════════════════════════════
   9. FOOTER
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-8);
  }

  .footer__brand {
    text-align: center;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__tagline {
    max-width: 40ch;
    margin-inline: auto;
  }
}

@media (max-width: 639px) {
  .footer {
    padding-block: var(--space-12) var(--space-8);
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }
}


/* ══════════════════════════════════════════════════════════
   10. CTA BANNER
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .cta-banner__btns {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .cta-banner__btns .btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}


/* ══════════════════════════════════════════════════════════
   11. CONTACT / WASILIANA PAGE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-8);
  }
}


/* ══════════════════════════════════════════════════════════
   12. GALLERY — picha.php
   ══════════════════════════════════════════════════════════ */

@media (max-width: 479px) {
  .gallery-grid,
  [class*="gallery"] .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3);
  }
}


/* ══════════════════════════════════════════════════════════
   13. FLOATING WHATSAPP — move up on mobile (above browser chrome)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  .wa-float {
    bottom: var(--space-6);
    right: var(--space-4);
    width: 52px;
    height: 52px;
  }
}


/* ══════════════════════════════════════════════════════════
   14. TABLET (768–1023px) — two-column where needed
   ══════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Slightly reduce nav gap so items don't overflow */
  .nav__inner {
    gap: var(--space-4);
  }

  /* 2-col treatment grid on tablets */
  .treatments-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing: stack in 2+1 on tablet */
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Keep the recommended card unscaled on tablet */
  .pricing-card--recommended {
    transform: none;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ══════════════════════════════════════════════════════════
   15. TOUCH TARGETS — ensure minimum 44×44px on all interactive
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .nav__mobile-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-block: var(--space-2);
  }

  .footer__link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}


/* ══════════════════════════════════════════════════════════
   16. SCROLL PROGRESS BAR
   ══════════════════════════════════════════════════════════ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-emerald), var(--color-copper));
  z-index: 1100;
  transition: width 0.1s linear;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════
   17. SAFE AREA INSETS (notch phones)
   ══════════════════════════════════════════════════════════ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .nav__mobile {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .wa-float {
    bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  }
}