/* ==================================================================
   Header layout — logo left, menu centred, button right.

   Kept in its own file rather than folded into theme.css. That file
   carries edits made directly on the live site, and replacing it to
   add a rule here would take those edits with it.

   Loaded after theme.css, so these rules win without needing to be
   fought for with !important.
   ================================================================== */

@media (min-width: 1025px) {

	/* Three tracks: the outer two share what is left over equally, so the
	   middle one lands on the true centre of the bar no matter how wide
	   the logo or the button happen to be. Two flexible columns of the
	   same size is what centres it; the menu's own width does not. */
	.header__in {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 24px;
	}

	.header__in > .brand {
		justify-self: start;
	}

	.nav {
		justify-self: center;
	}

	.header__tools {
		justify-self: end;
	}

	/* The menu is the only thing left inside the nav on a wide screen,
	   so the gap that used to separate it from the button is dead space
	   that would push it off centre. */
	.nav {
		gap: 0;
	}
}

/* The button now sits beside the burger rather than inside the sliding
   panel, which means it stays on screen on a phone instead of being
   hidden behind a menu the visitor has to think to open. It is the one
   thing on the page we most want pressed, so it earns the room. */
.header__tools .nav__cta {
	white-space: nowrap;
}

@media (max-width: 600px) {

	/* Narrow enough that the button and the burger are competing for the
	   same inch. The button gives ground first, but never disappears. */
	.header__tools .nav__cta {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 11px;
		letter-spacing: 0.08em;
	}
}

@media (max-width: 400px) {
	.header__tools .nav__cta {
		padding-left: 11px;
		padding-right: 11px;
		font-size: 10.5px;
	}
}

/* ------------------------------------------------------------------
   Below 1025px the design's own stylesheet still expects this button
   to be sitting inside the sliding panel, and styles it to fill the
   width with a margin above. In the bar that would be a full-width
   block shoved halfway down. Those two rules are undone here rather
   than edited there, because that file is maintained on the live site.
------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.header__tools .nav__cta {
		width: auto;
		margin-top: 0;
	}
}