/*
 * TES CAPITAL - Global header layout-shift controlled fix
 * File: wp-content/plugins/tes-a11y-nav/css/tes-responsive-header.css
 * Printed by tes-a11y-nav.php on wp_head (priority 999), i.e. AFTER wp-custom-css.
 *
 *   <= 767px      : existing mobile drawer (unchanged)
 *   768 - 1279px  : drawer navigation
 *   >= 1280px     : horizontal desktop navigation (all 10 items)
 */

/* 1. Stop the header box width from sizing the body grid column. */
@media all and (min-width: 48em) {

  body {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* 2. 768px - 1279px : drawer band */
@media all and (min-width: 48em) and (max-width: 79.9375em) {

  /* 2-1. Overlay drawer: never translate the page (keeps document.scrollWidth stable). */
  .a-mutual-nav-toggle:checked ~ main,
  .a-mutual-nav-toggle:checked ~ .o-mutual-header,
  .a-mutual-nav-toggle:checked ~ .o-mutual-nav,
  .a-mutual-nav-toggle:checked ~ .o-mutual-footer {
    transform: none;
  }

  /* 2-2. Drawer panel: scrollable to the bottom. */
  .o-mutual-header-nav {
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* 2-3. Vertical list inside the drawer (neutralises the >=768px one-row rules). */
  .o-mutual-header-nav .m-mutual-header-nav-list-proto,
  .o-mutual-header-nav .m-mutual-header-nav-list-secondary {
    display: block !important;
  }

  .o-mutual-header-nav .m-mutual-nav-separater-proto,
  .o-mutual-header-nav .m-mutual-header-nav-list-secondary ul {
    display: block !important;
    grid-template-columns: none !important;
  }

  .o-mutual-header-nav .m-mutual-nav-separater-proto > li,
  .o-mutual-header-nav .m-mutual-header-nav-list-secondary ul > li {
    display: block !important;
    white-space: normal !important;
  }

  /* 2-4. Hamburger: right hand side, above drawer and scrim. Logo X position untouched. */
  .m-mutual-header-body .a-mutual-nav-toggle-btn {
    position: fixed;
    z-index: 13;
    top: 12px;
    right: 16px;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
  }

  .m-mutual-header-body .a-mutual-nav-toggle-btn .a-text-proto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .m-mutual-header-body .a-mutual-nav-toggle-btn .a-icon-nav-bar {
    width: 28px;
    height: 28px;
    margin: 0;
  }

  /* 2-5. Admin bar (32px) must not overlap the button, the drawer or its first item. */
  body.admin-bar .m-mutual-header-body .a-mutual-nav-toggle-btn {
    top: 44px;
  }

  body.admin-bar .o-mutual-header-nav {
    top: 32px;
    max-height: calc(100vh - 32px);
  }

  body.admin-bar .a-mutual-nav-toggle-close {
    top: 32px;
  }

}

/* 2-6. 768px - 782px : admin bar is 46px tall. */
@media all and (min-width: 48em) and (max-width: 48.9375em) {

  body.admin-bar .m-mutual-header-body .a-mutual-nav-toggle-btn {
    top: 58px;
  }

  body.admin-bar .o-mutual-header-nav {
    top: 46px;
    max-height: calc(100vh - 46px);
  }

  body.admin-bar .a-mutual-nav-toggle-close {
    top: 46px;
  }

}

/* 3. >= 1280px : horizontal desktop navigation, all 10 items visible. */
@media all and (min-width: 80em) {

  .m-mutual-header-body .a-mutual-nav-toggle-btn {
    display: none;
  }

  /* li side padding 6px (column-gap stays at its current 4px). */
  .o-mutual-header-nav .m-mutual-nav-separater-proto > li {
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  /* Never hide missing items behind overflow. */
  .o-mutual-header-nav,
  .o-mutual-header-nav .m-mutual-header-nav-list-proto,
  .o-mutual-header-nav .m-mutual-nav-separater-proto {
    overflow: visible;
  }

}

/* 4. 768px - 1279px : service sub-items must stay usable inside the drawer.
 *    Production injects ul.nav-dropdown (6 links) into the "service" li from a footer
 *    inline script, and the accompanying footer inline CSS makes it an absolutely
 *    positioned hover-only flyout, hidden entirely at (max-width: 768px) with
 *    !important. Inside an off-canvas drawer both behaviours are wrong, so the list is
 *    rendered as a normal, always-expanded nested list. No JavaScript is added.
 *    display uses !important only because the footer rule at exactly 768px is
 *    !important; no other declaration here uses it. */
@media all and (min-width: 48em) and (max-width: 79.9375em) {

  #mutual-header-nav-panel .nav-dropdown {
    display: block !important;
    position: static;
    top: auto;
    left: auto;
    transform: none;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0 0 0 1rem;
    background-color: transparent;
    box-shadow: none;
    z-index: auto;
  }

  #mutual-header-nav-panel .nav-dropdown > li > a {
    white-space: normal;
  }

}

@media all and (min-width: 48em) and (max-width: 79.9375em) {

  .o-mutual-header {
    z-index: 16;
  }

  .o-mutual-header-nav {
    z-index: 17;
  }

  .a-mutual-nav-toggle:checked ~ .a-mutual-nav-toggle-close {
    z-index: 15;
  }

}

@media all and (min-width: 48em) and (max-width: 79.9375em) {

  #mutual-header-nav-panel .m-mutual-header-search-body {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  #mutual-header-nav-panel .m-mutual-header-search-body .m-grid-search-form {
    display: flex;
    align-items: stretch;
    gap: 0.375rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  #mutual-header-nav-panel .m-mutual-header-search-body .a-search-form-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 3rem;
    box-sizing: border-box;
  }

  #mutual-header-nav-panel .m-mutual-header-search-body .a-search-form-button-primary {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
  }

}

