/*
 * Emergency notification banner — the one shared look for every theme.
 *
 * The plugin's JS injects the feed's own markup into the theme's
 * #emergency_notification placeholder:
 *   .emergency-notification > .emergency-inner > .emergency-msg
 *     > h1 (title), then h2 (board feed) or p (school feed) for the message,
 *     then a div of links (Bootstrap .btn classes in the board feed, plain
 *     links in the school feed).
 *
 * Themes don't restyle the banner; they only line it up with their own
 * header by setting these on :root (defaults shown):
 *   --dsbn-emergency-width        1200px   text column's max width
 *   --dsbn-emergency-gutter       1rem     minimum space either side
 *   --dsbn-emergency-font         Arial, Helvetica, sans-serif
 *   --dsbn-emergency-font-size    1rem
 *   --dsbn-emergency-line-height  1.6
 *   --dsbn-emergency-title-size   1.5rem
 *   --dsbn-emergency-divider      0        border-bottom, e.g. to separate
 *                                          the bar from a red header
 * The column is min(100% - 2 × gutter, width), centred — the same box a
 * max-width + side-padding container produces, so the text edges match the
 * header's at every width.
 *
 * Every rule is scoped under #emergency_notification so it beats the legacy
 * cdn.dsbn.org elementary stylesheet, which the dsbn-elementary theme still
 * loads and which styles the same classes as a floating card. Link colours
 * are !important for the same reason (that sheet's are). A theme mode that
 * must override the banner (dsbn's high contrast) needs !important and a
 * selector at least this specific.
 */

#emergency_notification .emergency-notification {
	box-sizing: border-box;
	position: static;
	z-index: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 2.25rem 0;
	border: 0;
	border-bottom: var(--dsbn-emergency-divider, 0);
	border-radius: 0;
	box-shadow: none;
	background: #bc2e2d none;
	color: #ffffff;
	font-family: var(--dsbn-emergency-font, Arial, Helvetica, sans-serif);
	font-size: var(--dsbn-emergency-font-size, 1rem);
	line-height: var(--dsbn-emergency-line-height, 1.6);
}

#emergency_notification .emergency-inner {
	box-sizing: border-box;
	width: min(100% - 2 * var(--dsbn-emergency-gutter, 1rem), var(--dsbn-emergency-width, 1200px));
	margin: 0 auto;
	padding: 0;
	color: #ffffff;
}

#emergency_notification .emergency-msg {
	position: static;
	padding: 0 0 0 6.25rem;
	background: url("notification-icon.png") no-repeat 0 0;
	background-size: auto;
}

/* font-family: inherit is spelled out on each text element: themes' own
   h1–h6 base rules target these elements directly, and a direct rule beats
   plain inheritance no matter the specificity. */
#emergency_notification .emergency-msg h1 {
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-family: inherit;
	font-size: var(--dsbn-emergency-title-size, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
}

/* The board feed marks the message up as <h2>; it reads as body copy.
   (Screen readers still announce it as a heading — fixing that needs the
   feed's markup to change.) */
#emergency_notification .emergency-msg h2,
#emergency_notification .emergency-msg h3,
#emergency_notification .emergency-msg p {
	margin: 0.5rem 0 0;
	padding: 0;
	color: #ffffff;
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
}

#emergency_notification .emergency-msg a {
	color: #ffffff !important;
	font-size: inherit;
	text-decoration: underline;
}

#emergency_notification .emergency-msg a:hover,
#emergency_notification .emergency-msg a:focus {
	color: #ffb3b3 !important;
}

/* The board feed's links carry Bootstrap's btn/btn-outline-primary classes.
   Drawn as white outline buttons here so they look the same whether or not
   the theme loads Bootstrap (NSTS does, and its blue outline was unreadable
   on the red bar). */
#emergency_notification .emergency-msg .btn {
	display: inline-block;
	margin: 0.75rem 0.25rem 0 0;
	padding: 0.25rem 0.75rem;
	border: 1px solid #ffffff;
	border-radius: 0.25rem;
	background: transparent;
	box-shadow: none;
	color: #ffffff !important;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
}

#emergency_notification .emergency-msg .btn:hover,
#emergency_notification .emergency-msg .btn:focus {
	background: #ffffff;
	color: #bc2e2d !important;
}

#emergency_notification .emergency-msg p.emergency-date-posted {
	margin-bottom: 0;
	color: #ff7371 !important;
}

@media (max-width: 768px) {
	#emergency_notification .emergency-msg {
		padding: 3.75rem 0 0;
		background-position: center top;
		background-size: 3.125rem;
	}
}