/**
 * 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);
	/* Content max-width — on very large screens the header row now stops
	   growing past the site's standard content width and centers, instead
	   of stretching edge-to-edge (matches https://smartinvestor.com.my/
	   reference: every content row is capped, only background bars run
	   full-bleed). */
	max-width: var(--container-max);
	margin-inline: auto;
}

.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);
	white-space: nowrap;
}

.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;
}

/* Tablet fix included (max-width raised from 768px to 1024px): the
   desktop header's logo (58px) + 260px-min search + burger, minus the
   header's own side padding, don't fit on any tablet width either — no
   dedicated tablet design exists, so tablets get the same safe, wrapping
   header phones already use. */
@media (max-width: 1024px) {
	.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;
		min-width: 0;
		white-space: nowrap;
	}

	.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;
	}
}

/* Below ~360px the 34px logo (plus its "Est. 2002..." tagline row and the
   hamburger button sharing that same row) no longer fit on one line at
   34px, wrapping the hamburger onto its own row underneath — shrinking
   the font instead keeps everything on one row down to 320px. */
@media (max-width: 360px) {
	.ui-hd .ui-logo {
		font-size: 26px;
	}

	.ui-hd .ui-logo small {
		font-size: 8.5px;
		margin-top: 4px;
	}
}