/**
 * Lookit Share Row
 *
 * Self-contained. Elementor only enqueues its share-button stylesheet when its
 * own widget is present on the page, so a shortcode replacement cannot inherit
 * it. Everything the row needs lives here.
 *
 * Tune from the shortcode via size, gap, bg, icon_color, shape and color
 * attributes, which write the custom properties below.
 */

.lookit-share-row {
	--lsr-size: 44px;
	--lsr-gap: 10px;
	--lsr-radius: 50%;
	--lsr-icon-scale: 0.42;
	--lsr-bg: #1c2b4a;
	--lsr-fg: #ffffff;
	--lsr-teal: #028673;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lsr-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The wrapper keeps Elementor's elementor-grid class for markup parity, and
   Elementor's frontend stylesheet sets .elementor-grid to display: grid with a
   single column. Same specificity as our root rule, so whichever file loads
   last wins. Now that this file loads in the head, Elementor's can come after
   it and stack the buttons vertically. Doubling the class settles it
   regardless of load order. */
.elementor-grid.lookit-share-row {
	display: flex;
	flex-wrap: wrap;
	grid-template-columns: none;
	gap: var(--lsr-gap);
}

.elementor-grid.lookit-share-row--nowrap {
	flex-wrap: nowrap;
}

.elementor-grid.lookit-share-row--align-center {
	justify-content: center;
}

.elementor-grid.lookit-share-row--align-right {
	justify-content: flex-end;
}

.lookit-share-row--nowrap {
	flex-wrap: nowrap;
}

.lookit-share-row--align-center {
	justify-content: center;
}

.lookit-share-row--align-right {
	justify-content: flex-end;
}

/* Elementor's grid item wrapper is kept for markup parity but carries no layout. */
.lookit-share-row .elementor-grid-item {
	display: block;
	margin: 0;
	padding: 0;
	width: auto;
}

.lookit-share-row .elementor-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: var(--lsr-size);
	height: var(--lsr-size);
	padding: 0;
	border: 0;
	border-radius: var(--lsr-radius);
	background-color: var(--lsr-bg);
	color: var(--lsr-fg);
	font-size: calc(var(--lsr-size) * var(--lsr-icon-scale));
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: filter 150ms ease, background-color 150ms ease;
}

.lookit-share-row .elementor-share-btn:hover,
.lookit-share-row .elementor-share-btn:focus {
	color: var(--lsr-fg);
	text-decoration: none;
	filter: brightness(1.18);
}

.lookit-share-row .elementor-share-btn:focus-visible {
	outline: 3px solid var(--lsr-teal);
	outline-offset: 2px;
}

.lookit-share-row .elementor-share-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.lookit-share-row .elementor-share-btn__icon i {
	font-size: inherit;
	line-height: 1;
}

/* Scoped to beat Elementor's share-buttons stylesheet, which sizes
   .elementor-share-btn__icon svg at 1.7em whenever its own widget, or a
   global/kit stylesheet that bundles it, is loaded on the page. */
.lookit-share-row .elementor-share-btn__icon svg.lookit-share-row__svg {
	width: 1em;
	height: 1em;
	max-width: none;
	min-width: 0;
	fill: currentColor;
	display: block;
	flex: 0 0 auto;
}

.lookit-share-row .elementor-share-btn__icon {
	--e-share-buttons-icon-size: 1em;
	width: auto;
	font-size: inherit;
}

/* ---------------------------------------------------------------------------
 * Views
 * ------------------------------------------------------------------------ */

/* Icon only. The accessible name comes from aria-label on the anchor, so the
   visible label can be removed outright rather than hidden off-screen. */
.lookit-share-row--view-icon .elementor-share-btn__text {
	display: none;
}

.lookit-share-row--view-icon-text .elementor-share-btn,
.lookit-share-row--view-text .elementor-share-btn {
	width: auto;
	min-width: var(--lsr-size);
	padding: 0 16px;
	border-radius: calc(var(--lsr-size) / 2);
	font-size: 0.875rem;
	font-weight: 500;
}

.lookit-share-row--view-text .elementor-share-btn__icon {
	display: none;
}

.lookit-share-row .elementor-share-btn__title {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Shapes
 * ------------------------------------------------------------------------ */

.lookit-share-row--shape-square {
	--lsr-radius: 0;
}

.lookit-share-row--shape-rounded {
	--lsr-radius: 6px;
}

/* No pill at all: bare glyphs in the page's own colour. */
.lookit-share-row--shape-bare .elementor-share-btn {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: var(--lsr-bg);
	font-size: calc(var(--lsr-size) * var(--lsr-icon-scale) * 1.2);
}

.lookit-share-row--shape-bare {
	--lsr-gap: 18px;
}

/* ---------------------------------------------------------------------------
 * Colour treatments
 * ------------------------------------------------------------------------ */

.lookit-share-row--color-mono .elementor-share-btn {
	background-color: #3a4a48;
}

.lookit-share-row--color-official .elementor-share-btn_bluesky {
	background-color: #0a7aff;
}

.lookit-share-row--color-official .elementor-share-btn_x {
	background-color: #000000;
}

.lookit-share-row--color-official .elementor-share-btn_linkedin {
	background-color: #0a66c2;
}

.lookit-share-row--color-official .elementor-share-btn_facebook {
	background-color: #1877f2;
}

.lookit-share-row--color-official .elementor-share-btn_threads {
	background-color: #000000;
}

.lookit-share-row--color-official .elementor-share-btn_email {
	background-color: #3a4a48;
}

.lookit-share-row--color-official .elementor-share-btn_copy {
	background-color: #3a4a48;
}

/* ---------------------------------------------------------------------------
 * Copy Link
 * ------------------------------------------------------------------------ */

/* No colour change on copy. The confirmation line below the row is the only
   feedback, so the button stays in the row's own colour. The is-copied class
   is still toggled by the script, for anyone who wants to style it. */

/* No visible confirmation line: it pushed the layout down on every copy.
   The live region stays for screen readers, visually hidden, so nothing on
   the page moves. Sighted feedback is the tooltip switching to "Copied". */
.lookit-share-row__confirm,
.lookit-share-row__confirm[hidden] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Tooltip. CSS only, no JetTricks, no tippy, no popper.
 * ------------------------------------------------------------------------ */

.lookit-share-row__tip {
	position: relative;
}

.lookit-share-row__tip::after {
	content: attr(data-lookit-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 5px 9px;
	border-radius: 3px;
	background: #16201f;
	color: #fff;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease;
	z-index: 5;
}

.lookit-share-row__tip:hover::after,
.lookit-share-row__tip:focus-visible::after {
	opacity: 1;
}

.lookit-share-row--view-icon-text .lookit-share-row__tip::after,
.lookit-share-row--view-text .lookit-share-row__tip::after {
	content: none;
}

.lookit-share-row__heading {
	font-weight: 700;
	margin: 0 0 0.5em;
}

@media (prefers-reduced-motion: reduce) {
	.lookit-share-row .elementor-share-btn,
	.lookit-share-row__tip::after {
		transition: none;
	}
}