/* ==========================================================================
   Nightship site frame - the ONE copy of the shared page styles:
   background (.sky), header + menu, the "//" tagline (.kicker) and the
   space above it (.page-head). Page-specific styles stay in each page.
   Every page links this file and carries the identical header markup:

   <header class="site-header">
     <a class="site-brand" href="index.html"><span class="site-mark">N</span> Nightship</a>
     <input type="checkbox" id="navtoggle" class="site-menu-toggle" aria-hidden="true">
     <label for="navtoggle" class="site-menu-button" aria-label="Menu"></label>
     <nav class="site-nav">
       <a href="pricing.html">Pricing</a> ... (current page: aria-current="page")
     </nav>
   </header>

   The homepage adds <nav class="page-sections"> right below it for its
   in-page links. Colour tokens (--ink, --line, ...) come from each page.
   ========================================================================== */

/* Colour tokens - the full palette, so every page has every colour this
   file uses, whatever the page itself defines. Same values as the pages. */
:root {
  --night-0: #060a14; --night-1: #0a1020; --night-2: #101a30;
  --ink: #dce7f5; --ink-dim: #8fa3bf; --moon: #9fd8e8; --moon-bright: #c9eef8;
  --accent: #35b6d4; --amber: #f0b429; --line: rgba(159, 216, 232, 0.14);
  --mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace;
}

/* Always reserve the scrollbar's space, so short and long pages line up. */
html { scrollbar-gutter: stable; }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0;
}
.site-brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 650; font-size: 1.15rem; letter-spacing: .01em;
  color: var(--ink); text-decoration: none;
}
.site-brand:hover { color: var(--ink); }
.site-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(145deg, #2b6b80, #1F4E5F);
  display: grid; place-items: center;
  color: #eaf7fb; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 0 22px rgba(53, 182, 212, .35);
}
.site-nav { display: flex; align-items: center; }
.site-nav a {
  color: var(--ink-dim); margin-left: 26px; font-size: .95rem;
  text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* Homepage only: the in-page links, a quiet second row under the menu. */
.page-sections {
  display: flex; flex-wrap: wrap; gap: 6px 0;
  margin-top: -10px; padding-bottom: 6px;
  font-size: .9rem;
}
.page-sections a { color: var(--ink-dim); text-decoration: none; }
.page-sections a:hover { color: var(--ink); }
.page-sections a + a::before {
  content: "\00B7"; display: inline-block; margin: 0 12px; color: var(--ink-dim);
}

/* Page background: soft blue glow over the night gradient. */
.sky {
  background:
    radial-gradient(1200px 700px at 70% -10%, #16294d 0%, transparent 60%),
    radial-gradient(900px 500px at 15% 10%, #0f2038 0%, transparent 55%),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-0) 100%);
  min-height: 100vh;
}

/* Sub-page opening: the same height on every page (not the homepage hero). */
.page-head { padding-top: 40px; }
.kicker {
  font-family: var(--mono); font-size: .85rem; color: var(--accent);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px;
}

/* Mobile: hamburger (checkbox toggle - works without JS) */
.site-menu-toggle { display: none; }
.site-menu-button {
  display: none; cursor: pointer; user-select: none; color: var(--ink);
  font-size: 1.7rem; line-height: 1; padding: 2px 6px;
}
.site-menu-button::before { content: "\2630"; }

@media (max-width: 640px) {
  .site-header { position: relative; }
  .site-menu-button { display: block; }
  .site-menu-toggle:checked ~ .site-menu-button::before { content: "\2715"; }
  .site-nav {
    display: none;
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--night-2); border: 1px solid var(--line);
    border-radius: 12px; padding: 8px; gap: 2px; z-index: 60;
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
  }
  .site-menu-toggle:checked ~ .site-nav { display: flex; }
  .site-nav a {
    margin-left: 0; font-size: 1rem; padding: 11px 14px; border-radius: 8px;
    border-bottom: 0;
  }
  .site-nav a:hover { background: rgba(159,216,232,.06); color: var(--ink); }
  .site-nav a[aria-current="page"] { background: rgba(159,216,232,.08); }
  .page-sections { margin-top: -6px; }
  .page-head { padding-top: 24px; }
}