/* ==========================================================================
   Mirage Furniture — Sticky header (.site-header)
   A slim persistent bar that stays hidden over the hero (which has its own
   nav) and fades down into view once the visitor scrolls past the hero, so
   navigation + an Enquire CTA are always reachable. Sits above all sections.
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.85rem var(--nav-pad-x);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-hairline);
  /* Hidden state: lifted up and faded out until revealed by header.js. */
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease, visibility 0.4s;
}
.site-header.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.site-header__logo {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}
.site-header__link {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
  color: var(--color-text-body);
  transition: color 0.3s ease;
}
.site-header__link:hover {
  color: var(--color-text-primary);
}

.site-header__cta {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
  color: var(--color-bg);
  background: var(--color-text-primary);
  border: 1px solid var(--color-text-primary);
  transition: opacity 0.3s ease;
}
.site-header__cta:hover {
  opacity: 0.85;
}

/* On small screens, drop the inline links and keep logo + Enquire only, so
   the bar stays clean and thumb-friendly. */
@media (max-width: 760px) {
  .site-header__nav {
    display: none;
  }
  .site-header {
    justify-content: space-between;
    padding: 0.7rem var(--nav-pad-x);
  }
  /* Tighten the logo so it shares the bar comfortably with the actions. */
  .site-header__logo {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
  }
  /* Keep the Quote button (the priority); enquiry is still covered by the
     floating WhatsApp button and the contact section, so drop the duplicate. */
  .site-header__cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: opacity 0.2s ease, visibility 0.2s;
    transform: none;
  }
}