/**
 * Notices widget.
 *
 * Every value an Elementor control touches is a custom property set on `.wcn`.
 * The defaults below are what the widget looks like with no styling controls
 * touched at all — the purple band from the reference site.
 *
 * The band is full-bleed only if the Elementor container it sits in is; the
 * widget's own job is to keep its *content* aligned with the rest of the page,
 * which `--wcn-inner-max` does.
 */

.wcn {
	--wcn-bg: #4b4b95;
	--wcn-radius: 0px;
	--wcn-inner-max: 1170px;

	/* These three move together, so the "Heading position" control sets all of
	   them at once — see the note on it in the widget. `--wcn-rule-w` is not
	   declared here on purpose: it comes from the "Divider width" control, and
	   the fallback below is what applies until an editor touches it. */
	--wcn-inner-display: flex;
	--wcn-heading-rule-width: var(--wcn-rule-w, 2px);
	--wcn-heading-mb: 0px;

	--wcn-heading-color: rgba(255, 255, 255, 0.4);
	--wcn-heading-gap: 20px;
	--wcn-rule-color: rgba(255, 255, 255, 0.4);

	--wcn-category-color: rgba(255, 255, 255, 0.75);
	--wcn-title-color: #fff;
	--wcn-title-color-hover: #fff;
	--wcn-date-color: rgba(255, 255, 255, 0.6);
	--wcn-meta-gap: 4px;
	--wcn-title-lines: 2;
	--wcn-item-gap: 18px;

	--wcn-more-color: #fff;
	--wcn-more-color-hover: #fff;
	--wcn-more-gap: 12px;

	--wcn-arrow-color: #fff;
	--wcn-arrow-bg: rgba(255, 255, 255, 0.15);
	--wcn-arrow-bg-hover: rgba(255, 255, 255, 0.35);
	--wcn-arrow-size: 26px;
	--wcn-arrow-gap: 6px;
	--wcn-arrow-offset: 16px;

	--wcn-speed: 400ms;

	background: var(--wcn-bg);
	border-radius: var(--wcn-radius);
	padding: 32px 20px 28px;
}

.wcn__inner {
	display: var(--wcn-inner-display);
	align-items: center;
	gap: var(--wcn-heading-gap);
	max-width: var(--wcn-inner-max);
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
 * Heading
 * ---------------------------------------------------------------------- */

.wcn__heading {
	flex: 0 0 auto;
	margin: 0 0 var(--wcn-heading-mb);
	padding-right: var(--wcn-heading-gap);
	border-right: var(--wcn-heading-rule-width) solid var(--wcn-rule-color);
	color: var(--wcn-heading-color);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: uppercase;
	/* Aligns the label against the notice's *first line*, not the block's
	   optical centre, so a two-line title does not push it out of step. */
	align-self: stretch;
	display: flex;
	align-items: center;
}

.wcn__body {
	/* `min-width: 0` or a long unbroken title stretches the flex item past the
	   band instead of wrapping. */
	flex: 1 1 auto;
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * One notice
 * ---------------------------------------------------------------------- */

.wcn-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-bottom: var(--wcn-meta-gap);
}

.wcn-item__category {
	color: var(--wcn-category-color);
	font-size: 13px;
	font-style: italic;
	letter-spacing: 0.1em;
	line-height: 1.4;
}

.wcn-item__date {
	color: var(--wcn-date-color);
	font-size: 13px;
	line-height: 1.4;
}

.wcn-item__title {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.wcn-item__title a {
	color: var(--wcn-title-color);
	text-decoration: none;
	/* Clamping keeps the band a predictable height whichever notice is showing;
	   `none` (the "Don't trim" option) switches it off. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--wcn-title-lines);
	line-clamp: var(--wcn-title-lines);
	overflow: hidden;
}

.wcn-item__title a:hover,
.wcn-item__title a:focus-visible {
	color: var(--wcn-title-color-hover);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Ticker
 * ---------------------------------------------------------------------- */

.wcn-ticker {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wcn-arrow-offset);
}

.wcn-ticker__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.wcn-ticker__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform var(--wcn-speed) ease;
}

/* Every slide keeps its layout box, so the track is as tall as the tallest
   notice and the band never jumps as it rotates. */
.wcn-ticker__slide {
	flex: 0 0 100%;
	max-width: 100%;
	min-width: 0;
}

.wcn-ticker__nav {
	flex: 0 0 auto;
	display: flex;
	gap: var(--wcn-arrow-gap);
}

.wcn-ticker__arrow {
	width: var(--wcn-arrow-size);
	height: var(--wcn-arrow-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--wcn-arrow-bg);
	color: var(--wcn-arrow-color);
	cursor: pointer;
	transition: background 0.3s ease;
}

.wcn-ticker__arrow:hover,
.wcn-ticker__arrow:focus-visible {
	background: var(--wcn-arrow-bg-hover);
}

.wcn-ticker__arrow svg {
	width: 55%;
	height: 55%;
	fill: currentColor;
}

/* Hidden rather than transparent: arrows that are invisible but still in the
   tab order are a trap for keyboard users. `:focus-within` on the whole widget
   is what brings them back — the nav cannot reveal itself once it is inert. */
.wcn--arrows-hover .wcn-ticker__nav {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.wcn--arrows-hover:hover .wcn-ticker__nav,
.wcn--arrows-hover:focus-within .wcn-ticker__nav {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* A touch screen has no hover state, so arrows set to "on hover" would never
   appear on a phone. */
@media (hover: none) {
	.wcn--arrows-hover .wcn-ticker__nav {
		opacity: 1;
		visibility: visible;
	}
}

/* -------------------------------------------------------------------------
 * Static list
 * ---------------------------------------------------------------------- */

.wcn-list {
	display: grid;
	gap: var(--wcn-item-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------------
 * "View all" link
 * ---------------------------------------------------------------------- */

.wcn__more {
	margin-top: var(--wcn-more-gap);
}

.wcn__more a {
	display: inline-flex;
	align-items: center;
	color: var(--wcn-more-color);
	font-size: 14px;
	line-height: 17px;
	text-decoration: none;
}

.wcn__more a:hover,
.wcn__more a:focus-visible {
	color: var(--wcn-more-color-hover);
	text-decoration: underline;
}

.wcn--more-arrow .wcn__more a::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 15px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: currentColor;
	transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
 * Empty state — editor only, see the widget's render()
 * ---------------------------------------------------------------------- */

.wcn-notice {
	padding: 24px;
	border: 1px dashed var(--wcn-rule-color);
	border-radius: 4px;
	color: var(--wcn-heading-color);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.wcn-ticker__track {
		transition: none;
	}
}