/* =============================================================
   FALMIS — NAVIGATION
   Requires falmis-tokens.css

   Three separate things:
     .fm-nav      desktop site header  (WordPress)
     .fm-drawer   the same links on a phone, as a sheet
     .fm-tabbar   bottom bar for the app only, four destinations

   Icon convention set here, ahead of the icon system step:
   inline SVG, currentColor, 1.5px stroke, 24px box, round caps
   and joins, no fill.
   ============================================================= */

/* =============================================================
   DESKTOP HEADER
   ============================================================= */

.fm-nav{
  position:sticky;
  inset-block-start:0;
  z-index:var(--fm-z-sticky);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--fm-dur-base) var(--fm-ease-out),
             border-color var(--fm-dur-base) var(--fm-ease-out),
             backdrop-filter var(--fm-dur-base) var(--fm-ease-out);
}

/* the header only becomes glass once the page has moved under it */
.fm-nav.is-stuck{
  background:var(--fm-glass-1-bg);
  border-bottom-color:var(--fm-border-subtle);
  -webkit-backdrop-filter:blur(var(--fm-glass-blur-md)) saturate(140%);
  backdrop-filter:blur(var(--fm-glass-blur-md)) saturate(140%);
}

.fm-nav__inner{
  max-width:var(--fm-container-lg);
  margin-inline:auto;
  padding-inline:var(--fm-gutter);
  height:72px;
  display:flex;
  align-items:center;
  gap:var(--fm-space-6);
}

/* ---------- logo ---------- */

.fm-logo{
  display:inline-flex;
  align-items:center;
  gap:var(--fm-space-3);
  text-decoration:none;
  color:var(--fm-text-primary);
  flex:none;
}
.fm-logo__mark{ width:32px; height:32px; flex:none; display:block; }
.fm-logo__word{
  font-size:var(--fm-text-lg);
  font-weight:var(--fm-weight-display);
  line-height:1;
  color:var(--fm-text-primary);
}
.fm-logo:focus-visible{ outline:2px solid var(--fm-focus-ring); outline-offset:4px; border-radius:var(--fm-radius-sm); }

/* ---------- links ---------- */

.fm-nav__links{
  display:flex;
  align-items:center;
  gap:var(--fm-space-1);
  margin-inline-start:var(--fm-space-4);
}
.fm-nav__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:var(--fm-control-md);
  padding-inline:var(--fm-space-4);
  border-radius:var(--fm-radius-md);
  font-size:var(--fm-text-sm);
  font-weight:var(--fm-weight-medium);
  color:var(--fm-text-body);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--fm-dur-fast) var(--fm-ease-out),
             background var(--fm-dur-fast) var(--fm-ease-out);
}
.fm-nav__link:hover{ color:var(--fm-text-primary); background:rgba(255,255,255,.05); }
.fm-nav__link:focus-visible{ outline:2px solid var(--fm-focus-ring); outline-offset:2px; }

/* current page — a mark, not just a colour */
.fm-nav__link[aria-current="page"]{ color:var(--fm-text-primary); }
.fm-nav__link[aria-current="page"]::after{
  content:"";
  position:absolute;
  inset-inline:var(--fm-space-4);
  inset-block-end:6px;
  height:2px;
  border-radius:var(--fm-radius-full);
  background:var(--fm-gradient-button);
}

.fm-nav__actions{
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:var(--fm-space-3);
  flex:none;
}

/* ---------- burger ---------- */

.fm-nav__burger{
  display:none;
  width:var(--fm-control-md);
  height:var(--fm-control-md);
  align-items:center;
  justify-content:center;
  border-radius:var(--fm-radius-md);
  border:1px solid var(--fm-border);
  background:var(--fm-surface-2);
  color:var(--fm-text-primary);
  cursor:pointer;
}
.fm-nav__burger:focus-visible{ outline:2px solid var(--fm-focus-ring); outline-offset:2px; }

@media (max-width:860px){
  .fm-nav__links{ display:none; }
  .fm-nav__burger{ display:inline-flex; }
  .fm-nav__inner{ height:64px; gap:var(--fm-space-3); }
  .fm-nav__actions .fm-btn--hide-sm{ display:none; }
}

/* =============================================================
   DRAWER — the site links on a phone
   ============================================================= */

.fm-drawer__scrim{
  position:fixed;
  inset:0;
  z-index:var(--fm-z-drawer);
  background:var(--fm-overlay-scrim);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--fm-dur-base) var(--fm-ease-in);
}
.fm-drawer{
  position:fixed;
  inset-block:0;
  inset-inline-end:0;          /* enters from the reading edge */
  z-index:calc(var(--fm-z-drawer) + 1);
  width:min(320px,86vw);
  background:var(--fm-surface-1);
  border-inline-start:1px solid var(--fm-border);
  box-shadow:var(--fm-shadow-lg);
  padding:var(--fm-space-5);
  display:flex;
  flex-direction:column;
  gap:var(--fm-space-2);
  transform:translateX(100%);
  transition:transform var(--fm-dur-base) var(--fm-ease-in);
}
[dir="rtl"] .fm-drawer{ transform:translateX(-100%); }

