/**
 * Horizon Core: the CENTRED-LOGO header (tenant setting `header_layout` = 'centred'), HORIZON-20261002-060.
 * Loaded only for a tenant with that setting (Render/header-centred.php), at priority 1003: after the phone header
 * (hp-mobile-header.css, 1001), whose `html body.hp` rules this outranks by one class, never by !important.
 *
 * Three equal-width columns make the centring exact at every width: [start] [logo] [end]. `minmax(0, 1fr)` keeps the
 * two sides equal even when one side's content is wider than the other's.
 *
 * Phones and tablets (to 1024, the phone header):  [search account] . [LOGO] . [cart menu]
 *   The menu button stays the right-most item (the mobile ratchet's header-order rule) and every item is an in-flow
 *   child of .inside-header, so its header-wrap / header-order / header-overlap checks see all of them.
 * Desktop (from 1025):  [menu items] . [LOGO] . [search account cart], as on her old site.
 *
 * Height goes through --hp-header-h (80px / 96px), which the phone header's open panel, the hero padding and the
 * inner-page banners already follow.
 */

/* Every width: the logo column holds the logo and nothing else. GeneratePress puts a gap after the logo and prints an
   empty title box beside it (horizon-shell removes the title), which made the centre column 81px for a 64px logo and
   put the logo 8.5px left of centre (measured in the preview, 2026-10-02). */
html body.hp.hp-header-centred .site-branding-container { justify-content: center; }
html body.hp.hp-header-centred .site-branding-container .site-logo { margin: 0; }
html body.hp.hp-header-centred .site-branding-container .site-branding:not(:has(*)) { display: none; }

/* ── Phones and tablets ────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	html body.hp.hp-header-centred { --hp-header-h: 80px; }

	html body.hp.hp-header-centred #masthead .inside-header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		column-gap: var(--hp-sp-2, 8px);
		min-height: var(--hp-header-h);
	}
	html body.hp.hp-header-centred .inside-header .site-branding-container {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		margin: 0;
	}
	html body.hp.hp-header-centred .inside-header .site-logo img,
	html body.hp.hp-header-centred .inside-header .header-image {
		height: 64px;
		max-height: 64px;
		width: auto;
	}
	html body.hp.hp-header-centred .inside-header .hp-header-tools {
		grid-row: 1;
		margin: 0;
	}
	html body.hp.hp-header-centred .inside-header .hp-header-tools--start {
		grid-column: 1;
		justify-self: start;
	}
	/* The cart sits left of the menu button in the same column, never under it: the menu button's 44px plus the gap. */
	html body.hp.hp-header-centred .inside-header .hp-header-tools--end {
		grid-column: 3;
		justify-self: end;
		margin-right: calc(44px + var(--hp-sp-1, 4px));
	}
	html body.hp.hp-header-centred .inside-header #mobile-menu-control-wrapper {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		margin: 0;
	}
	html body.hp.hp-header-centred .inside-header .menu-toggle {
		width: 44px;
		padding-left: 0;
		padding-right: 0;
		justify-content: center;
	}
	/* The nav is the open panel here (absolutely positioned); a zero-width item in the end column keeps it out of
	   the row's measurements. */
	html body.hp.hp-header-centred .inside-header #site-navigation {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
}

/* ── Desktop ───────────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
	html body.hp.hp-header-centred { --hp-header-h: 96px; }

	html body.hp.hp-header-centred #masthead .inside-header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		min-height: var(--hp-header-h);
	}
	/* The nav spans all three columns UNDER the logo: its items start at the left, its tools end at the right. */
	html body.hp.hp-header-centred .inside-header #site-navigation {
		grid-column: 1 / -1;
		grid-row: 1;
		width: 100%;
		margin-left: 0;
	}
	html body.hp.hp-header-centred #site-navigation .inside-navigation,
	html body.hp.hp-header-centred #site-navigation .main-nav {
		width: 100%;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}
	html body.hp.hp-header-centred #site-navigation .main-nav > ul {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: flex-start;
	}
	html body.hp.hp-header-centred #site-navigation .main-nav > ul > li.hp-nav-tool:not(.hp-nav-tool ~ .hp-nav-tool) {
		margin-left: auto;
	}
	/* Her old menu began at the page edge; its first item's own padding is the only inset. */
	html body.hp.hp-header-centred #site-navigation .main-nav > ul > li:first-child > a { padding-left: 0; }
	html body.hp.hp-header-centred .inside-header .site-branding-container {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		position: relative;
		z-index: 2;
		margin: 0;
	}
	html body.hp.hp-header-centred .inside-header .site-logo img,
	html body.hp.hp-header-centred .inside-header .header-image {
		height: 72px;
		max-height: 72px;
		width: auto;
	}
}

/* Narrow desktops: the menu on the left must clear the centred logo. Measured in the preview with her five items:
   42px clear at 1180, 2px at 1100, 35px OVER the logo at 1025. Tighter item spacing below 1200 buys ~70px. */
@media (min-width: 1025px) and (max-width: 1199.98px) {
	html body.hp.hp-header-centred #site-navigation .main-nav > ul > li > a {
		padding-left: 12px;
		padding-right: 12px;
	}
	html body.hp.hp-header-centred #site-navigation .main-nav > ul > li:first-child > a { padding-left: 0; }
}