/* School Announcements – inherits fonts and colours from the active theme. */
.sa-announcements {
	margin: 0 0 2em;
}

.sa-announcement {
	padding: 0 0 2em;
	margin: 0 0 2em !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.sa-announcement:last-of-type {
	border-bottom: 0;
}

body .sa-announcements .sa-announcement__header .sa-announcement__date {
	display: flex;
	align-items: center;
	gap: 0.55em;
	margin: 0 0 var(--sa-date-gap, 0.4em) !important;
	font-size: 0.85em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
}

.sa-announcements .sa-announcement__icon {
	display: inline-flex;
	flex: none;
	/* !important: Salient's "Nectar Responsive Text" block forces `color: inherit` with an ID selector. */
	color: var(--sa-icon-colour, #1d2327) !important;
}

/* Longer selector so it beats the theme's `.wpb_text_column h2:last-child` margin. */
body .sa-announcements .sa-announcement__header .sa-announcement__title {
	margin: 0 0 var(--sa-title-gap, 0.7em) !important;
	padding: 0;
}

.sa-announcement__image {
	margin: 0 0 1.2em !important;
}

.sa-announcement__image img,
.sa-announcement__content img {
	max-width: 100%;
	height: auto;
}

.sa-announcement__content > *:last-child {
	margin-bottom: 0;
}

/*
 * Lists take the size of the paragraphs (set by the script as --sa-p-size) when no text size
 * is chosen in Settings. Without the script, or with a size chosen, this rule does not apply.
 */
body .sa-announcements .sa-announcement__content[style*="--sa-p-size"] li {
	font-size: var(--sa-p-size) !important;
}

/*
 * Pagination. Colours come from Settings > Announcements (--sa-accent), so each
 * school can match its own brand. Fallbacks are used if the setting is missing.
 */
.sa-announcements .sa-announcements__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
	margin-top: 2em;
	font-size: 0.9rem;
	line-height: 1;
}

.sa-announcements .sa-announcements__pagination a,
.sa-announcements .sa-announcements__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.6em;
	min-height: 2.6em;
	padding: 0 1em;
	border: 2px solid var(--sa-accent, #1d2327);
	border-radius: 999px;
	background: transparent;
	color: var(--sa-accent, #1d2327) !important;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sa-announcements .sa-announcements__pagination a:hover,
.sa-announcements .sa-announcements__pagination a:focus-visible,
.sa-announcements .sa-announcements__pagination .page-numbers.current {
	background: var(--sa-accent, #1d2327);
	color: var(--sa-accent-text, #fff) !important;
}

.sa-announcements .sa-announcements__pagination a:focus-visible {
	outline: 3px solid var(--sa-accent, #1d2327);
	outline-offset: 3px;
}

.sa-announcements .sa-announcements__pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 0.3em;
	border-color: transparent;
}

/*
 * Announcement box. Colours, border width and corner radius come from
 * Settings > Announcements (CSS variables), with the fallbacks used below.
 */
/*
 * Spacing between announcements is !important because page-builder blocks such as
 * Salient's "Nectar Responsive Text" reset margins with an ID selector
 * (#ajax-content-wrap .nectar-responsive-text * { margin-bottom: 0 }), which would
 * otherwise make neighbouring boxes touch.
 */
.sa-announcements .sa-announcement {
	position: relative;
}

.sa-announcements.sa-boxed .sa-announcement {
	background: var(--sa-box-bg, #f7f7f9);
	/*
	 * The box sets its own background, so it also sets a readable text colour.
	 * Without this, a page builder element with white text (for example a Salient
	 * "Nectar Responsive Text" block) would make the text white on the light box.
	 * It is !important because that block uses an ID selector
	 * (#ajax-content-wrap .nectar-responsive-text *), which beats any class selector.
	 */
	color: var(--sa-box-text, #1d2327) !important;
	border: var(--sa-box-border-width, 2px) solid var(--sa-box-border, #dcdce4);
	border-radius: var(--sa-box-radius, 16px);
	padding: 1.6em 1.8em;
	margin: 0 0 1.6em !important;
}

@media (max-width: 600px) {
	.sa-announcements.sa-boxed .sa-announcement {
		padding: 1.2em 1.1em;
	}
}

/* Latest announcement: a little more highlighted, with a label. */
.sa-announcements .sa-announcement.is-latest {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.sa-announcements.sa-boxed .sa-announcement.is-latest {
	border-style: solid;
	border-width: max(var(--sa-box-border-width, 2px), 2px);
	border-color: var(--sa-latest-colour, #f5b301);
	margin-top: 1.1em !important;
}

.sa-announcements:not(.sa-boxed) .sa-announcement.is-latest {
	border-left: 4px solid var(--sa-latest-colour, #f5b301);
	padding-left: 1em;
}

.sa-announcements .sa-announcement__badge {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-block;
	padding: 0.4em 0.95em;
	border-radius: 999px;
	background: var(--sa-latest-colour, #f5b301);
	color: var(--sa-latest-text, #1d2327);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

/* In a box, the label sits on the top edge like a tab. */
.sa-announcements.sa-boxed .sa-announcement__badge {
	right: 1.6em;
	transform: translateY(-50%);
}

/* Bell animation: a gentle swing from the top of the icon. */
.sa-announcements .sa-announcement__icon svg {
	transform-origin: 50% 10%;
}

@keyframes sa-ring {
	0%   { transform: rotate(0); }
	10%  { transform: rotate(14deg); }
	20%  { transform: rotate(-12deg); }
	30%  { transform: rotate(10deg); }
	40%  { transform: rotate(-8deg); }
	50%  { transform: rotate(5deg); }
	60%  { transform: rotate(-3deg); }
	70%, 100% { transform: rotate(0); }
}

@keyframes sa-ring-loop {
	0%   { transform: rotate(0); }
	3%   { transform: rotate(14deg); }
	6%   { transform: rotate(-12deg); }
	9%   { transform: rotate(10deg); }
	12%  { transform: rotate(-8deg); }
	15%  { transform: rotate(5deg); }
	18%  { transform: rotate(-3deg); }
	21%, 100% { transform: rotate(0); }
}

.sa-announcements .sa-announcement__icon.sa-ring svg {
	animation: sa-ring 1.2s ease-in-out 1;
}

.sa-announcements[data-sa-anim="repeat"] .sa-announcement__icon svg {
	animation: sa-ring-loop 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.sa-announcements .sa-announcement__icon svg,
	.sa-announcements .sa-announcement__icon.sa-ring svg,
	.sa-announcements[data-sa-anim="repeat"] .sa-announcement__icon svg {
		animation: none;
	}
}