/* =====================================================
   HAIRBYDAISY — Design Enhancements
   ===================================================== */

/* ── Smooth Scroll ─────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Custom Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #faf9f6; }
::-webkit-scrollbar-thumb { background: #d4af37; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #735c00; }

/* ── Selection ──────────────────────────────────────── */
::selection { background: #ffe088; color: #241a00; }

/* ── Focus ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Nav Scroll Shrink ──────────────────────────────── */
nav {
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}
nav.nav-scrolled {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  box-shadow: 0 4px 24px rgba(115, 92, 0, 0.08) !important;
}

/* ── Page Enter ─────────────────────────────────────── */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter-active {
  animation: pageEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Scroll-triggered reveals ───────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-left  { opacity: 0; transform: translateX(-24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.slide-right { opacity: 0; transform: translateX(24px);  transition: opacity 0.6s ease, transform 0.6s ease; }
.slide-left.visible, .slide-right.visible { opacity: 1; transform: translate(0); }

.scale-in { opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease; }
.scale-in.visible { opacity: 1; transform: scale(1); }

/* ── Stagger helpers ────────────────────────────────── */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }

/* ── Image Reveal ───────────────────────────────────── */
.img-reveal { overflow: hidden; }
.img-reveal img {
  transform: scale(1.05);
  transition: transform 0.8s ease, opacity 0.5s ease;
  opacity: 0;
}
.img-reveal.visible img { transform: scale(1); opacity: 1; }

/* ── Card hover — subtle lift ───────────────────────── */
.card-glow {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-glow:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(115, 92, 0, 0.12);
}

/* ── Primary buttons ────────────────────────────────── */
a.rounded-full, button.rounded-full {
  transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
a.rounded-full:hover, button.rounded-full:hover {
  opacity: 0.92;
  box-shadow: 0 6px 20px rgba(115, 92, 0, 0.2);
}
a.rounded-full:active, button.rounded-full:active {
  transform: scale(0.97);
}

/* ── Nav links ──────────────────────────────────────── */
nav a { transition: color 0.2s ease, opacity 0.2s ease; }

/* ── Footer links ───────────────────────────────────── */
footer a { transition: color 0.2s ease, opacity 0.2s ease; }

/* ── Inset divider ──────────────────────────────────── */
.inset-divider { position: relative; }
.inset-divider::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8%; right: 8%;
  height: 0.5pt;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  opacity: 0.35;
}

/* ── Line inputs ────────────────────────────────────── */
.line-input { transition: border-color 0.25s ease; }
.line-input:focus { border-bottom-color: #735c00 !important; }

/* ── Service buttons (booking page) ────────────────── */
.service-btn {
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.service-btn:hover {
  box-shadow: 0 4px 16px rgba(115, 92, 0, 0.08);
}

/* ── Date / time slot buttons ───────────────────────── */
.time-btn, .date-btn {
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.time-btn:not(.selected):hover,
.date-btn:not(.selected):not(.disabled):hover {
  background: rgba(212, 175, 55, 0.08) !important;
  border-color: rgba(115, 92, 0, 0.35) !important;
}

/* ── Policy cards ───────────────────────────────────── */
.policy-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.policy-card:hover {
  box-shadow: 0 12px 36px rgba(115, 92, 0, 0.1);
}

/* ── Before/after slider handle ─────────────────────── */
.before-after-handle .w-9 {
  transition: transform 0.2s ease;
}
.before-after-handle:hover .w-9 { transform: scale(1.12); }

/* ── Scroll progress ────────────────────────────────── */
#scrollProgress { transition: width 0.1s linear; }

/* ── Parallax image ─────────────────────────────────── */
.parallax-img { will-change: transform; }

/* ── Gold divider ───────────────────────────────────── */
.gold-divider {
  display: block; width: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  margin: 0 auto;
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .section-gap-mobile { padding-top: 60px; padding-bottom: 60px; }

  /* Reduce 120px section rhythm to 64px on mobile */
  .py-section-gap { padding-top: 64px !important; padding-bottom: 64px !important; }
  .pb-section-gap { padding-bottom: 64px !important; }
  .pt-section-gap { padding-top: 64px !important; }
  .mb-section-gap { margin-bottom: 48px !important; }

  /* Footer doesn't need 120px either */
  footer.py-section-gap, footer { padding-top: 48px !important; padding-bottom: 36px !important; }
  footer .mt-16 { margin-top: 32px !important; }

  /* Large buttons — prevent over-wide padding on small screens */
  a.rounded-full[class*="px-12"],
  button.rounded-full[class*="px-12"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* Service cards — tighter padding on mobile */
  .service-card { padding: 20px !important; }

  /* Service page top padding */
  main.pt-32 { padding-top: 100px !important; }
}

/* ── Tablet (768–1023px) ────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .section-gap-tablet { padding-top: 80px; padding-bottom: 80px; }
}

/* ── Ultrawide (1920px+) ────────────────────────────── */
@media (min-width: 1920px) {
  /* Give full-bleed hero sections extra breathing room */
  .hero-ultrawide { min-height: 95vh; }
  /* Slightly expand section vertical rhythm */
  .section-gap-ultrawide { padding-top: 140px; padding-bottom: 140px; }
}

/* ── Viewport-aware text clamping ───────────────────── */
.headline-clamp {
  font-size: clamp(32px, 4.5vw, 72px);
  line-height: 1.15;
}
.subhead-clamp {
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.65;
}

/* ── Fluid container max-width override ─────────────── */
/* At 1440px+ the 1200px cap keeps content readable — intentional */
/* Nav stays full-bleed regardless */
nav { max-width: 100% !important; }

/* ── Apple / iOS safe-area insets ───────────────────── */
/* Prevents content being hidden under the iPhone home indicator bar
   and adds top breathing room below the status bar.              */
body {
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
}
/* Fixed nav already uses top:0; push it down on notched devices */
nav.fixed {
  padding-top: calc(env(safe-area-inset-top) + 0px);
}