/* ==========================================================================
   LIMELIGHT NAVIGATION

   The active-item effect from the LimelightNav reference, rebuilt for this
   project's own navigation: a small light on the header's lower edge that
   slides to whichever item the current page is, with a soft cone of light
   falling from it.

   What it does NOT do is replace the navigation. The items, their order, their
   labels, their hrefs, the Activities dropdown, the hamburger, the mobile menu
   and the existing gold underline on `nav.main-nav a.active` are all untouched
   — this adds one absolutely-positioned element and nothing else.

   Horizontal only. On a phone `.main-nav` stacks vertically inside the
   hamburger menu, where a sliding horizontal bar would be meaningless; the
   script measures the layout and simply does not show it there.

   Driven by /js/limelight-nav.js.
   ========================================================================== */

nav.main-nav {
  /* The light is positioned against the nav. No offsets, so nothing moves. */
  position: relative;
}

/* The lamp sits at the TOP of the navigation and shines DOWN onto the item.
 *
 * It was on the bottom edge with the cone rising, which read as an underline
 * with a haze above it rather than as a light. A spotlight is above the thing
 * it lights:
 *
 *        ━━━━━━━   <- the lamp, on the nav's top edge
 *           ▼       <- the cone, widening as it falls
 *        NAV ITEM
 *
 * Width is not fixed. The script measures the active item and sets it, so
 * "Home" gets a short lamp and "Notice Board" a long one. */
.limelight {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;                   /* a placeholder; the script overwrites it */
  height: 3px;
  border-radius: 999px;
  /* The lamp's colour comes from a token, because the two themes want
     genuinely different things here rather than one value at two brightnesses:
     gold light on navy, and a DARK navy accent on the pale bar. See
     --limelight-ink in tokens.css. */
  background: var(--limelight-ink, #D4AF37);
  box-shadow:
    0 0 8px 1px var(--limelight-ink, #D4AF37),
    0 0 22px 4px var(--limelight-glow, rgba(212, 175, 55, 0.35));
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  /* Hidden until the script has measured a real position — otherwise it would
     be seen sliding in from x=0 on every page load. */
  transition: opacity 0.25s ease;
}

/* Movement is enabled only after the first measurement, so the light appears
   where it belongs rather than travelling there from the corner. */
.limelight.is-ready {
  opacity: 1;
  transition:
    left 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}

/* The cone, falling from the lamp onto the item below it.
 *
 * `top: 3px` — it hangs off the *bottom* of the lamp, not above it. The
 * trapezoid is narrow where it leaves the lamp and spreads as it descends
 * (5%/95% at the top edge, 25%/75% at the bottom), and the gradient is
 * brightest at the lamp and fades out downward. Both of those were the other
 * way round before, which is what made the light look like it was rising. */
.limelight::before {
  content: "";
  position: absolute;
  left: -34%;
  top: 3px;
  width: 168%;
  height: 38px;
  clip-path: polygon(25% 0, 75% 0, 95% 100%, 5% 100%);
  background: linear-gradient(to bottom,
    var(--limelight-cone, rgba(212, 175, 55, 0.28)),
    transparent);
  pointer-events: none;
}

/* On the pale bar the lamp is deep navy, and a wide soft halo around a dark
   object reads as a smudge rather than as light. Tightened, not removed — the
   colours themselves come from the tokens above. */
:root[data-theme="light"] .limelight {
  height: 3px;
  box-shadow:
    0 0 5px 0 var(--limelight-glow, rgba(15, 39, 72, 0.45)),
    0 1px 10px 1px rgba(15, 39, 72, 0.22);
}
/* The cone is doing more work in light mode: a dark lamp has no glow of its own
   to spill, so the falling light has to be the thing that marks the item. */
:root[data-theme="light"] .limelight::before { height: 34px; }

/* Not shown at all where the navigation is not a horizontal row — the script
   sets this, having measured the items, rather than this file guessing at a
   breakpoint the navigation might change later. */
.limelight[hidden] { display: none; }

/* Decoration. With the setting on the light still marks the active item, it
   simply stops sliding between them. */
@media (prefers-reduced-motion: reduce) {
  .limelight.is-ready { transition: opacity 0.25s ease; }
}

@media (forced-colors: active) {
  .limelight { display: none; }
}