/* Friendly explainers: a word that opens a small card. Markup: inc/explainer.php.
   Behaviour (hover, tap, placement): assets/js/explainer.js.
   Change the look here, in the variables. Text is always Primary. Secondary is
   only for the shape in the corner of the card, as everywhere on the site. */
:root {
	--ce-explain-card-w: 22rem;
	--ce-explain-card-bg: var(--wp--preset--color--background, #fbfdf8);
	--ce-explain-card-radius: 1.25rem;
	--ce-explain-hint-delay: 0.6s;
	--ce-explain-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156.33 148.37'%3E%3Cpath d='M57.42 0 58.68 47.78 11.32 32.27 0 71.25 45.27 82.57 14.25 127.83 51.13 148.37 77.96 100.59 105.2 148.37 142.08 127.83 111.07 82.57 156.33 71.25 144.6 32.27 97.66 47.78 98.49 0Z'/%3E%3C/svg%3E");
}

.ce-explain {
	position: relative;
}

/* The trigger is a button that looks like the words around it. The dotted
   underline says "there is more"; the star next to it is not underlined. The
   screens sit over the shapes with pointer-events none, so it asks for them. */
.ce-explain__trigger {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0.15em;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-align: inherit;
	text-transform: inherit;
	text-decoration: underline dotted;
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.22em;
	cursor: pointer;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease;
}

.ce-explain__trigger:hover,
.ce-explain__trigger:focus-visible {
	background: var(--ce-secondary);
}

/* Kept highlighted while its card is open. A separate rule: a browser that does
   not know :popover-open must still read the rule above. Direct children only:
   a card can hold an explainer of its own. */
.ce-explain:has(> .ce-explain__card:popover-open) > .ce-explain__trigger {
	background: var(--ce-secondary);
}

.ce-explain__trigger:focus-visible {
	outline: 3px solid var(--ce-focus-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--ce-focus-band);
}

.ce-explain__star {
	display: inline-block;
	/* The side bearings of the "n" and the "*" leave a visible gap (about 0.11em).
	   This pulls the star in so it hugs the word; it only eats blank space. */
	margin-left: -0.05em;
	transform-origin: 50% 65%;
	transition: transform 0.2s ease;
}

.ce-explain__trigger:hover .ce-explain__star,
.ce-explain__trigger:focus-visible .ce-explain__star {
	transform: rotate(72deg) scale(1.15);
}

/* Small screens: the hint stands above the word. The note is on the left, the
   arrow on its right leaves it at the top and ends with its head pointing down
   and to the left at the star. The trigger line gets the room for it, so
   nothing moves when it shows or goes. */
.ce-explain--hint {
	display: inline-block;
	margin-top: 3.1rem;
}

.ce-explain__hint {
	position: absolute;
	right: 0;
	bottom: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.3rem;
	width: max-content;
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.15;
	text-align: right;
	text-transform: none;
	pointer-events: none;
}

.ce-explain__hint-text {
	width: 8.5rem;
	text-wrap: balance;
	transform: translateY(-0.25rem) rotate(-6deg);
	transform-origin: 100% 50%;
}

@media (min-width: 480px) {
	.ce-explain__hint {
		font-size: 1rem;
		white-space: nowrap;
	}

	.ce-explain__hint-text {
		width: auto;
	}
}

/* The bent arrow (icons/PfeilBogen.svg, redrawn as a stroke, see
   inc/explainer.php). The note sits at its tail, the head points at the word.
   Above the word the arrow is mirrored and tipped, so it points down and to the
   left; on wide screens it is mirrored and points left. Only one of the two
   drawings shows at a time. */
.ce-explain__arrow {
	flex: none;
	overflow: visible;
	fill: none;
	stroke: var(--ce-primary);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 30;
}

.ce-explain__arrow--above {
	width: 2.16rem;
	height: auto;
	aspect-ratio: 518 / 648;
	margin-top: 1.15em;
}

@media (min-width: 480px) {
	.ce-explain__arrow--above {
		margin-top: 0.575em;
	}
}

.ce-explain__arrow--side {
	display: none;
}

/* Wide screens: the note sits to the top right of the word, like a scribble in
   the margin. The arrow swings down from the note and its head points left at
   the word. Nothing is reserved below, since it no longer takes room between
   the two lines. */
@media (min-width: 900px) {
	.ce-explain--hint {
		margin-top: 0;
	}

	.ce-explain__hint {
		right: auto;
		bottom: 38%;
		left: calc(100% + 0.2rem);
		flex-direction: row-reverse;
		align-items: flex-start;
		gap: 0.2rem;
		margin-bottom: 0;
		font-size: clamp(1rem, 1.3vw, 1.25rem);
		text-align: left;
	}

	/* Tipped to the right and lifted, so the tail of the arrow ends below the
	   middle of the first word ("what"). */
	.ce-explain__hint-text {
		transform: translateY(-1.1em) rotate(8deg) translateX(-1.3em);
		transform-origin: 0 50%;
	}

	.ce-explain__arrow--above {
		display: none;
	}

	.ce-explain__arrow--side {
		display: block;
		width: clamp(2.75rem, 3.6vw, 3.5rem);
		height: auto;
		aspect-ratio: 662 / 524;
		transform: scaleX(-1);
	}
}

/* The card. A popover sits in the top layer, so no screen, pin or overflow
   can cut it off. Without JavaScript it opens centred in the window; with it,
   the script places it next to the word. */
.ce-explain__card {
	box-sizing: border-box;
	width: min(var(--ce-explain-card-w), calc(100vw - 2rem));
	max-height: 70vh;
	margin: 0;
	padding: 1.1rem 1.25rem 1.3rem;
	border: 2px solid var(--ce-primary);
	border-radius: var(--ce-explain-card-radius);
	background: var(--ce-explain-card-bg);
	color: var(--ce-primary);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	text-wrap: pretty;
	white-space: normal;
	overflow: auto;
	/* Screens and heroes switch pointer events off. The card always takes them. */
	pointer-events: auto;
}

/* The star in the corner is the close button. The button is a larger tap
   target centred on the star, which is drawn by its ::before. */
.ce-explain__close {
	position: absolute;
	z-index: 2;
	top: 0.43rem;
	right: 0.525rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ce-explain__close::before {
	content: "";
	width: 1.75rem;
	aspect-ratio: 156.33 / 148.37;
	background: var(--ce-secondary);
	-webkit-mask: var(--ce-explain-star) center / contain no-repeat;
	mask: var(--ce-explain-star) center / contain no-repeat;
	transition: transform 0.15s ease;
}

.ce-explain__close:hover::before,
.ce-explain__close:focus-visible::before {
	transform: rotate(18deg) scale(1.08);
}

.ce-explain__close:focus-visible {
	outline: 2px solid var(--ce-primary);
	outline-offset: -2px;
}

.ce-explain__title,
.ce-explain__body {
	position: relative;
	z-index: 1;
	display: block;
}

.ce-explain__title {
	padding-right: 2.25rem;
	margin-bottom: 0.4rem;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.2;
}

/* The block: a line of its own, for page content. */
.ce-explain-block {
	margin-top: 1.5rem;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}

/* The star bounces a few times when the page settles, until the card was
   opened once in this visit (explainer.js adds is-seen). It waits for the
   loader to leave. Without motion it stays still. */
@media (prefers-reduced-motion: no-preference) {
	:where(html:not(.ce-still)) {
		.ce-explain--nudge:not(.is-seen) .ce-explain__star {
			animation: ce-explain-bounce 0.9s ease-in-out 1.2s 3;
		}

		.ce-explain__hint {
			opacity: 0;
			animation: ce-explain-hint-in 0.5s ease var(--ce-explain-hint-delay) forwards;
		}

		&[data-loader] .ce-explain--nudge .ce-explain__star,
		&[data-loader] .ce-explain__hint {
			animation: none;
		}

		.ce-explain__card:popover-open {
			animation: ce-explain-pop 0.18s ease-out;
		}
	}
}

.ce-explain.is-seen .ce-explain__hint {
	animation: none;
	opacity: 0;
	visibility: hidden;
}

@keyframes ce-explain-bounce {
	0%,
	100% {
		transform: translateY(0) rotate(0);
	}

	40% {
		transform: translateY(-0.4em) rotate(20deg);
	}

	70% {
		transform: translateY(0.04em) rotate(-8deg);
	}
}

@keyframes ce-explain-hint-in {
	from {
		opacity: 0;
		transform: translateY(0.35rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ce-explain-pop {
	from {
		opacity: 0;
		transform: translateY(0.25rem) scale(0.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (forced-colors: active) {
	.ce-explain__card {
		border-color: CanvasText;
	}

	.ce-explain__close::before {
		background: CanvasText;
	}

	.ce-explain__trigger:focus-visible {
		outline-color: Highlight;
	}
}

/* No popover support: the words stay plain, nothing is hidden or broken. */
@supports not selector(:popover-open) {
	.ce-explain__card,
	.ce-explain__hint {
		display: none;
	}

	.ce-explain--hint {
		display: inline;
		margin-top: 0;
	}

	.ce-explain__trigger {
		text-decoration: none;
		cursor: auto;
	}

	.ce-explain__star {
		animation: none;
	}
}