/**
 * Top utility bar polish (above the main header).
 *
 * Replaces the legacy absolute-% positioning with a flex layout so the bar's
 * items don't collide as content grows, refines typography, and adds hover
 * affordances + a phone icon. Wrapped in (min-width: 1242px) to match the
 * SCSS `menu-break` above which .top-bar is visible — below that breakpoint
 * the bar is `display: none` and these rules don't apply.
 *
 * Enqueued from custom_functions.php so it overrides:
 *  - the SCSS .top-bar rules baked into assets/css/style.css
 *  - the legacy `.top-bar .contact-btn a` / `.contact-wrapper` rules
 *    rendered inline via <style id="wp-custom-css"> (Customizer Additional CSS)
 */
@media (min-width: 1242px) {
	.top-bar {
		background: linear-gradient(180deg, #0e70bb 0%, #0a5a96 100%) !important;
		box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		gap: 14px !important;
		padding: 0 18px !important;
	}
	.top-bar .social-title {
		text-transform: uppercase !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		letter-spacing: 0.14em !important;
		opacity: 0.85 !important;
		margin: 0 4px 0 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		line-height: 1 !important;
	}
	.top-bar nav.socials {
		display: inline-flex !important;
		align-items: center !important;
		gap: 14px !important;
	}
	.top-bar nav.socials a {
		margin: 0 !important;
		font-size: 16px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: 32px !important;
		width: 32px !important;
		border-radius: 8px !important;
		transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease !important;
		opacity: 0.92 !important;
	}
	.top-bar nav.socials a:hover {
		transform: translateY(-1px) !important;
		background: rgba(255, 255, 255, 0.10) !important;
		opacity: 1 !important;
		color: #fff !important;
	}
	.top-bar .contact-btn {
		margin-left: auto !important;
	}
	.top-bar .contact-btn a {
		position: static !important;
		right: auto !important;
		top: auto !important;
		transform: none !important;
		background: rgba(255, 255, 255, 0.10) !important;
		border: 1px solid rgba(255, 255, 255, 0.36) !important;
		border-radius: 999px !important;
		padding: 6px 16px !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		letter-spacing: 0.02em !important;
		display: inline-flex !important;
		align-items: center !important;
		height: 30px !important;
		line-height: 1 !important;
		transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
		text-decoration: none !important;
		color: #fff !important;
	}
	.top-bar .contact-btn a:hover {
		background: rgba(255, 255, 255, 0.18) !important;
		border-color: rgba(255, 255, 255, 0.65) !important;
		color: #fff !important;
		transform: translateY(-1px) !important;
	}
	.top-bar .contact-wrapper {
		position: static !important;
		right: auto !important;
		top: auto !important;
		transform: none !important;
		display: inline-flex !important;
		align-items: center !important;
	}
	.top-bar .contact-wrapper a {
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
		font-weight: 600 !important;
		font-size: 14px !important;
		letter-spacing: 0.01em !important;
		color: #fff !important;
		transition: opacity 0.18s ease !important;
		text-decoration: none !important;
	}
	.top-bar .contact-wrapper a:hover {
		opacity: 0.85 !important;
		color: #fff !important;
	}
	/* Phone icon (Lucide phone, masked by currentColor so it inherits white) */
	.top-bar .contact-wrapper a::before {
		content: '' !important;
		display: inline-block !important;
		width: 14px !important;
		height: 14px !important;
		background-color: currentColor !important;
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center/contain no-repeat !important;
		mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center/contain no-repeat !important;
	}
}