/* ============================================================
   MUSEF — HEADER
   Requires msf-tokens.css to be loaded first.

   Row 1 : logo · search · socials · account · cart
   Row 2 : all page links
   <=900px : rows merge, hamburger + drawer take over
   ============================================================ */

.msf-header *,
.msf-header *::before,
.msf-header *::after,
.msf-drawer *,
.msf-drawer *::before,
.msf-drawer *::after{ box-sizing:border-box; }

.msf-header{
  position:sticky; top:0; z-index:900;
  background:var(--msf-bg);
  border-bottom:1px solid var(--msf-line);
  font-family:var(--msf-font);
}

/* ============================================================
   ROW 1
   ============================================================ */
.msf-row1{
  position:relative;            /* anchors the mobile search panel */
  height:var(--msf-r1);
  display:flex; align-items:center; gap:20px;
  border-bottom:1px solid var(--msf-line);
}

/* ---------- logo ---------- */
.msf-logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  /* flex-shrink:0 is load-bearing. Without it the logo is squeezed by the
     other flex children and the name wraps one letter per line. */
  flex:0 0 auto; min-width:0; max-width:60%;
}
.msf-logo__mark{
  width:44px; height:44px; border-radius:10px;
  background:var(--msf-accent); color:#fff;
  font-weight:700; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; overflow:hidden;
}
.msf-logo__mark img{ width:100%; height:100%; object-fit:contain; }
.msf-logo__text{
  display:flex; flex-direction:column; line-height:1.1;
  min-width:0; flex:0 1 auto; overflow:hidden;
}
.msf-logo__name{
  display:block;
  font-family:var(--msf-serif);
  font-size:22px; font-weight:700; color:var(--msf-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.msf-logo__name sup{ font-size:.55em; vertical-align:super; }
.msf-logo__tag{
  display:block;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--msf-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- search ---------- */
.msf-search{
  flex:1 1 auto; max-width:420px; margin-inline:auto;
  position:relative; min-width:0;
}
.msf-search__field{
  width:100%; height:42px;
  padding:0 16px 0 42px;
  border:1px solid transparent; border-radius:999px;
  background:var(--msf-field); color:var(--msf-ink);
  font:inherit; font-size:14px; outline:none;
  transition:border-color .18s, background .18s;
}
.msf-search__field::placeholder{ color:var(--msf-muted); }
.msf-search__field:focus{ background:#fff; border-color:var(--msf-accent); }
.msf-search__go{
  position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; padding:0; border:0; background:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--msf-muted); cursor:pointer;
}
.msf-search__go svg{ width:18px; height:18px; }

/* ---------- right cluster ---------- */
.msf-tools{ display:flex; align-items:center; gap:4px; flex:0 0 auto; margin-left:auto; }
.msf-socials{ display:flex; align-items:center; gap:2px; }
.msf-divider{
  flex:0 0 auto; width:1px; height:24px;
  background:var(--msf-line); margin-inline:10px;
}

.msf-icon{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--msf-ink); background:transparent;
  border:0; padding:0; cursor:pointer;
  text-decoration:none; position:relative; flex:0 0 auto;
  transition:background .18s, color .18s;
  -webkit-tap-highlight-color:transparent;
}
.msf-icon:hover{ background:var(--msf-hover); color:var(--msf-accent); }
.msf-icon svg{ width:22px; height:22px; display:block; }

.msf-icon--social{ width:34px; height:34px; color:var(--msf-muted); }
.msf-icon--social svg{ width:18px; height:18px; }
.msf-icon--social:hover{ color:var(--msf-accent); background:var(--msf-hover); }

.msf-wa{ background:var(--msf-wa); color:#fff; }
.msf-wa:hover{ background:var(--msf-wa); color:#fff; filter:brightness(.92); }

/* cart badge — the only text on the cart control */
.msf-cart__count{
  position:absolute; top:0; right:0;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--msf-accent); color:#fff;
  font-size:11px; font-weight:600; line-height:18px; text-align:center;
  border:2px solid var(--msf-bg); pointer-events:none;
}
.msf-cart__count[data-count="0"]{ display:none; }

/* mobile-only controls — hidden until their breakpoint */
.msf-burger,
.msf-search-toggle{ display:none; }

/* ============================================================
   ROW 2 — page links
   ============================================================ */
.msf-row2{ background:var(--msf-row2-bg); }
.msf-row2 .msf-wrap{
  height:var(--msf-r2);
  display:flex; align-items:center; justify-content:center;
}
.msf-nav{ max-width:100%; }
.msf-nav ul{
  display:flex; align-items:center; gap:clamp(18px,2.4vw,38px);
  margin:0; padding:0; list-style:none;
}
.msf-nav a{
  position:relative; display:block; padding:6px 0;
  text-decoration:none; color:var(--msf-ink);
  font-size:15px; font-weight:500; white-space:nowrap;
  transition:color .18s;
}
.msf-nav a:hover,
.msf-nav .current-menu-item > a,
.msf-nav a.is-active{ color:var(--msf-accent); }
.msf-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--msf-accent); transform:scaleX(0);
  transform-origin:left; transition:transform .2s;
}
.msf-nav a:hover::after,
.msf-nav .current-menu-item > a::after,
.msf-nav a.is-active::after{ transform:scaleX(1); }

/* ============================================================
   DRAWER + OVERLAY
   ============================================================ */
.msf-drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:min(84vw,330px);
  height:100dvh;                  /* dvh avoids the iOS toolbar gap */
  background:var(--msf-bg); z-index:1000;
  transform:translateX(100%); transition:transform .28s ease;
  display:flex; flex-direction:column;
  padding:16px 22px 28px;
  overflow-y:auto; overscroll-behavior:contain;
  box-shadow:-8px 0 28px rgba(0,0,0,.12);
  font-family:var(--msf-font);
  visibility:hidden;
}
.msf-drawer.is-open{ transform:translateX(0); visibility:visible; }
.msf-drawer__top{ display:flex; justify-content:flex-end; margin-bottom:6px; }
.msf-drawer ul{ list-style:none; margin:0; padding:0; }
.msf-drawer li + li{ border-top:1px solid var(--msf-line); }
.msf-drawer ul a{
  display:flex; align-items:center; min-height:var(--msf-tap);
  padding:12px 2px;
  color:var(--msf-ink); text-decoration:none;
  font-size:17px; font-weight:500;
}
.msf-drawer ul a:hover,
.msf-drawer .current-menu-item > a,
.msf-drawer ul a.is-active{ color:var(--msf-accent); }

