/* Desktop / landscape Nexus header alignment.
   Keep the Nexus + autosave block visually aligned to the store selector at the top right. */
.header-title-block h1 {
  font-weight: 600 !important;
}

@media (min-width: 981px) {
  .app-header {
    align-items: flex-start !important;
  }

  .header-title-block {
    height: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-self: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Landscape was sitting too high at -7px; keep only a subtle lift. */
    transform: translateY(-3px) !important;
  }

  .header-title-block h1 {
    margin: 0 !important;
    font-size: clamp(34px, 2.55vw, 40px) !important;
    line-height: .98 !important;
    font-weight: 600 !important;
    letter-spacing: -.035em !important;
  }

  .header-title-block .save-status {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .header-right {
    align-self: flex-start !important;
  }

  .header-store-selector {
    margin-top: 0 !important;
  }
}

/* Restore the small Famous-red autosave indicator in the desktop header. */
@media (min-width: 1101px) {
  .header-title-block .save-status::before {
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 8px !important;
    border-radius: 50% !important;
    background: #df0038 !important;
  }
}

/* Compact/tablet portrait: lift Nexus slightly so it sits closer to the top chrome. */
@media (max-width: 980px) {
  .header-title-block {
    transform: translateY(-4px) !important;
  }

  .header-title-block h1 {
    font-size: 30px !important;
    font-weight: 600 !important;
  }
}

/* Phones can take a touch more lift without affecting landscape/tablet alignment. */
@media (max-width: 580px) {
  .header-title-block {
    transform: translateY(-5px) !important;
  }
}
