/*
 * header.css — Website Marrakech
 * Styles for the Elementor Theme Builder header template.
 * Loaded on ALL pages.
 */

/* ── STICKY NAV */
.wmc-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--wmc-z-nav);
  transition: background var(--wmc-transition-base),
              padding var(--wmc-transition-base),
              box-shadow var(--wmc-transition-base);
  padding: 20px 5vw;
}

.wmc-header.scrolled {
  background: rgba(7, 7, 16, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 5vw;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── LOGO */
.wmc-logo {
  font-family: var(--wmc-font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--wmc-white);
  text-decoration: none;
}

.wmc-logo span { color: var(--wmc-lime); }

/* ── NAV LINKS */
.wmc-nav a {
  color: rgba(245, 245, 240, 0.65);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: color var(--wmc-transition-fast);
}

.wmc-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 100%;
  height: 1.5px;
  background: var(--wmc-lime);
  transition: right var(--wmc-transition-base);
}

.wmc-nav a:hover { color: var(--wmc-white); }
.wmc-nav a:hover::after { right: 0; }

/* ── CTA BUTTON in header */
.wmc-header-cta {
  background: var(--wmc-lime);
  color: var(--wmc-ink) !important;
  padding: 10px 22px;
  border-radius: var(--wmc-radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform var(--wmc-transition-fast), box-shadow var(--wmc-transition-fast);
}

.wmc-header-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--wmc-shadow-lime);
  color: var(--wmc-ink) !important;
}

/* ── MOBILE MENU */
@media (max-width: 768px) {
  .wmc-nav { display: none; }
  .wmc-nav.open { display: flex; flex-direction: column; }
}