/* Shared site header (green bar: theme toggle on the left, logo centred, the
   right-hand slot is an empty spacer the toggle's width so the logo stays
   centred).
   Used by index.html. Fixed dark palette in both themes, so
   the colour tokens are scoped to the header itself. */

.ps-header {
  --text: #f2f0eb;
  --muted: #a8a196;
  --border: #35322b;
  --header-safe-top: env(safe-area-inset-top, 0px);

  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px 10px 20px;
  padding-top: max(10px, var(--header-safe-top));
  border-bottom: 3px solid var(--border);
  z-index: 20;
  /* Follows the page as it scrolls, on every screen size. */
  position: sticky;
  top: 0;
  background: var(--brand-green, #585944);
  color: var(--text);
}

/* Light mode (pages that set data-theme="light"): the outline blends into the bar. */
:root[data-theme="light"] .ps-header {
  border-bottom-color: var(--brand-green, #585944);
}

/* BA mark, top left on every screen size: switches light / dark (index.html).
   44px tap target; the mark itself is smaller. The bar is green in both themes,
   so the mark needs no filter. */
.theme-toggle {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.theme-toggle:hover img,
.theme-toggle:focus-visible img {
  transform: scale(1.08);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.ps-header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.ps-header-logo img {
  height: 50px;
  width: 224px;
  object-fit: contain;
}

.ps-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ps-header-link {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.2s ease;
}

.ps-header-link:hover,
.ps-header-link:focus-visible {
  color: var(--text);
}

.ps-social {
  display: flex;
  gap: 10px;
}

.ps-social img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.ps-social a:hover img,
.ps-social a:focus-visible img {
  opacity: 1;
}

/* Mobile: header stays pinned and the outline goes back to 1px. */
@media (max-width: 899px) {
  .ps-header {
    position: sticky;
    top: 0;
    border-bottom-width: 1px;
  }
}

/* Narrow phones: shrink the script logo so the right-hand links stay on screen;
   below 340px the social icons go too (they're linked from the site's
   other pages). */
@media (max-width: 389px) {
  .ps-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ps-header-logo img {
    width: 176px;
    height: 40px;
  }

  .ps-header-right {
    gap: 12px;
  }
}

@media (max-width: 339px) {
  .ps-header-right .ps-social {
    display: none;
  }
}

@media (max-width: 299px) {
  .ps-header-logo img {
    width: 150px;
    height: 34px;
  }
}

/* Phones and tablets: toggle left, logo centred. The empty right-hand slot
   matches the toggle's width so space-between keeps the logo dead centre. */
@media (max-width: 899px) {
  .ps-header-right:empty {
    flex: 0 0 44px;
    width: 44px;
  }
}

/* Desktop: logo centred, everything else a little larger. */
@media (min-width: 900px) {
  .ps-header {
    min-height: 64px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .theme-toggle img {
    width: 34px;
    height: 34px;
  }

  .ps-header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .ps-header-right {
    margin-left: auto;
    gap: 22px;
  }

  .ps-header-link {
    font-size: 14px;
    letter-spacing: 1.4px;
    color: var(--text);
  }

  .ps-social {
    gap: 14px;
  }

  .ps-social img {
    width: 22px;
    height: 22px;
  }
}

/* UK / EU / US switcher in the header: desktop only. Narrow screens keep the
   in-page switcher (.currency-switch--page); desktop hides that one. */
.ps-header .currency-switch.currency-switch--header {
  display: none;
}

@media (min-width: 900px) {
  .ps-header .currency-switch.currency-switch--header {
    display: inline-flex;
  }

  .currency-switch.currency-switch--page {
    display: none;
  }
}