/*
 * The gopher sites' shared page shell (gopher_core/web): tokens, the page frame, the skip link,
 * the focus outline, the navbar frame and its menus' entries, and the footer. Loaded after
 * Bootstrap 5.3 and the site's vendor sheets, before the site's own sheet (which may override
 * it), and built on Bootstrap's CSS variables so both colour modes (data-bs-theme="light" |
 * "dark" on <html>) work. No !important.
 *
 * The lg- prefix is LabGopher's: the shell was LabGopher's before the other sites shared it, and
 * the class names stayed so its JS and CSS needn't change. Design rules: plain and data-dense; no
 * accent bars, pills, chips, decorative icons on text buttons, tiny uppercase labels, gradients
 * or glow.
 */

/* ---- Tokens ------------------------------------------------------------------ */

:root {
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lg-max-width: 105rem;

  /* The focus outline (2px, solid, no glow): at least 3:1 against every background it can sit
     on, LabGopher's filter card's tinted one included (4.3:1 on #f8f9fa). */
  --lg-focus-color: #0d6efd;
  /* Menu entries with nothing on this site: dimmer than the others, still 4.5:1. */
  --lg-menu-empty-color: #6c757d;
}

[data-bs-theme="dark"] {
  --lg-focus-color: #6ea8fe;                  /* #0d6efd is under 3:1 on the dark filter card */
  --lg-menu-empty-color: #8b9298;
}

/* ---- Base and layout ------------------------------------------------------------ */

.lg-icon { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.125em; }

.lg-container { max-width: var(--lg-max-width); margin-inline: auto; }
/* The footer stays at the bottom of the window on short pages (Contact, 404, an empty view):
   the body is a column at least the window's height and main takes the spare room. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* Whatever scrolls into view (Tab, Shift+Tab, a page change, an anchor) stops below the sticky
   navbar, not under it (LabGopher's table.js sets --lg-sticky-top to its height). */
html { scroll-padding-top: var(--lg-sticky-top, 0px); }
.lg-main { flex: 1 0 auto; width: 100%; padding-block: 1rem 2rem; }
.lg-main:focus { outline: none; }             /* focused only by the skip link */

.lg-skip-link:focus {
  position: absolute; top: .5rem; left: .5rem; z-index: 1080;
  padding: .5rem .75rem;
  background: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
}

/* Focus: one solid 2px outline everywhere (--lg-focus-color), never the browser's own ring or
   Bootstrap's translucent .25rem glow. Bootstrap's rings are box-shadows: buttons and close
   buttons through variables, form fields, nav links and the navbar toggler directly. */
:focus-visible { outline: 2px solid var(--lg-focus-color); outline-offset: 2px; }
.btn { --bs-btn-focus-box-shadow: none; }
.btn-close { --bs-btn-close-focus-shadow: none; }
.pagination { --bs-pagination-focus-box-shadow: none; }
.form-control:focus,
.form-select:focus,
.nav-link:focus-visible,
.navbar-toggler:focus { box-shadow: none; }
.btn:focus-visible,
.btn-close:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.page-link:focus-visible { outline: 2px solid var(--lg-focus-color); outline-offset: 2px; }
/* Text fields and selects show it whenever they have focus, as Bootstrap's ring did. */
.form-control:focus,
.form-select:focus { outline: 2px solid var(--lg-focus-color); outline-offset: 1px; }
.dropdown-item:focus-visible { outline: 2px solid var(--lg-focus-color); outline-offset: -2px; }
/* Buttons without a Bootstrap colour class get the same outline. */
.lg-icon-btn:focus-visible { outline: 2px solid var(--lg-focus-color); outline-offset: 2px; }

/* ---- Navbar --------------------------------------------------------------------- */

.lg-navbar { --bs-navbar-padding-y: .375rem; }
/* The brand slot: a logo image 28px tall, or (a site without one) its name as a wordmark of the
   same height. */
.lg-logo { display: block; width: auto; height: 28px; }
.lg-wordmark { display: block; height: 28px; font-size: 1.375rem; font-weight: 500; line-height: 28px; white-space: nowrap; }

.lg-icon-btn {
  --bs-btn-color: var(--bs-navbar-color);
  --bs-btn-hover-color: var(--bs-navbar-hover-color);
  --bs-btn-active-color: var(--bs-navbar-active-color);
  --bs-btn-padding-x: .5rem;
  --bs-btn-padding-y: .5rem;
  display: inline-flex;
  align-items: center;
  font-size: 1.125rem;
  line-height: 1;
}

.lg-navbar .dropdown-toggle .lg-icon { margin-right: .125rem; }
/* Menu entries with a number after the name (LabGopher's listings per view, the dev site menu's
   ports), in aligned figures. An entry with none is plain dimmed text, not a link: still listed.
   Bootstrap's disabled colour is too faint to read. */
.lg-menu-item { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.lg-menu-count,
.lg-menu-port { font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.dropdown-item.active .lg-menu-count,
.dropdown-item:active .lg-menu-count,
.dropdown-item.active .lg-menu-port,
.dropdown-item:active .lg-menu-port { color: inherit; }
.dropdown-item.lg-menu-empty,
.dropdown-item.lg-menu-empty .lg-menu-count,
.dropdown-item.lg-menu-empty .lg-menu-port { color: var(--lg-menu-empty-color); }

/* Collapsed navbar (phones, tablets): the open menu is the one scroll area, so long menus and
   the ones below them stay reachable on short screens. */
@media (max-width: 991.98px) {
  .lg-navbar .navbar-collapse {
    max-height: calc(100vh - var(--lg-navbar-bar, 3.5rem));
    max-height: calc(100dvh - var(--lg-navbar-bar, 3.5rem));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (min-width: 992px) {
  .lg-navbar .navbar-collapse { align-items: center; }
  .lg-navbar .dropdown-menu { max-height: calc(100vh - 4.5rem); overflow-y: auto; }
  /* A menu opens below its toggle; where it would run off the window's right edge (LabGopher's
     brand menu up to about 1240px), shell.js moves it left just enough to fit. */
  .lg-navbar .dropdown-menu:not(.dropdown-menu-lg-end)[data-bs-popper] { left: var(--lg-menu-shift, 0px); }
}

/* ---- Footer ---------------------------------------------------------------------- */

.lg-footer {
  padding-block: 1.25rem;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
  border-top: var(--bs-border-width) solid var(--bs-border-color);
}
/* Bootstrap's link blue is 4.3:1 on the light footer background; its hover blue passes AA. */
[data-bs-theme="light"] .lg-footer { --bs-link-color-rgb: 10, 88, 202; --bs-link-hover-color-rgb: 8, 66, 152; }
.lg-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; }
.lg-disclosure { flex: 1 1 20rem; max-width: 60rem; margin: 0; }
.lg-ebay-badge { width: 100px; height: auto; }
/* The badge's grey "right now on" lettering needs a light backing in dark mode. */
[data-bs-theme="dark"] .lg-ebay-badge { box-sizing: content-box; padding: .25rem .375rem; background: #fff; border-radius: var(--bs-border-radius); }
.lg-copyright { margin: .75rem 0 0; }