/**
 * Astra Menu Icons — Frontend Stylesheet
 *
 * Per-item colors, sizes, radius, padding and spacing are supplied as
 * inline CSS custom properties (--ami-icon-*) on each .ami-icon-wrap
 * element by includes/class-walker.php. This stylesheet only defines
 * the shared layout, defaults, transitions and hover behaviour so that
 * per-item overrides never require an extra HTTP request or inline
 * <style> block.
 */

:root {
	--ami-default-icon-color: #1a1a1a;
	--ami-default-icon-bg: #f3efe6;
	--ami-default-icon-size: 16px;
	--ami-default-icon-box: 36px;
	--ami-default-icon-radius: 10px;
	--ami-default-icon-padding: 8px;
	--ami-default-icon-margin: 14px;
	--ami-transition-speed: 0.25s;
}

/* Base link layout: keep icon + text aligned regardless of theme's own
   flex/inline-block choices for menu links. */
.ami-has-icon > a {
	display: inline-flex;
	align-items: center;
}

.ami-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* --ami-icon-box is computed per-item (icon size + padding * 2) in
	   class-walker.php so the box always exactly fits its own icon; this
	   is what keeps every corner rounded evenly instead of the icon
	   overflowing a shared fixed box on one side. */
	width: var(--ami-icon-box, var(--ami-default-icon-box));
	height: var(--ami-icon-box, var(--ami-default-icon-box));
	background-color: var(--ami-icon-bg, var(--ami-default-icon-bg));
	border-radius: var(--ami-icon-radius, var(--ami-default-icon-radius));
	padding: var(--ami-icon-padding, var(--ami-default-icon-padding));
	box-sizing: border-box;
	overflow: hidden;
	transition:
		transform var(--ami-transition-speed) ease,
		background-color var(--ami-transition-speed) ease,
		box-shadow var(--ami-transition-speed) ease;
	flex-shrink: 0;
}

.ami-icon-wrap.ami-icon-before {
	margin-right: var(--ami-icon-margin, var(--ami-default-icon-margin));
}

.ami-icon-wrap.ami-icon-after {
	margin-left: var(--ami-icon-margin, var(--ami-default-icon-margin));
	order: 2;
}

.ami-icon-wrap i {
	font-size: var(--ami-icon-size, var(--ami-default-icon-size));
	line-height: 1;
	color: var(--ami-icon-color, var(--ami-default-icon-color));
	transition: color var(--ami-transition-speed) ease;
}

.ami-icon-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform var(--ami-transition-speed) ease;
}

.ami-text {
	line-height: 1.2;
}

/* Hover animation: gentle scale + shadow lift, matching the premium
   dental-website reference brief. Respects reduced-motion preference. */
.ami-has-icon > a:hover .ami-icon-wrap,
.ami-has-icon > a:focus-visible .ami-icon-wrap {
	transform: scale(1.08);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.ami-icon-wrap,
	.ami-icon-wrap i {
		transition: none;
	}

	.ami-has-icon > a:hover .ami-icon-wrap,
	.ami-has-icon > a:focus-visible .ami-icon-wrap {
		transform: none;
	}
}

/* Rounded dropdown / sub-menu support: icons inside sub-menus shrink
   slightly so nested items don't visually overpower the parent level. */
.sub-menu .ami-icon-wrap,
.elementor-nav-menu--dropdown .ami-icon-wrap {
	width: calc(var(--ami-icon-box, var(--ami-default-icon-box)) - 6px);
	height: calc(var(--ami-icon-box, var(--ami-default-icon-box)) - 6px);
}

/* Dropdown/sub-menu rows should stretch to the panel's full width so the
   row's hover/active background and icon spacing reach both edges
   instead of only wrapping the text's natural width.

   The old rules here only matched specific class names (.sub-menu,
   .elementor-nav-menu--dropdown). That worked for some dropdown
   markups but not others — e.g. Elementor's Nav Menu widget doesn't
   always put those exact classes on every sub-menu wrapper, which is
   why one item's hover fill could reach the panel's edges while a
   sibling item's fill stopped short at the text width. The rule below
   is structural instead of name-based: "any .ami-has-icon that sits
   inside a <ul> that is itself inside an <li>" is true for every
   dropdown/sub-menu in a WordPress nav menu, regardless of what
   classes the theme/page builder adds — so it catches every case
   consistently. !important guards against theme/builder rules of
   equal-or-higher specificity re-introducing the inconsistency. */
.sub-menu > .ami-has-icon,
.elementor-nav-menu--dropdown .ami-has-icon,
li > ul .ami-has-icon {
	display: block !important;
	width: 100% !important;
}

.sub-menu > .ami-has-icon > a,
.elementor-nav-menu--dropdown .ami-has-icon > a,
li > ul .ami-has-icon > a {
	display: flex !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Astra desktop header builder menu. */
.ast-builder-menu .ami-has-icon > a {
	display: inline-flex;
}

/* Astra mobile / offcanvas menu: icons stay left-aligned and vertically
   centered inside the full-width mobile row. */
.ast-mobile-menu-buttons ~ .main-header-menu .ami-icon-wrap,
.ast-flyout-mobile-menu .ami-icon-wrap,
.ast-mobile-popup-container .ami-icon-wrap {
	flex-shrink: 0;
}

.ast-mobile-popup-container .ami-has-icon > a,
.ast-flyout-mobile-menu .ami-has-icon > a {
	width: 100%;
}

/* Astra sticky / transparent header: no icon-specific overrides are
   required, they inherit color via --ami-icon-color per item, but we
   make sure the wrapper never collapses when the sticky header shrinks
   its overall line-height. */
.ast-header-break-point .ami-icon-wrap,
.astra-transparent-header .ami-icon-wrap {
	line-height: 1;
}

/* Elementor Nav Menu widget compatibility: prevent Elementor's own icon
   spacing rules from double-adding margin next to ours. */
.elementor-nav-menu .ami-icon-wrap {
	margin-top: 0;
	margin-bottom: 0;
}