/* ============================================
   Rovin's Cake — Main Stylesheet
   ============================================ */

/* ── Base ── */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  background-color: #FAF5ED;
  color: #2B1F14;
  font-family: 'Inter', system-ui, sans-serif;
  margin: 0;
}

/* ── Typography helpers ── */
.font-display { font-family: 'Playfair Display', Georgia, serif; }
.font-accent  { font-family: 'Cormorant Garamond', Georgia, serif; }

/* ── Navigation ── */
#navbar {
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

#navbar.scrolled {
  background: rgba(250, 245, 237, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(43, 31, 20, 0.09);
}

#navbar.scrolled #nav-logo   { color: #2B1F14 !important; }
#navbar.scrolled #nav-tagline { color: #C9907A !important; }
#navbar.scrolled .nav-link    { color: #7A6A60 !important; }
#navbar.scrolled .nav-link:hover { color: #2B1F14 !important; }
#navbar.scrolled .menu-bar    { background: #2B1F14 !important; }

/* Mobile menu — always cream */
#mobile-menu {
  background: #FAF5ED;
  border-color: rgba(43,31,20,0.1);
  box-shadow: 0 8px 24px rgba(43,31,20,0.15);
}
#mobile-menu .mobile-nav-link { color: #2B1F14 !important; }

/* ── Hero ── */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

#hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* background-image set inline in HTML so it can be swapped without touching CSS */
  background-size: cover;
  background-position: center;
}

#hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(43, 31, 20, 0.78) 0%, rgba(43, 31, 20, 0.28) 100%);
}

/* ── Section ornament divider ── */
.ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}

.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}

/* ── Gallery masonry ── */
.gallery-grid {
  columns: 2;
  column-gap: 0.75rem;
}

@media (min-width: 768px)  { .gallery-grid { columns: 3; column-gap: 1rem; } }
@media (min-width: 1280px) { .gallery-grid { columns: 4; column-gap: 1.25rem; } }

.gallery-item {
  break-inside: avoid;
  margin-bottom: 0.75rem;
  overflow: hidden;
  border-radius: 0.75rem;
  position: relative;
  cursor: pointer;
}

@media (min-width: 768px)  { .gallery-item { margin-bottom: 1rem; } }
@media (min-width: 1280px) { .gallery-item { margin-bottom: 1.25rem; } }

.gallery-item img {
  display: block;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-item:hover img {
  transform: scale(1.07);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43, 31, 20, 0.72) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* ── Sugar flowers collage image ── */
#sugar-flowers .rounded-2xl img {
  transition: transform 0.6s ease;
}

#sugar-flowers .rounded-2xl:hover img {
  transform: scale(1.03);
}

/* ── Floating WhatsApp button ── */
#wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#wa-float:hover {
  transform: scale(1.12);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.65);
}

#wa-float svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: #fff;
}

.wa-pulse {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #ff4444;
  border: 2px solid #FAF5ED;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1;    }
  50%       { transform: scale(1.5); opacity: 0.65; }
}

/* ── Scroll fade-up animation ── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: none;
}

/* ── Testimonial cards ── */
.testimonial-card {
  background: #F0E6D2;
  border-radius: 1rem;
  padding: 2rem;
  position: relative;
}

.testimonial-card::before {
  content: '\201C';
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  color: #C9907A;
  line-height: 1;
  position: absolute;
  top: 0.5rem;
  left: 1.25rem;
  opacity: 0.22;
  pointer-events: none;
}

/* ── Specialty card hover ── */
.specialty-card {
  border-radius: 1rem;
  overflow: hidden;
  background: #F0E6D2;
  box-shadow: 0 1px 3px rgba(43,31,20,0.06);
  transition: box-shadow 0.3s ease;
}

.specialty-card:hover {
  box-shadow: 0 12px 40px rgba(43,31,20,0.12);
}

.specialty-card .card-image {
  overflow: hidden;
  height: 15rem;
}

.specialty-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.specialty-card:hover .card-image img {
  transform: scale(1.05);
}

/* ── About owner image ── */
.owner-image-wrap {
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 12px 40px rgba(43,31,20,0.15);
}

.owner-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ── Stat number ── */
.stat-accent { color: #C9907A; }

/* ── Footer ── */
.site-footer {
  background: #1E1509;
  color: #7A6A60;
}

.site-footer .footer-divider {
  border-color: #2a1f12;
}

/* ── Scroll indicator bounce ── */
.scroll-indicator svg {
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}