/**
 * Burnpedia Image Save Button Analytics — the entire front-end stylesheet.
 *
 * ⚠️ Nothing here is loaded from anywhere else: no font file, no image, no
 * @import. The button is a rounded rectangle with a translated word in it.
 *
 * ⚠️ THE COLOURS ARE MEASURED, NOT CHOSEN BY EYE. White on #e60023 is 4.79:1,
 * which clears WCAG AA for normal text (4.5:1). Anything lighter than that red
 * fails, so it is not a knob.
 *
 * ⚠️ THERE IS NO LOGO. The button carries the word "Save" and no Pinterest
 * mark, glyph or wordmark — which is both what their brand guidelines ask of a
 * third party and the reason this plugin ships no trademarked artwork at all.
 */

/* The scope marker `the_content` appends. It must never have a box: a marker
   with one could pick up a `.entry-content > *` margin rule and add a gap to
   the bottom of every post on the site. */
.burnpedia-sb-scope {
	display: none !important;
}

/* The overlay layer. Zero-sized, click-through, and never in the way of
   anything: every button inside it re-enables pointer events for itself. */
.bpsb-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 100;
	pointer-events: none;
}

.bpsb-btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--bpsb-size, 32px);
	padding: 0 0.85em;
	border-radius: 999px;
	background: #e60023;
	color: #fff;
	font-family: inherit;
	font-size: clamp(12px, calc(var(--bpsb-size, 32px) * 0.42), 22px);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease-out;
	-webkit-tap-highlight-color: transparent;
}

/* ⚠️ A tap target of at least 44×44 CSS pixels, WITHOUT changing how big the
   button looks. The pseudo-element is the thing a finger hits; the visible pill
   can stay 32px tall on a design that wants it discreet. */
.bpsb-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 44px;
	min-height: 44px;
	transform: translate(-50%, -50%);
}

.bpsb-btn:hover,
.bpsb-btn:active {
	background: #ad081b;
	color: #fff;
	text-decoration: none;
}

/* Shown by JavaScript while the reader is pointing at the image… */
.bpsb-btn.is-on,
/* …always, on a touch screen or when the site asked for it… */
.bpsb-layer.bpsb-always .bpsb-btn,
/* …and whenever it has keyboard focus, which is the case JavaScript must not
   be the only thing responsible for. */
.bpsb-btn:focus-visible {
	opacity: 0.94;
	pointer-events: auto;
}

.bpsb-btn:focus-visible {
	opacity: 1;
	outline: 3px solid #fff;
	outline-offset: -6px;
	box-shadow: 0 0 0 3px #1d2327, 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* A reader who has asked their system for less movement gets none. */
@media (prefers-reduced-motion: reduce) {
	.bpsb-btn {
		transition: none;
	}
}

/* A forced-colours mode replaces our palette entirely; make sure the button
   keeps an edge rather than dissolving into the page. */
@media (forced-colors: active) {
	.bpsb-btn {
		border: 1px solid ButtonBorder;
	}
}