/* ─────────────────────────────────────────────────────────────────────────
   Shared site header components. Loaded by every page after css/tokens.css.

   The lockup is:   [hexagon mark] England's MSAs  |  Page name
   The mark and wordmark together are the home link. The mark is never
   hidden, so there is a route home at every width. The full LSE Growth Lab
   and LSE Cities logos live on the landing page and the data explorer's
   entry screen, not in the working headers, to keep those uncluttered.

   Themeable through custom properties (fallbacks are the landing-page look):
     --site-ink     wordmark        --site-muted   page name
     --site-line    divider         --site-hover   hover/focus wash
   ───────────────────────────────────────────────────────────────────────── */

.site-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.site-home {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 4px 4px;
  margin: -4px -8px -4px -4px;   /* generous hit area, no layout shift */
  border-radius: 6px;
  text-decoration: none;
  color: var(--site-ink, #2b2b2b);
  transition: background-color .15s ease;
}
a.site-home:hover { background: var(--site-hover, rgba(0, 0, 0, .045)); }
a.site-home:focus-visible {
  outline: 2px solid var(--color-focus, #2770a3);
  outline-offset: 1px;
  background: var(--site-hover, rgba(0, 0, 0, .045));
}

.site-mark { flex: none; display: block; height: 26px; width: auto; }

.site-name {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.site-divider {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--site-line, #E3E1DA);
}

.site-page {
  font-size: 14px;
  font-weight: 500;
  color: var(--site-muted, #6f6f6f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Very narrow phones: the mark alone carries the home link. */
@media (max-width: 380px) {
  .site-name { display: none; }
}

/* Plain-text institutional credit, used where the full logos would crowd. */
.site-credit {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--site-muted, #6f6f6f);
  white-space: nowrap;
}
.site-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.site-credit a:hover { color: var(--site-ink, #2b2b2b); border-bottom-color: currentColor; }
.site-credit a:focus-visible { outline: 2px solid var(--color-focus, #2770a3); outline-offset: 2px; }

/* ─── Skip link ───────────────────────────────────────────────────────────
   Visually hidden until focused, and it is the FIRST tab stop rather than a
   replacement for the header controls: pressing Tab again moves on to them
   as normal, so nothing becomes less reachable by adding it. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 2000;
  padding: 9px 14px;
  border-radius: 0 0 6px 6px;
  background: var(--gl-grey, #454545);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .12s ease-out;
}
.skip-link:focus { top: 0; outline: 2px solid #ffdd00; outline-offset: 2px; }

/* ─── Reduced motion ──────────────────────────────────────────────────────
   Honours the OS setting. The strongest case on this site is the devolution
   panel's infinite shimmer placeholder; the rest is small hover movement,
   which is cheap to switch off at the same time. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}