/* The neue wolf nav and footer (the "Neue Nav" and "Neue Footer" components):
   the rules Webflow styles can't hold, loaded on every page from the site's
   head code. The components carry their own type and colour as native styles,
   so they look the same on a page of the old site as on the neue wolf page. */

.nw-nav, .nw-foot { -webkit-font-smoothing: antialiased; }
/* the fine grain over the blue, as in the prototype */
.nw-nav, .nw-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.3' intercept='0.35'/%3E%3CfeFuncG type='linear' slope='0.3' intercept='0.35'/%3E%3CfeFuncB type='linear' slope='0.3' intercept='0.35'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; background-blend-mode: overlay; }
.nw-nav { transition: box-shadow 0.28s ease, background-color 0.16s ease; }
.nw-nav.is-stuck { box-shadow: 0 5px 18px rgba(12, 12, 60, 0.16); }
.nw-nav a:focus-visible, .nw-nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* the logo: the wolf is drawn twice, round-eyed and squinting; pointed at,
   he narrows his eye */
.nw-wordmark [data-eye="squint"] { visibility: hidden; }
.nw-wordmark:hover [data-eye="squint"], .nw-wordmark:focus-visible [data-eye="squint"] { visibility: visible; }
.nw-wordmark:hover [data-eye="open"], .nw-wordmark:focus-visible [data-eye="open"] { visibility: hidden; }

/* Platform's and Resources' menus: hidden until the nav script opens one,
   then faded in under its button, which keeps its hover while it's up and
   turns its caret over. Their items light up as the install rows do on
   white. A strip above each panel bridges the gap for the pointer. */
.nw-nav-drop-panel { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; }
.nw-nav-drop-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; }
.nw-nav-drop.is-open .nw-nav-drop-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nw-nav-drop.is-open .nw-nav-link { background-color: #2f2fd2; }
.nw-nav-caret { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.nw-nav-drop.is-open .nw-nav-caret { transform: rotate(180deg); }
.nw-nav-drop-link:hover { background-color: rgba(21, 24, 28, 0.06); }
.nw-nav .nw-nav-drop-link:focus-visible { outline-color: #3b3bef; outline-offset: 0; }

/* the phone menu: Platform and Resources fold their links in under them,
   a <details> each with one name between them, so opening one folds the
   other; the caret turns over as on the bar */
.nw-nav-menu-summary::-webkit-details-marker { display: none; }
.nw-nav-menu-group .nw-nav-caret { width: 20px; height: 20px; }
.nw-nav-menu-group[open] .nw-nav-caret { transform: rotate(180deg); }
.nw-nav-menu-sublink:hover { color: #fff; }
.nw-nav summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* the footer */
.nw-foot .nw-wordmark { justify-self: start; align-self: start; }
.nw-foot-social-ic { fill: currentColor; }
.nw-foot-link:hover, .nw-foot-link:focus-visible { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nw-foot-social-link:hover { color: #fff; background-color: rgba(255, 255, 255, 0.14); }
.nw-foot a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
.nw-foot .nw-foot-social-link:focus-visible { border-radius: 6px; }

/* below 1100px the links fold into the menu panel */
@media (max-width: 1100px) {
  .nw-nav { gap: 12px; padding-left: 24px; padding-right: 24px; }
  .nw-nav-links, .nw-signin, .nw-btn.nw-btn-outline { display: none; }
  .nw-nav-toggle { display: inline-flex; }
  /* open, the bar goes dark (#080524) with its menu, so the two read as one
     panel; closed, it's the brand blue again */
  .nw-nav.is-open { box-shadow: none; }
  .nw-nav.is-open,
  .nw-nav.is-open .nw-nav-menu { background-color: #080524; }
  .nw-nav.is-open .nw-nav-menu { display: block; animation: nw-nav-menu-in 0.16s ease-out; }
  .nw-nav-toggle[aria-expanded="true"] .nw-nav-toggle-bars { display: none; }
  .nw-nav-toggle[aria-expanded="true"] .nw-nav-toggle-cross { display: inline; }
  .nw-foot-inner { padding-left: 24px; padding-right: 24px; }
}
/* the footer's wordmark takes a row of its own over the four groups */
@media (max-width: 940px) {
  .nw-foot-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
/* phones: the footer's groups go two a row */
@media (max-width: 600px) {
  .nw-foot-inner { padding: 40px 24px 24px; }
  .nw-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@keyframes nw-nav-menu-in { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .nw-nav, .nw-foot-social-link, .nw-nav-caret, .nw-nav-drop-panel { transition: none; }
  .nw-nav.is-open .nw-nav-menu { animation: none; }
}