/**
 * Badge and wrapper.
 *
 * Fixed styling: the badge is always visible, never on hover. The default look is a
 * translucent light pill with a soft shadow for edge contrast against both light and dark
 * images; the burned-in badge in class-stamper.php still draws the hairline border this
 * file used to carry, so the two are not pixel-identical. Styling is a Pro concern; do not
 * make these values themeable here.
 */

.aitransparency-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.aitransparency-wrap > img,
.aitransparency-wrap > picture > img {
	display: block;
	max-width: 100%;
}

/**
 * `height` is a default, not a rule, so it goes in `:where()` — zero specificity, which any
 * theme declaration outranks. A theme that fills a fixed-height box with
 * `height: 100%; object-fit: cover` has to keep winning after we wrap the image, or the
 * picture drops to its own aspect ratio and leaves a strip of the box showing underneath.
 * `display` and `max-width` stay at full weight: those close the inline baseline gap and stop
 * an unconstrained image from overflowing, and a theme overriding them is a bug, not a choice.
 */
:where(.aitransparency-wrap) > img,
:where(.aitransparency-wrap) > picture > img {
	height: auto;
}

/**
 * Layout guard, part one: themes that build a fixed-ratio card absolutely position the
 * image inside a padding-top box, which collapses our inline-block wrapper to zero.
 * These are the layouts we know by name; layout-guard.js generalizes the rest.
 */
.aitransparency-wrap--stretch,
.elementor-post__thumbnail > .aitransparency-wrap,
.has-equal-box-heights .box-image .aitransparency-wrap,
.image-cover .aitransparency-wrap,
.product-gallery-slider .aitransparency-wrap,
.product-thumbnails .aitransparency-wrap {
	position: absolute;
	inset: 0;
	display: block;
}

/**
 * Layout guard, part one-and-a-half: an image sized in percent — `width: 100%` is what nearly
 * every hand-built theme writes for a full-bleed band — has nothing to resolve against inside
 * a shrink-to-fit inline-block, so the band reserves no height and jumps into place when its
 * lazy image lands. Restoring block layout costs such an image nothing, because it was filling
 * the width anyway; it is only wrong for a picture that is centred or capped narrower than its
 * column, where it would left-align the image and anchor the badge to the column edge. Telling
 * those two apart needs a measurement, so layout-guard.js applies this class and never CSS.
 */
.aitransparency-wrap--block {
	display: block;
}

/**
 * Pro's style editor sets these custom properties (see class-pro.php). Every rule below reads
 * them with the free default as the fallback value, so a site with no Pro licence — or a Pro
 * site that changed nothing — gets exactly the same rendering and no extra CSS is emitted.
 */

/**
 * Layer 1 does not wrap: it adds these two classes to an element the block already has and
 * appends the badge inside it. Nothing is inserted into the ancestry, so core's own layout
 * rules — a gallery's flex children, a cover's stacking context — keep matching the nodes
 * they were written for. The badge is absolutely positioned, so it never becomes a flex or
 * grid item of the host either.
 */
.aitransparency-host:not(.aitransparency-host--positioned) {
	position: relative;
}

/**
 * The offsets the badge is *not* anchored by have to be said out loud. An absolutely positioned
 * box with both `left` and `right` set and `width: auto` stretches to fill the gap between them,
 * so a theme rule that sets `left` on spans in its container — the mega menu that started all
 * this sets `left: 8px` — turns a 40px pill into a full-width bar without touching width at all.
 */
.aitransparency-host--top-right > .aitransparency-badge {
	top: calc(var(--ait-badge-y, 8px) + var(--ait-badge-crop, 0px)) !important;
	right: var(--ait-badge-x, 8px) !important;
	left: auto !important;
	bottom: auto !important;
}

.aitransparency-host--bottom-right > .aitransparency-badge {
	bottom: calc(var(--ait-badge-y, 8px) + var(--ait-badge-crop, 0px)) !important;
	right: var(--ait-badge-x, 8px) !important;
	left: auto !important;
	top: auto !important;
}

