/* Resources dropdown in the primary nav.
   Its own file because index.html and digital-twin/index.html inline their CSS
   and only link colors_and_type.css, while the rest link shared.css. One file
   linked by all of them beats the same rules pasted eleven times. */

.nav-drop{position:relative;display:inline-flex;align-items:center}

/* A button, not an anchor. It goes nowhere: it opens a menu. Screen readers
   announce the difference and keyboard users expect Space to work. */
.nav-drop-t{
  display:inline-flex;align-items:center;gap:5px;
  font:inherit;font-size:13px;font-weight:500;
  /* The trigger is a <button>, so it does not match ".nav-links a" and gets
     none of the colour a page sets for its nav links. inherit does not rescue
     it either: it inherits from .nav-links, which sets no colour, so it lands
     on the body colour and renders dark on a dark hero. The fix is that any
     page with a non-default nav colour must name .nav-drop-t alongside its
     .nav-links a rules, which index.html now does. This is the light-page
     default. */
  color:var(--fg-2);
  background:none;border:0;padding:6px 0;cursor:pointer;
  transition:color .18s var(--ease-out);position:relative;
}
.nav-drop-t::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--accent-deep);transform:scaleX(0);transform-origin:left center;
  transition:transform .18s var(--ease-out);
}
/* currentColor keeps the affordance without asserting a value the page
   has already decided. The underline is what signals hover. */
.nav-drop-t:hover,.nav-drop[data-open="true"] .nav-drop-t{color:currentColor}
.nav-drop-t:hover::after,.nav-drop[data-open="true"] .nav-drop-t::after{transform:scaleX(1)}
.nav-drop-t:focus-visible{outline:var(--focus-outline);outline-offset:var(--focus-outline-offset)}

/* The chevron. Rotates to point up while the menu is open. */
/* currentColor so the chevron tracks the label. It is drawn with
   stroke="currentColor" in the markup, but stating it here means a page that
   recolours the trigger cannot leave the arrow behind. */
.nav-drop-t svg{width:10px;height:10px;stroke:currentColor;transition:transform .18s var(--ease-out)}
.nav-drop[data-open="true"] .nav-drop-t svg{transform:rotate(180deg)}

.nav-drop-m{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);
  min-width:172px;padding:6px;
  background:var(--white);border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow-2);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;
  transition:opacity .16s var(--ease-out),transform .16s var(--ease-out),visibility .16s;
  z-index:60;
}
.nav-drop[data-open="true"] .nav-drop-m{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* With scripts blocked nothing ever sets data-open, so the menu could never be
   reached and About, Careers and Terms had no entry point at all. Keyboard
   focus opens it with no script, which is what this file's header already
   promised. */
.nav-drop:focus-within .nav-drop-m{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* A hover bridge across the 10px gap, so the menu does not close while the
   pointer travels from the trigger down to the first item. */
.nav-drop-m::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}

/* The menu sits INSIDE .nav-links, and on the home page and the Mascot page
   .nav-links a is near white so it can read against the dark hero. Same
   specificity, and those rules are inlined later in the document, so they won
   and the menu rendered white on white: invisible, and only visible as a bug
   in a screenshot. The panel is always a light surface whatever the nav is
   doing above it, so these rules out-specify the page and state their own
   colour rather than inheriting one. */
.nav-drop-m a,
.nav-links .nav-drop-m a,
.nav.solid .nav-links .nav-drop-m a{
  display:block;padding:9px 12px;border-radius:5px;
  font-size:13px;font-weight:500;color:var(--ink-700);text-decoration:none;white-space:nowrap;
  transition:background .14s var(--ease-out),color .14s var(--ease-out);
}
.nav-drop-m a:hover,
.nav-links .nav-drop-m a:hover{background:var(--paper);color:var(--ink-900)}
.nav-drop-m a.active,
.nav-links .nav-drop-m a.active{color:var(--ink-900);font-weight:600}
.nav-drop-m a:focus-visible{outline:var(--focus-outline);outline-offset:-2px}

/* The mobile panel has no dropdown: the two links are simply listed under a
   heading, because a menu inside an already open menu is a trap on a phone. */
.nav-mobile-group{
  padding:14px 32px 4px;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-400);border-top:1px solid var(--border);
}
.nav-mobile a.nav-mobile-sub{padding-left:44px;border-top:0}

@media (max-width:820px){.nav-drop{display:none}}

/* Software rasterisers and reduced motion: show and hide with no transition.
   The menu still works exactly the same, it just does not fade. */
@media (prefers-reduced-motion:reduce){
  .nav-drop-m,.nav-drop-t svg,.nav-drop-m a{transition:none!important}
}
html.sw-render .nav-drop-m,html.sw-render .nav-drop-t svg,html.sw-render .nav-drop-m a{transition:none!important}