/* Keyboard affordances and responsive adjustments for the existing T4 menu. */
.t4-megamenu[data-bpih-menu-a11y] a:focus-visible,
.t4-offcanvas[data-bpih-menu-a11y] a:focus-visible,
.t4-offcanvas[data-bpih-menu-a11y] button:focus-visible,
.t4-offcanvas[data-bpih-menu-a11y] [role="button"]:focus-visible {
  outline: 3px solid #a55c34;
  outline-offset: 3px;
}
.t4-offcanvas[data-bpih-menu-a11y] .sub-menu-back[role="button"],
.t4-offcanvas[data-bpih-menu-a11y] .sub-menu-toggle[role="button"] {
  cursor: pointer;
}
html[dir="rtl"] .t4-offcanvas[data-bpih-menu-a11y] .sub-menu-back > i.fa-chevron-left {
  transform: scaleX(-1);
}
/* Give the menu the space between the logo and actions instead of a fixed grid column. */
@media (min-width: 992px) {
  #t4-header .header-default > .container-fluid {
    padding-inline: clamp(24px, 3vw, 72px);
  }

  #t4-header .header-default .header-wrap {
    flex-wrap: nowrap;
    gap: clamp(16px, 1.5vw, 28px);
    margin-inline: 0;
  }

  #t4-header .header-default .header-wrap > :first-child,
  #t4-header .header-default .t4-header-r {
    flex: 0 0 auto;
    width: auto;
    padding-inline: 0;
  }

  #t4-header .header-default .navbar-brand {
    width: 161px;
  }

  #t4-header .header-default .t4-navbar {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-inline: 0;
  }

  #t4-header .header-default .t4-offcanvas-toggle {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-inline: 16px 0;
  }

  #t4-header .header-default .t4-header-r .custom > p {
    margin-block: 0;
  }

  #t4-header .header-default .t4-header-r .btn {
    white-space: nowrap;
  }

  #t4-header .t4-megamenu > .navbar-nav {
    flex-wrap: nowrap;
  }

  #t4-header .t4-megamenu > .navbar-nav > .nav-item {
    flex: 0 0 auto;
  }

  #t4-header .t4-megamenu > .navbar-nav > .nav-item > .nav-link {
    padding-inline: clamp(6px, calc(3vw - 30px), 18px);
    white-space: nowrap;
  }
}

/* Keep every translated menu available in the drawer on tablet-sized screens. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #t4-header .t4-megamenu {
    display: none !important;
  }
}