/* --------------------------------------------------------------
 * TES-GLOBAL-HEADER-TEST-TOP-RETURN-TRANSFORM-RESET-09
 * 768-1279px only.
 * 1) While Headroom is following (is-fit-sticky), stretch the header
 *    to the viewport width so the fixed MENU button lands at right 16px.
 * 2) At the very top, drop the identity transform left by
 *    .is-headroom-pinned so the fixed MENU button anchors to the
 *    viewport instead of the narrow header.
 * -------------------------------------------------------------- */

@media all and (min-width: 48em) and (max-width: 79.9375em) {

  html.is-fit-sticky #mutual-header.o-mutual-header {
    width: auto;
  }

  html.is-headroom-top:not(.is-fit-sticky) #mutual-header.o-mutual-header {
    transform: none;
  }

}

/* --------------------------------------------------------------
 * TES-GLOBAL-HEADER-LAYOUT-SHIFT-CONTROLLED-APPLY-01
 * 768-1279px only. MENU icon colour, nothing else.
 * mutual-header-primary.css pairs color: var(--color-white) with
 * background-color: var(--color-brand-action) on
 * .a-mutual-nav-toggle-btn:hover / :focus, but a later rule forces
 * background: 0 0 !important on that button, so only the white stays.
 * Once the drawer is closed the button keeps DOM focus, so the three
 * bars (background: currentcolor) stay white and disappear on the white
 * header. While the drawer is closed, restore the inherited colour.
 * The open state (:checked) and the root/hero header keep their existing
 * white. No !important, no other property, no other breakpoint.
 * -------------------------------------------------------------- */

@media all and (min-width: 48em) and (max-width: 79.9375em) {

  .a-mutual-nav-toggle:not(:checked) ~ .o-mutual-header:not(.is-mutual-header-root) .a-mutual-nav-toggle-btn:hover,
  .a-mutual-nav-toggle:not(:checked) ~ .o-mutual-header:not(.is-mutual-header-root) .a-mutual-nav-toggle-btn:focus {
    color: inherit;
  }

}