/*
 * Header with a centered logo (owner, 01/11/2026: "mets le logo au milieu"). The theme has no layout
 * option for it, so its grid is re-placed here; header rules only.
 * - Up to 1279 px: burger left, logo centered, cart right (search and account are in the menu
 *   drawer's foot or not needed with two bags).
 * - From 1280 px: main menu left, logo centered, search, account and cart right.
 * The checkout's focus header (.maleable-focus-checkout) is placed by mu-plugins/checkout-trust.php.
 * Enqueued by mu-plugins/order-tracking.php.
 */

/* Phones and tablets. */
@media (max-width: 1279.98px) {
	body:not(.maleable-focus-checkout) .site-header .header-search,
	body:not(.maleable-focus-checkout) .site-header .header-account {
		display: none;
	}
}

/* Tablets and small laptops: same layout as phones, the theme's desktop grid is undone. */
@media (min-width: 960px) and (max-width: 1279.98px) {
	body:not(.maleable-focus-checkout) .site-header__inner {
		grid-template-areas: none;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		min-block-size: 4.5rem;
		padding-inline: calc(var(--m-gutter) - 0.625rem);
	}

	body:not(.maleable-focus-checkout) .site-header__start {
		display: flex;
	}

	body:not(.maleable-focus-checkout) .site-header .menu-toggle {
		display: inline-flex;
	}

	body:not(.maleable-focus-checkout) .site-header .site-nav {
		display: none;
	}

	body:not(.maleable-focus-checkout) .site-header .site-branding {
		grid-area: auto;
		text-align: center;
	}

	body:not(.maleable-focus-checkout) .site-header__actions {
		grid-area: auto;
		margin-inline-end: 0;
	}
}

/* Computers: menu | logo | icons, the logo on the page's center line. */
@media (min-width: 1280px) {
	body:not(.maleable-focus-checkout) .site-header__inner {
		grid-template-areas: none;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	body:not(.maleable-focus-checkout) .site-header .site-nav {
		grid-area: auto;
		grid-column: 1;
		grid-row: 1;
		margin-inline: 0 1.5rem;
	}

	/* Six links in half the bar beside the logo: measured 497 px for 509 available at 1280 px,
	   534 px for 541 at 1440 px (13 px type with the theme's spacing overlapped the logo). */
	body:not(.maleable-focus-checkout) .site-header .site-nav__list {
		flex-wrap: nowrap;
		gap: 0 0.875rem;
	}

	body:not(.maleable-focus-checkout) .site-header .site-nav__list a {
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.5px;
		white-space: nowrap;
	}

	body:not(.maleable-focus-checkout) .site-header .site-branding {
		grid-area: auto;
		grid-column: 2;
		grid-row: 1;
		text-align: center;
	}

	/* Search and the actions share the right column: the search icon sits just left of the
	   account and cart icons (two 44 px icons, the actions overhang the gutter by 0.625rem). */
	body:not(.maleable-focus-checkout) .site-header .header-search {
		grid-area: auto;
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		margin-inline-end: calc(2 * var(--m-touch) - 0.625rem);
	}

	body:not(.maleable-focus-checkout) .site-header__actions {
		grid-area: auto;
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
}

@media (min-width: 1440px) {
	body:not(.maleable-focus-checkout) .site-header .site-nav__list {
		gap: 0 1rem;
	}

	body:not(.maleable-focus-checkout) .site-header .site-nav__list a {
		letter-spacing: 1px;
	}
}

/* Menu drawer: "Shop by category" is a paragraph now (order-tracking.php), styled as the h2 was. */
p.menu-drawer__heading {
	line-height: 1.2;
}