/*
 * Incident Newsroom — front-end styles.
 *
 * Badge colours are NOT set here. The background and text colour for every
 * type / severity / status come from Incidents -> Settings and are printed
 * after this file as CSS variables, e.g.
 *     .incident-status--reported { --bwmin-bg:#d93025; --bwmin-fg:#ffffff; }
 * so to change one from your own CSS, set the variables (or background-color
 * and color) on the same class with enough specificity.
 */

/* Visually hidden, still read by screen readers (used for badge context and live announcements). */
.incident-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Badges: type, severity and status all share this shape. */
.incident-badge {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid transparent; /* becomes visible in Windows High Contrast / forced-colours mode */
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	background-color: var(--bwmin-bg, #646970); /* neutral grey (5.5:1 with white) for a removed option */
	color: var(--bwmin-fg, #ffffff);
}

/* Optional "Label:" printed by the elements' label setting. */
.incident-field__label {
	font-weight: 600;
}

/* Archive card grid (a list of articles) */
.incident-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.incident-card-grid__item {
	margin: 0;
	padding: 0;
}
.incident-card {
	position: relative; /* anchors the whole-card click area below */
	box-sizing: border-box;
	height: 100%;
	border: 1px solid #8c8f94; /* 3.2:1 — the card edge is visible to low-vision users */
	border-radius: 8px;
	padding: 16px;
	color: inherit;
}
.incident-card img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 12px;
}

/*
 * The title is the one link in the card (so its accessible name is just the
 * title); this stretches its click area over the whole card.
 */
.incident-card__title {
	margin: 8px 0;
}
.incident-card__link {
	color: inherit;
	text-decoration: none;
}
.incident-card__link:hover,
.incident-card__link:focus {
	text-decoration: underline;
}
.incident-card__link::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
/* One clear focus ring around the whole card when its link has focus. */
.incident-card:focus-within {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}
.incident-card__link:focus {
	outline: none;
}
.incident-dates__item {
	display: block;
}

.incident-empty-state {
	margin-top: 24px;
	color: #50575e; /* 7.3:1 on white */
	font-style: italic;
}

/* Update log */
.incident-update-log {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}
.incident-update {
	border-left: 3px solid #8c8f94;
	padding: 8px 0 16px 16px;
	margin-bottom: 16px;
}
.incident-update[hidden] {
	display: none !important;
}
.incident-update:focus {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}
.incident-update time {
	display: block;
	font-weight: 600;
	color: #3c434a; /* 10.0:1 on white */
}
.incident-spokesperson {
	display: block;
	font-size: 0.85rem;
	color: #50575e; /* 7.3:1 on white (the previous #888 was only 3.5:1) */
	margin-bottom: 4px;
}
.incident-updates__more {
	cursor: pointer;
	padding: 8px 18px;
	border: 2px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
}
.incident-updates__more:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* Basic built-in layout (used only when no Dynamic Template is assigned) */
.incident-fallback-badges .incident-badge + .incident-badge {
	margin-left: 6px;
}
.incident-fallback-meta {
	color: #50575e;
}