/**
 * Made with AI Badge — frontend stylesheet.
 *
 * Uses CSS custom properties set inline by the renderer.
 * !important is used liberally because themes very often have aggressive
 * a:hover and color rules that win over our class selectors.
 *
 * @package NordicCustomMade\MadeWithAI
 */

.mwab-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	overflow: visible !important;
}

/* When wrap is the only child of an <a>, the link is treated as our positioning
 * context. Ensure the link doesn't clip the badge if it has overflow:hidden. */
a:has(> .mwab-wrap),
a:has(> .mwab-wrap--featured-image) {
	overflow: visible !important;
	position: relative;
}

.mwab-wrap[data-mwab-fill] {
	display: block;
	width: 100%;
	height: 100%;
}

.mwab-wrap > img,
.mwab-wrap > a > img,
.mwab-wrap > picture > img {
	max-width: 100%;
	height: auto;
	display: block;
}

.mwab-wrap[data-mwab-fill] > img,
.mwab-wrap[data-mwab-fill] > a > img,
.mwab-wrap[data-mwab-fill] > picture > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The badge itself.
 * !important is used so theme styles (especially "a, a:hover { color: ... }")
 * cannot break our color contrast. */
.mwab-wrap .mwab-badge {
	position: absolute !important;
	display: inline-flex !important;
	align-items: center !important;
	padding: 6px 10px !important;
	border-radius: 999px !important;
	font-size: var(--mwab-font-size, 12px) !important;
	line-height: 1.2 !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	background-color: var(--mwab-bg, rgba(0, 0, 0, 0.85)) !important;
	color: var(--mwab-fg, #ffffff) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	z-index: 2 !important;
	white-space: nowrap !important;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, padding 0.2s ease !important;
	pointer-events: auto !important;
	max-width: calc(100% - calc(var(--mwab-margin, 15px) * 2)) !important;
	border: 0 !important;
	text-shadow: none !important;
	box-sizing: border-box !important;
}

/* Hover / focus state — explicitly re-assert colors so themes can't override */
.mwab-wrap .mwab-badge:hover,
.mwab-wrap .mwab-badge:focus,
.mwab-wrap .mwab-badge:active {
	background-color: var(--mwab-hover-bg, var(--mwab-bg)) !important;
	color: var(--mwab-hover-fg, var(--mwab-fg)) !important;
	text-decoration: none !important;
	opacity: 0.92;
}

.mwab-wrap .mwab-badge[role="link"] {
	cursor: pointer !important;
}

.mwab-wrap .mwab-badge:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
}

/* Position via CSS variables. */
.mwab-wrap[style*="--mwab-v:top"] .mwab-badge { top: var(--mwab-margin, 15px) !important; }
.mwab-wrap[style*="--mwab-v:bottom"] .mwab-badge { bottom: var(--mwab-margin, 15px) !important; }
.mwab-wrap[style*="--mwab-h:left"] .mwab-badge { left: var(--mwab-margin, 15px) !important; }
.mwab-wrap[style*="--mwab-h:right"] .mwab-badge { right: var(--mwab-margin, 15px) !important; }

/* --- Icon mode --- */
/* Square padding when collapsed so the icon is visually centered. */
.mwab-wrap .mwab-badge--icon {
	padding: 6px !important;
}

.mwab-wrap .mwab-badge--icon:hover,
.mwab-wrap .mwab-badge--icon:focus,
.mwab-wrap .mwab-badge--icon:focus-within {
	padding: 6px 10px !important;
}

.mwab-badge--icon .mwab-text {
	display: inline-block;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width 0.25s ease, opacity 0.2s ease, margin-left 0.25s ease, padding 0.2s ease;
	margin-left: 0;
}

/* Only expand on direct badge hover/focus to prevent flicker:
 * if we expanded on .mwab-wrap:hover, the wider badge could push the
 * cursor outside it, collapsing it again -> infinite hover/unhover cycle. */
.mwab-badge--icon:hover .mwab-text,
.mwab-badge--icon:focus .mwab-text,
.mwab-badge--icon:focus-within .mwab-text {
	max-width: 200px;
	opacity: 1;
	margin-left: 6px;
}

.mwab-badge--icon .mwab-icon {
	display: inline-block !important;
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0 !important;
	background-color: currentColor !important;
	/* Star/sparkle shape via SVG mask. Works with currentColor so it always
	 * matches the badge text color. SVG is in a CSS data-URI so it cannot
	 * be stripped by Elementor / wp_kses sanitizers. */
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 1.5l1.6 4.4L14 7.5l-4.4 1.6L8 13.5 6.4 9.1 2 7.5l4.4-1.6L8 1.5z'/></svg>") !important;
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 1.5l1.6 4.4L14 7.5l-4.4 1.6L8 13.5 6.4 9.1 2 7.5l4.4-1.6L8 1.5z'/></svg>") !important;
	-webkit-mask-size: contain !important;
	mask-size: contain !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	mask-position: center !important;
}

@media (prefers-reduced-motion: reduce) {
	.mwab-badge,
	.mwab-badge--icon .mwab-text {
		transition: none !important;
	}
}

@media (max-width: 480px) {
	.mwab-wrap .mwab-badge {
		font-size: calc(var(--mwab-font-size, 12px) - 1px) !important;
		padding: 4px 8px !important;
	}
}

.editor-styles-wrapper .has-mwab-ai-mark {
	box-shadow: inset 0 0 0 2px rgba(34, 113, 177, 0.45);
}