/*
 * Line up the icons guide-menu-icons.php adds to the "Guide" dropdown items
 * in a fixed-width column, matching the spacing pattern already used for
 * the mobile menu's icons (see mobile-menu-icons/css/mobile-menu-icons.css).
 * Applies to both the desktop dropdown (.sub-menu, from the mega-menu
 * walker) and the mobile off-canvas menu (.mobile-navigation-list), since
 * guide-menu-icons.php's filter fires for both.
 */
.sub-menu a i.fas,
.mobile-navigation-list a i.fas {
	display: inline-block;
	width: 20px;
	margin-right: 8px;
	text-align: center;
}

/*
 * The parent theme fixes every desktop dropdown item to a flat 195px
 * (#navigation ul ul li in style.css), sized for icon-less labels -- not
 * quite enough room for the icon column above plus the longest Guide
 * label, "Tree identification", to stay on one line. Rather than
 * hard-coding a wider pixel guess for the Guide dropdown specifically,
 * let every desktop dropdown size itself to its own widest item: the <ul>
 * shrink-wraps its content (width: max-content) and each <li> fills that,
 * so the box is exactly as wide as the longest label+icon needs -- for
 * Guide today, and automatically for any future dropdown/label change,
 * no further width tweaks needed. Mobile's off-canvas submenu isn't
 * affected: it sizes itself to 100% width (#mobile-nav .sub-menu in
 * style.css), not a fixed px value.
 */
#navigation ul ul {
	width: max-content;
}

#navigation ul ul li {
	width: 100%;
}

/*
 * Since the site moved to Listeo's Header Builder (`listeo_header_builder_state`
 * = 'builder'), the desktop mega-menu no longer goes through wp_nav_menu()/
 * listeo_megamenu_walker at all -- it's built entirely from the
 * `listeo_header_builder_settings` option and rendered by
 * class-listeo-header-builder-renderer.php, which never calls the
 * `walker_nav_menu_start_el` filter guide-menu-icons.php hooks. That filter
 * (and the .sub-menu rule above) is now dead code, kept only as a fallback
 * for if the site is ever switched back to 'legacy' header mode.
 *
 * The Header Builder's own icon() renderer only offers a hardcoded
 * allowlist (its small built-in SVG set, or the theme's Simple Line Icons
 * font via "preset:x") with no filter hook to inject arbitrary icons the
 * way the old nav-menu walker did -- see class-listeo-header-builder.php's
 * sanitize_builder_icon(). So instead of patching that vendor file, this
 * overrides the rendered tile icons visually: hide whatever built-in
 * icon/preset Header Builder rendered inside each Guide flyout tile's
 * .lhb-mega-icon box, and draw the exact same Font Awesome 6 solid glyph
 * the homepage "Explore the Guide" widget uses instead (fa-solid is already
 * enqueued site-wide as the 'font-awesome-5' handle in listeo/functions.php,
 * so no extra asset load). Matched by a substring of each tile's href (its
 * Guide category slug) rather than DOM order/position, so this survives
 * reordering the menu, and works whether the category lives at /category/
 * (local dev) or /guide/ (prod) -- see docs/listeo/homepage-guide-redesign.md.
 */
.lhb-mega-card[href*="tree-problems"] .lhb-mega-icon,
.lhb-mega-card[href*="tree-work"] .lhb-mega-icon,
.lhb-mega-card[href*="tree-safety"] .lhb-mega-icon,
.lhb-mega-card[href*="tree-law"] .lhb-mega-icon,
.lhb-mega-card[href*="tree-health"] .lhb-mega-icon,
.lhb-mega-card[href*="tree-identification"] .lhb-mega-icon,
.lhb-mega-card[href*="tree-surveys"] .lhb-mega-icon,
.lhb-mega-card[href*="how-to-choose-a-tree-surgeon"] .lhb-mega-icon {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 16px;
	line-height: 1;
}

.lhb-mega-card[href*="tree-problems"] .lhb-mega-icon > *,
.lhb-mega-card[href*="tree-work"] .lhb-mega-icon > *,
.lhb-mega-card[href*="tree-safety"] .lhb-mega-icon > *,
.lhb-mega-card[href*="tree-law"] .lhb-mega-icon > *,
.lhb-mega-card[href*="tree-health"] .lhb-mega-icon > *,
.lhb-mega-card[href*="tree-identification"] .lhb-mega-icon > *,
.lhb-mega-card[href*="tree-surveys"] .lhb-mega-icon > *,
.lhb-mega-card[href*="how-to-choose-a-tree-surgeon"] .lhb-mega-icon > * {
	display: none;
}

.lhb-mega-card[href*="tree-problems"] .lhb-mega-icon::before { content: "\f071"; } /* fa-exclamation-triangle, matches the homepage card */
.lhb-mega-card[href*="tree-work"] .lhb-mega-icon::before { content: "\f0c4"; } /* fa-cut */
.lhb-mega-card[href*="tree-safety"] .lhb-mega-icon::before { content: "\f807"; } /* fa-hard-hat */
.lhb-mega-card[href*="tree-law"] .lhb-mega-icon::before { content: "\f0e3"; } /* fa-gavel */
.lhb-mega-card[href*="tree-health"] .lhb-mega-icon::before { content: "\f21e"; } /* fa-heartbeat */
.lhb-mega-card[href*="tree-identification"] .lhb-mega-icon::before { content: "\f002"; } /* fa-search */
.lhb-mega-card[href*="tree-surveys"] .lhb-mega-icon::before { content: "\f46d"; } /* fa-clipboard-list */
.lhb-mega-card[href*="how-to-choose-a-tree-surgeon"] .lhb-mega-icon::before { content: "\f4fc"; } /* fa-user-check */