/* Social Proof for HivePress — frontend styles.
 *
 * Colours, sizing and animation speed arrive as CSS custom properties set
 * inline on #hpsp-root by the plugin.
 */

.hpsp-root {
	position: fixed;
	z-index: var(--hpsp-z, 99999);
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: calc(100vw - 24px);
	pointer-events: none;
	/* Defends against style-attribute heuristics like WordPress core's
	   `html :where([style*=border-width]) { border-style: solid; }`. */
	border: none;
	background: none;
}

/* --------------------------------------------------------------------------
 * Toast.
 * ----------------------------------------------------------------------- */

.hpsp-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	max-width: var(--hpsp-max-width, 380px);
	/* One spacing scale (8pt grid: 4/8/12/16/24). A 12px inset around a 40px
	 * image gives a 64px toast, so height:image is 1.60 - within ~1% of the
	 * golden ratio - and nothing breaks the rhythm. */
	padding: 12px;
	background: var(--hpsp-bg, #111827);
	color: var(--hpsp-fg, #f9fafb);
	border: var(--hpsp-bd-width, 0) solid var(--hpsp-bd-color, transparent);
	border-radius: var(--hpsp-radius, 999px);
	box-shadow: var(--hpsp-shadow, 0 8px 24px rgba(0, 0, 0, 0.18));
	font-size: var(--hpsp-font-size, 14px);
	line-height: 1.4;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	pointer-events: auto;
	opacity: 0;
	transition: opacity var(--hpsp-anim-ms, 300ms) ease, transform var(--hpsp-anim-ms, 300ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.hpsp-toast.hpsp-show {
	opacity: 1;
}

.hpsp-toast__img {
	flex: none;
	width: 40px;
	height: 40px;
	object-fit: cover;
	background: rgba(127, 127, 127, 0.2);
}

.hpsp-toast__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 1.1em;
	text-transform: uppercase;
}

/* Icon tile: a Font Awesome glyph on a coloured tile. Tile background, glyph
 * colour, glyph size and glyph weight are configurable; the fallbacks
 * reproduce the pre-1.4.0 appearance (link-coloured tile, white glyph,
 * 1.1em, no extra weight). The glyph classes (fa-solid / fa-brands) resolve
 * against the Font Awesome 7 stylesheet the plugin enqueues whenever icon
 * tiles are in use - HivePress's own FA5 bundle has no brand glyphs and none
 * of the FA6/7 names. */
.hpsp-toast__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hpsp-icon-bg, var(--hpsp-link, #93c5fd));
	color: var(--hpsp-icon-fg, #ffffff);
	font-size: var(--hpsp-icon-size, 1.1em);
}

/* Icon weight: a stroke in the glyph's own colour thickens it without extra
 * font files. paint-order keeps the stroke behind the fill so thin counters do
 * not close up.
 *
 * Two declarations because there are two renderers. -webkit-text-stroke
 * thickens a FONT glyph and does nothing to an SVG; stroke/stroke-width do the
 * reverse. Both are inherited, so the wrapper carries them and whichever one
 * drew the icon picks its pair up. The SVG's path sets
 * vector-effect="non-scaling-stroke", without which stroke-width would be read
 * in user units (1/512 em) and 0.3px would be invisible. */
.hpsp-toast__icon i {
	-webkit-text-stroke: var(--hpsp-icon-stroke, 0) currentColor;
	stroke: currentColor;
	stroke-width: var(--hpsp-icon-stroke, 0);
	paint-order: stroke fill;
}

/* Countdown bar: width animates from full to nothing over the display
 * duration; hovering the toast pauses it along with the dismiss timer.
 */
.hpsp-toast {
	position: relative;
	overflow: hidden;
}

.hpsp-toast__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--hpsp-link, #93c5fd);
	opacity: 0.7;
	transform-origin: left center;
	animation: hpsp-countdown linear forwards;
	animation-play-state: running;
}

.hpsp-toast:hover .hpsp-toast__progress {
	animation-play-state: paused;
}

@keyframes hpsp-countdown {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

/* Pills need more room than flat corners, because each cap is an arc of half
 * the toast's height that sweeps inward. Measured on the default pill at a
 * 12px inset, the close button's top corner sat 3.7px from the arc on a
 * one-line toast and 0.2px on a two-line one, and the image read as tight
 * even though it is geometrically concentric with the cap. A uniform 16px
 * inset gives the image a 16px gap and lifts the close button's clearance to
 * 7.7px / 4.2px, while keeping it aligned with the first line of the message
 * rather than floating at mid-height. Flat-cornered toasts keep the 12px
 * scale, where no arc encroaches. */
.hpsp-img-circle .hpsp-toast {
	padding: 16px;
}

/* Image shape. A pill cap crowds a straight-edged image: on a 64px pill the
 * left cap is a 32px-radius arc, and a square inset only 12px sits barely
 * inside it. Non-circular images therefore get a slightly deeper inset AND a
 * capped corner radius, which removes the conflict outright. */
.hpsp-img-rounded .hpsp-toast,
.hpsp-img-square .hpsp-toast {
	/* Logical, not physical: on an RTL site the image sits on the right, and
	   padding-left would have widened the close button's side instead. */
	padding-inline-start: 16px;
	border-radius: min(var(--hpsp-radius, 999px), 16px);
}

.hpsp-img-circle .hpsp-toast__img { border-radius: 50%; }
.hpsp-img-rounded .hpsp-toast__img { border-radius: 8px; }
.hpsp-img-square .hpsp-toast__img { border-radius: 2px; }

.hpsp-toast__content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hpsp-toast__message { overflow-wrap: anywhere; }

.hpsp-toast__message a {
	color: var(--hpsp-link, #93c5fd);
	text-decoration: none;
}

.hpsp-toast__message a:hover,
.hpsp-toast__message a:focus {
	text-decoration: underline;
}

.hpsp-toast__time {
	margin-top: 2px;
	font-size: 0.82em;
	opacity: 0.65;
}

.hpsp-toast__close {
	flex: none;
	align-self: flex-start;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 24x24 minimum hit area (WCAG 2.5.8). */
	min-width: 24px;
	min-height: 24px;
	/* No negative margin: the 12px toast padding is the offset, so the close
	 * button keeps the same rhythm as everything else (it used to sit 6px
	 * from the edge, the only value in the toast that did). */
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.25em;
	line-height: 1;
	opacity: 0.6;
	cursor: pointer;
}

.hpsp-toast__close:hover,
.hpsp-toast__close:focus {
	opacity: 1;
}

/* --------------------------------------------------------------------------
 * Enter/exit animations. The hidden state lives on :not(.hpsp-show) so the
 * .hpsp-show rule always wins regardless of specificity.
 * ----------------------------------------------------------------------- */

/* Slide: direction follows the active position (bottom = up, top = down). */
.hpsp-anim-slide .hpsp-toast:not(.hpsp-show) { transform: translateY(18px); }

/* Pop. */
.hpsp-anim-pop .hpsp-toast:not(.hpsp-show) { transform: scale(0.8); }

/* Reduced motion: fade only. */
.hpsp-root.hpsp-reduced-motion .hpsp-toast {
	transition: opacity 150ms ease;
	transform: none !important;
}

/* --------------------------------------------------------------------------
 * Desktop positions.
 * ----------------------------------------------------------------------- */

@media (min-width: 641px) {
	/* --hpsp-yield is set by the script while a Notifications for HivePress
	 * pop-up stack occupies the same corner, so the two never overlap. */
	.hpsp-pos-bottom-left { left: var(--hpsp-off-x, 20px); bottom: calc(var(--hpsp-off-y, 20px) + var(--hpsp-yield, 0px)); align-items: flex-start; }
	.hpsp-pos-bottom-center { left: 50%; bottom: calc(var(--hpsp-off-y, 20px) + var(--hpsp-yield, 0px)); transform: translateX(-50%); align-items: center; }
	.hpsp-pos-bottom-right { right: var(--hpsp-off-x, 20px); bottom: calc(var(--hpsp-off-y, 20px) + var(--hpsp-yield, 0px)); align-items: flex-end; }
	.hpsp-pos-top-left { left: var(--hpsp-off-x, 20px); top: calc(var(--hpsp-off-y, 20px) + var(--hpsp-yield, 0px)); align-items: flex-start; }
	.hpsp-pos-top-center { left: 50%; top: calc(var(--hpsp-off-y, 20px) + var(--hpsp-yield, 0px)); transform: translateX(-50%); align-items: center; }
	.hpsp-pos-top-right { right: var(--hpsp-off-x, 20px); top: calc(var(--hpsp-off-y, 20px) + var(--hpsp-yield, 0px)); align-items: flex-end; }

	/* Action Bar for HivePress is fixed to the bottom of the viewport, above the page, and a
	 * bottom pop-up lands on top of it. Measured at 390x844 with a real pop-up on screen: the
	 * pop-up covered 53px of the bar's 65px for the whole six seconds it was up, so a visitor
	 * tapping Home, Browse or Account hit the pop-up instead, and at the right-hand item hit its
	 * close button, which also arms the snooze. A mis-tap silently switched Social Proof off for
	 * that visitor. Start the stack above the bar instead.
	 *
	 * --hp-action-bar-offset is the bar's height only at the widths where the bar is actually
	 * displayed, and 0 elsewhere, which matters here because Social Proof's desktop range starts
	 * at 641px while the bar's default mobile range runs to 767px. The nested fallback is for an
	 * Action Bar older than the version that publishes the offset. */
	body.hp-action-bar-visible .hpsp-pos-bottom-left,
	body.hp-action-bar-visible .hpsp-pos-bottom-center,
	body.hp-action-bar-visible .hpsp-pos-bottom-right {
		bottom: calc(var(--hpsp-off-y, 20px) + var(--hpsp-yield, 0px) + var(--hp-action-bar-offset, var(--hp-action-bar-height, 56px)));
	}

	.hpsp-anim-slide[class*="hpsp-pos-top"] .hpsp-toast:not(.hpsp-show) { transform: translateY(-18px); }
}

/* --------------------------------------------------------------------------
 * Mobile positions (screens up to 640px).
 * ----------------------------------------------------------------------- */

@media (max-width: 640px) {
	.hpsp-root { left: 12px; right: 12px; max-width: none; }

	.hpsp-posm-bottom-left { bottom: calc(12px + var(--hpsp-yield, 0px)); align-items: flex-start; }
	.hpsp-posm-bottom-center { bottom: calc(12px + var(--hpsp-yield, 0px)); align-items: center; }
	.hpsp-posm-bottom-right { bottom: calc(12px + var(--hpsp-yield, 0px)); align-items: flex-end; }
	.hpsp-posm-top-left { top: calc(12px + var(--hpsp-yield, 0px)); align-items: flex-start; }
	.hpsp-posm-top-center { top: calc(12px + var(--hpsp-yield, 0px)); align-items: center; }
	.hpsp-posm-top-right { top: calc(12px + var(--hpsp-yield, 0px)); align-items: flex-end; }

	/* Clear the Action Bar. See the note on the desktop rules above; this is the width the
	 * overlap was measured at. */
	body.hp-action-bar-visible .hpsp-posm-bottom-left,
	body.hp-action-bar-visible .hpsp-posm-bottom-center,
	body.hp-action-bar-visible .hpsp-posm-bottom-right {
		bottom: calc(12px + var(--hpsp-yield, 0px) + var(--hp-action-bar-offset, var(--hp-action-bar-height, 56px)));
	}

	.hpsp-toast { max-width: 100%; }

	.hpsp-anim-slide[class*="hpsp-posm-top"] .hpsp-toast:not(.hpsp-show) { transform: translateY(-18px); }

	.hpsp-no-mobile { display: none !important; }
}