/* ═══════════════════════════════════════════════════════════════════════
   Horā होरा — the samvat strip, the brand's third line, and the live Moon.
   Extends the optical-glass system in styles.css; defines no new colours.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The traditional date, above the header ────────────────────────────*/
/* A printed almanac states its era before anything else. This is that line:
   quiet, ruled, and never competing with the brand below it. */
.samvat {
  max-width: 1180px; width: calc(100% - 32px);
  margin: 14px auto 0; padding: 0 6px 8px;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: .68rem; letter-spacing: .06em; color: var(--ink-faint);
  border-bottom: 1px solid rgba(120, 150, 200, .18);
}
.samvat b {
  font-weight: 500; text-transform: uppercase; letter-spacing: .13em;
  font-size: .93em; opacity: .82;
}
.sv-item { white-space: nowrap; }
.sv-n {
  color: var(--ink-soft); font-weight: 600; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.sv-sep { opacity: .45; }
.sv-grow { flex: 1; min-width: 0; }
.sv-masa { color: var(--ink-soft); }
.sv-paksha { color: var(--ink-faint); margin-left: 5px; }
/* An intercalary month is not an ordinary one, and the strip says so. */
.sv-adhika {
  padding: 0 5px; border-radius: 999px; font-size: .9em;
  border: 1px solid rgba(154, 123, 63, .4); color: var(--gold);
}
.sv-moon-line { color: var(--ink-soft); }

/* ── Brand: the third line ─────────────────────────────────────────────*/
.brand-site {
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); opacity: .78; line-height: 1.3; white-space: nowrap;
}

/* ── The live Moon beside the lockup ───────────────────────────────────*/
/* It is real data, so it gets the same treatment as the glass: a seat, an
   edge, and light — not a flat sticker dropped next to the wordmark. */
.brand-moon {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 14px; padding: 5px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.8), rgba(255,255,255,.15) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -6px rgba(40,60,95,.4);
}
.moon { display: block; }

/* ── A masthead, then a navigation band ────────────────────────────────*/
/* Eight departments plus a call to action and a language switch do not fit on
   one line beside a three-line lockup, and letting them wrap looks like a
   mistake. A printed almanac has the same problem and solves it the same way:
   the masthead sits on its own, and the sections are ruled off beneath it. */
@media (min-width: 1081px) {
  .site-header { flex-wrap: wrap; row-gap: 0; padding-bottom: 6px; }
  .site-nav {
    flex-basis: 100%; margin-left: 0; margin-top: 11px;
    padding-top: 9px; border-top: 1px solid rgba(120, 150, 200, .16);
    justify-content: flex-start; gap: 1px;
  }
  .site-nav .nav-link { padding: 7px 11px; }
  /* The action and the language switch anchor the right end of the band. */
  .nav-cta { margin-left: auto; }
}

@media (max-width: 1080px) {
  /* The burger takes the right edge on smaller screens; the Moon sits with the
     brand rather than fighting it for space. */
  .brand-moon { margin-left: 10px; }
}
@media (max-width: 620px) {
  .samvat {
    font-size: .6rem; gap: 7px; margin-top: 10px; letter-spacing: .04em;
  }
  /* The Moon's phase name is already carried by the drawn Moon itself, so on a
     phone the strip keeps only the two eras and the month. */
  .sv-moon-line { display: none; }
  .sv-grow { flex-basis: 100%; height: 0; }
  .brand-site { font-size: .52rem; letter-spacing: .07em; }
}
@media (max-width: 400px) {
  .sv-masa { display: none; }
}

/* Printed pages carry the era, but not the chrome around it. */
@media print {
  .samvat { border-bottom: 1px solid #ccc; color: #555; }
  .brand-moon { display: none; }
}