/*
  Sticky header, footer and language switcher.
  Every page includes the same chrome partials, so these styles are shared by all
  of them.
*/

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(251, 250, 247, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
}

.site-header__aside {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .site-header__inner {
    padding-block: 0.75rem;
  }

  .site-header__aside {
    gap: 0.75rem;
  }
}

/* Logo -------------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
}

/*
  One brand-kit lockup carries the mark, the wordmark and the tagline, so the
  header needs no typography of its own. The footer sits on navy and points at
  the white artwork instead; the colour lives in the file, not here.
*/
.logo__img {
  display: block;
  width: auto;
  height: 2.75rem;
}

/* Rating badge ------------------------------------------------------------ */

.rating-badge {
  display: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--mint);
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.rating-badge__star {
  color: #f59e0b;
}

@media (min-width: 768px) {
  .rating-badge {
    display: inline-flex;
  }
}

/* Language switcher ------------------------------------------------------- */

.lang {
  display: inline-flex;
  align-items: center;
}

.lang-switcher {
  padding: 0.375rem 0.625rem;
  border: 1px solid rgba(11, 40, 88, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--navy);
  font-size: 0.75rem;
  line-height: 1.2;
}

.lang-switcher:focus {
  border-color: var(--teal);
}

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

.site-footer {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
  background: var(--navy-deep);
  color: var(--cream);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 2.5rem;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: rgba(251, 250, 247, 0.8);
}

.site-footer__nav a {
  transition: color 0.18s ease;
}

.site-footer__nav a:hover {
  color: var(--teal-bright);
}

.site-footer__nav a[aria-current="page"] {
  color: var(--teal-bright);
  font-weight: 600;
}

.site-footer__nav-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.5);
}

.site-footer__copyright {
  font-size: 0.875rem;
  color: rgba(251, 250, 247, 0.6);
}

.site-footer__disclaimer {
  max-width: 48rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(251, 250, 247, 0.45);
}