/* ============================================================
   MARI'S NAILS — Extra polish & global overrides
   ============================================================ */

/* ── Skip link (accessibility) ─────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 9999;
  background: var(--color-gold);
  color: white;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: top 0.2s;
}

.skip-link:focus { top: var(--space-4); }

/* ── Page transition ─────────────────────────────────────── */
body {
  animation: pageFadeIn 0.4s ease;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Placeholder content styling ─────────────────────────── */
.placeholder-content {
  border: 2px dashed var(--color-nude) !important;
  background: var(--color-ivory) !important;
}

/* ── Image lazy load shimmer ─────────────────────────────── */
img[loading="lazy"] {
  background: linear-gradient(90deg, var(--color-blush) 0%, var(--color-nude) 50%, var(--color-blush) 100%);
  background-size: 200% 100%;
}

/* ── About hero split — immediately visible (above fold, no scroll trigger needed) ── */
/* These elements are in the viewport on load; don't wait for IntersectionObserver */
.about-hero-text [data-animate],
.about-hero-image [data-animate] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── Nav top offset for inner pages ─────────────────────── */
.page-services main,
.page-gallery main,
.page-about main,
.page-contact main,
.page-booking main {
  padding-top: 0;
}

/* ── Gold underline on headings when hovered ─────────────── */
.service-item__title,
.service-card__title,
.about-value-title,
.why-card__title {
  position: relative;
  display: inline-block;
}

/* ── Better tap targets on mobile ──────────────────────────── */
@media (max-width: 640px) {
  .btn {
    min-height: 48px;
    min-width: 48px;
  }

  .filter-btn {
    padding: 0.65rem 1.2rem;
    font-size: var(--fs-xs);
  }

  .calendar-day {
    font-size: var(--fs-xs);
  }
}

/* ── Smooth loading state for gallery ──────────────────────── */
.gallery-masonry-item img {
  transition: opacity 0.4s ease, transform 0.5s ease;
}

/* ── Section label gold shimmer effect ─────────────────────── */
/* Only apply gradient clip on light backgrounds */
.section--blush .section-label,
.section:not(.section--dark):not(.final-cta) .section-label {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* On dark/photo sections keep solid gold */
.section--dark .section-label,
.final-cta .section-label,
.page-hero .page-hero__label {
  background: none;
  -webkit-text-fill-color: var(--color-gold-light);
  color: var(--color-gold-light);
}

.site-footer .footer-col__title {
  background: none;
  -webkit-text-fill-color: var(--color-gold);
  color: var(--color-gold);
}

/* ── Sticky booking button shadow ──────────────────────────── */
.mobile-book-btn .btn {
  box-shadow: 0 8px 32px rgba(198,167,125,.4), 0 2px 8px rgba(0,0,0,.2);
}

/* ── Service card aspect ratio fallback ─────────────────────── */
.service-card__img-wrap {
  background: var(--color-blush);
}

/* ── Better focus ring ─────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Print styles ──────────────────────────────────────────── */
@media print {
  .site-nav,
  .mobile-nav,
  .mobile-book-btn,
  .site-footer,
  .hero__scroll,
  .btn {
    display: none !important;
  }
}