/*
 * PSSR.uk website logo integration — 3 November 2026
 * Load this file AFTER assets/css/site.css.
 * Logo artwork: 2006 × 505 viewBox; primary red #F20D19.
 * Scoped to the logo and the header row that must accommodate it.
 * This file does not recolour site buttons, text or other components.
 */

:root {
  --pssr-logo-red: #f20d19;
  --pssr-logo-header-width: 220px;
  --pssr-logo-footer-width: 200px;
}

/* Generic logo classes used in the supplied HTML snippets. */
.pssr-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  line-height: 0;
}

.pssr-brand__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  aspect-ratio: 2006 / 505;
  object-fit: contain;
}

/*
 * The current PSSR.uk header uses 1fr auto 1fr. Its right-hand controls
 * need more width than the left-hand navigation. A wider horizontal logo
 * would otherwise overlap the right controls. Give both side tracks their
 * natural width and centre the logo in the remaining middle track.
 */
header > .shell > .grid {
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 12px;
}

/* Current site selector plus the explicit class for future templates. */
header a[aria-label="PSSR.uk — home"],
header .pssr-brand--header {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  max-width: var(--pssr-logo-header-width);
  line-height: 0;
}

header a[aria-label="PSSR.uk — home"] > img,
header .pssr-brand--header > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  aspect-ratio: 2006 / 505;
  object-fit: contain;
}

footer a[aria-label="PSSR.uk home"],
footer .pssr-brand--footer {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  max-width: var(--pssr-logo-footer-width);
  line-height: 0;
}

footer #footer-logo,
footer .pssr-brand--footer > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  aspect-ratio: 2006 / 505;
  object-fit: contain;
}

/* The new artwork already includes PSSR.UK; hide the old duplicate text. */
footer #footer-logo + span {
  display: none;
}

/* Preserve the existing menu, call and callback controls on small screens. */
@media (max-width: 639px) {
  header > .shell > .grid {
    column-gap: 8px;
  }

  header a[aria-label="PSSR.uk — home"],
  header .pssr-brand--header {
    max-width: 160px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  header a[aria-label="PSSR.uk — home"],
  header .pssr-brand--header {
    max-width: 200px;
  }
}