/**
 * ASAE Hub Page Builder — accessible external links.
 *
 * Loaded on every front-end request, because `the_content` fires on every Page
 * and post. Also loaded on the plugin's Settings tab for the icon picker.
 */

/* Visually-hidden warning text. Ships its own copy of the clip pattern rather
   than leaning on the theme's .screen-reader-text — Neve provides one, but the
   announcement must not depend on the theme being Neve. `white-space: nowrap`
   is deliberate: without it a clipped string can still force layout width. */
.asae-extlink__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

/* Binds the link's final word to its icon. A no-break space is not sufficient
   on its own — browsers still allow a soft wrap immediately before an atomic
   inline such as an <svg>, which strands the icon at the start of the next line.
   The word and the icon therefore share a nowrap box. Scoped to a single word,
   so it can never force a long run of text to overflow. */
.asae-extlink__nb {
	white-space: nowrap;
}

/* The icon. Sized in em so it tracks the surrounding text at 200% zoom
   (SC 1.4.4), and coloured by currentColor so it inherits the link colour in
   every state — including :visited, :hover and forced-colors — and can never be
   configured into a contrast failure. Stroke geometry lives inline on the SVG
   paths, so the glyph still draws correctly if this stylesheet is blocked. */
.asae-extlink__icon {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	vertical-align: -0.09em;
	color: currentColor;
	/* Never a background image: those vanish under forced-colors and in print. */
	background: none;
}

.asae-extlink__icon.is-sm {
	width: 0.75em;
	height: 0.75em;
	vertical-align: -0.05em;
}

.asae-extlink__icon.is-lg {
	width: 1em;
	height: 1em;
	vertical-align: -0.13em;
}

/* Windows High Contrast / forced-colors. currentColor already resolves to the
   system LinkText, so the icon follows the link automatically — this block only
   guarantees the UA is allowed to recolour it. */
@media (forced-colors: active) {
	.asae-extlink__icon {
		forced-color-adjust: auto;
	}
}

/* "Opens in a new tab" is meaningless on paper. */
@media print {
	.asae-extlink__icon {
		display: none;
	}
}

/* ── Settings screen: icon picker ─────────────────────────────────────────── */

.asae-extlink-picker {
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 12px 16px;
	margin: 0 0 16px;
	max-width: 42em;
}

.asae-extlink-picker legend {
	font-weight: 600;
	padding: 0 4px;
}

.asae-extlink-picker__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 3px;
	cursor: pointer;
}

.asae-extlink-picker__option:hover {
	background: #f0f0f1;
}

/* The focus ring is driven off the radio's :focus-visible and drawn on the
   whole label, so the target of the ring matches the clickable area. */
.asae-extlink-picker__option:has(input:focus-visible) {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

/* Fallback for browsers without :has() — ring the radio itself. */
.asae-extlink-picker__option input:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

.asae-extlink-picker__swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: none;
	color: #2271b1;
}

.asae-extlink-picker__swatch .asae-extlink__icon {
	width: 16px;
	height: 16px;
	vertical-align: baseline;
}

/* Decoration inside an aria-hidden container, so it must not be focusable —
   hence a styled span rather than a real anchor. */
.asae-extlink-preview__link {
	color: #2271b1;
	text-decoration: underline;
}

.asae-extlink-preview {
	margin: 0 0 4px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	max-width: 42em;
}