/**
 * Site header — logo, tagline, search, hamburger. Global (every page).
 * Values verified against the exact literal CSS in Design Refrance's
 * TSI About.html (grepped directly) after a user spot-check caught the
 * first version was wrong — most notably the logo was 27px instead of
 * the real 58px, and the header used the wrong markup structure entirely
 * (a generic "site-branding" div instead of matching `.ui-logo` as both
 * the wrapper AND the direct parent of the `<small>` tagline).
 *
 * .wm-g/.wm-y/.dot below are the shared per-letter wordmark colors, used
 * by malasiya_brand_wordmark() (inc/template-tags.php) here AND reused
 * as-is (just resized per context) in the nav overlay logo and footer
 * mark — defined once here since site-header.css loads globally.
 */

.wm-g { color: var(--color-primary); }
.wm-y,
.dot { color: var(--color-accent); }

/**
 * The wordmark's plain (unspanned) letters ("he", "mart", "nvestor") are
 * inherited color from their parent .ui-logo — EXCEPT when the wordmark
 * is wrapped in a real <a href> (the header logo links home). The
 * original _s style.css (still loaded as our base structural CSS) has a
 * leftover `a:visited { color: #800080; }` (purple) rule that directly
 * targets the <a> element itself — a direct declaration on an element
 * always wins over an inherited color from its parent, regardless of
 * specificity, so the visited-link purple showed through on every plain
 * letter instead of the intended near-black ink color. Confirmed via a
 * real browser screenshot, not assumed. Overriding it explicitly here,
 * scoped to just the logo link so the rest of the site keeps whatever
 * link-color behavior it needs.
 */
.ui-logo a,
.ui-logo a:visited,
.ui-logo a:hover,
.ui-logo a:focus {
	color: inherit;
	text-decoration: none;
}

.ui-hd {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: var(--spacing-header-top) var(--spacing-header-side) var(--spacing-header-bottom);
}

.ui-hd .ui-logo {
	font-family: var(--font-secondary);
	font-weight: 900;
	font-size: 58px;
	line-height: 0.9;
	letter-spacing: -1px;
	color: var(--color-ink);
}

.ui-hd .ui-logo small {
	display: block;
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	/* Re-verified directly against Design Refrance/TSI About.html:
	   .ui-logo small{color:var(--ink-soft)} — grey, not green. An earlier
	   pass wrongly "corrected" this to green based on misreading a
	   screenshot; reverted back to the actual confirmed source value. */
	color: var(--color-ink-soft);
	margin-top: 9px;
}

/* Desktop/Mobile Logo Image (Appearance → Customize → Global Settings →
   Header) — sized to roughly match the text wordmark's own footprint
   (58px font-size/0.9 line-height desktop, 34px/similar mobile below) so
   swapping between an image logo and the text fallback doesn't jump the
   header's height. width:auto keeps the image's own aspect ratio instead
   of stretching it. */
.ui-hd .ui-logo-img-link {
	display: block;
}

.ui-hd .ui-logo-img {
	max-height: 52px;
	width: auto;
}

.ui-hd .ui-hsp {
	flex: 1;
}

.ui-hd .ui-search {
	display: flex;
	align-items: center;
	gap: 9px;
	border: 1.5px solid var(--color-line-mid);
	border-radius: var(--radius-pill);
	padding: 6px 18px;
	min-width: 260px;
}

.ui-hd .ui-search input {
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--font-primary);
	font-size: 13.5px;
	color: var(--color-ink);
	width: 100%;
}

.ui-hd .ui-search input::placeholder {
	color: var(--color-ink-soft);
}

.ui-hd .ui-burger {
	display: flex;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: 4px;
	border: 0;
	background: transparent;
}

.ui-hd .ui-burger i {
	width: 26px;
	height: 2px;
	background: var(--color-ink);
	display: block;
	border-radius: 2px;
}

@media (max-width: 768px) {
	.ui-hd {
		flex-wrap: wrap;
		gap: 12px;
		padding-top: var(--spacing-header-top);
		padding-bottom: var(--spacing-header-bottom);
		padding-inline: 16px;
	}

	.ui-hd .ui-logo {
		font-size: 34px;
		flex: 1;
	}

	.ui-hd .ui-logo small {
		font-size: 9.5px;
		margin-top: 6px;
	}

	.ui-hd .ui-logo-img {
		max-height: 32px;
	}

	.ui-hd .ui-hsp {
		display: none;
	}

	.ui-hd .ui-search {
		order: 3;
		width: 100%;
		min-width: 0;
	}

	.ui-hd .ui-burger {
		order: 2;
	}
}