/* menu.css - the main menu's dropdowns (2026-10-21, Brendon: hovering over Tools, Guides or Manuals shows each of their
   pages for direct access, the same menus on every page). tools/brand/site_chrome.py writes the menu into every page and
   links this file after site.css (after the inline copy of it on the home and edition pages, from 27 October). On
   screens 1000 px and wider a menu opens on hover and on keyboard focus (Tab moves into it and out of it); narrower,
   the menu is a row of plain links and each opens its section's own page. Colours from the band tokens of site.css, in
   light and dark alike. */

/* the EN tag tells a reader of a translated page that the page behind the link is English; on an English page it says
   nothing */
html[lang="en"] .dd-en{display:none}

/* the page you are on, in the menu */
nav.links a[aria-current]{color:var(--band-text);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:6px}
/* the whole header (brand, the five entries, language, Buy) takes up to 1,092 px in Russian, Spanish and Portuguese:
   from 1000 px a label never breaks, the entries sit 22 px apart, and a translated page shows the brand as "Stopline"
   until the header has its full 1,080 px (measured 2026-10-21; at 1000 px the brand ran into the menu) */
@media (min-width:1000px){nav.links{gap:22px}nav.links a{white-space:nowrap}}
@media (min-width:1000px) and (max-width:1199px){html:not([lang="en"]) header.top .bn-x{display:none}}

.dd{position:relative;display:inline-flex;align-items:center}
.dd-m{display:none}
@media (min-width:1000px){
  nav.links{align-items:center}
  /* a small chevron after a menu that opens */
  .dd>a::after{content:"";display:inline-block;width:6px;height:6px;margin:0 2px 0 8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.75;transition:transform .15s}
  .dd:hover>a::after,.dd:focus-within>a::after{transform:translateY(1px) rotate(225deg)}
  /* the panel hangs from the bottom of the header; its padding is the bridge the pointer crosses */
  .dd-m{position:absolute;top:100%;left:50%;z-index:30;padding-top:19px;transform:translateX(-50%)}
  .dd:focus-within .dd-m{display:block}
  .dd-p{display:grid;gap:2px;min-width:250px;padding:10px;border:1px solid var(--band-line);border-radius:12px;background:var(--band-card);box-shadow:0 18px 40px rgba(0,0,0,.35)}
  .dd-p::before{content:"";position:absolute;top:13px;left:50%;width:12px;height:12px;margin-left:-6px;background:var(--band-card);border-left:1px solid var(--band-line);border-top:1px solid var(--band-line);transform:rotate(45deg)}
  .dd-cols{grid-template-columns:repeat(2,minmax(210px,max-content));column-gap:14px;row-gap:8px;min-width:480px}
  .dd-cols .dd-g:nth-child(2){grid-column:2;grid-row:1/span 2}
  .dd-cols .dd-all{grid-column:1/-1}
  .dd-g{display:grid;gap:2px;align-content:start}
  .dd-g+.dd-g{margin-top:6px}
  .dd-cols .dd-g+.dd-g{margin-top:0}
  .dd-h{display:flex;align-items:center;gap:8px;padding:6px 10px 4px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--band-faint);white-space:nowrap}
  .dd-hl{color:var(--band-2);font-size:13.5px}
  .dd-hl img{width:18px;height:18px;border-radius:4px}
  nav.links .dd-m a{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 10px;border-radius:8px;color:var(--band-2);font-size:15px;line-height:1.25;text-decoration:none;white-space:nowrap;transition:background .12s,color .12s}
  nav.links .dd-m a:hover,nav.links .dd-m a:focus-visible{background:var(--band);color:var(--band-text)}
  nav.links .dd-m a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
  nav.links .dd-m a[aria-current]{color:var(--band-text);background:var(--band);box-shadow:inset 3px 0 0 var(--orange);text-decoration:none}
  .dd-i{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:#34c6b5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  nav.links .dd-m .dd-all{margin-top:6px;border-top:1px solid var(--band-line);border-radius:0 0 8px 8px;padding-top:12px;color:var(--band-text);font-weight:600}
  nav.links .dd-m .dd-all::after{content:"";width:7px;height:7px;margin-left:auto;border-right:1.5px solid var(--orange);border-top:1.5px solid var(--orange);transform:rotate(45deg)}
  .dd-en{margin-left:6px;padding:1px 5px;border:1px solid var(--band-line);border-radius:4px;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--band-faint);vertical-align:1px}
}
/* hover opens it only where there is a real pointer; a tap on a touch screen follows the link */
@media (min-width:1000px) and (hover:hover){
  .dd:hover .dd-m{display:block;animation:dd-in .14s ease-out}
}
@keyframes dd-in{from{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.dd:hover .dd-m{animation:none}}