/* Mobile navigation + federated header positioning.
   Kept separate while the new H&C visual system is being stabilised. */

body {
  padding-top: 2.35rem;
}

.c-nav {
  top: 2.35rem !important;
  overflow: visible !important;
}

@media (max-width: 900px) {
  /* The nav uses backdrop-filter, which creates a containing block for
     fixed descendants in some browsers. The panel therefore lives as an
     absolute child of the fixed header instead of another fixed layer. */
  .c-nav__mobile-panel {
    position: absolute !important;
    inset: auto 0 auto 0 !important;
    top: 100% !important;
    width: 100vw !important;
    height: calc(100dvh - 7.25rem) !important;
    max-height: calc(100dvh - 7.25rem) !important;
    overflow-y: auto !important;
    z-index: 500 !important;
    background:
      linear-gradient(135deg, rgba(23, 35, 62, 0.56), transparent 48%),
      #0b1121 !important;
  }

  .c-nav__mobile-panel:not([hidden]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .c-nav__mobile-inner {
    display: block !important;
    min-height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .c-nav__mobile-direct,
  .c-nav__mobile-group,
  .c-nav__mobile-group summary,
  .c-nav__mobile-cta-wrap {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .c-nav__mobile-direct,
  .c-nav__mobile-group summary {
    color: #f8f4eb !important;
  }

  .c-nav__mobile-group-body a {
    color: #cbd2d5 !important;
  }

  .c-nav__mobile-index,
  .c-nav__mobile-group-body a:hover,
  .c-nav__mobile-group-body a:focus-visible {
    color: #8fd5c5 !important;
  }
}