.msf-drawer__socials{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--msf-line);
}
.msf-drawer__socials .msf-icon--social{ width:var(--msf-tap); height:var(--msf-tap); }
.msf-drawer__socials .msf-icon--social svg{ width:20px; height:20px; }

.msf-overlay{
  position:fixed; inset:0; z-index:999;
  background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden;
  transition:opacity .28s, visibility .28s;
}
.msf-overlay.is-open{ opacity:1; visibility:visible; }

/* iOS-safe scroll lock — JS sets top to the saved scroll offset */
body.msf-locked{
  position:fixed; left:0; right:0; width:100%; overflow:hidden;
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* Nav row gets tight before it collapses — let it scroll rather than wrap */
@media (max-width:1180px){
  .msf-search{ max-width:300px; }
  .msf-nav a{ font-size:14px; }
  .msf-row2 .msf-wrap{ justify-content:flex-start; }
  .msf-nav{
    width:100%; overflow-x:auto;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .msf-nav::-webkit-scrollbar{ display:none; }
  .msf-nav ul{ justify-content:center; min-width:max-content; margin-inline:auto; }
}

/* ---- mobile: single row, drawer, collapsible search ---- */
@media (max-width:900px){
  .msf-row1{ height:var(--msf-r1-sm); gap:8px; }
  .msf-row2{ display:none; }
  .msf-socials,
  .msf-divider{ display:none; }
  .msf-burger,
  .msf-search-toggle{ display:flex; }

  .msf-search{
    position:absolute; left:0; right:0; top:100%;
    max-width:none; margin:0;
    padding:10px var(--msf-gut-sm);
    background:var(--msf-bg);
    border-bottom:1px solid var(--msf-line);
    box-shadow:0 8px 16px rgba(0,0,0,.06);
    display:none; z-index:2;
  }
  .msf-search.is-open{ display:block; }
  .msf-search__go{ left:calc(var(--msf-gut-sm) + 6px); }
}

@media (max-width:600px){
  .msf-logo__mark{ width:36px; height:36px; font-size:20px; border-radius:8px; }
  .msf-logo__name{ font-size:18px; }
  .msf-logo__tag{ font-size:8px; letter-spacing:.1em; }
  .msf-icon{ width:38px; height:38px; }
  .msf-icon svg{ width:20px; height:20px; }
  .msf-tools{ gap:0; }
}

@media (max-width:360px){
  .msf-logo__tag{ display:none; }
}

/* Desktop safety: the drawer can never be left open above 900px */
@media (min-width:901px){
  .msf-drawer,
  .msf-overlay{ display:none !important; }
  .msf-search{ display:block !important; }
}

/* ============================================================
   A11Y
   ============================================================ */
.msf-icon:focus-visible,
.msf-nav a:focus-visible,
.msf-drawer a:focus-visible,
.msf-search__field:focus-visible{
  outline:2px solid var(--msf-accent);
  outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  .msf-drawer,.msf-overlay,.msf-nav a::after,.msf-icon{ transition:none; }
}


/* ============================================================
   NO-JAVASCRIPT FALLBACK
   The scripts put `msf-js` on <html>. Until that happens the
   hamburger is a dead control, so the nav row must stay visible
   rather than leaving a phone with no navigation at all.
   ============================================================ */
@media (max-width:900px){
  html:not(.msf-js) .msf-row2{ display:block; }
  html:not(.msf-js) .msf-burger,
  html:not(.msf-js) .msf-search-toggle{ display:none; }
}

/* ============================================================
   THEME GUARDS
   WordPress themes routinely set word-break, white-space or
   list-style on links inside the header, at a specificity that
   beats a single class. These selectors are deliberately more
   specific so the theme cannot win.

   This is what made the brand name wrap one letter per line on
   the live site: the theme overrode white-space on header links.
   ============================================================ */
.msf-header .msf-logo{ flex:0 0 auto; }
.msf-header .msf-logo .msf-logo__name,
.msf-header .msf-logo .msf-logo__tag,
.msf-header .msf-nav a,
.msf-drawer .msf-drawer__socials a{
  white-space:nowrap;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}
.msf-header .msf-nav ul,
.msf-drawer ul{ list-style:none; margin:0; padding:0; }
.msf-header .msf-icon svg,
.msf-drawer .msf-icon svg{ max-width:none; height:auto; }