/* Mobile nav must render above hero, cookie notice, and page stacking contexts */
.trf-site-header,
header.trf-site-header {
  position: relative;
  z-index: 1100;
  overflow: visible;
}

.trf-header__bar,
.trf-mnav {
  overflow: visible;
}

.trf-mnav {
  position: relative;
  z-index: 1101;
}

.trf-mnav__panel {
  z-index: 1102;
}

@media (max-width: 767px) {
  .trf-is-sticky {
    z-index: 1100;
  }

  .trf-header__backdrop {
    z-index: 10050 !important;
  }

  .trf-header__sheet {
    z-index: 10051 !important;
    max-height: min(85vh, calc(100dvh - 4rem));
    padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
  }

  .trf-header__toggle {
    position: relative;
    z-index: 10052 !important;
  }

  .trf-site-header.trf-header.is-open .trf-header__sheet {
    transform: translateY(0) !important;
  }
}

/*
 * Brand must fit the phone, whatever the generated header CSS says.
 *
 * Gen #269 and #270 both shipped a header whose brand name sat on one
 * unbreakable line: at 390px it ran to 402px and pushed the burger off-screen
 * (the whole layout viewport stretched to 470px). Asking the model for a
 * mobile exception in the prompt did not hold, so the guarantee lives here —
 * flex children default to min-width:auto, which is what lets the name refuse
 * to shrink in the first place.
 */
@media (max-width: 767px) {
  .trf-header__bar {
    min-width: 0;
  }

  .trf-brand {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .trf-brand__name,
  .trf-brand span {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .trf-header__toggle,
  .trf-header__actions {
    flex-shrink: 0;
  }
}

/* Cookie notice stays below open mobile menu */
.trf-site-header.trf-header.is-open ~ * .trf-cookie-notice,
body.trf-menu-open .trf-cookie-notice {
  z-index: 9000 !important;
}

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }
}