/* ============================================================
   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. The city is in the chrome throughout and the tradition is stated on
        every page, with Settings one tap away. 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 ------------------------------------------- */
/* Every section is a top-level item — there is no "More" bucket, because a
   menu that hides half the site behind three dots is the thing this menu
   exists not to be. Seven sections, centred on the bar (layout v8), from
   1180px; between 1180 and 1360 the items lose padding and carets rather
   than the bar losing an item. */
.nav-desktop { display: none; grid-column: 2; justify-self: center; }
@media (min-width: 1180px) { .nav-desktop { display: flex; gap: 2px; } }
@media (min-width: 1180px) and (max-width: 1359px) {
  .nav-top { padding: 8px 9px; font-size: 14px; }
  .nav-top .caret { display: none; }
}

/* The hamburger replaces the bar below 1180px and opens the same sheet the
   bottom bar's Menu cell opens — one sheet, every section, no second model. */
.nav-hamburger { display: inline-flex; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24); }
.nav-hamburger[aria-expanded="true"] { background: rgba(255,255,255,.26); border-color: var(--pasupu); }
@media (min-width: 1180px) { .nav-hamburger { display: none; } }

.nav-item { position: relative; }
/* The last sections open leftwards so their panels stay on screen. */
.nav-item:nth-last-child(-n+2) .nav-panel { left: auto; right: 0; }

.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; }

/* ---- the hamburger sheet (below 1180px) -------------------- */
/* Hangs from the brand band on the right: every section with its main
   destinations as wrapping links, so the whole site fits one short scroll.
   Revealed by the script toggling `hidden`, or by :target when the script
   has not run — the hamburger is a real link to #sp-more. */
.menusheet {
  position: fixed; top: 57px; right: 0; z-index: 58;
  width: min(360px, 100vw); max-height: calc(100vh - 57px);
  max-height: calc(100dvh - 57px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hair-strong); border-top: 0; border-right: 0;
  border-radius: 0 0 0 var(--radius); box-shadow: var(--shadow-lift);
  padding: 4px 16px 14px;
}
.menusheet:target { display: block; }
@media (min-width: 1180px) { .menusheet, .menusheet:target { display: none !important; } }
@media (max-width: 420px) { .menusheet { border-left: 0; border-radius: 0; } }
.ms-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--hair);
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-muted);
}
.ms-head .icon-btn { color: var(--ink-mid); }
.ms-head .icon-btn:hover { background: var(--surface-sunk); border-color: var(--hair); color: var(--ink); }
.ms-sec { padding: 10px 0; border-bottom: 1px solid var(--hair); }
.ms-sec:last-child { border-bottom: 0; }
.ms-top {
  display: flex; align-items: center; gap: 9px; min-height: 36px;
  font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none;
}
.ms-top:hover { color: var(--accent); }
.ms-top[aria-current="page"] { color: var(--accent); }
.ms-top svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--structure); }
.ms-settings .ms-top svg { color: var(--accent); }
.ms-items { display: flex; flex-wrap: wrap; gap: 0 14px; margin-left: 27px; }
.ms-items a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: 14px; color: var(--ink-mid); text-decoration: none;
}
.ms-items a:hover { color: var(--accent); text-decoration: underline; }

/* ---- 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: 768px) { .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: 768px) { body.has-bottomnav { padding-bottom: 0; } }
/* Above the bottom bar, the sheet stops short of it. */
@media (max-width: 767px) { .menusheet { max-height: calc(100dvh - 57px - 64px); } }

/* ---- 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, .menusheet { display: none !important; } }