/* ORIVON — identity "Quiet observatory" (2026-10-12). Integrated edition of collective-mobile-nav-20261007.css, used ONLY by index.html, sightline.html and collective/index.html.
   Every page outside that scope keeps loading the collective-mobile-nav-20261007.css edition unchanged. Drawer and no-script menu: opaque, square buttons.
   No override layer: the approved prototype rules were folded into the original rules of this sheet. */
/* ORIVON Astrographers Collective: mobile navigation (loaded by every collective/*.html page, together with
   js/collective-mobile-nav-*.js). Everything here applies at <= 860px, the width where the desktop header navigation is hidden;
   the desktop header and the horizontal sub-navigation are not touched above that width.

   Progressive enhancement. The page ships a plain mobile menu in the header (<details class="orv-fallback-nav">) that needs no script: it is
   what a phone sees with JavaScript off, while the script loads (or is slow), if the file is missing or the module throws. The module
   adds html.orv-drawer-ready ONLY after the drawer is built and wired; from then on the <details> menu is hidden and the hamburger takes its
   place (same 44px box in the same spot, so nothing shifts and the two menus are never visible together). */

/* Header on phones: logo, search, one menu button. Contact moves into the menu. */
@media (max-width: 860px) {
  .header-inner { gap: 0.75rem; }
  .header-actions { gap: 0.25rem; }
  .header-actions .mobile-hide { display: none; }
  .nav-toggle, .search-trigger, .orv-fallback-nav > summary { width: 44px; height: 44px; }
  .nav-toggle:focus-visible, .search-trigger:focus-visible, .orv-fallback-nav > summary:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: 2px; }
  /* The sub-navigation (links, Submit, bell, account) is replaced by the menus. It keeps its top offset so the page starts below the
     fixed header, but takes no height and is not focusable or announced. */
  .orv-subnav { height: 0; overflow: hidden; visibility: hidden; border-bottom: 0; }

  /* Until the module is ready the hamburger button would do nothing, so the no-script menu button stands in its place. */
  .nav-toggle { display: none; }
  html.orv-drawer-ready .nav-toggle { display: grid; }
  html.orv-drawer-ready .orv-fallback-nav { display: none; }

  /* The hamburger becomes an X in place: same 44px box, no change of width, no layout shift. */
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
}

/* Plain menu (no script needed) */
.orv-fallback-nav { display: none; }
@media (max-width: 860px) {
  .orv-fallback-nav { display: block; }
  .orv-fallback-nav > summary {
    list-style: none; display: grid; place-items: center; cursor: pointer; border-radius: 50%;
  }
  .orv-fallback-nav > summary::-webkit-details-marker { display: none; }
  /* the same three bars as the hamburger */
  .orv-fallback-nav > summary span, .orv-fallback-nav > summary span::before, .orv-fallback-nav > summary span::after {
    content: ""; display: block; width: 20px; height: 1px; background: var(--polar-white); position: relative; transition: transform var(--dur-fast), opacity var(--dur-fast);
  }
  .orv-fallback-nav > summary span::before { position: absolute; top: -6px; }
  .orv-fallback-nav > summary span::after { position: absolute; top: 6px; }
  .orv-fallback-nav[open] > summary span { background: transparent; }
  .orv-fallback-nav[open] > summary span::before { top: 0; transform: rotate(45deg); }
  .orv-fallback-nav[open] > summary span::after { top: 0; transform: rotate(-45deg); }
  /* One column under the header, scrolling inside itself when the screen is short. */
  .orv-fallback-panel {
    position: absolute; top: 100%; left: 0; right: 0; box-sizing: border-box;
    max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: #0a0e17; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.7);
  }
  .orv-fallback-panel h2 { margin: 0.9rem 0 0.2rem; padding: 0 0.75rem; font: 600 0.7rem/1.2 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver-2); }
  .orv-fallback-panel h2:first-child { margin-top: 0.4rem; }
  .orv-fallback-panel ul { list-style: none; margin: 0; padding: 0; }
  .orv-fallback-panel a {
    display: flex; align-items: center; min-height: 48px; box-sizing: border-box; padding: 0.5rem 0.75rem; border-radius: 10px;
    color: var(--polar-white-dim); font-family: var(--font-sans); font-size: 1rem; line-height: 1.3; text-decoration: none;
  }
  .orv-fallback-panel a:hover { background: rgba(255, 255, 255, 0.05); color: var(--polar-white); }
  .orv-fallback-panel a[aria-current] { color: var(--polar-white); font-weight: 600; background: rgba(244, 246, 250, 0.07); box-shadow: inset 2px 0 0 var(--polar-white); }
  .orv-fallback-panel a:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: -2px; }
}

/* Drawer */
.orv-drawer-root {
  position: fixed; top: 0; left: 0; right: 0; z-index: 130;
  height: 100vh; height: 100dvh; /* the real visible viewport, also while a mobile browser shows or hides its bars */
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear 0.26s;
}
.orv-drawer-root[data-open="true"] { visibility: visible; pointer-events: auto; transition-delay: 0s; }
@media (min-width: 861px) { .orv-drawer-root { display: none; } }

.orv-drawer-backdrop {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(5, 7, 12, 0.62); /* explicit sides: older Safari lacks `inset` */
  opacity: 0; transition: opacity 0.22s ease; touch-action: none;
}
.orv-drawer-root[data-open="true"] .orv-drawer-backdrop { opacity: 1; }

