/* ============================================================
   nav.css — the navigation system.

   The competitive read (§3.11): Drik Panchang has the deepest data on the
   web and hides it behind eleven separate regional sub-sites you cannot
   compare; mPanchang and AstroSage lead with a funnel; everyone's menu is
   a flat list of links in the same size and weight, so nothing is
   prioritised and the depth is invisible until you already know it exists.

   So this menu does three things none of them do:
     1. Every primary item OPENS to show what is inside it — the Ekadashi
        list, the masa grid, the year view are visible before you click,
        not discovered.
     2. Each panel carries LIVE CONTEXT from the server — the next Ekadashi,
        this month's festival count — so the menu answers a question rather
        than only routing to one.
     3. Region and city stay in the chrome throughout. Switching tradition
        never loses your place, because it is not a different site.

   It degrades honestly: every item is a real <a href>, so the whole menu
   works with JavaScript off and with a keyboard only.
   ============================================================ */

/* ---- desktop bar ------------------------------------------- */
.nav-desktop { display: none; margin-left: 10px; }
@media (min-width: 900px) { .nav-desktop { display: flex; gap: 2px; } }

.nav-item { position: relative; }

.nav-top {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent;
  color: rgba(255,255,255,.88); font: inherit; font-size: 15px; font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.nav-top:hover,
.nav-item.open > .nav-top {
  background: rgba(255,255,255,.16); color: #fff;
  border-color: rgba(255,255,255,.24);
}
.nav-top[aria-current="page"] {
  background: rgba(255,255,255,.2); color: #fff; font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--pasupu);
}
.nav-top .caret {
  width: 8px; height: 8px; flex: 0 0 8px; opacity: .7;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.nav-item.open > .nav-top .caret { transform: rotate(225deg) translate(-1px, -1px); }

/* ---- the panel --------------------------------------------- */
.nav-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  min-width: 560px; max-width: min(720px, 92vw);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hair-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 14px;
}
.nav-panel[hidden] { display: none; }
.nav-item:last-child .nav-panel,
.nav-panel.align-right { left: auto; right: 0; }

/* Two columns at 560px of panel: 2 x 220 + 20 gap = 460, inside a 532px
   content box. Sizing these by hand rather than by auto-fit avoids the
   silent collapse to one column when the arithmetic is a few pixels short. */
.nav-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 20px; }
.nav-col { min-width: 0; }

.nav-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-muted); font-weight: 700; margin: 2px 0 4px 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--hair);
}

.nav-link {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; min-height: 44px;
}
.nav-link:hover { background: var(--structure-soft); }
.nav-link .nl-icon {
  flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px;
  color: var(--structure); opacity: .9;
}
.nav-link .nl-icon svg { width: 22px; height: 22px; }
.nav-link .nl-title { font-weight: 600; font-size: 14px; display: block; color: var(--ink); }
.nav-link .nl-sub { font-size: 12px; color: var(--ink-muted); display: block; line-height: 1.4; }
.morenav .nav-col { margin-bottom: 6px; }
.nav-link[aria-current="page"] .nl-title { color: var(--accent); }

/* The live strip: what this section says about TODAY, fetched with the
   page rather than after it, so the menu is informative the instant it
   opens. This is the part no competitor's menu has. */
.nav-live {
  margin-top: 12px; padding: 10px 12px;
  background: var(--brass-soft); border: 1px solid var(--brass-edge);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--brass-ink); line-height: 1.5;
}
.nav-live strong { color: var(--ink); }
.nav-live a { color: var(--accent); font-weight: 600; }

/* ---- mobile: the More sheet -------------------------------- */
.morenav { display: grid; gap: 4px; }
.morenav .nav-group-label { margin-top: 14px; }
.morenav .nav-link { border: 1px solid transparent; }
.morenav .nav-link:hover { border-color: var(--hair); }

/* ---- bottom bar -------------------------------------------- */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--hair-strong);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 14px -8px rgba(33,33,20,.35);
}
@media (min-width: 900px) { .bottomnav { display: none; } }
.bottomnav a, .bottomnav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 58px; text-decoration: none; border: 0; background: none;
  color: var(--ink-muted); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.bottomnav svg { width: 21px; height: 21px; }
.bottomnav [aria-current="page"] { color: var(--accent); }
.bottomnav [aria-current="page"] svg { color: var(--accent); }
body.has-bottomnav { padding-bottom: 64px; }
@media (min-width: 900px) { body.has-bottomnav { padding-bottom: 0; } }

/* ---- breadcrumb / section rail ----------------------------- */
/* Depth is only useful if you can see where you are in it. */
.subnav {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--hair); margin-bottom: 16px;
  padding-bottom: 0;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  padding: 9px 13px; white-space: nowrap; text-decoration: none;
  color: var(--ink-mid); font-size: 14px; font-weight: 600;
  border-bottom: 2px solid transparent; min-height: 44px;
  display: inline-flex; align-items: center;
}
.subnav a:hover { color: var(--ink); background: var(--surface-alt); }
.subnav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

@media print { .nav-panel, .subnav, .bottomnav { display: none !important; } }