/* Reportnet 3 brand colours.
 *
 * The header logo is a solid block rather than a transparent mark, so the
 * header has to match its background exactly or the logo reads as a pasted-on
 * rectangle. Both values below are sampled from the logo itself:
 *   #0c2b59  the navy field, 84% of the image
 *   #247c7e  the teal in the starburst
 *
 * Material only accepts its own named colours in mkdocs.yml, so the palette
 * there is set to "custom" and the actual values are defined here.
 */

[data-md-color-primary="custom"] {
  --md-primary-fg-color:        #0c2b59;
  --md-primary-fg-color--light: #144f8b;
  --md-primary-fg-color--dark:  #081d3c;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color:         #247c7e;
  --md-accent-fg-color--transparent: rgba(36, 124, 126, 0.1);
}

/* Links pick up the accent rather than the default indigo. */
.md-typeset a {
  color: var(--md-accent-fg-color);
}

.md-typeset a:hover {
  color: var(--md-primary-fg-color--light);
}

/* Material sizes the header logo at 1.2rem, which renders this wordmark too
 * small to read. The logo is 144x48; setting height alone keeps the ratio.
 * The header is flex and sized by its content, so it grows to fit rather than
 * clipping. Padding is trimmed back so the extra height goes to the logo
 * rather than to whitespace around it.
 *
 * 2.4rem is 48px at Material's 20px rem base — exactly the source image's own
 * height, and so the largest size that stays sharp. There is no
 * higher-resolution original: the uncropped file on the help site is 170x48,
 * the same height with more padding. Going beyond this upscales and blurs. If
 * a larger logo is ever wanted, a bigger source asset has to come first.
 */
.md-header__button.md-logo {
  padding: 0.2rem 0.4rem;
  margin: 0.2rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2.4rem;
  width: auto;
}

/* On phones the header is tighter, so scale back rather than letting the logo
 * push the search and menu buttons off the row.
 */
@media screen and (max-width: 44.9375em) {
  .md-header__button.md-logo img,
  .md-header__button.md-logo svg {
    height: 1.9rem;
  }
}

/* Material swaps the header title from the site name to the current page
 * title once the H1 scrolls out of view, by adding .md-header__title--active.
 * Keep the site name showing at all times: the page title is already the H1,
 * the breadcrumb and the browser tab, and a header caption that changes as you
 * scroll reads as a glitch rather than a feature.
 */
.md-header__title--active .md-header__topic:first-child {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  z-index: 0;
}

.md-header__title .md-header__topic + .md-header__topic {
  display: none;
}

/* The site title sits beside the logo. Give it room to breathe against the
 * larger mark, and keep it from wrapping mid-phrase on medium widths.
 */
.md-header__title {
  margin-left: 0.4rem;
  font-size: 0.95rem;
}

.md-header__title .md-header__topic {
  white-space: nowrap;
}

/* Material hides the section tabs below 76.1875em — about 1219px — and folds
 * the whole menu into the hamburger drawer. That is wider than a great many
 * laptop screens, so the top-level menu vanishes on hardware that has ample
 * room for it. The seven tabs need roughly 700px, so showing them from 62em
 * (992px) is comfortable.
 *
 * The hamburger stays available at these widths and still opens the full
 * navigation tree; the tabs simply restore top-level navigation alongside it.
 */
@media screen and (min-width: 62em) and (max-width: 76.1875em) {
  .md-tabs {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
 * Footer: copyright on the left, EEA credit and logo on the right, one row.
 * Markup in overrides/partials/copyright.html.
 * ------------------------------------------------------------------------- */

/* Material's .md-copyright is a narrow inline block at the start of the footer
 * row, so its children stack. Making it fill the row lets the two groups sit
 * at opposite ends instead, which keeps the footer one line tall.
 */
.md-footer-meta__inner .md-copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.2rem 0;

  /* flex-basis 100%, not width:100%. .md-copyright is a flex item of
   * .md-footer-meta__inner, and Safari resolves a percentage width on a flex
   * item against the flex algorithm rather than the containing block, so it
   * shrinks to its content there while Chrome fills the row. The credit's
   * margin-left:auto then pushes it only to the end of that narrow box, which
   * is why the logo sat mid-row in Safari and hard right in Chrome. Setting
   * the basis makes the row fill in both.
   */
  flex: 1 1 100%;
  max-width: none;
}

.rn3-footer__left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Material styles .md-copyright__highlight as a block with a bottom margin,
 * which would force a line break inside the left-hand group.
 */
.md-footer-meta__inner .md-copyright__highlight {
  display: inline;
  margin: 0;
}

.rn3-credit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;        /* pins the credit to the right edge of the row */
}

.rn3-credit__text {
  font-size: 0.64rem;
  line-height: 1.2;
  white-space: nowrap;
}

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

/* Source is 445x90. Sized to sit on one line with the text beside it rather
 * than dominating the strip, and held well below native so it stays crisp on
 * high-DPI screens.
 *
 * The image used here is the recoloured variant from tools/make_dark_logo.py.
 * Material's footer strip is dark in both colour schemes, and the EEA logo as
 * supplied is black lettering on transparency, so it would be invisible. The
 * variant whitens only the lettering and leaves the starburst in its brand
 * colours. No colour-scheme selector is involved, deliberately: Material sets
 * data-md-color-scheme on <html> from JavaScript, so any rule keyed on it
 * would not apply before that runs, or at all with JavaScript disabled.
 */
/* Specificity matters here. Material ships `.md-typeset img {height:auto}` at
 * 0-1-1, which outranks a lone class at 0-1-0, so `.rn3-credit__logo` on its
 * own silently lost and the logo rendered at its natural 90px however small a
 * height was set. Qualifying with the parent takes this to 0-2-0 and wins.
 */
.rn3-credit .rn3-credit__logo {
  height: 2.25rem;
  width: auto;
  display: block;
}

/* Dark mode: the navy is dark enough to work as-is, but the body accent needs
 * lifting or teal-on-near-black loses contrast against WCAG AA.
 */
[data-md-color-scheme="slate"] {
  --md-accent-fg-color: #3fa8ab;
}

[data-md-color-scheme="slate"] .md-typeset a {
  color: #3fa8ab;
}

/* Below the tablet breakpoint the row would otherwise squeeze the credit text
 * against the copyright. Let the two groups stack and align left.
 */
@media screen and (max-width: 44.9375em) {
  .md-footer-meta__inner .md-copyright {
    justify-content: flex-start;
  }

  .rn3-credit {
    margin-left: 0;
  }
}