/* RC Widget — Icon + Text. Scoped under .rcw-icon-text.
   Colour inherits the site's Salient brand via --rcw-accent (with a sensible
   fallback so it still works off-Salient). Structure/spacing stay here. */
@import url("../../../../themes/salient/css/iconsmind.css");
@import url("../../../../themes/salient/css/linecon.css");
@import url("../../../../themes/salient/css/steadysets.css");

.rcw-icon-text {
	display: flex;
	align-items: center;
	gap: var(--gap, 18px);
	font-family: var(--rcw-font-body, 'Prompt', sans-serif);
}

/* alignment variants */
.rcw-icon-text--center { align-items: center; }
.rcw-icon-text--start  { align-items: flex-start; }
.rcw-icon-text--top {
	flex-direction: column;
	text-align: center;
}
.rcw-icon-text--top .rcw-icon-text__text { align-items: center; }

/* horizontal alignment in the column ------------------------------------ */
/* left layout (row): the main axis is horizontal -> justify-content moves it */
.rcw-icon-text--align-center:not(.rcw-icon-text--top) { justify-content: center; }
.rcw-icon-text--align-right:not(.rcw-icon-text--top)  { justify-content: flex-end; }
.rcw-icon-text--align-center:not(.rcw-icon-text--top) .rcw-icon-text__text { text-align: center; }
.rcw-icon-text--align-right:not(.rcw-icon-text--top)  .rcw-icon-text__text { text-align: right; }
/* top layout (column): the cross axis is horizontal -> align-items moves it */
.rcw-icon-text--top.rcw-icon-text--align-left  { align-items: flex-start; text-align: left; }
.rcw-icon-text--top.rcw-icon-text--align-right { align-items: flex-end;   text-align: right; }
.rcw-icon-text--top.rcw-icon-text--align-left  .rcw-icon-text__text { align-items: flex-start; }
.rcw-icon-text--top.rcw-icon-text--align-right .rcw-icon-text__text { align-items: flex-end; }

/* Icon on the right: flip the row, keep the DOM order. */
.rcw-icon-text--icon-right { flex-direction: row-reverse; }
.rcw-icon-text--list.rcw-icon-text--icon-right .rcw-icon-text__item { flex-direction: row-reverse; }
/* justify-content follows the flipped axis, so the alignment options swap ends */
.rcw-icon-text--icon-right.rcw-icon-text--align-right:not(.rcw-icon-text--top) { justify-content: flex-start; }
.rcw-icon-text--icon-right.rcw-icon-text--align-left:not(.rcw-icon-text--top) { justify-content: flex-end; }
.rcw-icon-text--icon-right .rcw-icon-text__text { text-align: right; }
.rcw-icon-text--icon-right .rcw-icon-text__text { align-items: flex-end; }
.rcw-icon-text--icon-right.rcw-icon-text--text-align-left .rcw-icon-text__text { text-align: left; align-items: flex-start; }
.rcw-icon-text--icon-right.rcw-icon-text--text-align-center .rcw-icon-text__text { text-align: center; align-items: center; }

/* Linked: the whole element is the target. Salient paints links with
   `.row .col a` selectors that out-rank a single class, so the class is
   doubled to match them and the text keeps the colour it was given. */
a.rcw-icon-text.rcw-icon-text,
a.rcw-icon-text.rcw-icon-text:hover,
a.rcw-icon-text.rcw-icon-text:focus {
	color: inherit;
	text-decoration: none;
	background-image: none;
}

.rcw-icon-text__media { flex: 0 0 auto; }
.rcw-icon-text--list {
	flex-direction: column;
	align-items: stretch;
	gap: var(--list-gap, var(--gap, 18px));
}
.rcw-icon-text--list .rcw-icon-text__item {
	display: flex;
	align-items: center;
	gap: var(--gap, 18px);
}
.rcw-icon-text--list.rcw-icon-text--start .rcw-icon-text__item { align-items: flex-start; }
.rcw-icon-text--list.rcw-icon-text--top .rcw-icon-text__item {
	flex-direction: column;
	text-align: center;
}
.rcw-icon-text--list.rcw-icon-text--align-center .rcw-icon-text__item { justify-content: center; }
.rcw-icon-text--list.rcw-icon-text--align-right .rcw-icon-text__item { justify-content: flex-end; }

.rcw-icon-text__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: var(--text-max-width, none);
}
.rcw-icon-text.rcw-icon-text--text-align-left .rcw-icon-text__text {
	align-items: flex-start;
	text-align: left;
}
.rcw-icon-text.rcw-icon-text--text-align-center .rcw-icon-text__text {
	align-items: center;
	text-align: center;
}
.rcw-icon-text.rcw-icon-text--text-align-right .rcw-icon-text__text {
	align-items: flex-end;
	text-align: right;
}

