/* ============================================================
   DOCK NAV — macOS-style navbar (bakery theme)
   Sticky: banner ke neeche start hota hai, scroll pe top pe
   chipak jata hai, upar scroll karne pe wapis banner ke neeche.
   ============================================================ */
.dock-layer{
  position:sticky;top:0;left:0;right:0;z-index:90;
  display:flex;justify-content:center;pointer-events:none;
  padding:10px 12px 0;
}

.dock{
  /* ---- theme tokens (bakery colors) ---- */
  --dock-panel:rgba(43,25,11,.78);
  --dock-panel-edge:rgba(255,239,210,.22);
  --dock-panel-highlight:rgba(255,239,210,.10);
  --dock-panel-shadow:0 22px 44px -18px rgba(20,10,2,.8),0 6px 16px -8px rgba(20,10,2,.55);
  --dock-tile:linear-gradient(180deg,#4a2d15 0%,#2b190b 100%);
  --dock-tile-edge:rgba(255,239,210,.12);
  --dock-tile-highlight:rgba(255,239,210,.16);
  --dock-tile-shadow:0 4px 10px -4px rgba(20,10,2,.7);
  --dock-ink:#ffefd2;
  --dock-label-bg:#2b190b;
  --dock-label-ink:#ffefd2;
  --dock-dot:#f59e1d;
  --dock-separator:rgba(255,239,210,.18);
  --dock-accent:#f59e1d;
  /* ---- geometry (JS in-flight update karta hai) ---- */
  --dock-base:50px;
  --dock-thickness:68px;
  --dock-gap:10px;
  --dock-pad:9px;
  --dock-reach:22px;
  --dock-round:.5;

  position:relative;pointer-events:auto;
  display:flex;align-items:flex-start;gap:var(--dock-gap);
  box-sizing:border-box;height:var(--dock-thickness);padding:var(--dock-pad);
  border-radius:calc(var(--dock-base)*var(--dock-round)*.5 + var(--dock-pad));
  background:var(--dock-panel);
  box-shadow:
    inset 0 0 0 1px var(--dock-panel-edge),
    inset 0 1px 0 var(--dock-panel-highlight),
    var(--dock-panel-shadow);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
}

/* ---- item ---- */
.dock-item{
  position:relative;flex:none;
  width:var(--dock-base);height:var(--dock-base);
  margin:0;padding:0;border:0;background:none;
  color:var(--dock-ink);font:inherit;cursor:pointer;outline:none;
  display:block;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
}
.dock-item:hover,.dock-item:focus-visible{z-index:1}

.dock-tile{
  position:absolute;top:0;left:50%;
  width:var(--dock-base);height:var(--dock-base);
  margin-left:calc(var(--dock-base)*-.5);
  transform-origin:50% 0;
  pointer-events:none;
}

.dock-face{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:calc(var(--dock-base)*var(--dock-round)*.5);
  background:var(--dock-tile);
  box-shadow:
    inset 0 0 0 1px var(--dock-tile-edge),
    inset 0 1px 0 var(--dock-tile-highlight),
    var(--dock-tile-shadow);
  color:var(--dock-ink);
  font-size:calc(var(--dock-base)*.44);
  line-height:1;
  transition:filter .2s ease;
}
.dock-face svg{width:1em;height:1em;display:block}
.dock-item:active .dock-face{filter:brightness(.78);transition-duration:0s}
.dock-item:focus-visible .dock-face{outline:2px solid var(--dock-accent);outline-offset:3px}

/* brand monogram tile */
.dock-face--brand{
  font-family:var(--display);
  font-size:calc(var(--dock-base)*.52);
  color:var(--orange,#f59e1d);
}

/* WhatsApp tile — orange jaise site ke buttons */
.dock-face--wa{
  background:linear-gradient(180deg,#ffb23a 0%,#f59e1d 100%);
  color:#2b190b;
}

/* ---- active dot (current page) ---- */
.dock-dot{
  position:absolute;top:calc(100% + max(var(--dock-pad)/2,5px) - 2px);
  left:50%;margin-left:-2px;
  width:4px;height:4px;border-radius:50%;
  background:var(--dock-dot);pointer-events:none;
}

/* ---- separator ---- */
.dock-separator{
  flex:none;align-self:center;
  width:1px;height:calc(var(--dock-base)*.72);
  border-radius:1px;background:var(--dock-separator);
}

/* ---- tooltip label ---- */
.dock-label{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translate(-50%,4px);
  padding:6px 10px;border-radius:8px;
  background:var(--dock-label-bg);color:var(--dock-label-ink);
  box-shadow:inset 0 0 0 1px rgba(255,239,210,.14),0 8px 20px -8px rgba(0,0,0,.5);
  font-family:var(--body,"Fredoka",sans-serif);
  font-size:12px;font-weight:500;line-height:1;white-space:nowrap;
  pointer-events:none;opacity:0;
  transition:opacity .16s ease,transform .16s ease;
}
.dock-item:hover .dock-label,
.dock-item:focus-visible .dock-label{opacity:1;transform:translate(-50%,0)}
.dock-item[data-hop] .dock-label{opacity:0}

@media (prefers-reduced-motion:reduce){
  .dock-label{transition:opacity .16s ease;transform:translate(-50%,0)}
}