/* A caption sits below the image, so a bottom-right badge would land on the text. */
.aitransparency-host--bottom-right:has(> figcaption) > .aitransparency-badge {
	bottom: auto !important;
	top: 8px !important;
}

/**
 * Every declaration that shapes the badge itself is `!important`, and that is a policy rather
 * than a shortcut.
 *
 * The badge is a bare `<span>` inside whatever the theme happened to build, so it matches any
 * descendant selector aimed at spans in that context. Measured on a real shop:
 * `.mega_submenu .dropdown-menu li a span` — specificity (0,2,3) — beat
 * `.aitransparency--mini > .aitransparency-badge` (0,2,0) and dressed the badge in the theme's
 * menu type: 18px text and 16px padding, which covered a 140x56 category thumbnail whole. That
 * shape of selector is ordinary in menus, buttons and cards, and out-specifying it is an arms
 * race with no ceiling: any extra class we chain, a theme can out-chain.
 *
 * A disclosure whose legibility depends on which container it lands in is not a disclosure, and
 * the header of this file already says these values are not themeable. `!important` is simply
 * that sentence written in CSS. Customisation is unaffected: Pro sets the custom properties, and
 * `var()` resolves inside an important declaration exactly as it does outside one.
 *
 * The consequence to remember: every later rule in this file that touches the badge needs
 * `!important` too, or it silently loses to this block.
 */
.aitransparency-badge {
	position: absolute !important;
	z-index: 2 !important;
	display: block !important;
	background: var(--ait-badge-bg, rgba(255,255,255,.5)) !important;
	color: var(--ait-badge-fg, #101010) !important;
	border: 0 !important;
	border-radius: var(--ait-badge-radius, 999px) !important;
	opacity: var(--ait-badge-opacity, 1) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	font-size: var(--ait-badge-size, 12px) !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
	text-align: left !important;
	text-transform: none !important;
	padding: 3px 8px !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	white-space: nowrap !important;
	pointer-events: none !important;
	text-decoration: none !important;
}

.aitransparency-wrap--top-right > .aitransparency-badge {
	top: calc(var(--ait-badge-y, 8px) + var(--ait-badge-crop, 0px)) !important;
	right: var(--ait-badge-x, 8px) !important;
	left: auto !important;
	bottom: auto !important;
}

.aitransparency-wrap--bottom-right > .aitransparency-badge {
	bottom: calc(var(--ait-badge-y, 8px) + var(--ait-badge-crop, 0px)) !important;
	right: var(--ait-badge-x, 8px) !important;
	left: auto !important;
	top: auto !important;
}

/**
 * WooCommerce puts its gallery zoom trigger in the same corner as a top-right badge, and the
 * two overlap. Measured on the demo: the trigger occupies 22–58px in from the right edge, so
 * the badge has to clear 58px plus a gap. Applied only when the trigger is really there —
 * plenty of themes switch the zoom off.
 */
.woocommerce-product-gallery:has(> .woocommerce-product-gallery__trigger) .aitransparency-wrap--top-right > .aitransparency-badge,
.woocommerce-product-gallery:has(> .woocommerce-product-gallery__trigger) .aitransparency-host--top-right > .aitransparency-badge {
	right: 72px !important;
}

/**
 * Small images. The words are the disclosure and are never dropped, so the badge scales
 * instead: the type comes down and the padding with it, and on a thumbnail small enough that
 * one line cannot hold the text it wraps rather than running off the edge. `min()` keeps the
 * Pro font size as a ceiling and never as a floor — a shop that set 18px still gets a badge
 * that fits its 150px search thumbnails.
 *
 * Which bucket an image is in cannot be read off the stylesheet, because the badge sits on the
 * image rather than in the flow that sized it. layout-guard.js measures the rendered image and
 * sets the class; the thresholds are the same numbers in both files.
 */
.aitransparency--compact > .aitransparency-badge {
	font-size: min( var(--ait-badge-size, 12px), 11px ) !important;
	padding: 2px 7px !important;
}

.aitransparency--mini > .aitransparency-badge {
	font-size: min( var(--ait-badge-size, 12px), 10px ) !important;
	padding: 1px 6px !important;
	max-width: calc( 100% - 16px ) !important;
	white-space: normal !important;
	text-align: center !important;
}

/**
 * The mark. Below the admin's threshold the sentence stops fitting at any type size — measured
 * on a real shop, "KI-bearbeitet" at 10px wraps to two lines and covers three quarters of a
 * 57x32 category thumbnail — so the badge becomes a round two-letter mark that opens to the
 * full wording on tap.
 *
 * What does not change: the wording is still in `aria-label`, so a screen reader reads the
 * disclosure without touching anything, and the mark is still always visible. Only the *sighted*
 * reading of the full sentence moves behind an interaction, and only where the sentence could
 * not be read anyway. layout-guard.js adds this class and never CSS: the decision needs the
 * rendered width of the image, which no media query can see.
 */
.aitransparency--mark > .aitransparency-badge {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 22px !important;
	height: 22px !important;
	padding: 0 !important;
	border-radius: 999px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
	max-width: none !important;
	/* The mark is the one badge a visitor is meant to be able to hit. */
	pointer-events: auto !important;
	cursor: pointer !important;
}

/* Opened by tap, click or keyboard. Back to an ordinary pill, sized to the words. */
.aitransparency--mark.aitransparency--open > .aitransparency-badge {
	display: block !important;
	width: auto !important;
	height: auto !important;
	padding: 2px 7px !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
	white-space: normal !important;
	text-align: center !important;
	/* An opened badge is wider than the thumbnail under it, and that is the point: it has to be
	   readable. Held to the image's left edge so it grows inward rather than off the page. */
	max-width: 160px !important;
	min-width: 100% !important;
	z-index: 3 !important;
}

.aitransparency--mark > .aitransparency-badge:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
}

