/* Angel's Beauty Salon - Flagship Editorial Stylesheet (Inspired by The Hair Standard) */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400;1,600&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,400;1,600;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --color-obsidian: #181514;
  --color-espresso: #1E1A18;
  --color-espresso-card: #25201E;
  --color-terracotta: #D94E1F;
  --color-terracotta-dark: #B83E15;
  --color-champagne: #C8A97E;
  --color-champagne-light: #DFC7A4;
  --color-alabaster: #FAF7F2;
  --color-white: #FFFFFF;
  --color-stone: #F3EFEA;
  --color-sand: #E6DFD5;
  --color-charcoal: #181514;
  --color-charcoal-muted: #5C5550;
  --color-border-subtle: #E6DFD5;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-alabaster);
  color: var(--color-charcoal);
}

/* Headings font: High-contrast editorial serif */
h1, h2, h3, .font-serif {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -0.02em;
}

/* Selection highlight */
::selection {
  background-color: var(--color-terracotta);
  color: #FFFFFF;
}

/* Custom subtle scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-alabaster);
}
::-webkit-scrollbar-thumb {
  background: var(--color-terracotta);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-terracotta-dark);
}

/* Editorial Buttons */
.btn-terracotta {
  background-color: var(--color-terracotta);
  color: #FFFFFF;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-terracotta:hover {
  background-color: var(--color-terracotta-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(217, 78, 31, 0.4);
}

/* Dark Sticky Header with Translucent Blur */
.header-dark-glass {
  background: rgba(24, 21, 20, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Hero Video & Warm Dark Left-Aligned Gradient Overlay */
.hero-video-overlay {
  background: linear-gradient(
    90deg,
    rgba(24, 21, 20, 0.92) 0%,
    rgba(24, 21, 20, 0.80) 45%,
    rgba(24, 21, 20, 0.45) 75%,
    rgba(24, 21, 20, 0.30) 100%
  ),
  linear-gradient(
    180deg,
    rgba(24, 21, 20, 0.50) 0%,
    rgba(24, 21, 20, 0.15) 50%,
    rgba(24, 21, 20, 0.85) 100%
  );
}

/* Service Card Hover Effects */
.service-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -12px rgba(24, 21, 20, 0.12);
  border-color: var(--color-champagne);
}
.service-card:hover .service-card-img {
  transform: scale(1.06);
}
.service-card-img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Lookbook Card & Tag Pill */
.lookbook-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.lookbook-card img {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.lookbook-card:hover img {
  transform: scale(1.05);
}
.lookbook-tag {
  background: rgba(24, 21, 20, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 169, 126, 0.35);
}

/* Lightbox Modal */
.lightbox-modal {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.lightbox-modal.active {
  display: flex;
  opacity: 1;
}

/* Booking Modal */
.booking-modal {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.booking-modal.active {
  display: flex;
  opacity: 1;
}

/* FAQ Accordion Smooth Transition */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  opacity: 0;
}
.faq-item.open .faq-answer {
  max-height: 500px;
  opacity: 1;
}
.faq-item.open .faq-icon {
  transform: rotate(180deg);
  color: var(--color-terracotta);
}
.faq-icon {
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Ensure mobile safe padding at bottom for sticky action bar */
@media (max-width: 768px) {
  body {
    padding-bottom: 72px;
  }
}