/**
 * Lucide icon wrapper styles.
 *
 * Companion to geomed_lucide_icon() in custom_functions.php. The helper
 * emits <span class="gm-icon gm-icon-{name}"><svg width=N height=N .../></span>.
 *
 * The wrapper is inline-flex with vertical centering so icons sit on the
 * text baseline cleanly. SVGs use stroke="currentColor" so they inherit
 * color from whatever parent the .gm-icon is dropped into — no per-icon
 * color rules needed.
 *
 * Adds equivalent rules for any pre-existing Font Awesome selectors that
 * were doing useful work in the header (chevron rotate on dropdown hover,
 * etc.) — those selectors no longer match anything but their visual
 * intent should still apply.
 */

/* ---- Wrapper ------------------------------------------------------- */
.gm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	line-height: 1;
	flex-shrink: 0;
	color: inherit;
}
.gm-icon svg {
	display: block;
	width: inherit;
	height: inherit;
	max-width: 100%;
	max-height: 100%;
}

/* ---- Header-specific affordances ----------------------------------- */
@media (min-width: 1024px) {
	/* Chevron-down rotates 180° when its parent dropdown is hovered/open.
	   Mirrors the old `.fa-angle-down` rotation behavior so nothing feels
	   lost compared to the FA version. */
	.bottom-header .locations .dropdown-toggle .gm-icon-chevron-down svg,
	.primary-header .dropdown-toggle .gm-icon-chevron-down svg {
		transition: transform 0.2s ease;
	}
	.bottom-header .locations .dropdown:hover .dropdown-toggle .gm-icon-chevron-down svg,
	.bottom-header .locations .dropdown:focus-within .dropdown-toggle .gm-icon-chevron-down svg,
	.primary-header .dropdown:hover .dropdown-toggle .gm-icon-chevron-down svg,
	.primary-header .dropdown:focus-within .dropdown-toggle .gm-icon-chevron-down svg {
		transform: rotate(180deg);
	}

	/* Hospital icon sits next to the location label — small breathing room */
	.bottom-header .locations .hos_location_section .gm-icon-hospital {
		margin-right: 2px;
	}

	/* User icon next to "My Account" + cart icon next to count badge */
	.bottom-header .locations .dropdown > .dropdown-toggle .gm-icon-user,
	.bottom-header .locations .cart-link .gm-icon-shopping-cart {
		margin-right: 2px;
	}

	/* ---- Cart icon: neutralize legacy badge styling -------------------
	   The legacy `.cart-link span` rule in wp-custom-css (Customizer
	   Additional CSS) absolute-positions any span inside .cart-link as a
	   red notification badge — it was designed for the old single-span
	   markup `<a class="cart-link"><i/><span>1</span></a>`. With the new
	   Lucide wrapper, the icon is also a span and was being styled as a
	   floating red badge in the top-right corner.

	   Force the icon wrapper back to a static inline-flex pill so only
	   the actual .header_cart_count span continues to be the badge.
	------------------------------------------------------------------- */
	.cart-link .gm-icon,
	.cart-link .gm-icon-shopping-cart,
	a.cart-link > .gm-icon,
	a.cart-link > .gm-icon.gm-icon-shopping-cart {
		position: static !important;
		inset: auto !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		bottom: auto !important;
		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		border-radius: 0 !important;
		width: 16px !important;
		height: 16px !important;
		min-width: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		color: inherit !important;
		font-size: inherit !important;
		box-shadow: none !important;
		text-align: left !important;
		line-height: 1 !important;
	}
	/* Re-apply the small margin (above rule wiped it) */
	a.cart-link .gm-icon-shopping-cart {
		margin-right: 4px !important;
	}

	/* Search submit button — slightly larger Lucide stroke icon so it reads
	   at glance inside the 28px hit target. Slightly heavier stroke too,
	   since Lucide at 2px stroke gets thin at small sizes vs the FA glyph
	   it replaced. */
	.bottom-header .search-submit .gm-icon {
		width: 18px;
		height: 18px;
		color: #475569;
	}
	.bottom-header .search-submit .gm-icon svg {
		stroke-width: 2.25;
	}
	.bottom-header .search-submit:hover .gm-icon {
		color: #0e70bb;
	}

	/* Log-out icon in account dropdown — visually balance with text label */
	.bottom-header .locations .dropdown-menu .gm-icon-log-out {
		margin-right: 6px;
		opacity: 0.7;
	}

	/* Hospital icons inside the location dropdown menu items — same treatment */
	.bottom-header .locations .dropdown-menu .gm-icon-hospital {
		margin-right: 6px;
		opacity: 0.7;
	}

	/* Login button cart icon — already sized in header-density.css cluster
	   rules but the SVG needs explicit dimensions since it replaces the
	   <i> element whose styles were targeting `i` not `span`. */
	body .primary-header .header-buttons .login_btn a .gm-icon {
		width: 14px;
		height: 14px;
	}
}