/**
 * Silvercode Announcement Bar
 * ---------------------------------------------------------------------------
 * Single rotating message bar with seven transitions, per-item color
 * overrides, Concept-style edge arrows, and a full set of themeable CSS
 * variables.
 */

/* The widget always spans the full width of its container. Overrides
   Elementor's default widget sizing inside flex containers; an explicit width
   set on the widget's own Layout controls still wins (higher specificity). */
.elementor-widget-silvercode-announcement-bar {
	width: 100%;
	max-width: 100%;
}

.scw-ab {
	--scw-ab-speed: 600ms;
	--scw-ab-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--scw-ab-shift: 1.35em;
	--scw-ab-justify: center;
	--scw-ab-text-align: center;
	--scw-ab-control: currentColor;

	/* Structure only — all cosmetics (background, color, height, spacing)
	   are driven by the widget's Style controls, with no imposed defaults. */
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	color: var(--scw-ab-fg, inherit);
	overflow: hidden;
	isolation: isolate;
}

/* Accent tint layer (sits above the base/group background, below content). */
.scw-ab__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--scw-ab-accent, transparent);
	opacity: var(--scw-ab-accent-on, 0);
	transition:
		opacity var(--scw-ab-speed) var(--scw-ab-ease),
		background-color var(--scw-ab-speed) var(--scw-ab-ease);
	pointer-events: none;
}

.scw-ab__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: var(--scw-ab-justify, center);
	gap: var(--scw-ab-arrow-gap, 24px);
	width: 100%;
	box-sizing: border-box;
	/* No default padding — set it via Style › Bar › Padding. */
}

/* The viewport hugs its content (the message) so the arrows sit beside the text,
   not at the bar's outer edges; it shrinks to let the message wrap on mobile. */
.scw-ab__viewport {
	position: relative;
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ------------------------------------------------------------------ Item */

.scw-ab__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	line-height: 1.35;
	color: var(--scw-ab-item-fg, inherit);
	text-align: var(--scw-ab-text-align);
}

.scw-ab__icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
}

.scw-ab__icon svg {
	width: 18px;
	height: 18px;
	display: block;
	stroke: currentColor;
}

.scw-ab__text {
	display: inline-block;
}

/* .scw-ab prefix bumps specificity past Elementor kit / theme link rules
   (.elementor-kit-x a and friends), which would otherwise recolor any linked
   content and ignore the widget's text colors. Same for the link rules below. */
.scw-ab .scw-ab__text a,
.scw-ab .scw-ab__text a:hover,
.scw-ab .scw-ab__text a:focus,
.scw-ab .scw-ab__text a:visited {
	color: inherit;
	text-underline-offset: 0.18em;
}

/* Icon-after toggle */
.scw-ab-icon-after .scw-ab__icon {
	order: 2;
}

/* Smart mobile icons: JS adds .scw-ab--no-icon to an item whose icon+text would
   wrap on a narrow viewport, reclaiming the icon's width. Desktop never gets it. */
.scw-ab__item.scw-ab--no-icon .scw-ab__icon {
	display: none;
}

/* ------------------------------------------------------- Whole bar link */

.scw-ab .scw-ab__fulllink {
	display: inline-flex;
	align-items: center;
	gap: inherit;
	color: inherit;
	text-decoration: none;
	transition: opacity var(--transitions) ease;
}

.scw-ab .scw-ab__fulllink:hover,
.scw-ab .scw-ab__fulllink:focus,
.scw-ab .scw-ab__fulllink:visited {
	color: inherit;
	text-decoration: none;
}

/* The entire bar surface is clickable when the active message uses a whole
   bar link — JS forwards clicks on the bar's dead space to the item's anchor
   (a stretched-link overlay can't work here: the carousel's perspective and
   will-change create containing blocks that would trap it). The cursor
   advertises the click, and hovering anywhere dims the message. */
.scw-ab:has(.scw-ab__item.is-active .scw-ab__fulllink) {
	cursor: pointer;
}

.scw-ab__fulllink:hover,
.scw-ab:has(.scw-ab__item.is-active .scw-ab__fulllink):hover:not(
		:has(.scw-ab__arrow:hover)
	)
	.scw-ab__item.is-active
	.scw-ab__fulllink {
	opacity: 0.82;
}

/* ------------------------------------------------------ Standalone link */

.scw-ab .scw-ab__link {
	--scw-ab-link-fg: currentColor;
	color: var(--scw-ab-link-fg);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--transitions) ease,
		background-color var(--transitions) ease,
		opacity var(--transitions) ease;
}

/* The widget's own Normal/Hover color controls target these with Elementor's
   generated (higher-specificity) selectors, so they still win when set. */
.scw-ab .scw-ab__link:hover,
.scw-ab .scw-ab__link:focus-visible,
.scw-ab .scw-ab__link:visited {
	color: var(--scw-ab-link-fg);
}

.scw-ab-cta-underline .scw-ab__link {
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}

.scw-ab-cta-button .scw-ab__link {
	padding: 0.32em 0.85em;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.16);
}

.scw-ab-cta-button .scw-ab__link:hover {
	background-color: rgba(255, 255, 255, 0.26);
}

/* ==================================================================
 * CAROUSEL
 * ================================================================== */

.scw-ab--mode-carousel .scw-ab__track {
	width: 100%;
}

.scw-ab--mode-carousel .scw-ab__group {
	display: grid;
	width: max-content;
	max-width: 100%;
	justify-items: var(--scw-ab-justify, center);
	perspective: 800px;
}