/* The decorative dot has no room inside a 22px circle. */
.aitransparency--mark:not(.aitransparency--open) > .aitransparency-badge > .aitransparency-badge__icon {
	display: none !important;
}

@media (max-width: 480px) {
	.aitransparency-badge {
		font-size: 12px !important;
		padding: 2px 8px !important;
	}

	.aitransparency--compact > .aitransparency-badge {
		font-size: min( var(--ait-badge-size, 12px), 11px ) !important;
	}

	.aitransparency--mini > .aitransparency-badge {
		font-size: min( var(--ait-badge-size, 12px), 10px ) !important;
	}
}

/**
 * The visitor has asked the operating system for more contrast, so the translucent pill and
 * the soft shadow both have to go: a 50% background takes its contrast from whatever photo
 * happens to be underneath, which is the opposite of a guarantee. Opaque background, hard
 * black outline, no shadow. `border-color` alone used to do this job and silently stopped
 * working when the hairline came off the base rule — there was no border left to recolour.
 */
@media (prefers-contrast: more) {
	.aitransparency-badge {
		background: var(--ait-badge-bg, #fff) !important;
		border: 1px solid #000 !important;
		box-shadow: none !important;
	}
}

/**
 * The standalone badge from the block and the self-closing shortcode. It has no image under
 * it, so unlike every other case it needs its own box to sit in rather than sitting on one.
 */
.aitransparency-standalone {
	display: inline-block;
	min-width: 1px;
	min-height: 1.9em;
	vertical-align: middle;
}

.aitransparency-standalone > .aitransparency-badge {
	position: static !important;
	display: inline-block !important;
}

/**
 * Optional icon (Pro). A decorative mark only — it is inserted with aria-hidden and never
 * replaces the text, because the words are the disclosure.
 */
.aitransparency-badge__icon {
	margin-right: 4px !important;
	font-size: 0.95em !important;
	line-height: 1 !important;
}