/*
 * Mobile navbar sizing.
 *
 * Every page stylesheet carries its own copy of the navbar rules, so this file
 * is linked LAST on each page and overrides them on equal specificity.
 *
 * The links row is by far the widest part of the header. Left alone it grows
 * past the viewport and pushes the logo out of view on phones, so this file
 * lets the links track shrink and scales the row down to fit.
 */

/* Applies at every width, not just mobile.
   Each page sets `img { max-width: 100% }` globally. That 100% resolves against
   the logo's grid track, so as soon as the nav row overflows and the track is
   squeezed, the logo gets clamped narrow while its fixed height holds it tall —
   it renders skinny. Opting the logo out of that rule keeps it in proportion. */
.navbar-logo img {
  width: auto;
  max-width: none;
  flex-shrink: 0;
  object-fit: contain;
}

@media (max-width: 900px) {
  .navbar-container {
    /* A plain `1fr` track is minmax(auto, 1fr): its floor is the links'
       min-content width, which the nowrap labels make very wide. That floor is
       what shoves the logo off screen. minmax(0, 1fr) removes it so the links
       column yields to the logo instead of the other way round. */
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  /* the logo keeps its intrinsic size no matter how tight the row gets */
  .navbar-logo {
    flex-shrink: 0;
  }

  .navbar-logo img {
    height: 62px;
  }

  .navbar-links {
    min-width: 0;
    flex-wrap: nowrap;
  }
}

@media (max-width: 640px) {
  .navbar-container {
    padding: 0 12px;
    gap: 8px;
  }

  /* square mark, so height drives width 1:1 — this is the "wider" lever */
  .navbar-logo img {
    height: 56px;
  }

  .navbar-links {
    gap: 4px;
  }

  .navbar-link {
    padding: 9px 8px;
    font-size: 15px;
    letter-spacing: 0.5px;
  }

  .navbar-user-menu .navbar-user-toggle {
    gap: 7px;
    font-size: 15px;
  }

  .navbar-user-toggle .navbar-user-name {
    max-width: 78px;
  }
}

/* smallest phones — trim once more so nothing clips */
@media (max-width: 380px) {
  .navbar-logo img {
    height: 48px;
  }

  .navbar-link {
    padding: 8px 5px;
    font-size: 13px;
    letter-spacing: 0;
  }

  .navbar-user-menu .navbar-user-toggle {
    font-size: 13px;
  }

  .navbar-user-toggle .navbar-user-name {
    max-width: 56px;
  }
}