/* Reddy Compressors – header fix for QA item M01 (narrow phones, ≤430px)
   Problem: .brand.lh .brand-t b is white-space:nowrap and .brand has no min-width:0,
   so at 320–400px the wordmark overlapped .hdr-act (search + menu) by 15–30px.
   Verified in emulation at 320 / 360 / 375 / 390 / 430 with menu open and closed. */

@media (max-width: 430px) {
	.hdr .hdr-in { gap: 8px; }

	/* Let the brand block shrink instead of pushing into the controls */
	.hdr .brand.lh { flex: 1 1 auto; min-width: 0; margin-right: 0; gap: 8px; }
	.hdr .brand-t  { min-width: 0; }

	/* Wordmark: fluid size, allowed to wrap to two lines ("REDDY" / "COMPRESSORS")
	   only when there is truly no room (320px) */
	.hdr .brand.lh .brand-t b {
		white-space: normal;
		font-size: clamp(14px, 4.4vw, 17px);
		line-height: 1.02;
		letter-spacing: .01em;
		overflow-wrap: anywhere;
	}
	.hdr .brand.lh .brand-t i { display: none !important; }

	/* Controls keep their natural width and never shrink */
	.hdr .hdr-act { flex: 0 0 auto; gap: 8px; }
}

@media (max-width: 400px) {
	/* Menu button becomes icon-only (40px) to free ~40px for the wordmark */
	.hdr .burger { padding: 0 11px; font-size: 0; gap: 0; min-width: 40px; justify-content: center; }
	.hdr .burger::before { width: 16px; }
}

@media (max-width: 350px) {
	/* Theme hid search here; there is room for it again, so keep it available */
	.hdr .srch { display: inline-flex; }
}

/* R02-01: related-article link added to each video card by video-links.js */
.vcard figcaption .vlink{display:block;margin-top:8px;font-size:13px;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px}
.vcard figcaption .vlink:hover{opacity:.85}