/* Header, main navigation tabs and footer bar (templates/base.html, core/_nav.html).

   Loaded after base.css on every page. Colours come only from the tokens in base.css :root
   (--header-*, --tab*, --bar-*, --focus*); tests/unit/test_navigation.py checks that this file
   has no colour literal, no url() and no @import, and that every var() it uses is defined.

   Layout: the website's look - white header, logo top left, user menu on the right, a white
   tab bar closed by a rule in the website's one fill blue (#175281, the footer bar's colour),
   the current tab a solid tab of that blue with bold white text.
   The tab bar is NOT sticky: the proposal editor's totals panel is itself sticky at the top
   of the viewport (estimating.css .editor-totals) and its Alt+digit section jumps scroll
   headings to the top; a sticky bar would cover both.

   Narrow screens: the tabs never wrap; the list scrolls sideways, with scroll shadows at the
   edge that has more tabs (the cue) and a thin visible scrollbar where the platform shows
   one. js/nav.js scrolls the current tab into view on load. Below 40rem the header is one
   row: the logo and Sign out (the name and roles are on the home page). */

/* ---------------------------------------------------------------- header */
.site-header {
  display: block;
  padding: 0;
  background: var(--header-bg);
  color: var(--nav-fg);
  border-bottom: 0;
}
.site-header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  padding: 0.6rem 1rem 0.5rem;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
}
/* 294 x 47 raster: natural size at most, never scaled up (docs/brand/BRAND.md). */
.site-brand img {
  display: block;
  width: auto;
  height: auto;
  max-height: 47px;
  max-width: 100%;
}
.site-brand:focus-visible { outline-offset: 3px; }

.site-user-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.75rem;
  margin-left: auto;
  min-width: 0;
}
.site-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  line-height: var(--lh-tight);
  text-align: right;
  min-width: 0;
}
.site-user-name {
  color: var(--nav-fg);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
.site-user-roles {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.site-signout { display: block; margin: 0; }
.site-signout button { min-height: 2.25rem; white-space: nowrap; }

/* ---------------------------------------------------------------- main navigation tabs */
.tabbar {
  flex: none;
  background: var(--tabbar-bg);
  border-bottom: 3px solid var(--tabbar-border);
}
.tabbar-list {
  position: relative;               /* offsetLeft of the tabs (js/nav.js) */
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0.25rem 1rem 0;
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scroll-padding-inline: 1rem;
  /* Scroll shadows: the "local" covers travel with the tabs, the "scroll" shadows stay at the
     edges, so a shadow shows only on a side that has more tabs to scroll to. */
  background:
    linear-gradient(to right, var(--tabbar-bg) 40%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--tabbar-bg) 40%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--backdrop), transparent) left center / 0.9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--backdrop), transparent) right center / 0.9rem 100% no-repeat scroll,
    var(--tabbar-bg);
}
.tabbar-item { flex: none; display: flex; }
.tab {
  display: flex;
  align-items: center;
  min-height: 2.75rem;              /* 44 px touch target */
  box-sizing: border-box;
  padding: 0.35rem 1rem 0.2rem;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--tab-fg);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.tab:hover {
  background: var(--tab-hover-bg);
  color: var(--tab-fg);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
/* The current page's tab: a solid blue tab joined to the blue rule, bold white text (shape and
   weight, not colour alone; forced-colours mode below adds a heavy underline). */
.tab[aria-current="page"] {
  background: var(--tab-active-bg);
  border-color: var(--tab-active-bg);
  color: var(--tab-active-fg);
  font-weight: var(--fw-bold);
}
.tab[aria-current="page"]:hover { color: var(--tab-active-fg); }
/* The focus ring is drawn inside the tab: the scrolling list would clip an outer one. Blue
   inner edge on white tabs, the yellow ring shows on the blue current tab. */
.tab:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: calc(-2px - var(--focus-width));
  box-shadow: inset 0 0 0 2px var(--focus-inner);
}

/* ---------------------------------------------------------------- footer bar */
.site-footer-items {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}
/* The website's bullet separators (U+2022 has a real glyph in Overpass; U+00B7 does not). */
.site-footer-items > li + li::before {
  content: "\2022";
  content: "\2022" / "";
  display: inline-block;
  padding: 0 0.5rem;
  font-weight: var(--fw-regular);
}
.site-footer-name { font-weight: var(--fw-semibold); }
.site-footer-release-id { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 40rem) {
  /* One header row: the logo, as large as fits beside Sign out (250 px at 390 px, as on the
     website), and Sign out. */
  .site-header-bar { flex-wrap: nowrap; column-gap: 0.75rem; padding: 0.5rem 1rem 0.4rem; }
  .site-user { display: none; }
  .site-user-menu { flex: none; }
  .site-header-bar:has(.site-user-menu) .site-brand img { max-width: calc(100vw - 8.75rem); }
  .tabbar-list { padding-inline: 0.5rem; scroll-padding-inline: 0.5rem; }
  .tab { padding-inline: 0.75rem; }
  .site-footer-items { flex-direction: column; }
  .site-footer-items > li + li::before { content: none; }
}

/* ---------------------------------------------------------------- forced colours (Windows High Contrast)
   The blue fill of the current tab is dropped there: mark it by shape instead, a heavy
   bottom bar and underlined text. */
@media (forced-colors: active) {
  .tab[aria-current="page"] {
    border: 2px solid CanvasText;
    border-bottom: 5px solid Highlight;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }
}

/* ---------------------------------------------------------------- print */
@media print {
  .tabbar, .site-user-menu { display: none !important; }
  .site-header { border-bottom: 1px solid var(--jimco-black); }
  .site-header-bar { padding: 0 0 0.3rem; }
  .site-brand img { max-height: 32px; }
}