/* ============================================================
   MechaPaint - mobile.css
   Phone / small-tablet overrides. Loaded last, after every other
   stylesheet, so these rules win.

   The header on mobile keeps the brand and primary actions visible.
   ============================================================ */

@media (max-width: 780px) {

  /* ---------- header: brand only, centered, always visible ---------- */

  /* The desktop header is a three column grid (styles2.css). The middle
     column is empty down here because the links are hidden, so it collapses
     to two: brand left, buttons right. */
  .nav {
    top: 0;
    z-index: 120;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 8px 10px;
  }

  /* secondary nav links go away; primary actions stay visible */
  .nav .nav-links,
  .nav > .btn {
    display: none;
  }

  /* Brand-only header: the logo mark moves BETWEEN the two words, so the
     header reads Mecha <logo> Paint. Flex order does the rearranging, the
     markup order stays img, "Mecha", "Paint" for everything above 780px. */
  .nav .logo {
    margin: 0;
    font-size: 16px;
    gap: 4px;
    min-width: 0;
  }

  .nav .logo .logo-pre        { order: 1; }
  .nav .logo-mark             { order: 2; }
  .nav .logo span:not(.logo-pre) { order: 3; }

  .nav .logo-mark {
    width: 28px;
    height: 28px;
  }

  .nav .nav-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
  }

  .nav .nav-actions .btn-small {
    padding: 7px 9px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* ---------- sale strip sits under the pinned header ---------- */

  .salebar {
    position: relative;
    z-index: 55;
  }
}

/* On a phone the four header buttons and the brand want about 400px between
   them, so on the narrow half of the phone range the Forum button steps out
   and Discord, Download and Buy stay. Measured at 390px: brand 138px plus
   buttons 251px overlapped by 19px, and Forum is the one of the four that is
   also a link in the footer. Above 560px all four fit and all four show. */
@media (max-width: 560px) {
  .nav .nav-actions .btn-outline {
    display: none;
  }
}