/**
 * MRW Rave Alerts
 *
 * The banner reuses the theme's .notif-bar styles so it matches the existing
 * notification bar. Everything here is either a fallback for when those styles
 * are missing, or a severity variation.
 *
 * Contrast: every combination below is white text on a background at or above
 * 4.5:1, which meets WCAG 2.1 AA for normal text.
 */

/**
 * The theme sets .notif-bar { display: flex }, which beats the browser's default
 * [hidden] { display: none }. Without this rule, hiding the editor-managed bar
 * during an emergency alert silently does nothing.
 */
.notif-bar[hidden] {
	display: none !important;
}

/* Fallback, in case the theme's .notif-bar rules are not present. */
#mrw-rave-alert-mount .notif-bar {
	width: 100%;
	padding: 20px;
	text-align: center;
	background: #bc303e; /* Theme default. 5.9:1 against white. */
}

#mrw-rave-alert-mount .notif-text {
	width: 80%;
	margin: 0 auto;
	font-weight: bold;
	color: #fff;
}

#mrw-rave-alert-mount .notif-heading {
	color: inherit;
}

#mrw-rave-alert-mount a.notif-button {
	display: inline-block;
	margin-left: 30px;
	padding: 10px;
	border: 2px solid #fff;
	color: #fff;
	font-weight: bold;
	text-decoration: underline;
}

#mrw-rave-alert-mount a.notif-button:hover,
#mrw-rave-alert-mount a.notif-button:focus {
	background: #fff;
	color: #bc303e;
}

/* Severity variations. Extreme and Severe keep the theme's red. */
#mrw-rave-alert-mount .notif-bar--rave--extreme,
#mrw-rave-alert-mount .notif-bar--rave--severe {
	background: #a3121f; /* 7.6:1 against white. */
}

#mrw-rave-alert-mount .notif-bar--rave--moderate {
	background: #8a4b00; /* 6.4:1 against white. */
}

#mrw-rave-alert-mount .notif-bar--rave--minor {
	background: #3d5a80; /* 6.3:1 against white. */
}

#mrw-rave-alert-mount .notif-bar--rave--extreme a.notif-button:hover,
#mrw-rave-alert-mount .notif-bar--rave--extreme a.notif-button:focus,
#mrw-rave-alert-mount .notif-bar--rave--severe a.notif-button:hover,
#mrw-rave-alert-mount .notif-bar--rave--severe a.notif-button:focus {
	color: #a3121f;
}

#mrw-rave-alert-mount .notif-bar--rave--moderate a.notif-button:hover,
#mrw-rave-alert-mount .notif-bar--rave--moderate a.notif-button:focus {
	color: #8a4b00;
}

#mrw-rave-alert-mount .notif-bar--rave--minor a.notif-button:hover,
#mrw-rave-alert-mount .notif-bar--rave--minor a.notif-button:focus {
	color: #3d5a80;
}

/* Visible keyboard focus, since the theme does not define one for this button. */
#mrw-rave-alert-mount a.notif-button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 480px) {
	#mrw-rave-alert-mount .notif-text {
		width: 100%;
	}

	#mrw-rave-alert-mount a.notif-button {
		display: block;
		margin: 15px auto 0;
		max-width: 260px;
	}
}