/* Shared application shell -- docs/DESIGN_SYSTEM.md Section 10.7
   (Navigation) and 10.11 (Footer). Depends on tokens.css, a theme
   file, base.css, and layout.css (.page-container) already being
   loaded.

   Phase E Milestone 27: the nav dropdown is no longer a <768px-only
   pattern -- the hamburger toggle and collapsed dropdown panel are now
   the nav presentation at every breakpoint (Human decision: reduce
   navigation surface area everywhere, not just on narrow viewports).
   The previous `@media (min-width: 768px)` override that restored a
   horizontal, always-visible list above that width has been removed
   entirely, not just disabled -- the base (mobile) rules below are now
   the only rules. wireNavToggle's JS (shell.js) is unchanged: the
   dropdown mechanism (aria-expanded, Escape/outside-click dismiss) was
   already fully built and tested for the <768px case and needed no
   changes to serve every viewport width.

   Icon glyphs (icon-hamburger, icon-theme, icon-external-link) render
   as empty aria-hidden placeholders -- the same known, tracked gap as
   the Shared Components milestone (no styles/components/*.css icon
   rendering exists yet). The toggle buttons are still fully usable:
   their 40x40 box and visible focus ring do not depend on the icon
   glyph being present. */

.shell-header {
  position: sticky;
  top: 0;
  z-index: var(--z-index-header);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--border-color);
}

.shell-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.shell-header__logo {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-decoration: none;
}

.shell-header__logo:hover {
  color: var(--color-accent-text);
  text-decoration: none;
}

/* "Join the Pool" redesign brief (2026-07-26): centred on the header
   row via absolute positioning against .shell-header__inner's own
   position: relative (already established for the nav dropdown below)
   -- true centring, not just centring within whatever free space is
   left over after the logo and controls, which a flex auto-margin
   approach would produce instead. Hidden below tablet width: at
   narrower widths the logo, this link, and the nav/theme controls
   don't all fit on one line without colliding, and this is the one
   of the three that's least essential to have visible at all times
   (it's also reachable from the "Follow @damopool" mention nowhere
   else yet, but losing it below 768px is a deliberate secondary-
   priority trade, not an oversight). */
.shell-header__social-link {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.shell-header__social-link:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .shell-header__social-link {
    display: none;
  }
}

/* Groups the hamburger and theme toggle so a single auto margin keeps
   them pinned to the header's trailing edge. Both buttons are always
   in-flow now (Milestone 27 made the nav toggle permanent at every
   breakpoint, not just below 768px), but the grouping wrapper is kept
   regardless -- a single auto margin on this wrapper is simpler than
   putting one on each button individually. */
.shell-header__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.shell-header__nav-toggle,
.shell-header__theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.shell-header__nav-toggle:hover,
.shell-header__theme-toggle:hover {
  background: var(--color-surface-raised);
}

/* Human-reported bug, real-browser use: base.css's shared `.icon:empty
   { display: none }` rule (Milestone 20) collapses every icon span
   that has no actual DOM children -- which was every icon in this
   project, including this one, since no icon glyph had ever actually
   been implemented (a known, disclosed gap this file's own module
   comment already named). Below <768px that only ever hid a secondary,
   less-visited affordance; once Milestone 27 made the hamburger the
   *only* nav at every width, an invisible toggle meant the entire nav
   appeared to not exist at all on desktop. Fixed, narrowly scoped to
   just this one icon (not a general icon-system build-out, which
   remains its own separate, larger, not-yet-scheduled piece of work):
   a hand-drawn three-bar glyph via a single ::before plus a box-shadow
   pair (one <span>, no image/font/SVG dependency, matching this
   project's "hand-written CSS, no framework" convention), using
   currentColor so it re-themes automatically exactly like the button's
   own text colour already does. The :empty override below is required
   -- pseudo-element content does not count as a "child" for the
   :empty selector, so without it the general collapse rule would still
   hide this span even after giving it real drawn content. */
.icon-hamburger {
  position: relative;
}

.icon-hamburger:empty {
  display: inline-flex;
}

.icon-hamburger::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 2px;
  background: currentColor;
  box-shadow:
    0 -5px currentColor,
    0 5px currentColor;
}

/* The nav list is always collapsed behind the hamburger toggle into a
   full-width dropdown panel (docs/DESIGN_SYSTEM.md Section 10.7,
   updated Milestone 27 -- previously a <768px-only pattern). */
.shell-header__nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--border-color);
  padding: var(--space-4);
}

.shell-header__nav.is-open {
  display: block;
}

.shell-header__nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.shell-header__nav-link {
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard);
}

.shell-header__nav-link:hover {
  color: var(--color-accent-text);
  text-decoration: none;
}

.shell-header__nav-link--active {
  color: var(--color-accent-text);
  /* --color-accent-text, not the bare fill value: Phase F verified
     (docs/DESIGN_SYSTEM.md Section 13) the bare value fails 3:1
     non-text contrast on light theme; see base.css's :focus-visible
     comment for the full reasoning, which applies identically here. */
  border-bottom-color: var(--color-accent-text);
}

.shell-footer {
  background: var(--color-bg);
  border-top: var(--border-width) solid var(--border-color);
  padding-block: var(--space-6);
}

.shell-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.shell-footer__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.shell-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.shell-footer__link:hover {
  color: var(--color-accent-text);
  text-decoration: none;
}

.shell-footer__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.shell-footer__staleness {
  margin: 0;
}

/* No fetched timestamp yet (footerStalenessText returned null) --
   render nothing rather than an empty line taking up footer space. */
.shell-footer__staleness:empty {
  display: none;
}

/* Phase G.3, docs/DESIGN_SYSTEM_V2.md Section 8: the live-data pulse
   dot -- aria-hidden, the adjacent staleness text is the real
   accessible equivalent (buildFooterSpec's own comment). */
.shell-footer__pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-live-accent);
  animation: shell-footer-pulse var(--duration-pulse) var(--ease-standard) infinite;
}

.shell-footer__pulse--stale {
  animation: none;
  opacity: 0.35;
}

@keyframes shell-footer-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell-footer__pulse {
    animation: none;
  }
}