/**
 * Primary navigation flush right; logo on the left (uses full header row).
 * Desktop: avoids a gap when the menu button is still in the DOM as a third flex child.
 */

.site-header .header-inner {
  justify-content: flex-start;
  width: 100%;
}

/* Header row spans full viewport; body .container elsewhere stays max-width capped */
.site-header .container.header-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* Nudge logo slightly off the left edge (not flush to the corner) */
.site-header .logo {
  flex-shrink: 0;
  margin-left: 208px;
}

/* Desktop / tablet: pin menu to the far right (!important beats inline header CSS on many pages) */
@media (min-width: 901px) {
  .site-header .header-inner {
    justify-content: flex-start !important;
  }

  .site-header .main-nav {
    margin-left: auto !important;
    flex: 0 0 auto;
  }

  .site-header .mobile-toggle {
    display: none !important;
    margin: 0 !important;
  }
}

/* Mobile: full-screen menu; hamburger on the right */
@media (max-width: 900px) {
  .site-header .main-nav {
    margin-left: 0;
  }

  .site-header .mobile-toggle {
    display: block;
    margin-left: auto;
  }
}