/* Header refinements for the knowledge base.
 *
 * Two things, both driven by the same fact: this is a secondary site most readers reach from
 * endeavoreng.com, so it should say where you are and offer the way back without scrolling.
 *
 * Paired with overrides/partials/header.html — the markup and these rules change together.
 */

/* ------------------------------------------------------------------------- *
 * 1. The scrolled title: "Endeavor Engineering Knowledge · Page Title"
 *
 * Material swaps the site name out for the page title once the page's own heading scrolls past.
 * The override keeps both, and this de-emphasizes the site half so the page title still reads as
 * the subject rather than competing with it.
 * ------------------------------------------------------------------------- */

.eei-header__site {
  font-weight: 400;
  opacity: 0.62;
}

.eei-header__sep {
  margin: 0 0.35em;
  opacity: 0.38;
}

.eei-header__page {
  font-weight: 700;
}

/* Narrow viewports: the site name is the first thing to go. The logo still identifies the site,
 * and on a phone the page title is what the reader needs from a 3.5rem bar. */
@media screen and (max-width: 76.1875em) {
  .eei-header__site,
  .eei-header__sep {
    display: none;
  }
}

/* ------------------------------------------------------------------------- *
 * 2. The parent-site link, top right
 *
 * Sized and colored to sit quietly beside the search and palette buttons — it is a way out, not
 * a call to action. Matching Material's own header buttons rather than inventing a control.
 * ------------------------------------------------------------------------- */

.eei-header__parent {
  display: flex;
  align-items: center;
  gap: 0.4em;
  flex-shrink: 0;
  margin: 0 0.2rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.1rem;
  color: currentcolor;
  font-size: 0.7rem;
  line-height: 1;
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 125ms, background-color 125ms;
}

.eei-header__parent:hover,
.eei-header__parent:focus-visible {
  opacity: 1;
  background-color: rgba(128, 128, 128, 0.15);
}

.eei-header__parent svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentcolor;
  flex-shrink: 0;
}

/* Below the drawer breakpoint the header is crowded by the hamburger, title and search, so the
 * label drops and the icon alone carries it. The accessible name survives via the title attribute. */
@media screen and (max-width: 59.9375em) {
  .eei-header__parent-label {
    display: none;
  }
}

/* ------------------------------------------------------------------------- *
 * 3. Leaving the site
 *
 * Off-site links open in a new tab, so the reader keeps their place in the documentation. The
 * behavior is applied in the markup for the header and footer links (so it survives with
 * JavaScript disabled) and by assets/js/external-links.js for links written in Markdown, which no
 * template can reach.
 *
 * What is styled here is the *notice*: the arrow a sighted reader sees before clicking, and the
 * off-screen text a screen reader announces. Both say the same thing, which is the point — the
 * arrow alone is decoration that assistive technology cannot read, and CSS-generated content is not
 * reliably announced.
 * ------------------------------------------------------------------------- */

/* Off-screen but still in the accessibility tree — not display:none, which removes it entirely. */
.eei-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Applied by external-links.js to prose links only; site chrome, buttons and image links are
 * excluded there, because an arrow appended to any of those reads as a rendering fault. */
.md-typeset a.eei-external::after {
  content: "\2197"; /* ↗ NORTH EAST ARROW */
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.85em;
  line-height: 1;
  text-decoration: none;
  opacity: 0.7;
}