/* The dropdown that changes shape: a bar of menus that share one white panel. Moving from one menu to the next the
   panel changes size and place, its little arrow slides under the new button and the contents slide in from the side
   they come from. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #16161d;           /* text */
  --muted: #6b6b78;
  --line: rgba(22, 22, 29, 0.08);
  --soft: #f4f4f6;          /* under a link pointed at */
  --gap: 12px;              /* set by the script: between the bar and the panel */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

/* the bar and, under it, the room the panel needs */
.zone {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 300px;
}

/* ---------------------------------------------------------------- the bar */
.nav {
  position: relative;
}

/* a bridge over the gap, so the pointer can go from a button down to the panel without closing it */
.nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--gap);
  display: none;
}

.nav.is-open::after {
  display: block;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.25s ease;
}

.nav__trigger[aria-expanded='true'] {
  background: var(--soft);
}

@media (hover: hover) and (pointer: fine) {
  .nav__trigger:hover {
    background: var(--soft);
  }
}

.nav__trigger:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.nav__caret {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s cubic-bezier(0.34, 1.6, 0.5, 1);
}

.nav__trigger[aria-expanded='true'] .nav__caret {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------- the panel and its arrow */
.panel,
.arrow {
  position: absolute;
  top: calc(100% + var(--gap));
  left: 0;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.panel {
  width: 300px;
  height: 200px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -20px rgba(22, 22, 29, 0.22), 0 12px 24px -12px rgba(22, 22, 29, 0.12);
  will-change: transform, width, height;
}

.arrow {
  z-index: 3;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 3px 0 0 0;
  background: #fff;
  box-shadow: -1px -1px 0 0 var(--line);
}

/* ---------------------------------------------------------------- the lists */
.drop {
  position: absolute;
  top: calc(100% + var(--gap));
  left: 0;
  z-index: 2;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px;
  visibility: hidden;
  opacity: 0;
}

.drop__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drop__link {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  border-radius: 12px;
  transition: background-color 0.2s ease;
}

.drop__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--mark);
  transition: transform 0.4s cubic-bezier(0.34, 1.6, 0.5, 1);
}

.drop__icon svg,
.drop__mini svg,
.drop__glyph {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drop__text {
  display: grid;
  gap: 2px;
}

.drop__text b {
  font-size: 14.5px;
  font-weight: 650;
}

.drop__text small {
  font-size: 13px;
  color: var(--muted);
}

/* the solutions: two columns of plain links */
.drop--solutions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  padding: 18px 22px 16px;
}

.drop__column {
  display: grid;
  align-content: start;
  min-width: 150px;
}

.drop__heading {
  margin: 0 0 6px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.drop__plain {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 560;
  transition: background-color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.6, 0.5, 1);
}

/* the developers: a dark card and a short list */
.drop--developers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.drop__card {
  display: grid;
  align-content: end;
  gap: 6px;
  width: 220px;
  min-height: 170px;
  padding: 18px;
  border-radius: 13px;
  background: #16161d;
  color: #fff;
  transition: transform 0.4s cubic-bezier(0.34, 1.6, 0.5, 1);
}

.drop__glyph {
  width: 26px;
  height: 26px;
  margin-bottom: auto;
  color: #b9a8ff;
}

.drop__card b {
  font-size: 15.5px;
  font-weight: 700;
}

.drop__card small {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.66);
}

.drop__list--small {
  align-content: start;
  min-width: 190px;
}

.drop__link--small {
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 8px 14px 8px 8px;
}

.drop__link--small b {
  font-size: 14px;
  font-weight: 600;
}

.drop__mini {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--soft);
  color: var(--ink);
}

.drop__mini svg {
  width: 16px;
  height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .drop__link:hover,
  .drop__plain:hover {
    background: var(--soft);
  }

  .drop__link:hover .drop__icon {
    transform: translateY(-2px) rotate(-6deg);
  }

  .drop__plain:hover {
    transform: translateX(3px);
  }

  .drop__card:hover {
    transform: translateY(-2px);
  }
}

.drop a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

@media (max-width: 480px) {
  .nav__list {
    gap: 0;
  }

  .nav__trigger {
    height: 40px;
    padding: 0 7px;
    font-size: 13.5px;
    gap: 2px;
  }

  .nav__caret {
    width: 12px;
    height: 12px;
  }

  .drop__card {
    width: 100%;
    min-height: 130px;
  }

  .drop__list--small {
    width: 100%;
  }
}

/* sul telefono il pannello più alto (Developers, con la card sopra la lista) vuole più posto sotto la barra */
@media (max-width: 480px) {
  .zone {
    min-height: 406px;
  }
}

/* telefono e schermo basso (la casella dell'anteprima): meno vuoto intorno, così barra e pannello aperto stanno
   insieme nella casella */
@media (max-width: 480px) and (max-height: 520px) {
  .stage {
    padding: 16px;
  }
}

/* telefono stretto: i quattro bottoni della barra stanno tutti dentro lo schermo */
@media (max-width: 380px) {
  .nav__trigger {
    padding: 0 6px;
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__caret,
  .drop__icon,
  .drop__plain,
  .drop__card {
    transition: none;
  }
}