/**
 * FAME Announcements - front-end banner styles.
 *
 * Everything is namespaced under .fame-ann so the theme cannot bleed in and
 * this cannot bleed out.
 */

.fame-ann-wrap,
.fame-ann-wrap * {
	box-sizing: border-box;
}

.fame-ann-wrap {
	margin: 0;
	padding: 0;
	font-family: inherit;
}

/* -------------------------------------------------------------------------
 * Palette per notice type
 * ---------------------------------------------------------------------- */

.fame-ann {
	--fame-bg-a: #16336f;
	--fame-bg-b: #1f4a9b;
	--fame-fg: #ffffff;
	--fame-accent: #0d2350;
	--fame-chip-bg: rgba(255, 255, 255, 0.18);
	--fame-chip-fg: #ffffff;
	--fame-cta-bg: #ffffff;
	--fame-cta-fg: #16336f;
	--fame-icon-bg: rgba(255, 255, 255, 0.16);
}

.fame-ann--maintenance {
	--fame-bg-a: #f78e1e;
	--fame-bg-b: #e2740a;
	--fame-fg: #ffffff;
	--fame-accent: #b45309;
	--fame-cta-fg: #b45309;
}

.fame-ann--alert {
	--fame-bg-a: #e53935;
	--fame-bg-b: #c62828;
	--fame-fg: #ffffff;
	--fame-accent: #8e1c1c;
	--fame-cta-fg: #c62828;
}

.fame-ann--warning {
	--fame-bg-a: #fff3d6;
	--fame-bg-b: #ffe9b8;
	--fame-fg: #6b4400;
	--fame-accent: #f0a500;
	--fame-chip-bg: rgba(107, 68, 0, 0.1);
	--fame-chip-fg: #6b4400;
	--fame-cta-bg: #6b4400;
	--fame-cta-fg: #ffffff;
	--fame-icon-bg: rgba(107, 68, 0, 0.1);
}

.fame-ann--info {
	--fame-bg-a: #16336f;
	--fame-bg-b: #1f4a9b;
}

.fame-ann--success {
	--fame-bg-a: #2e9e5b;
	--fame-bg-b: #1f7a44;
	--fame-accent: #14572f;
	--fame-cta-fg: #1f7a44;
}

/* -------------------------------------------------------------------------
 * The banner itself
 * ---------------------------------------------------------------------- */

.fame-ann {
	position: relative;
	margin: 0 0 2px 0;
	padding: 0;
	background: linear-gradient(135deg, var(--fame-bg-a) 0%, var(--fame-bg-b) 100%);
	color: var(--fame-fg);
	border-left: 6px solid var(--fame-accent);
	overflow: hidden;
	animation: fame-ann-in 0.45s ease-out both;
}

/* A soft sheen on the right so the bar does not read as a flat block. */
.fame-ann::after {
	content: "";
	position: absolute;
	top: -60%;
	right: -5%;
	width: 45%;
	height: 220%;
	background: rgba(255, 255, 255, 0.07);
	transform: rotate(18deg);
	pointer-events: none;
}

.fame-ann--warning::after {
	background: rgba(255, 255, 255, 0.45);
}

.fame-ann__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 1170px;
	margin: 0 auto;
	padding: 16px 20px;
	text-align: left;
}

/* Icon ------------------------------------------------------------------ */

.fame-ann__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--fame-icon-bg);
	color: var(--fame-fg);
}

.fame-ann__icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.fame-ann--alert .fame-ann__icon,
.fame-ann--maintenance .fame-ann__icon {
	animation: fame-ann-pulse 2.4s ease-in-out infinite;
}

/* Text ------------------------------------------------------------------ */

.fame-ann__body {
	flex: 1 1 auto;
	min-width: 0;
}

.fame-ann__title {
	margin: 0 0 2px 0;
	padding: 0;
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--fame-fg);
	text-transform: none;
}

.fame-ann__message {
	margin: 0;
	padding: 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--fame-fg);
	opacity: 0.97;
}

.fame-ann__message p {
	margin: 0 0 6px 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.fame-ann__message p:last-child {
	margin-bottom: 0;
}

.fame-ann__message a {
	color: var(--fame-fg);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fame-ann__message a:hover,
.fame-ann__message a:focus {
	color: var(--fame-fg);
	opacity: 0.85;
}

.fame-ann__message ul,
.fame-ann__message ol {
	margin: 6px 0 0 0;
	padding-left: 20px;
}

/* Schedule chip --------------------------------------------------------- */

.fame-ann__schedule {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0 0;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--fame-chip-bg);
	color: var(--fame-chip-fg);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	white-space: normal;
}

.fame-ann__schedule-icon svg {
	width: 15px;
	height: 15px;
	display: block;
}

/* Call to action -------------------------------------------------------- */

.fame-ann__action {
	flex: 0 0 auto;
}

.fame-ann__cta,
.fame-ann-wrap a.fame-ann__cta {
	display: inline-block;
	padding: 9px 20px;
	border-radius: 4px;
	background: var(--fame-cta-bg);
	color: var(--fame-cta-fg);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fame-ann-wrap a.fame-ann__cta:hover,
.fame-ann-wrap a.fame-ann__cta:focus {
	color: var(--fame-cta-fg);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

/* Dismiss --------------------------------------------------------------- */

.fame-ann__close {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--fame-fg);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.fame-ann__close:hover,
.fame-ann__close:focus {
	opacity: 1;
	background: var(--fame-icon-bg);
	color: var(--fame-fg);
}

.fame-ann[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Card layout - [fame_announcements layout="card"]
 * ---------------------------------------------------------------------- */

.fame-ann-wrap--card {
	max-width: 1170px;
	margin: 0 auto;
	padding: 14px 15px 0 15px;
}

.fame-ann-wrap--card .fame-ann {
	margin-bottom: 12px;
	border-radius: 8px;
	border-left-width: 6px;
	box-shadow: 0 6px 18px rgba(16, 32, 64, 0.14);
}

.fame-ann-wrap--card .fame-ann__inner {
	padding: 16px 18px;
}

/* -------------------------------------------------------------------------
 * Small screens
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
	.fame-ann {
		border-left-width: 5px;
	}

	.fame-ann__inner {
		flex-wrap: wrap;
		gap: 12px;
		padding: 14px 14px;
	}

	.fame-ann__icon {
		width: 36px;
		height: 36px;
	}

	.fame-ann__icon svg {
		width: 20px;
		height: 20px;
	}

	.fame-ann__body {
		flex: 1 1 calc(100% - 100px);
	}

	.fame-ann__title {
		font-size: 16px;
	}

	.fame-ann__message {
		font-size: 15px;
	}

	.fame-ann__action {
		flex: 1 1 100%;
	}

	.fame-ann__cta,
	.fame-ann-wrap a.fame-ann__cta {
		display: block;
		width: 100%;
		text-align: center;
		white-space: normal;
	}

	.fame-ann__close {
		position: absolute;
		top: 6px;
		right: 6px;
	}
}

/* -------------------------------------------------------------------------
 * Motion
 * ---------------------------------------------------------------------- */

@keyframes fame-ann-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fame-ann-pulse {
	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
	}

	50% {
		transform: scale(1.06);
		box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fame-ann,
	.fame-ann__icon,
	.fame-ann__cta {
		animation: none !important;
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Print
 * ---------------------------------------------------------------------- */

@media print {
	.fame-ann {
		border: 1px solid #999;
		background: none !important;
		color: #000 !important;
	}

	.fame-ann__close {
		display: none;
	}
}