/* Main menu: what happens when you point at an item (2.22.3).
 *
 * Appearance > "Main menu: pointing at an item" puts nav--hov-<x> on the
 * menu. A (arrow flips, text turns brand colour) is the original and lives in
 * app.css; B-F are here. This one file is used by the website AND by the
 * previews on the Appearance page, so what the owner hovers over in admin is
 * exactly what the site does. Only devices with a real pointer get the
 * effect - on a phone "hover" sticks after a tap, which looks broken.
 *
 * Every style except A keeps the arrow still and highlights the item, and
 * the item stays highlighted while its drop-down is open (the drop-down is
 * inside the <li>, so :hover holds).
 */
@media (hover:hover){
  .nav[class*="nav--hov-"] .nav__link{transition:color .16s,background .16s,box-shadow .2s,transform .2s}
  .nav--hov-b .nav__item:hover .nav__caret,.nav--hov-c .nav__item:hover .nav__caret,
  .nav--hov-d .nav__item:hover .nav__caret,.nav--hov-e .nav__item:hover .nav__caret,
  .nav--hov-f .nav__item:hover .nav__caret{transform:none}

  /* B - soft highlight: a light tint of the brand colour behind the item */
  .nav--hov-b .nav__item:is(:hover,:focus-within)>.nav__link{background:rgba(16,24,40,.06);background:color-mix(in srgb,var(--brand) 9%,transparent);color:var(--brand)}
  .nav--hov-b.nav--onDark .nav__item:is(:hover,:focus-within)>.nav__link{background:rgba(255,255,255,.13);color:#fff}

  /* C - 3D pop-out: lifts off the bar as a white raised button */
  .nav--hov-c .nav__item:is(:hover,:focus-within)>.nav__link{transform:translateY(-3px);background:#fff;color:var(--ink);
    box-shadow:0 1px 0 rgba(16,24,40,.06),0 3px 0 -1px #d5dae2,0 10px 18px -6px rgba(16,24,40,.35)}
  .nav--hov-c.nav--onDark .nav__item:is(:hover,:focus-within)>.nav__link{color:var(--ink);
    box-shadow:0 3px 0 -1px #9aa4b5,0 12px 22px -6px rgba(0,0,0,.6)}
  .nav--hov-c .nav__item:is(:hover,:focus-within)>.nav__link .nav__caret{opacity:1;color:var(--brand)}

  /* D - 3D tilt: tips towards you like a key */
  .nav--hov-d .nav__list{perspective:500px}
  .nav--hov-d .nav__item:is(:hover,:focus-within)>.nav__link{transform:rotateX(14deg) translateY(-2px) scale(1.06);transform-origin:50% 100%;
    background:linear-gradient(#fff,#f1f3f7);color:var(--brand);box-shadow:0 2px 0 #c9cfd9,0 14px 20px -10px rgba(16,24,40,.45)}
  .nav--hov-d.nav--onDark .nav__item:is(:hover,:focus-within)>.nav__link{background:linear-gradient(#26324a,#18223a);color:#fff;
    box-shadow:0 2px 0 #050a14,0 14px 22px -10px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.15)}

  /* E - underline: a brand bar grows under the item */
  .nav--hov-e .nav__link{position:relative}
  .nav--hov-e .nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:3px;border-radius:3px;
    background:var(--brand);transform:scaleX(0);transition:transform .22s}
  .nav--hov-e .nav__item:is(:hover,:focus-within)>.nav__link{color:var(--brand)}
  .nav--hov-e.nav--onDark .nav__item:is(:hover,:focus-within)>.nav__link{color:#fff}
  .nav--hov-e .nav__item:is(:hover,:focus-within)>.nav__link::after{transform:scaleX(1)}

  /* F - solid colour: fills with the brand colour */
  .nav--hov-f .nav__item:is(:hover,:focus-within)>.nav__link{background:var(--brand);color:#fff;
    box-shadow:0 6px 14px -6px rgba(16,24,40,.45);box-shadow:0 6px 14px -6px color-mix(in srgb,var(--brand) 70%,transparent)}
}