.fm-drawer.is-open{
  transform:none;
  transition-duration:var(--fm-dur-slow);
  transition-timing-function:var(--fm-ease-out);
}
.fm-drawer__scrim.is-open{
  opacity:1;
  pointer-events:auto;
  transition-duration:var(--fm-dur-slow);
  transition-timing-function:var(--fm-ease-out);
}
.fm-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:var(--fm-space-4);
  margin-bottom:var(--fm-space-2);
  border-bottom:1px solid var(--fm-border-subtle);
}
.fm-drawer__link{
  display:flex;
  align-items:center;
  gap:var(--fm-space-3);
  min-height:var(--fm-control-md);
  padding-inline:var(--fm-space-3);
  border-radius:var(--fm-radius-md);
  font-size:var(--fm-text-base);
  color:var(--fm-text-body);
  text-decoration:none;
  transition:background var(--fm-dur-fast) var(--fm-ease-out),
             color var(--fm-dur-fast) var(--fm-ease-out);
}
.fm-drawer__link:hover{ background:rgba(255,255,255,.05); color:var(--fm-text-primary); }
.fm-drawer__link[aria-current="page"]{
  background:var(--fm-tint-violet);
  color:var(--fm-text-primary);
  border:1px solid var(--fm-border-accent);
}
.fm-drawer__foot{ margin-top:auto; padding-top:var(--fm-space-4); }

/* =============================================================
   TAB BAR — the app only, never the WordPress site
   Four destinations. Four is the cap: a fifth makes each target
   too narrow for a thumb.
   ============================================================= */

.fm-tabbar{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:var(--fm-z-sticky);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--fm-glass-2-bg);
  border-top:1px solid var(--fm-border);
  -webkit-backdrop-filter:blur(var(--fm-glass-blur-lg)) saturate(150%);
  backdrop-filter:blur(var(--fm-glass-blur-lg)) saturate(150%);
  padding-block-end:env(safe-area-inset-bottom,0);
}

.fm-tabbar__item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:58px;
  padding-block:var(--fm-space-2);
  text-decoration:none;
  color:var(--fm-text-muted);
  transition:color var(--fm-dur-fast) var(--fm-ease-out);
  -webkit-tap-highlight-color:transparent;
}
.fm-tabbar__item:hover{ color:var(--fm-text-body); }
.fm-tabbar__item:focus-visible{ outline:2px solid var(--fm-focus-ring); outline-offset:-3px; border-radius:var(--fm-radius-md); }

.fm-tabbar__ico{
  width:24px;
  height:24px;
  display:block;
  transition:transform var(--fm-dur-base) var(--fm-ease-snap);
}
.fm-tabbar__label{
  font-size:var(--fm-text-2xs);
  font-weight:var(--fm-weight-medium);
  line-height:1.3;
}

/* active — colour, a lifted icon, and a bar. Never colour alone. */
.fm-tabbar__item[aria-current="page"]{ color:var(--fm-text-accent); }
.fm-tabbar__item[aria-current="page"] .fm-tabbar__ico{ transform:translateY(-2px); }
.fm-tabbar__item[aria-current="page"]::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:28%;
  height:2px;
  border-radius:var(--fm-radius-full);
  background:var(--fm-gradient-button);
}
/* a soft glow behind the active icon, the one brand moment down here */
.fm-tabbar__item[aria-current="page"]::after{
  content:"";
  position:absolute;
  inset-block-start:2px;
  width:44px; height:30px;
  border-radius:var(--fm-radius-full);
  background:radial-gradient(closest-side,rgba(124,58,237,.34),transparent);
  pointer-events:none;
}

/* a badge on a tab, for unread orders */
.fm-tabbar__dot{
  position:absolute;
  inset-block-start:10px;
  inset-inline-start:calc(50% + 6px);
  min-width:16px;
  height:16px;
  padding-inline:4px;
  border-radius:var(--fm-radius-full);
  background:var(--fm-error);
  color:var(--fm-ink-900);
  font-size:10px;
  font-weight:var(--fm-weight-bold);
  line-height:16px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

/* the app body must clear the bar */
.fm-app-pad{ padding-block-end:calc(58px + env(safe-area-inset-bottom,0px) + var(--fm-space-4)); }

@media (prefers-reduced-motion:reduce){
  html:not(.fm-motion-force) .fm-tabbar__ico,
  html:not(.fm-motion-force) .fm-drawer,
  html:not(.fm-motion-force) .fm-drawer__scrim{transition-duration:1ms;}
}

/* =============================================================
   RULES
   · The header is transparent at the top of the page and turns
     to glass only once content scrolls beneath it. Glass over
     nothing is just a grey bar.
   · Current page carries a mark as well as a colour.
   · Tab bar is four items. A fifth makes every target too narrow
     for a thumb.
   · The tab bar belongs to the app. The WordPress site uses the
     header and the drawer.
   · env(safe-area-inset-bottom) is not optional. Without it the
     bar sits under the iPhone home indicator.
   ============================================================= */