/* Site header and footer (RSP-156, RSP-155): the same on every page of the zoo. Colour tokens and the language menu come
   from base.css. Home page, app and card pages. */
.site-header {
  align-items: center;
  gap: 8px 16px;
}
/* Phones (RSP-155): logo and language menu share the first row, the menu's right edge on the content edge;
   the nav links get the second row. Wider screens: logo · links · menu in one row. DOM order stays logo, nav, menu. */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'logo menu'
    'nav nav';
}
.site-logo {
  grid-area: logo;
  justify-self: start;
}
.site-nav {
  grid-area: nav;
}
.site-header > .langmenu {
  grid-area: menu;
  justify-self: end;
}
@media (min-width: 600px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'logo nav menu';
    column-gap: 20px;
  }
  .site-nav {
    justify-self: end;
  }
}
.site-logo {
  font: 800 32px/1.1 var(--display);
  letter-spacing: -0.01em;
  color: var(--accent);
  text-decoration: none;
  border-radius: 8px;
}
/* Logo letters in the status class colours (--c1-ink … --c5-ink, base.css). */
.site-logo .k1 {
  color: var(--c1-ink);
}
.site-logo .k2 {
  color: var(--c2-ink);
}
.site-logo .k3 {
  color: var(--c3-ink);
}
.site-logo .k4 {
  color: var(--c4-ink);
}
.site-logo .k5 {
  color: var(--c5-ink);
}
/* The word for screen readers: hidden on screen, read once. */
.logo-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.site-logo:focus-visible,
.site-nav a:focus-visible,
.site-footer a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}
.site-nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target */
  color: var(--accent);
  font-weight: 700;
  text-underline-offset: 3px;
}
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1.5px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.site-footer a {
  color: var(--muted);
}

/* Page for a missing address (RSP-148): text and the 404 creature card side by side, stacked on phones. */
.not-found {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 48px;
  margin-top: 40px;
}
.not-found-text {
  flex: 1 1 320px;
  min-width: 0;
}
.not-found h1 {
  margin: 0 0 12px;
  font: 800 clamp(32px, 6vw, 48px) / 1.08 var(--display);
}
.not-found p {
  margin: 0 0 20px;
  font-size: 18px;
}
.not-found-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target */
  color: var(--accent);
  font-weight: 700;
  text-underline-offset: 3px;
}
.not-found-back:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.not-found-card {
  flex: 0 1 260px;
  margin-inline: auto;
}