/* app-header.css — styling for the one shared header (app_header.php).
 *
 * Loaded by every page that draws the header, so the header looks and behaves
 * identically everywhere. Two things live here:
 *   1. the header itself — wordmark, logo size, "Logged in as" placement
 *      (moved out of public.css, which only some pages load)
 *   2. the current-page highlight written by nav_active() in lib_nav.php
 */

/* Wordmark beside the shield logo in the nav. The logo becomes a flex row and
   the wordmark flows as a flex item right after the shield, so it stays glued
   to it at any window size — no absolute offset to drift. The logo shrinks to
   its content, so the whole group stays on the left and the right-aligned nav
   links do not move. Applies on every public page (and the logged-in home)
   that shares this header. */
.u-header .u-logo {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
}
.u-header .u-logo .u-logo-image-1 {
  width: 130px !important;
  height: 130px !important;
  object-fit: contain;
}
.u-header .u-logo::after {
  content: "OnTrack";
  margin-left: 2px;
  color: #fff;
  /* Roboto — the site's display/heading font (matches the hero heading and
     nav), not the Open Sans body text. */
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 800;
  font-size: 2.3rem;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
/* Hide the wordmark on small screens where the header collapses to a
   hamburger and the logo shrinks. */
@media (max-width: 767px) {
  .u-header .u-logo::after { display: none; }
}

/* "Logged in as" label: the framework pins it beside the logo (left: 209px),
   which now collides with the wordmark. Move it to the top-right corner of the
   header — above the nav row — so it clears both the wordmark and the nav
   links. Only shown on pages with a session; scoped here to the pages that
   carry the wordmark. */
.u-header .u-logged-in-as {
  left: auto !important;
  right: 24px !important;
  top: 14px !important;
  transform: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- current page highlight ---- */

.u-nav-link.u-nav-current,
a.u-nav-current {
  color: #ffffff !important;
  text-shadow:
    0 0 6px  rgba(255, 255, 255, 0.95),
    0 0 14px rgba(255, 255, 255, 0.65),
    0 0 26px rgba(255, 255, 255, 0.40);
}

/* Hovering the page you are already on should not dim the halo. */
.u-nav-link.u-nav-current:hover,
a.u-nav-current:hover {
  color: #ffffff !important;
  text-shadow:
    0 0 8px  rgba(255, 255, 255, 1),
    0 0 18px rgba(255, 255, 255, 0.75),
    0 0 30px rgba(255, 255, 255, 0.45);
}

/* Some viewers ask the browser to cut animation and heavy effects; a plain
   underline still answers "which page am I on". */
@media (prefers-reduced-motion: reduce) {
  .u-nav-link.u-nav-current,
  a.u-nav-current {
    text-shadow: none;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}