/*!
 * TransparAI front-end badge styles.
 * Copyright (c) 2026 Patrick Schlesinger. License: GPL-2.0-or-later.
 */
/* The wrapper encloses exactly the media area (not the figcaption), so the
   badge anchors to the image and never sits on top of the caption. */
.trai-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	vertical-align: top;
}

/* Inline images in running text sit on the baseline like a bare <img>
   would; the top alignment is only right for figure-like containers. */
p .trai-wrap {
	vertical-align: baseline;
}

/* Full-bleed backgrounds (cover blocks): the wrapped image is positioned
   absolutely against its nearest positioned ancestor, so the wrapper has
   to span that ancestor itself instead of collapsing to a zero-size box. */
.trai-wrap--fill {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* Themes only constrain images they know (wp-image-*). Plain images that the
   optional script wraps (ACF url returns, sliders) may carry no max-width at
   all and would overflow the layout, so the wrapper constrains its own child. */
.trai-wrap > img,
.trai-avwrap video {
	max-width: 100%;
	height: auto;
}

.trai-thumbwrap {
	position: relative;
	display: block;
}

.trai-avwrap {
	position: relative;
	display: block;
}

.trai-avwrap figure {
	position: relative;
	margin-bottom: 0;
}

/* Neutral by design: the badge renders on our users' websites, so it stays
   black/white/outline and inherits no brand color. Open Sans leads the stack
   but is never loaded remotely (no external requests). */
.trai-badge {
	position: absolute;
	/* Above typical theme chrome (hover overlays, gallery zoom icons, sale
	   badges: 1-10), far below modal/lightbox layers (999+), so a badge never
	   shines through an opened lightbox. The custom property inherits, so
	   themes can tune it globally or per container without new CSS rules. */
	z-index: var(--trai-badge-z, 30);
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	padding: 4px 7px;
	border-radius: 4px;
	pointer-events: none;
	white-space: nowrap;
}

/* A long generator label must never grow wider than the media it sits on
   (small carousel thumbnails); the script switches to the mini variant, this
   is the hard limit for the no-JS case. On top of that, generator names can
   get very long ("Google C2PA Core Generator Library"), so even on large
   images the overlay badge is capped at 16em (em: scales with the size
   setting) and ellipsized; hovering (or tapping, which triggers :hover on
   mobile browsers) the media expands it to the full label. The plain
   calc() line is the fallback for browsers without min(). */
.trai-mode-overlay .trai-badge {
	max-width: calc(100% - 16px);
	max-width: min(calc(100% - 16px), 16em);
	overflow: hidden;
	text-overflow: ellipsis;
	transition: max-width 0.2s ease;
}

.trai-wrap:hover .trai-badge,
.trai-thumbwrap:hover .trai-badge,
.trai-bg-host:hover .trai-badge {
	max-width: calc(100% - 16px);
}

/* The script sets a title on badges whose text is clipped (mini or
   ellipsized); those need to be hoverable for the tooltip to appear. */
.trai-badge[title] {
	pointer-events: auto;
}

/* Positions */
.trai-pos-bottom-right .trai-badge { right: 8px; bottom: 8px; }
.trai-pos-bottom-left .trai-badge { left: 8px; bottom: 8px; }
.trai-pos-top-right .trai-badge { right: 8px; top: 8px; }
.trai-pos-top-left .trai-badge { left: 8px; top: 8px; }

/* Sizes */
.trai-size-small .trai-badge { font-size: 9px; padding: 3px 5px; }
.trai-size-large .trai-badge { font-size: 13px; padding: 5px 9px; }

/* Styles */
.trai-style-light .trai-badge {
	background: rgba(255, 255, 254, 0.88);
	color: #000;
}

.trai-style-outline .trai-badge {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 254, 0.9);
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}

/* Icon-only: show just the short label, keep the full text for readers. */
.trai-style-icon-only .trai-badge {
	font-size: 0;
	padding: 3px 5px;
	pointer-events: auto;
}

.trai-style-icon-only .trai-badge::after {
	content: attr(data-trai-short);
	font-size: 10px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.03em;
}

/* Caption mode: static line below the media instead of an overlay. Video and
   audio always use it (an overlay badge would collide with the player
   controls), and trai-badge-below forces it for everything inside a container
   (utility class), for one image (attachment override) or as the overlay
   guard's last resort. The max-width/overflow resets undo the
   trai-mode-overlay ellipsis rules when only the badge is converted. */
