/* The one header every page uses (site_header() in includes/nav.php).
 *
 * iOS 26 home-screen web apps draw a dimming/blur "scroll edge effect" over the top of the
 * screen. WebKit skips it when the top edge is covered by a FIXED, FULL-WIDTH box of ONE
 * SOLID COLOUR more than 10px tall. So:
 *   .edge   = that box: fixed, full width, solid, status-bar height + 14px, nothing inside it
 *   .appbar = the header itself, also fixed and solid in the same colour, never translucent
 * Colours are literal (not var()) so this file works on every page, whatever else is loaded.
 */
:root {
  --edge: calc(env(safe-area-inset-top, 0px) + 14px);
  --appbar-row: 56px;
  --appbar-h: calc(var(--edge) + var(--appbar-row));
}
.edge {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3001;
  height: var(--edge); background: #084419; pointer-events: none;
}
.appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3000;
  box-sizing: border-box; height: var(--appbar-h);
  padding: var(--edge) 12px 0;
  display: flex; align-items: center; gap: 8px;
  background: #084419; border-bottom: 1px solid #1f5530;
}
.appbar-space { height: var(--appbar-h); }
.appbar .brand { display: block; line-height: 0; flex: none; }
.appbar .brand img { height: 34px; width: auto; display: block; }
.appbar .nav { display: flex; gap: 4px; margin-left: auto; }
.appbar .nav a {
  color: #f5eedc; text-decoration: none; font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 10px 12px; border-radius: 999px;
}
.appbar .nav a.active { color: #fff; background: #f86a10; }
@media (max-width: 400px) {
  .appbar .brand img { height: 28px; }
  .appbar .nav a { font-size: 14px; padding: 9px 10px; }
}