/*!
 * Remote Sensei design-system rules that must apply SITE-WIDE.
 *
 * Why this file exists at all, rather than a page stylesheet or a SCSS partial:
 * main.min.css only loads on the migrated union (functions.php:285), but the
 * elements styled here — social icons in footer-default/footer-simple, the
 * confirmation pages, the blog share row — render on Elementor pages too. A rule
 * that only reaches half the site is not a site-wide rule. Same reasoning, and
 * the same enqueue slot, as css/rs-cf7-base.css.
 *
 * Deliberately LOW SPECIFICITY (single class, no ids, no !important) so every page
 * stylesheet still wins a tie. It is loaded right after rs-cf7-base for that reason.
 *
 * Hand-authored. This is not a SCSS build output — do not look for a .scss source.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * 1. Social icons — interaction states
 *
 * Source of truth: Figma "Remote Sensei Universe 🌎", component set `socials`
 * (node 30888:20778). Variants are size (S|M) x color (black|teal|white) x
 * state (default|hover|click|disabled).
 *
 * The three colour variants differ ONLY in their default fill:
 *     black #34383c   teal #408897   white #fffffe
 * and all three share the same three interaction states:
 *     hover #f35b54   click #d9514b   disabled #d8e2e3
 *
 * So the DEFAULT colour is deliberately not set here — it is inherited from
 * whatever context the icon sits in, which already varies correctly by placement
 * (dark teal hero, white footer, light body). Only the states are global, because
 * only the states are the same everywhere. Setting a default here would repaint
 * every social icon on the site and is not what the design system asks for.
 *
 * Motion: Figma SMART_ANIMATE, 150ms, ease-in.
 * ───────────────────────────────────────────────────────────────────────────── */

/* `a.rs-social-link`, not `.rs-social-link`: Elementor's own `.elementor-icon` rule
   sets `transition: all .3s` at equal (0,1,0) specificity and loads later, so a bare
   class loses the duration and the footer icon eases over 300ms instead of the 150ms
   the design system specifies. Element+class (0,1,1) settles it. Measured on /blog/. */
a.rs-social-link {
	transition: color 150ms ease-in;
}

.rs-social-link:hover,
.rs-social-link:focus-visible {
	color: #f35b54;
}

/* :active must come after :hover to win — a click is also a hover. */
.rs-social-link:active {
	color: #d9514b;
}

.rs-social-link[aria-disabled="true"],
.rs-social-link.disabled {
	color: #d8e2e3;
	pointer-events: none;
}

/* The glyph inherits, so a colour set on the <a> reaches the <i> even where a
   page stylesheet colours the icon rather than the link. */
.rs-social-link > i,
.rs-social-link > svg {
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.rs-social-link {
		transition: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 2. Bootstrap tooltip skin
 *
 * Bootstrap's own tooltip CSS ships in both Bootstrap copies, so this only
 * restyles it to match the panel it replaces (the old hand-rolled
 * .rs-bsp-factcheck-panel: dark, 14px, generous line-height, wide).
 *
 * Bootstrap 5.3 reads these custom properties off .tooltip, so no selector
 * fights are needed — see getbootstrap.com/docs/5.3/components/tooltips/#css.
 * ───────────────────────────────────────────────────────────────────────────── */

.tooltip {
	--bs-tooltip-max-width: 420px;
	--bs-tooltip-padding-x: 16px;
	--bs-tooltip-padding-y: 14px;
	--bs-tooltip-font-size: 14px;
	--bs-tooltip-color: #d8e2e3;
	--bs-tooltip-bg: rgba(41, 45, 49, 0.97);
	--bs-tooltip-border-radius: 4px;
	--bs-tooltip-opacity: 1;
}

/* Bootstrap sets `text-align: center` on .tooltip-inner itself, not via a custom
   property, so left-aligning has to happen on that element — setting it on .tooltip
   loses to Bootstrap's own rule. The panel this replaces was left-aligned, and three
   lines of centred prose is hard to read. */
.tooltip .tooltip-inner {
	text-align: left;
	line-height: 1.5;
}

/* An element that carries a tooltip should say so on hover, the way the old
   fact-check trigger did with cursor:help. */
.rs-has-tooltip {
	cursor: help;
}