/* Mirror-only navigation fixes for the ashwinmitchell.com snapshot.
 *
 * Not part of the captured Squarespace CSS — this file is applied on top of it
 * by tools/apply-customizations.py, so re-running tools/mirror.py never clobbers
 * it. It changes the mirror only; the live site is untouched.
 *
 * Problem it solves: Squarespace boxes the nav into `flex: 1 1 34%` (411px at a
 * 1280px viewport) while the site title claims 33% it does not use. The six nav
 * items need ~565px, so `.header-nav-list`, which is `flex-wrap: wrap`, breaks
 * "Portraits / Writing" onto a second row.
 */

@media (min-width: 768px) {
  /* Let the title take only the width of the wordmark ... */
  .header-title {
    flex: 0 0 auto;
  }

  /* ... and give the leftover space to the nav. */
  .header-title-nav-wrapper,
  .header-nav {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* One row, always. */
  .header-nav-list {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* Between the burger breakpoint and ~1100px the row only fits with tighter
 * gutters: seven items (Demos included) overflowed the viewport at 860px.
 *
 * Squarespace sets the gutter from `.header-layout-nav-center .header-nav
 * .header-nav-item { margin: 0 1.4vw }` — three classes, so a two-class
 * selector here is silently outranked no matter how late it loads. Matching
 * its specificity with `.header-nav .header-nav-list > .header-nav-item` and
 * relying on load order is what actually makes this apply. */
@media (min-width: 768px) and (max-width: 1100px) {
  .header-nav .header-nav-list > .header-nav-item {
    margin: 0 7px;
  }
}