.scw-ab--mode-carousel .scw-ab__item {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform-origin: center;
	backface-visibility: hidden;
	transition:
		opacity var(--scw-ab-speed) var(--scw-ab-ease),
		transform var(--scw-ab-speed) var(--scw-ab-ease),
		filter var(--scw-ab-speed) var(--scw-ab-ease),
		visibility 0s linear var(--scw-ab-speed);
}

/* [data-animation] raises specificity above the per-animation enter-from
   rules below, so the active item always rests at transform:none. */
.scw-ab--mode-carousel[data-animation] .scw-ab__item.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	filter: none;
	transition-delay: 0s;
}

/* --- transitions: enter-from (inactive) and exit-to (.is-leaving). --- */

/* Fade — opacity only (handled by base). */

/* Slide up */
.scw-ab--mode-carousel[data-animation="slide-up"] .scw-ab__item {
	transform: translateY(var(--scw-ab-shift));
}
.scw-ab--mode-carousel[data-animation="slide-up"] .scw-ab__item.is-leaving {
	transform: translateY(calc(-1 * var(--scw-ab-shift)));
}

/* Slide down */
.scw-ab--mode-carousel[data-animation="slide-down"] .scw-ab__item {
	transform: translateY(calc(-1 * var(--scw-ab-shift)));
}
.scw-ab--mode-carousel[data-animation="slide-down"] .scw-ab__item.is-leaving {
	transform: translateY(var(--scw-ab-shift));
}

/* Slide left */
.scw-ab--mode-carousel[data-animation="slide-left"] .scw-ab__item {
	transform: translateX(2.2em);
}
.scw-ab--mode-carousel[data-animation="slide-left"] .scw-ab__item.is-leaving {
	transform: translateX(-2.2em);
}

/* Slide right */
.scw-ab--mode-carousel[data-animation="slide-right"] .scw-ab__item {
	transform: translateX(-2.2em);
}
.scw-ab--mode-carousel[data-animation="slide-right"] .scw-ab__item.is-leaving {
	transform: translateX(2.2em);
}

/* Flip — the only 3D transition (rotateX under the group's perspective). Keep
   the items permanently on their own compositing layer via will-change so the
   layer isn't promoted for the animation then torn down when the transform
   settles to none. That teardown re-rasterised the leading icon ~1px off — a
   one-time visual "snap" seen only on Flip. Always-composited = stable raster. */
.scw-ab--mode-carousel[data-animation="flip"] .scw-ab__item {
	transform: rotateX(-92deg);
	will-change: transform;
}
.scw-ab--mode-carousel[data-animation="flip"] .scw-ab__item.is-leaving {
	transform: rotateX(92deg);
}

/* Zoom */
.scw-ab--mode-carousel[data-animation="zoom"] .scw-ab__item {
	transform: scale(0.82);
	filter: blur(2px);
}
.scw-ab--mode-carousel[data-animation="zoom"] .scw-ab__item.is-leaving {
	transform: scale(1.12);
	filter: blur(2px);
}

/* ==================================================================
 * ARROWS (Concept-style — inline, flanking the message)
 * ================================================================== */

/* A hard reset so the chevron buttons never inherit the active theme's button
   styling (background, border, padding, shadow, font, radius, sizing). The
   distance from the message is the inner's --scw-ab-arrow-gap (Style › Arrows). */
.scw-ab__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0 !important;
	height: auto;
	min-height: 0 !important;
	margin: 0;
	/* !important on the visual resets so a theme's `button { … !important }`
	   rules can't bleed a background, border, shadow or padding onto the
	   chevrons. No arrow control sets these, so nothing legitimate is overridden. */
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	color: var(--scw-ab-control, currentColor);
	cursor: pointer;
	line-height: 0;
	opacity: 0.7;
	transition:
		opacity var(--transitions) ease,
		transform var(--transitions) ease;
	-webkit-appearance: none;
	appearance: none;
}

.scw-ab__arrow:hover,
.scw-ab__arrow:focus {
	background: none !important;
	box-shadow: none !important;
	opacity: 1;
}

.scw-ab__arrow:active {
	transform: scale(0.9);
}

.scw-ab__arrow svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Font-icon arrow picks (e.g. Font Awesome). SVG picks size via the rule above;
   both track Style › Arrows → Arrow size when set. */
.scw-ab__arrow i {
	font-size: 18px;
	line-height: 1;
	display: block;
}

/* Keyboard focus — visible and on-brand. */
.scw-ab a:focus-visible,
.scw-ab button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 3px;
}

/* ==================================================================
 * STATE: empty
 * ================================================================== */

.scw-ab--empty {
	align-items: center;
	justify-content: center;
	min-height: 44px;
	background-color: rgba(120, 120, 128, 0.12);
	color: inherit;
	font-size: 13px;
	opacity: 0.8;
}

.scw-ab--empty .scw-ab__inner {
	justify-content: center;
}

/* ==================================================================
 * RESPONSIVE
 * ==================================================================
 * No hardcoded breakpoints here. Mobile behaviour tracks the site's real
 * Elementor mobile breakpoint: the Arrow gap control ships a mobile default,
 * and the widget prints a small render-time media query (font-size tweak)
 * built from the same breakpoint the smart-icon JS uses (data-mobile-bp).
 */

/* ==================================================================
 * ACCESSIBILITY
 * ================================================================== */

/* Screen-reader-only live region; announces the new message after a manual
   prev/next navigation (autoplay stays silent to avoid chatter). */
.scw-ab__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* ==================================================================
 * REDUCED MOTION — kill all movement, keep everything legible.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.scw-ab__bg,
	.scw-ab--mode-carousel .scw-ab__item,
	.scw-ab__arrow {
		transition: none !important;
	}

	.scw-ab--mode-carousel .scw-ab__item {
		transform: none !important;
		filter: none !important;
	}
}