.trai-mode-caption .trai-badge,
.trai-avwrap .trai-badge,
.trai-badge-below .trai-badge {
	position: static;
	display: block;
	background: transparent;
	color: inherit;
	font-size: 12px;
	line-height: 1.4;
	padding: 2px 0 0;
	opacity: 0.75;
	white-space: normal;
	max-width: none;
	overflow: visible;
	text-overflow: clip;
	/* Decoration the styles add for sitting on top of an image: a light
	   outline and a dark glow are meant to survive any photo underneath, but
	   on the page background they turn into a stray box around theme text. */
	border: 0;
	text-shadow: none;
}

/* Mini variant for small images: shows only the short label from the data
   attribute. The full text stays in the DOM (screen readers) and appears as
   a tooltip. Applied via JS based on the rendered image width. */
.trai-badge--mini {
	font-size: 0;
	padding: 2px 4px;
	border-radius: 3px;
	pointer-events: auto;
}

.trai-pos-bottom-right .trai-badge--mini { right: 3px; bottom: 3px; }
.trai-pos-bottom-left .trai-badge--mini { left: 3px; bottom: 3px; }
.trai-pos-top-right .trai-badge--mini { right: 3px; top: 3px; }
.trai-pos-top-left .trai-badge--mini { left: 3px; top: 3px; }

.trai-badge--mini::after {
	content: attr(data-trai-short);
	font-size: 9px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.03em;
}

/* The short label exists because an overlay badge has to fit on the media. A
   caption line has the room for the real text, which the rules above make
   visible again, so the appended abbreviation would double it ("AI-generated"
   plus "AI"). Declared after both ::after rules to win in every combination of
   caption context and badge style. */
.trai-mode-caption .trai-badge::after,
.trai-avwrap .trai-badge::after,
.trai-badge-below .trai-badge::after {
	content: none;
}

/* Manual badge placement: one of these classes on ANY container (every
   builder allows custom classes) repositions the badges inside it. Declared
   after the trai-pos-* rules on purpose: equal specificity, the later
   declaration wins; the mini variants must in turn follow the normal ones. */
.trai-badge-top-left .trai-badge { top: 8px; left: 8px; right: auto; bottom: auto; }
.trai-badge-top-right .trai-badge { top: 8px; right: 8px; left: auto; bottom: auto; }
.trai-badge-bottom-left .trai-badge { bottom: 8px; left: 8px; right: auto; top: auto; }
.trai-badge-bottom-right .trai-badge { bottom: 8px; right: 8px; left: auto; top: auto; }
.trai-badge-top-left .trai-badge--mini { top: 3px; left: 3px; right: auto; bottom: auto; }
.trai-badge-top-right .trai-badge--mini { top: 3px; right: 3px; left: auto; bottom: auto; }
.trai-badge-bottom-left .trai-badge--mini { bottom: 3px; left: 3px; right: auto; top: auto; }
.trai-badge-bottom-right .trai-badge--mini { bottom: 3px; right: 3px; left: auto; top: auto; }

/* Hide the visible badge (container utility or per-image override). File
   metadata, JSON-LD and the page notice stay untouched. The !important
   settles the display tie against the caption ruleset above regardless of
   source order. */
.trai-badge-hidden .trai-badge {
	display: none !important;
}

/* Overlay guard rung 1: applied by front.js only after a hit test proved the
   badge is covered. max() keeps a site-tuned --trai-badge-z above 99 intact;
   browsers without max() ignore the rule and the guard moves on to rung 2. */
.trai-badge--raised {
	z-index: max(var(--trai-badge-z, 30), 99);
}

/* Background-image hosts (optional JS feature) */
.trai-bg-host {
	position: relative;
}

/* Site-wide footer note (optional) and the note ahead of AI-written posts.
   Neutral like the badges: inherits the theme, just quieter and smaller. */
.trai-page-notice {
	margin: 16px auto 8px;
	padding: 0 16px;
	max-width: 1200px;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.7;
	text-align: center;
}

.trai-content-notice {
	margin: 0 0 1em;
	font-size: 0.85em;
	line-height: 1.5;
	opacity: 0.75;
}