:root {
	--tbf-blue: #2F499B; /* Barnes Blue — headers, buttons, links */
	--tbf-gold: #FEDF00; /* TBF Gold — accent only */
	--tbf-red: #E81E25;  /* Response Red — reserved for the single highest-priority CTA */
	--tbf-red-dark: #B8151B; /* hover / pressed */
}

/* Brand colours are the defaults. A theme can restyle the feed without editing this file,
   e.g. .tbf-ra-feed { --tbf-ra-accent: #123; --tbf-ra-cta-bg: #345; }  */

/* Recent Accidents feed */

.tbf-ra-feed {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 100%;
}

.tbf-ra-entry {
	border: 1px solid #e0e0e0;
	border-left: 4px solid var(--tbf-ra-accent, var(--tbf-blue));
	border-radius: 4px;
	padding: 1rem 1.25rem;
	background: var(--tbf-ra-card-bg, #fff);
	color: var(--tbf-ra-card-text, #1d1d1f); /* explicit, so a dark theme cannot make text unreadable on the white card */
	overflow-wrap: anywhere;
	/* Very soft lift; the visible edge stays because a shadow alone is a weak cue. The card is not
	   clickable (only the button is), so there is deliberately no hover effect on it. */
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* Headline: size and font come from the theme's heading styles; weight, line height and
   colour are set here so the title stands out from the body text on any theme. */
.tbf-ra-headline {
	margin: 0 0 0.4rem;
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
}

.tbf-ra-entry-meta {
	font-size: 0.875rem;
	color: #555;
	margin-bottom: 0.75rem;
}

.tbf-ra-date {
	font-weight: bold;
	color: var(--tbf-ra-accent, var(--tbf-blue));
}

/* Intentional deviation from the style sheet's all-caps body copy —
   flagged in the project handoff as a readability concern for content
   read by someone in acute distress. Confirm with the style guide
   owner before treating as final. */
.tbf-ra-summary {
	margin: 0.5rem 0 1rem;
	line-height: 1.5;
	text-transform: none;
}

.tbf-ra-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* touch target (WCAG 2.5.5) */
	box-sizing: border-box;
	background: var(--tbf-ra-cta-bg, var(--tbf-red));
	color: var(--tbf-ra-cta-text, #fff);
	padding: 0.5rem 1.25rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: bold;
}

/* Decorative arrow: CSS only, empty alt so screen readers skip it (the link's name is its label). */
.tbf-ra-cta::after {
	content: "\2192";
	content: "\2192" / "";
	margin-left: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	.tbf-ra-cta::after {
		transition: transform 0.15s;
	}

	.tbf-ra-cta:hover::after,
	.tbf-ra-cta:focus-visible::after {
		transform: translateX(3px);
	}
}

.tbf-ra-cta:hover {
	background: var(--tbf-ra-cta-bg-hover, var(--tbf-red-dark));
	color: var(--tbf-ra-cta-text, #fff);
}

/* Keyboard focus must be clearly visible (WCAG 2.4.7). */
.tbf-ra-cta:focus-visible {
	outline: 3px solid var(--tbf-ra-accent, var(--tbf-blue));
	outline-offset: 2px;
	background: var(--tbf-ra-cta-bg-hover, var(--tbf-red-dark));
	color: var(--tbf-ra-cta-text, #fff);
}

@media (max-width: 600px) {
	.tbf-ra-entry {
		padding: 0.875rem 1rem;
	}

	/* Full-width button: easy to tap with a thumb. */
	.tbf-ra-cta {
		display: flex;
		width: 100%;
	}
}

.tbf-ra-empty {
	color: #777;
	font-style: italic;
}

/* Lead capture form */

.tbf-ra-lead-form p {
	margin-bottom: 1rem;
}

.tbf-ra-lead-form label {
	display: block;
	font-weight: bold;
	margin-bottom: 0.25rem;
}

.tbf-ra-lead-form input,
.tbf-ra-lead-form textarea {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.tbf-ra-submit {
	background: var(--tbf-red);
	color: #fff;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 4px;
	font-weight: bold;
	cursor: pointer;
}

.tbf-ra-submit:hover,
.tbf-ra-submit:focus {
	opacity: 0.9;
}

/* Honeypot field — visually hidden, not display:none, so more bots still fill it */
.tbf-ra-hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
}