/* Tesla visual and navigation audit — 2026-08-19.
   Purposeful imagery: course and guide pages already provide a page-specific
   hero asset through --hero. This rule makes that asset visible behind the
   readable overlay rather than adding decorative images to every section. */
.hero[style*="--hero"] {
  background-color: var(--ink);
  background-image: var(--hero);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* A visible focus indicator is required for keyboard navigation. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--yellow, #ffca3a);
  outline-offset: 3px;
}

/* Keep the complete, decision-critical navigation available on touch screens.
   It deliberately wraps below the brand instead of silently hiding links. */
@media (max-width: 800px) {
  .nav .shell,
  .nav-in {
    height: auto;
    min-height: 0;
    padding-block: .7rem;
    flex-wrap: wrap;
  }

  .nav .logo,
  .nav-in .logo { width: 8.5rem; }

  .links,
  .nav-links {
    display: flex;
    order: 2;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    font-size: .78rem;
  }

  .links a:not(.button),
  .nav-links a:not(.btn) {
    display: inline-flex;
    align-items: center;
    min-height: 2.7rem;
  }

  .links .button,
  .nav-links .btn {
    min-height: 2.7rem;
    padding: .5rem .65rem;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .links,
  .nav-links { font-size: .71rem; }

  .links .button,
  .nav-links .btn { padding-inline: .5rem; }
}