/* ED LOST LEGIONS — shared mobile header, all pages and languages. */
/* Loaded after page styles. Desktop layout stays untouched. */
@media screen and (max-width: 800px) {
  html, body { max-width: 100%; }

  body .site-header {
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  /* The source banner is panoramic (2700x379). Its logo is on the left;
     a centered cover crop cuts the wordmark off on narrow screens.
     Instead, crop from the left at a fixed responsive illustration scale. */
  body .site-header::before {
    content: "";
    display: block !important;
    order: 0 !important;
    flex: none !important;
    width: 100% !important;
    height: clamp(110px, 31vw, 135px) !important;
    background-image: url("/assets/images/internal-header.jpg");
    background-color: #000;
    background-repeat: no-repeat;
    background-position: -28px center;
    background-size: auto clamp(95px, 29vw, 116px);
  }

  body .site-header > .internal-header-image {
    display: none !important;
  }

  body .site-header > .main-nav {
    box-sizing: border-box !important;
    position: relative !important;
    order: 1 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    float: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(6px, 2.2vw, 11px) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 10px 7px 13px !important;
    background: #000 !important;
    overflow: visible !important;
    z-index: 30 !important;
  }

  body .site-header > .main-nav > a,
  body .site-header > .main-nav > a:visited {
    box-sizing: border-box !important;
    display: inline-flex !important;
    position: static !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    font: 500 clamp(10px, 2.9vw, 12px)/1.3 Arial, Helvetica, sans-serif !important;
    white-space: nowrap !important;
    color: #fff !important;
    text-decoration: none !important;
  }
  body .site-header > .main-nav > a.active { opacity: .65 !important; }
  body .site-header > .main-nav > a.language-switch {
    flex: 0 0 auto !important;
    opacity: 1 !important;
  }
  body .site-header > .main-nav > a.language-switch img {
    display: block !important;
    width: 20px !important;
    max-width: 20px !important;
    height: auto !important;
    max-height: 16px !important;
    object-fit: contain !important;
  }
}

/* A little more breathing room on very small phones. */
@media screen and (max-width: 360px) {
  body .site-header > .main-nav {
    gap: 5px !important;
    padding-inline: 4px !important;
  }
  body .site-header > .main-nav > a,
  body .site-header > .main-nav > a:visited {
    font-size: 10px !important;
  }
}