/* Header navigation dropdowns (sub-menus).
   The theme ships no submenu styling; this adds hover dropdowns for any
   header menu item that has children (e.g. the Tariff menu). */

header .bar .rt li { position: relative; }

/* caret indicator on items that have a dropdown */
header .bar .rt .menu-item-has-children > a { padding-right: 1.8rem; }
header .bar .rt .menu-item-has-children > a::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: 0.55;
}

/* invisible hover bridge so the panel doesn't close in the gap */
header .bar .rt .menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1.6rem;
}

/* the dropdown panel */
header .bar .rt .sub-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  min-width: 28rem;
  margin-top: 0.6rem;
  background: #fff;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  padding: 1rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 300;
}
header .bar .rt li:hover > .sub-menu,
header .bar .rt li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* dropdown items */
header .bar .rt .sub-menu li { width: 100%; }
header .bar .rt .sub-menu a {
  display: block;
  font-size: 1.5rem;
  line-height: 1.45;
  padding: 1.1rem 2.2rem;
  white-space: nowrap;
  color: var(--title);
}
header .bar .rt .sub-menu a::after { display: none; }
header .bar .rt .sub-menu a:hover { color: var(--primary); background: #f7f5f3; }

/* Mobile overlay menu: enlarge the left (main) nav column.
   The theme made it only ~43% wide at 10px; widen it and bump the text so
   it's readable and tappable, while keeping room for the right categories. */
@media screen and (max-width: 576px) {
  header nav .inner { grid-template-columns: repeat(8, 1fr); }
  header nav .lt { grid-column: span 4; }
  header nav .lt a { font-size: 17px; line-height: 1.3; }
  header nav .lt li + li { margin-top: 1.8rem; }
}