.rcw-icon-text__title {
	font-family: var(--rcw-font-heading, 'Prompt', sans-serif);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

.rcw-icon-text__desc {
	font-size: 14px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--rcw-text, #8a9099);
	opacity: .85;
}
.rcw-icon-text__title > :first-child,
.rcw-icon-text__desc > :first-child,
.rcw-icon-text__content > :first-child { margin-top: 0; }
.rcw-icon-text__title > :last-child,
.rcw-icon-text__desc > :last-child,
.rcw-icon-text__content > :last-child { margin-bottom: 0; }
.rcw-icon-text__content {
	line-height: 1.35;
	color: inherit;
}

/* Space between the title and the description.
   A margin, not flex `gap`: each line already carries its own line-height
   padding, so `gap:0` still leaves ~5px and the control reads as broken. A
   margin takes a negative value, so the lines can be pulled together as tight
   as the design wants. Paragraphs typed inside one text block follow the same
   number, so the setting also governs the WYSIWYG content mode. */
.rcw-icon-text__title,
.rcw-icon-text__desc,
.rcw-icon-text__content { margin: 0; }
.rcw-icon-text__text > * + * { margin-top: var(--text-gap, 4px); }
/* Inside the text editor the title and the description are two lines of one
   block, so the same number spaces them. Salient sizes heading and paragraph
   margins with contextual selectors (`.row .col h4`) that out-rank a single
   widget class, hence !important — nothing here depends on a user value, so a
   setting left empty still lands on the 4px default. */
.rcw-icon-text__desc > *,
.rcw-icon-text__content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.rcw-icon-text__desc > * + *,
.rcw-icon-text__content > * + * { margin-top: var(--text-gap, 4px) !important; }

/* Text editor mode: the Style tab still applies. The description settings are
   inline on the block; the title settings land on any heading typed inside it,
   each switched on by its own class so an empty control changes nothing. */
.rcw-icon-text--ct-font .rcw-icon-text__content :is(h1, h2, h3, h4, h5, h6) { font-family: var(--title-font) !important; }
.rcw-icon-text--ct-weight .rcw-icon-text__content :is(h1, h2, h3, h4, h5, h6) { font-weight: var(--title-weight) !important; }
.rcw-icon-text--ct-color .rcw-icon-text__content :is(h1, h2, h3, h4, h5, h6) { color: var(--title-color) !important; }
.rcw-icon-text--ct-size .rcw-icon-text__content :is(h1, h2, h3, h4, h5, h6) { font-size: var(--title-size) !important; }

/* ---- the icon badge ---- */
.rcw-icon-text__icon {
	--sz: 56px;          /* box size (overridable per instance) */
	--gl: 24px;          /* glyph / image size */
	width: var(--sz);
	height: var(--sz);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--gl);
	line-height: 1;
	color: var(--rcw-accent, #2e7dff);
	overflow: hidden;
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rcw-icon-text__glyph { font-size: var(--gl); line-height: 1; margin: 0; }
/* Font Awesome 6 renders as inline SVG, so it sizes by box, not font-size. */
.rcw-icon-text__svg { width: var(--gl); height: var(--gl); display: block; fill: currentColor; }
/* An emoji carries its own colours — currentColor would flatten it. */
.rcw-icon-text__svg.rcw-emoji-svg { fill: initial; }
.rcw-icon-text__img { border-radius: var(--br, inherit); }
.rcw-icon-text__img {
	width: var(--gl);
	height: var(--gl);
	object-fit: contain;
	display: block;
	/* Salient's `.row .col img { margin-bottom:15px }` (specificity 0,2,1) outranks
	   our single class and, inside the align-items:center icon box, shoves the
	   glyph ~7.5px above the text's centre. Reset it so the icon stays centred. */
	margin: 0 !important;
}

/* shape */
.rcw-icon-text__icon--circle  { border-radius: var(--br, 50%); }
.rcw-icon-text__icon--rounded { border-radius: var(--br, 14px); }
.rcw-icon-text__icon--square  { border-radius: var(--br, 4px); }

/* 6 icon styles */
.rcw-icon-text__icon.is-plain  { background: none; }
.rcw-icon-text__icon.is-border { border: 2px solid var(--rcw-accent, #2e7dff); }
.rcw-icon-text__icon.is-border-anim { border: 2px solid var(--rcw-accent, #2e7dff); }
.rcw-icon-text:hover .rcw-icon-text__icon.is-border-anim {
	background: var(--rcw-accent, #2e7dff);
	color: #fff;
}
.rcw-icon-text__icon.is-soft   { background: rgba(var(--rcw-accent-rgb, 46,125,255), .12); }
.rcw-icon-text__icon.is-solid  { background: var(--rcw-accent, #2e7dff); color: #fff; }
.rcw-icon-text__icon.is-shadow {
	background: var(--rcw-accent, #2e7dff);
	color: #fff;
	box-shadow: 0 10px 22px -6px rgba(var(--rcw-accent-rgb, 46,125,255), .55);
}

/* ---- optional icon animation ----
   The root carries the chosen animation as --anim-name; the badge only gets an
   animation-name when it should actually run, so a hover animation resets to a
   neutral pose the moment the pointer leaves instead of freezing mid-keyframe.
   Loops run in the WPBakery editor too (no IntersectionObserver involved), and
   nothing here ever hides the icon. */
.rcw-icon-text--anim-pulse  { --anim-name: rcw-icon-text-pulse; }
.rcw-icon-text--anim-beat   { --anim-name: rcw-icon-text-beat; }
.rcw-icon-text--anim-bounce { --anim-name: rcw-icon-text-bounce; }
.rcw-icon-text--anim-float  { --anim-name: rcw-icon-text-float; }
.rcw-icon-text--anim-spin   { --anim-name: rcw-icon-text-spin; }
.rcw-icon-text--anim-wobble { --anim-name: rcw-icon-text-wobble; }
.rcw-icon-text--anim-swing  { --anim-name: rcw-icon-text-swing; }
.rcw-icon-text--anim-grow   { --anim-name: rcw-icon-text-grow; }
.rcw-icon-text--anim-flip   { --anim-name: rcw-icon-text-flip; }

.rcw-icon-text--anim .rcw-icon-text__icon {
	animation-duration: var(--anim-dur, 1s);
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}
.rcw-icon-text--anim-spin .rcw-icon-text__icon,
.rcw-icon-text--anim-flip .rcw-icon-text__icon { animation-timing-function: linear; }
.rcw-icon-text--anim-swing .rcw-icon-text__icon { transform-origin: top center; }

.rcw-icon-text--anim-on-loop .rcw-icon-text__icon {
	animation-name: var(--anim-name);
	animation-iteration-count: infinite;
}
/* Hover: the whole element in single mode, the hovered row only in list mode. */
.rcw-icon-text--anim-on-hover:not(.rcw-icon-text--list):hover .rcw-icon-text__icon,
.rcw-icon-text--anim-on-hover .rcw-icon-text__item:hover .rcw-icon-text__icon {
	animation-name: var(--anim-name);
	animation-iteration-count: 1;
}

@keyframes rcw-icon-text-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}
@keyframes rcw-icon-text-beat {
	0%, 30%, 60%, 100% { transform: scale(1); }
	15%                { transform: scale(1.18); }
	45%                { transform: scale(1.12); }
}
@keyframes rcw-icon-text-bounce {
	0%, 100% { transform: translateY(0); }
	40%      { transform: translateY(-8px); }
	70%      { transform: translateY(-4px); }
}
@keyframes rcw-icon-text-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}
@keyframes rcw-icon-text-spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes rcw-icon-text-wobble {
	0%, 100% { transform: rotate(0deg); }
	20%      { transform: rotate(-10deg); }
	40%      { transform: rotate(8deg); }
	60%      { transform: rotate(-6deg); }
	80%      { transform: rotate(4deg); }
}
@keyframes rcw-icon-text-swing {
	0%, 100% { transform: rotate(0deg); }
	25%      { transform: rotate(12deg); }
	75%      { transform: rotate(-12deg); }
}
@keyframes rcw-icon-text-grow {
	0%   { transform: scale(1); }
	100% { transform: scale(1.15); }
}
@keyframes rcw-icon-text-flip {
	0%   { transform: rotateY(0deg); }
	100% { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.rcw-icon-text__icon { transition: none; }
	.rcw-icon-text--anim .rcw-icon-text__icon,
	.rcw-icon-text--anim-on-loop .rcw-icon-text__icon,
	.rcw-icon-text--anim-on-hover:hover .rcw-icon-text__icon,
	.rcw-icon-text--anim-on-hover .rcw-icon-text__item:hover .rcw-icon-text__icon {
		animation: none !important;
		transform: none !important;
	}
}

/* ---- responsive: stack into a centered column on mobile ---- */
@media (max-width: 690px) {
	.rcw-icon-text[style*="--mobile-text-color"] .rcw-icon-text__title,
	.rcw-icon-text[style*="--mobile-text-color"] .rcw-icon-text__desc {
		color: var(--mobile-text-color) !important;
	}
	.rcw-icon-text--stack {
		flex-direction: column;
		text-align: left;
		align-items: flex-start;
	}
	.rcw-icon-text--list.rcw-icon-text--stack {
		align-items: stretch;
	}
	.rcw-icon-text--list.rcw-icon-text--stack .rcw-icon-text__item {
		flex-direction: column;
		text-align: left;
		align-items: flex-start;
	}
	.rcw-icon-text--stack .rcw-icon-text__text { align-items: flex-start; }
	.rcw-icon-text--stack.rcw-icon-text--align-center {
		text-align: center;
		align-items: center;
	}
	.rcw-icon-text--list.rcw-icon-text--stack.rcw-icon-text--align-center .rcw-icon-text__item {
		text-align: center;
		align-items: center;
	}
	.rcw-icon-text--stack.rcw-icon-text--align-center .rcw-icon-text__text { align-items: center; }
	.rcw-icon-text--stack.rcw-icon-text--align-right {
		text-align: right;
		align-items: flex-end;
	}
	.rcw-icon-text--list.rcw-icon-text--stack.rcw-icon-text--align-right .rcw-icon-text__item {
		text-align: right;
		align-items: flex-end;
	}
	.rcw-icon-text--stack.rcw-icon-text--align-right .rcw-icon-text__text { align-items: flex-end; }
	.rcw-icon-text--stack.rcw-icon-text--align-left {
		text-align: left;
		align-items: flex-start;
	}
	.rcw-icon-text--stack.rcw-icon-text--align-left .rcw-icon-text__text { align-items: flex-start; }
	.rcw-icon-text--stack.rcw-icon-text--mobile-align-left {
		text-align: left;
		align-items: flex-start;
	}
	.rcw-icon-text--list.rcw-icon-text--stack.rcw-icon-text--mobile-align-left .rcw-icon-text__item {
		text-align: left;
		align-items: flex-start;
	}
	.rcw-icon-text--stack.rcw-icon-text--mobile-align-left .rcw-icon-text__text { align-items: flex-start; }
	.rcw-icon-text--stack.rcw-icon-text--mobile-align-center {
		text-align: center;
		align-items: center;
	}
	.rcw-icon-text--list.rcw-icon-text--stack.rcw-icon-text--mobile-align-center .rcw-icon-text__item {
		text-align: center;
		align-items: center;
	}
	.rcw-icon-text--stack.rcw-icon-text--mobile-align-center .rcw-icon-text__text { align-items: center; }
	.rcw-icon-text--stack.rcw-icon-text--mobile-align-right {
		text-align: right;
		align-items: flex-end;
	}
	.rcw-icon-text--list.rcw-icon-text--stack.rcw-icon-text--mobile-align-right .rcw-icon-text__item {
		text-align: right;
		align-items: flex-end;
	}
	.rcw-icon-text--stack.rcw-icon-text--mobile-align-right .rcw-icon-text__text { align-items: flex-end; }
	.rcw-icon-text.rcw-icon-text--mobile-text-align-left .rcw-icon-text__text {
		align-items: flex-start;
		text-align: left;
	}
	.rcw-icon-text.rcw-icon-text--mobile-text-align-center .rcw-icon-text__text {
		align-items: center;
		text-align: center;
	}
	.rcw-icon-text.rcw-icon-text--mobile-text-align-right .rcw-icon-text__text {
		align-items: flex-end;
		text-align: right;
	}
}

/* Emoji drawn by the visitor's own device. The stack names each platform's
   colour emoji font so Windows and Android pick theirs instead of a flat glyph. */
.rcw-emoji-native {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", sans-serif;
	font-style: normal;
	line-height: 1;
}
.rcw-icon-text__emoji { font-size: var(--gl); }

/* Apple emoji artwork, served as an image.
   Salient's `.row .col img { width:auto; height:auto }` (specificity 0,2,1)
   outranks a single widget class, and an image that has not loaded yet then
   has no intrinsic size at all — the icon collapses to 0x0 while lazy loading.
   Same reason the img margin reset below needs !important. */
.rcw-icon-text img.rcw-icon-text__emoji-img{
	width:var(--gl)!important;
	height:var(--gl)!important;
	max-width:none!important;
	display:block;
	object-fit:contain;
	/* Salient's `.row .col img{margin-bottom:15px}` pushes the icon off centre. */
	margin:0!important;
}