/* Mobile menu panel open-state.
 *
 * The panel expands via the grid-template-rows 0fr -> 1fr trick. The closed
 * state (`grid-rows-[0fr]`) and the transition come from Tailwind utilities on
 * the element, but the open state was a Tailwind *arbitrary aria-variant*
 * (`aria-[hidden=false]:grid-rows-[1fr]`) which the browser compile engine does
 * NOT reliably emit -- so on a content-hash recompile the open rule vanished and
 * the menu collapsed to height:0. Declaring it here in plain CSS keeps the menu
 * working regardless of Tailwind engine/host. view.js toggles aria-hidden.
 * The `.oit-nav__shell` prefix (an ancestor) raises specificity to (0,3,0) so this
 * always beats the `.proto-blocks-scope .grid-rows-[0fr]` (0,2,0) closed-state
 * utility regardless of stylesheet load order. Covers both the mobile menu panel
 * and its nested submenu accordions (`.oit-nav__panel-sub`, toggled by
 * `.oit-nav__panel-trigger`), which use the same grid 0fr->1fr open mechanism. */
.oit-nav__shell .oit-nav__panel[aria-hidden="false"],
.oit-nav__shell .oit-nav__panel-sub[aria-hidden="false"] {
  grid-template-rows: 1fr;
}

.oit-nav__cta::after {
  content: '';
  display: inline-block;
  width: 13px;
  height: 12px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12' fill='none'><path d='M0 1.41L1.36689 0L7.18345 6L1.36689 12L0 10.59L4.43997 6L0 1.41ZM5.81656 1.41L7.18345 0L13 6L7.18345 12L5.81656 10.59L10.2565 6L5.81656 1.41Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12' fill='none'><path d='M0 1.41L1.36689 0L7.18345 6L1.36689 12L0 10.59L4.43997 6L0 1.41ZM5.81656 1.41L7.18345 0L13 6L7.18345 12L5.81656 10.59L10.2565 6L5.81656 1.41Z' fill='black'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.oit-nav__sublink::after,
.oit-nav__panel-sublink:not(.oit-nav__panel-view-all)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background-color: var(--color-brand-red, #D1001D);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
}

.oit-nav__sublink:hover::after,
.oit-nav__sublink:focus-visible::after,
.oit-nav__panel-sublink:not(.oit-nav__panel-view-all):hover::after,
.oit-nav__panel-sublink:not(.oit-nav__panel-view-all):focus-visible::after {
  transform: scaleX(1);
}