/* ==========================================================================
   Orbis Salon customer website — PUBLISHED navigation & mega menu (WS-C).
   Scoped to .site-nav-published / .site-nav-mega / .nav-* so it never touches
   the automatic fallback nav. Pure CSS, theme-variable driven (no hardcoded
   palette): nav text/links inherit the theme header vars (--text/--primary),
   panels use --white/--border/--shadow so every theme + tenant colour applies.
   ========================================================================== */

/* ---------- Desktop published nav (≥1024px) ---------- */
.site-nav-published .site-nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav-published .site-nav-mobile { display: none; }

.site-nav-published .nav-link,
.site-nav-published .nav-parent-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 13px;
  font-size: .93rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: color .15s, background .15s;
}
.site-nav-published .nav-link:hover,
.site-nav-published .nav-parent-toggle:hover,
.site-nav-published .nav-parent-toggle:focus-visible,
.site-nav-published .nav-link:focus-visible {
  color: var(--primary);
  background: rgba(0, 0, 0, 0.045);
  outline: none;
}
.site-nav-published .nav-parent-toggle:focus-visible,
.site-nav-published .nav-link:focus-visible {
  box-shadow: 0 0 0 2px var(--primary);
}
.site-nav-published .nav-item-btn { white-space: nowrap; }
.site-nav-published .nav-caret { transition: transform .18s; }
.site-nav-published .nav-has-children[data-open="true"] .nav-caret,
.site-nav-published .nav-has-children:hover .nav-caret { transform: rotate(180deg); }

.site-nav-published .nav-has-children,
.site-nav-published .nav-item-single { position: relative; list-style: none; }
.site-nav-published .nav-has-mega { position: static; }

/* Dropdown + mega panels: hidden by default, shown on hover/focus/open. */
.site-nav-dropdown,
.site-nav-mega {
  position: absolute;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
  background: var(--white, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.14));
}
.site-nav-dropdown {
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 8px;
  list-style: none;
  margin: 6px 0 0;
}
.site-nav-mega {
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  padding: 22px;
}
.nav-has-children:hover > .site-nav-dropdown,
.nav-has-children:focus-within > .site-nav-dropdown,
.nav-has-children[data-open="true"] > .site-nav-dropdown,
.nav-has-mega:hover > .site-nav-mega,
.nav-has-mega:focus-within > .site-nav-mega,
.nav-has-mega[data-open="true"] > .site-nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav-dropdown .nav-dropdown-item { list-style: none; }
.site-nav-dropdown .nav-link,
.site-nav-mega .nav-link {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  width: 100%;
}
.nav-desc { display: block; font-size: .78rem; color: var(--muted, #6b7280); padding: 0 12px 4px; }
.nav-heading {
  display: block;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dark, #111);
  padding: 8px 12px 4px;
}
.nav-divider { border: 0; border-top: 1px solid var(--border, #e5e7eb); margin: 6px 8px; }

/* Mega columns grid. */
.site-nav-mega-inner {
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr));
  gap: 26px;
  max-width: var(--container, 1200px);
  margin: 0 auto;
}
.site-nav-mega[data-cols="2"] { --mega-cols: 2; }
.site-nav-mega[data-cols="3"] { --mega-cols: 3; }
.site-nav-mega[data-cols="4"] { --mega-cols: 4; }
.site-nav-mega[data-cols="5"] { --mega-cols: 5; }
.site-nav-mega[data-cols="6"] { --mega-cols: 6; }
.site-nav-mega-inner { grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr)); }
.site-nav-mega-col { min-width: 0; }
.nav-mega-item { margin-bottom: 2px; }

/* Featured card inside a mega column. */
.nav-featured-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--light, #f7f7f9);
}
.nav-featured-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}
.nav-featured-heading { font-weight: 700; color: var(--dark, #111); }
.nav-featured-desc { font-size: .84rem; color: var(--muted, #6b7280); }
.nav-featured-btn { align-self: flex-start; margin-top: 4px; }

/* ---------- Mobile published nav (≤1023px) ---------- */
@media (max-width: 1023px) {
  .site-nav-published .site-nav-list { display: none; }
  .site-nav-published .nav-cta { display: none; }
  .site-nav-published .site-nav-mobile { display: block; }
}

.site-nav-mobile .nav-m-single > a,
.site-nav-mobile .nav-m-toggle,
.site-nav-mobile .nav-m-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px; /* ≥44px tap targets */
  padding: 12px 4px;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border, #eee);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.site-nav-mobile .nav-m-btn { justify-content: center; margin: 12px 0; }
.site-nav-mobile .nav-m-caret { transition: transform .18s; flex: none; }
.site-nav-mobile .nav-m-toggle[aria-expanded="true"] .nav-m-caret { transform: rotate(180deg); }
.site-nav-mobile .nav-m-panel { padding-left: 12px; }
.site-nav-mobile .nav-m-panel[hidden] { display: none; }
.site-nav-mobile .nav-m-col { padding: 4px 0; }
.site-nav-mobile .nav-m-heading {
  display: block;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted, #6b7280);
  padding: 10px 4px 2px;
}
.site-nav-mobile .nav-m-link { min-height: 44px; padding: 10px 4px; font-size: .95rem; }
.site-nav-mobile .nav-m-divider { border: 0; border-top: 1px solid var(--border, #eee); margin: 6px 0; }
.site-nav-mobile .nav-m-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  margin: 8px 0;
  border-radius: 10px;
  background: var(--light, #f7f7f9);
}
.site-nav-mobile .nav-m-card-heading { font-weight: 700; }
.site-nav-mobile .nav-m-card-desc { font-size: .86rem; color: var(--muted, #6b7280); }

/* Body scroll-lock while the mobile drawer is open (also set inline by JS). */
body.nav-drawer-open { overflow: hidden; }

/* Reduced motion: drop transitions (brief §30). */
@media (prefers-reduced-motion: reduce) {
  .site-nav-dropdown,
  .site-nav-mega,
  .nav-caret,
  .nav-m-caret { transition: none !important; }
}

/* Utility bar published variant reuses the existing .top-bar styles; nothing
   extra needed beyond what base.css provides. */