/**
 * LNP PAC — mobile header repair.
 *
 * Bug (2026-09-08): on every phone width the nav toggle rendered at a fixed
 * x=423.7px / right=460.5px and was therefore entirely off-screen below ~484px.
 *
 * Cause: Kadence lays the mobile header row out as a CSS grid
 * (`.site-main-header-inner-wrap.site-header-row-has-sides.site-header-row-no-center`).
 * A grid item's automatic minimum size is its min-content width, so the branding
 * column could never shrink below logo (capped 250px, non-shrinkable) + the
 * duplicate `.site-title` text (132.7px) = 399.7px. Add the toggle column
 * (36.8px) and the 2x24px container padding and the row needs 484.5px minimum.
 * `#wrapper` has `overflow: clip`, so the blown-out grid never increased
 * `document.scrollWidth` — every "no horizontal overflow" check stayed green
 * while the button sat off-screen.
 *
 * Every rule below is scoped to `#mobile-header`, which Kadence hides entirely
 * at >=1025px, so desktop cannot be affected. The one exception is the
 * `.lnp-mobile-donate` button styling, which only ever renders inside
 * `#mobile-header` (see inc/mobile-header.php).
 */

/* 1. Let the branding column shrink below its min-content width. */
#mobile-header .site-header-row,
#mobile-header .site-header-section,
#mobile-header .site-header-item,
#mobile-header .site-branding,
#mobile-header a.brand,
#mobile-header .site-title-wrap {
	min-width: 0;
}

/* 2. Pin the branding track to an explicitly shrinkable 1fr (belt and braces,
      in case a future Kadence build reintroduces an `auto` minimum). */
#mobile-header .site-header-row.site-header-row-has-sides.site-header-row-no-center {
	grid-template-columns: minmax(0, 1fr) auto;
}

/* 3. The logo image IS the wordmark; the duplicate text title only ate
      horizontal room and was itself clipped off-screen. */
#mobile-header .site-branding .site-title-wrap {
	display: none;
}

/* 4. Logo keeps its 250px design cap but is now allowed to shrink below it.
      `min-width: 0` removes the flex item's automatic minimum size, which is
      what previously pinned it at 250px and blew the row out. It must NOT be
      `max-width: 100%` — the source image is 1500px wide, so that would let it
      scale *up* past 250px on tablet widths. */
#mobile-header .site-branding a.brand {
	max-width: 100%;
}

#mobile-header .site-branding a.brand img.custom-logo {
	max-width: 250px;
	min-width: 0;
	width: auto;
	height: auto;
	flex: 0 1 auto;
}

/* 5. Right-hand cluster: donate CTA then hamburger, never shrinking. */
#mobile-header .site-header-section-right {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
}

#mobile-header .site-header-section-right .site-header-item {
	flex: 0 0 auto;
}

/* 6. Compact donate CTA for the mobile header. Mirrors the desktop header
      button's brand colours (palette1 = #bdaa77 tan, palette2 = #0e2344 navy)
      but filled rather than outlined, because at phone size the donate path is
      the primary action and needs to read as such. */
.lnp-mobile-donate-wrap {
	display: flex;
	align-items: center;
}

a.lnp-mobile-donate {
	display: inline-block;
	white-space: nowrap;
	background: var(--global-palette1, #bdaa77);
	color: var(--global-palette2, #0e2344);
	font-family: var(--global-heading-font-family, inherit);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 11px 14px;
	border: 1px solid var(--global-palette1, #bdaa77);
	border-radius: 0;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

a.lnp-mobile-donate:hover,
a.lnp-mobile-donate:focus {
	background: transparent;
	color: var(--global-palette1, #bdaa77);
	text-decoration: none;
}

a.lnp-mobile-donate:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* 7. Smallest phones (320-360px): trim so the logo keeps a usable width. */
@media screen and (max-width: 380px) {
	a.lnp-mobile-donate {
		font-size: 11px;
		letter-spacing: 0.05em;
		padding: 10px 10px;
	}

	#mobile-header .site-header-section-right {
		gap: 6px;
	}
}

/* 8. Donate link inside the mobile drawer, below the nav, so the CTA is also
      present once the menu is open. */
/* `.site-header-item` is a flex row, so the CTA must claim its own line
   rather than sitting beside the nav. */
#mobile-drawer .site-header-item-mobile-navigation {
	flex-wrap: wrap;
}

.lnp-drawer-donate {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
	margin: 18px 0 0;
	padding: 14px 18px;
	background: var(--global-palette1, #bdaa77);
	color: var(--global-palette2, #0e2344);
	font-family: var(--global-heading-font-family, inherit);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}

.lnp-drawer-donate:hover,
.lnp-drawer-donate:focus {
	background: transparent;
	color: var(--global-palette1, #bdaa77);
	box-shadow: inset 0 0 0 1px var(--global-palette1, #bdaa77);
	text-decoration: none;
}

/* 9. Footer donate link (menu item 477, class lnp-footer-donate). The footer
      previously carried no donate path at all on any viewport. Tinted to the
      brand tan so it reads as the CTA without redesigning the footer nav. */
#footer-menu .lnp-footer-donate > a {
	color: var(--global-palette1, #bdaa77);
	font-weight: 700;
}