/* QA overrides layered on top of the compiled stylesheet. */

/* Menu icon changes colour in step with the bar and logo (was instant, so it
   flashed white-on-white between light and dark sections). */
nav button {
  transition: color 0.3s, opacity 0.3s;
}

/* Visible keyboard focus on links and buttons. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid hsl(var(--signal));
  outline-offset: 2px;
}

/* Small uppercase captions were below 4.5:1 contrast on light backgrounds. */
.text-prussian\/45,
.text-prussian\/50,
.text-prussian\/55 {
  color: hsl(var(--prussian) / 0.72);
}

/* Touch targets: at least 44px for the nav controls and footer links. */
@media (pointer: coarse), (max-width: 1023px) {
  nav button {
    min-width: 44px;
    min-height: 44px;
  }
  footer ul {
    gap: 0;
  }
  footer ul button,
  footer ul a {
    display: inline-block;
    /* !important: the compiled .p-0 utility on these links outranks this rule. */
    padding-block: 9px !important;
  }
  footer a[href="#"] {
    padding-block: 12px;
  }
}

/* VinOS module cards: on phones each card was 400px tall and mostly empty,
   and grew on tap. Let them size to their content. */
@media (max-width: 639px) {
  #platform .auto-rows-\[400px\] {
    grid-auto-rows: auto;
  }
  #platform article,
  #platform article:hover {
    min-height: 220px;
  }
}