/* ==========================================================================
   RAD Menu Styler — Public Frontend Styles
   Loaded on every page when the plugin is active.
   ========================================================================== */

/* ── Icon span ─────────────────────────────────────────────────────────────── */
.rms-icon {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	font-size: 1em;          /* inherits the link font-size */
	width: 1em;
	height: 1em;
	margin: 0 0.3em;
}

/* Dashicons override: keep consistent sizing with the menu link text */
.rms-icon.dashicons {
	font-size: 1.1em;
	width: 1.1em;
	height: 1.1em;
}

/* ── Badge span ───────────────────────────────────────────────────────────── */
/* Badge is rendered INSIDE the <a> tag so it is always inline with the text,
   regardless of whether the theme sets <a> to display:block (e.g. Divi). */
.rms-badge {
	display: inline-block;
	font-size: 0.6em;
	font-weight: 700;
	line-height: 1;
	padding: 2px 5px;
	border-radius: 3px;
	vertical-align: super;
	margin-left: 4px;
	letter-spacing: 0.4px;
	white-space: nowrap;
	position: relative;
	top: -1px;
}

/* ── Transition helper for hover colours ─────────────────────────────────── */
.rms-link {
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* ── Icon animations ──────────────────────────────────────────────────────── */

/* Pulse */
@keyframes rms-pulse {
	0%, 100% { transform: scale(1);   opacity: 1;   }
	50%       { transform: scale(1.3); opacity: 0.7; }
}

.rms-anim-pulse {
	animation: rms-pulse 1.4s ease-in-out infinite;
}

/* Bounce */
@keyframes rms-bounce {
	0%, 100% { transform: translateY(0);    }
	30%       { transform: translateY(-4px); }
	60%       { transform: translateY(-2px); }
}

.rms-anim-bounce {
	animation: rms-bounce 1.2s ease infinite;
}

/* Spin */
@keyframes rms-spin {
	from { transform: rotate(0deg);   }
	to   { transform: rotate(360deg); }
}

.rms-anim-spin {
	animation: rms-spin 1.8s linear infinite;
	display: inline-block; /* rotation needs block/inline-block */
}

/* Shake */
@keyframes rms-shake {
	0%, 100% { transform: rotate(0deg);   }
	20%       { transform: rotate(-12deg); }
	40%       { transform: rotate(12deg);  }
	60%       { transform: rotate(-8deg);  }
	80%       { transform: rotate(8deg);   }
}

.rms-anim-shake {
	animation: rms-shake 0.8s ease infinite;
	display: inline-block;
}

/* ── Reduce motion accessibility ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.rms-anim-pulse,
	.rms-anim-bounce,
	.rms-anim-spin,
	.rms-anim-shake {
		animation: none;
	}
}