.orv-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 360px); max-width: 100%;
  display: flex; flex-direction: column;
  background: #0a0e17; /* opaque */
  border-left: 1px solid var(--line-strong);
  box-shadow: -24px 0 60px -24px rgba(0, 0, 0, 0.7);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  transform: translateX(100%); transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--polar-white-dim); font-family: var(--font-sans);
}
.orv-drawer-root[data-open="true"] .orv-drawer { transform: translateX(0); }
.orv-drawer:focus { outline: none; }

/* Scroll lock: nothing moves, so there is nothing to restore (and the fixed header keeps its look).
   scrollbar-gutter keeps the width of a classic scrollbar (desktop browsers in a narrow window, some tablets) reserved while it is locked,
   so the header does not jump sideways; phones use overlay scrollbars and are unaffected. */
html.orv-drawer-open, html.orv-drawer-open body { overflow: hidden; overscroll-behavior: none; }
html.orv-drawer-open { scrollbar-gutter: stable; }

.orv-drawer-head {
  position: sticky; top: 0; z-index: 1; flex: none;
  display: flex; align-items: center; justify-content: space-between; min-height: 64px;
  padding: env(safe-area-inset-top, 0px) 0.6rem 0 1.25rem;
  background: #0a0e17; border-bottom: 1px solid var(--line);
}
.orv-drawer-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--polar-white); letter-spacing: 0.02em; }
.orv-drawer-close {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  background: none; border: 0; border-radius: 50%; color: var(--polar-white); cursor: pointer;
}
.orv-drawer-close svg { width: 22px; height: 22px; }
.orv-drawer-close:hover { background: rgba(255, 255, 255, 0.06); }

.orv-drawer-body { flex: 1 0 auto; min-width: 0; padding: 1rem 0 calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
.orv-drawer-primary { padding: 0 1rem 0.25rem; }
.orv-drawer-section { margin: 0 1rem; padding: 1rem 0 0; min-width: 0; }
.orv-drawer-primary + .orv-drawer-section, .orv-drawer-section + .orv-drawer-section { margin-top: 1rem; border-top: 1px solid var(--line); }
.orv-drawer-label {
  margin: 0 0 0.4rem; padding: 0 0.75rem;
  font: 600 0.7rem/1.2 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver-2);
}
.orv-drawer-list { list-style: none; margin: 0; padding: 0; }

.orv-drawer-row {
  display: flex; align-items: center; gap: 0.7rem; min-height: 48px; min-width: 0;
  padding: 0.5rem 0.75rem; border-radius: 10px;
  color: var(--polar-white-dim); font-size: 1rem; line-height: 1.3; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.orv-drawer-row:hover { background: rgba(255, 255, 255, 0.05); color: var(--polar-white); }
.orv-drawer-row svg { width: 20px; height: 20px; flex: none; }
.orv-drawer-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Current page: neutral (white text, quiet fill, thin bar). Never amber (Supporter) and never the violet/cyan of Photo of the Month. */
.orv-drawer-row[aria-current] { color: var(--polar-white); font-weight: 600; background: rgba(244, 246, 250, 0.07); box-shadow: inset 2px 0 0 var(--polar-white); }

/* Primary action */
.orv-drawer-row.orv-drawer-cta {
  justify-content: center;
  min-height: 48px;
  border-radius: var(--orv-radius);
  background: var(--orv-ivory);
  color: var(--orv-void);
  font-weight: 600;
  box-shadow: none;
}
.orv-drawer-row.orv-drawer-cta:hover { filter: brightness(1.08); color: var(--space-black); }
.orv-drawer-row.orv-drawer-cta[aria-current] { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); }

/* Notifications row: the bell is part of the row; the count is a small pill at its end. */
.orv-drawer-count {
  margin-left: auto;
  flex: none;
  min-width: 22px;
  height: 22px;
  padding: 0 0.4rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--orv-radius);
  background: var(--orv-ivory);
  color: var(--space-black);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.orv-drawer-count[hidden] { display: none; }

/* Account: e-mail (secondary, truncated) and Sign out (secondary action). */
.orv-drawer-account { margin-top: 0.9rem; padding: 0 0.75rem; min-width: 0; }
.orv-drawer-account-label { display: block; font-size: 0.72rem; color: var(--silver-2); margin-bottom: 0.15rem; }
.orv-drawer-email { margin: 0; font-size: 0.88rem; color: var(--silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.orv-drawer-signout {
  width: 100%; min-height: 44px; margin-top: 0.7rem; padding: 0.5rem 1rem;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 10px;
  color: var(--polar-white-dim); font: inherit; font-size: 0.95rem; cursor: pointer;
}
.orv-drawer-signout:hover { color: var(--polar-white); border-color: var(--silver-2); }

/* Focus is always visible; the outline sits inside the box because the drawer clips overflow. */
.orv-drawer a:focus-visible, .orv-drawer button:focus-visible { outline: 2px solid var(--aurora-cyan); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .orv-drawer-root, .orv-drawer, .orv-drawer-backdrop, .orv-drawer-row { transition: none; }
}

/* 320px safety
   The Collective landing title ("A new space for astrophotographers.") has an unbreakable word that needs 309px at its minimum size, wider than the
   272px a 320px phone leaves, which made the whole page scroll sideways. Below 380px the title scales with the screen so that word always fits. */
@media (max-width: 380px) {
  .orv-hero h1 { font-size: min(2.2rem, calc((100vw - 3.2rem) / 9)); }
}