/**
 * CA RSS Feeds — news card styles.
 *
 * UK motorway-sign theme. The card is a flex row: a solid blue LEFT RAIL
 * (a real column, not a CSS border — far more robust against theme clipping)
 * holding a small white road sign + vertical road name, then the content with
 * a blue title band (white capitals) and the labelled detail lines.
 *
 * Scoped under .tf-feed so it won't bleed into the rest of the Divi page.
 */

.tf-feed {
	--tf-gap: 16px;
	--tf-radius: 10px;
	--tf-blue: #0b4ea2;          /* UK motorway sign blue (border + rail) */
	--tf-blue-title: #1565c0;    /* slightly different blue for the title band */
	--tf-rail-width: 58px;
	--tf-bg: #ffffff;
	--tf-text: #1d2327;
	--tf-muted: #5b6b7b;

	--tf-badge-text: #e2670c;    /* planned: orange text */
	--tf-badge-bg: #dbe9fb;      /* planned: light motorway blue */
	--tf-badge-active-text: #ffffff;  /* active: white text */
	--tf-badge-active-bg: #c62828;    /* active: urgent red */

	display: flex;
	flex-direction: column;
	gap: var(--tf-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card is a flex ROW: [ blue rail ][ content ] */
.tf-card {
	display: flex;
	align-items: stretch;
	border: 2px solid var(--tf-blue);
	border-radius: var(--tf-radius);
	background: var(--tf-bg);
	color: var(--tf-text);
	overflow: hidden;
}

/* Solid blue left rail — a real column, holds the sign + vertical name */
.tf-card__rail {
	flex: 0 0 var(--tf-rail-width);
	width: var(--tf-rail-width);
	background: var(--tf-blue);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0 0 12px;        /* no top padding — the sign fills the corner */
}
.tf-card__sign {
	width: 100%;              /* fill the rail width */
	height: 38px;
	border-radius: 0;         /* flush into the corner, no rounded float */
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tf-blue);
	font-weight: 800;
	font-size: 0.92rem;
	line-height: 1;
}
.tf-card__rail-text {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tf-card__rail-text span {
	writing-mode: vertical-rl;
	color: #ffffff;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	/* keep rotated text crisp */
	transform: translateZ(0);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Content column */
.tf-card__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Title band: its own blue bar, white capitals */
.tf-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	background: var(--tf-blue-title);
	padding: 10px 16px;
}
.tf-card__title {
	font-weight: 700;
	font-size: 1.0rem;
	line-height: 1.3;
	margin: 0;
	text-transform: uppercase;
}
/* White on the blue title band even when the theme (Divi) sets a dark heading
   colour, AND whether or not the title is a link (DATEX items have no link). */
.tf-card__title,
.tf-card__title a {
	color: #ffffff !important;
	text-decoration: none;
}
/* Defensive: keep text on the plugin's other coloured bands readable regardless of theme. */
.tf-card__rail-text span,
.tf-search__count,
.tf-count-num { color: #ffffff !important; }
.tf-card__title a:hover { text-decoration: underline; }

.tf-card__body {
	padding: 9px 16px 16px;     /* tighter top gap below the "Time now" bar — banks vertical space for future severity pills */
}

/* Status keyword — larger; planned is calm, active is urgent */
.tf-badge {
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}
.tf-badge--planned { color: var(--tf-badge-text); background: var(--tf-badge-bg); }
.tf-badge--active  { color: var(--tf-badge-active-text); background: var(--tf-badge-active-bg); }

/* Active cards also get a subtle red cue on the rail sign for at-a-glance urgency */
.tf-card--active .tf-card__rail { background: #a51f1f; }

.tf-card__time {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}
/* Black rounded timestamp pill, time emphasised, date quieter */
.tf-stamp {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	background: #14181f;
	color: #ffffff;
	padding: 5px 12px;
	border-radius: 999px;
	line-height: 1;
}
.tf-stamp__clock { color: #ffffff; align-self: center; opacity: 0.85; }
.tf-stamp__time {
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: 0.01em;
}
.tf-stamp__date {
	font-size: 0.78rem;
	font-weight: 600;
	color: #c4ccd6;
}
.tf-card__cat {
	font-size: 0.74rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #0f3a6b;
	background: #dceaf6;
	padding: 3px 11px;
	border-radius: 999px;          /* full pill — the deliberate "cause" tag */
	white-space: nowrap;
}
/* Junction highlight chips. Junctions (J8, J4A …) are the key fact a user scans
   for — "does this affect MY stretch?" — so they get a subtle but clear chip.
   Tuned for CLARITY, NOT NOISE: enough to draw the eye, not so much it clutters. */
.tf-jn {
	display: inline-block;
	font-weight: 800;
	font-size: 0.92em;            /* match surrounding text, em so it scales */
	line-height: 1;
	color: #0b3e7c;
	background: #d6e6fa;
	padding: 1px 6px;
	border-radius: 5px;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
/* In the blue title band the chip must read against blue — light fill, dark text */
.tf-jn--title {
	color: #0b3e7c;
	background: #ffffff;
	font-size: 0.94em;
	padding: 0 6px;
}
.tf-closed-flag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #ffffff;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}
.tf-closed-flag--closed {
	background: #c62828;
	box-shadow: 0 0 0 2px rgba(198,40,40,0.25);
}
.tf-closed-flag--slip {
	background: #b25a00;          /* amber/orange — junction access only */
	box-shadow: 0 0 0 2px rgba(178,90,0,0.22);
}
.tf-closed-flag svg { flex: 0 0 auto; }
/* Lane-value emphasis: strong red for a true road block, calmer amber for slip */
.tf-dd--closed {
	color: #c62828 !important;
	font-weight: 800;
}
.tf-dd--slip {
	color: #b25a00 !important;
	font-weight: 800;
}
/* Severity-ready hooks for the planned traffic-light system (#5). Inert now;
   the severity build will add data-tf-sev="minor|moderate|major|severe" and
   these rules give the cause pill its colour. Kept here so #4 is the foundation
   for #5 rather than throwaway. */
.tf-card__cat[data-tf-sev="minor"]   { background: #e3f3e4; color: #1e6b2e; }
.tf-card__cat[data-tf-sev="moderate"]{ background: #fbeccd; color: #8a5206; }
.tf-card__cat[data-tf-sev="major"]   { background: #f8d6d3; color: #a3271f; }
.tf-card__cat[data-tf-sev="severe"]  { background: #c62828; color: #ffffff; }

.tf-fields {
	margin: 0;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2px 14px;             /* tighter vertical rhythm — saves mobile height */
	font-size: 0.94rem;
	line-height: 1.35;
}
.tf-fields dt { color: var(--tf-blue); font-weight: 700; }
.tf-fields dd { margin: 0; color: var(--tf-text); }

.tf-card__desc {
	margin: 4px 0 0;
	font-size: 0.94rem;
	color: var(--tf-text);
	line-height: 1.5;
}

.tf-empty {
	--tf-blue: #0b4ea2;
	--tf-blue-title: #1565c0;
	--tf-rail-width: 58px;
	border: 2px solid var(--tf-blue);
	border-radius: 10px;
	background: #ffffff;
	overflow: hidden;
	display: flex;
	align-items: stretch;
	margin: 8px 0;
}
.tf-empty__rail {
	flex: 0 0 var(--tf-rail-width, 58px);
	width: var(--tf-rail-width, 58px);
	background: var(--tf-blue, #0b4ea2);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 0;
}
.tf-empty__rail .tf-card__sign {
	width: 40px;
	height: 32px;
	border-radius: 5px;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tf-blue, #0b4ea2);
	font-weight: 800;
	font-size: 0.82rem;
	line-height: 1;
}
.tf-empty__rail-text {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tf-empty__rail-text span {
	writing-mode: vertical-rl;
	color: #ffffff;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.tf-empty__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.tf-empty__band {
	background: var(--tf-blue-title, #1565c0);
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: 1.0rem;
	padding: 10px 16px;
}
.tf-empty__body {
	padding: 22px 18px;
	text-align: center;
}
.tf-empty__head {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--tf-blue, #0b4ea2);
	margin: 0 0 8px;
}
.tf-empty__sub {
	font-size: 1.0rem;
	line-height: 1.6;
	color: #3a4756;
	margin: 0;
}

@media (max-width: 600px) {
	.tf-feed { --tf-rail-width: 44px; }
	.tf-card__sign { width: 100%; height: 32px; font-size: 0.74rem; border-radius: 0; }
	.tf-card__rail-text span { font-size: 0.78rem; letter-spacing: 0.07em; }
}
@media (max-width: 480px) {
	.tf-fields { grid-template-columns: 1fr; gap: 0; }
	.tf-fields dt { margin-top: 6px; }
}

/* ---- Search page ---- */
.tf-search { margin: 0; }
.tf-search__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	background: #f0f4f9;
	border: 1px solid #d4def0;
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 16px;
}
.tf-filter { display: flex; flex-direction: column; gap: 4px; }
.tf-filter label {
	font-size: 0.78rem;
	font-weight: 700;
	color: #0b4ea2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.tf-filter select {
	font-size: 0.92rem;
	padding: 7px 10px;
	border: 1px solid #b9c6dd;
	border-radius: 7px;
	background: #fff;
	color: #1d2327;
	min-width: 150px;
}
.tf-filter--reset { margin-left: auto; }
.tf-reset {
	font-size: 0.88rem;
	font-weight: 700;
	padding: 8px 16px;
	border: 1px solid #0b4ea2;
	border-radius: 7px;
	background: #fff;
	color: #0b4ea2;
	cursor: pointer;
}
.tf-reset:hover { background: #0b4ea2; color: #fff; }
.tf-search__count {
	display: flex;             /* single declaration — flex row, shrink to fit */
	width: fit-content;
	align-items: center;       /* vertically centre the number pill with the text */
	justify-content: center;
	margin: 0 auto 16px;
	font-size: 0.92rem;
	font-weight: 700;
	color: #ffffff;
	background: #1e8e3e;
	padding: 10px 18px;        /* even padding all sides */
	border-radius: 8px;
	line-height: 1;            /* no extra line-box height to unbalance vertical centring */
}
.tf-search__count:empty { display: none; }
/* the matched-results number: bold, on its own dark pill for max contrast
   (lightness contrast is readable for all forms of colour blindness) */
.tf-count-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #0f1c2e;
	color: #ffffff;
	font-weight: 800;
	font-size: 0.95rem;
	line-height: 1;
	padding: 3px 9px;          /* balanced vertical padding so the pill isn't proud */
	border-radius: 5px;
	margin: 0 7px 0 0;         /* even gap to the following text */
}

@media (max-width: 600px) {
	.tf-filter select { min-width: 0; width: 100%; }
	.tf-filter { flex: 1 1 45%; }
	.tf-filter--reset { flex: 1 1 100%; margin-left: 0; }
	.tf-reset { width: 100%; }
}

/* ---- Search pagination ---- */
.tf-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 20px;
}
.tf-page {
	min-width: 40px;
	padding: 8px 12px;
	font-size: 0.9rem;
	font-weight: 700;
	border: 1px solid #b9c6dd;
	border-radius: 7px;
	background: #fff;
	color: #0b4ea2;
	cursor: pointer;
	line-height: 1;
}
.tf-page:hover:not(:disabled) { background: #eaf1fb; }
.tf-page--active {
	background: #0b4ea2;
	border-color: #0b4ea2;
	color: #fff;
	cursor: default;
}
.tf-page--nav { color: #0b4ea2; }
.tf-page:disabled { opacity: 0.4; cursor: default; }

/* Standalone count box (roadworks / incidents pages) */
.tf-countbox { margin-top: 0; }

/* ============================================================
   v0.7.0 — time-awareness + positive empty state
   ============================================================ */

/* "Time now" reassurance bar at the top of each card */
.tf-now {
	display: flex;
	align-items: center;
	gap: 7px;
	background: #eef3fa;
	border-bottom: 1px solid #dce6f4;
	padding: 7px 16px;
	font-size: 0.85rem;
	color: #33485f;
}
.tf-now__ico { color: #0b4ea2; flex: 0 0 auto; }
.tf-now__label { color: #56657a; }
.tf-now__value { color: #0f2e54; font-weight: 800; }

/* "reported X ago" segment inside the black timestamp pill */
.tf-stamp__ago {
	font-size: 0.74rem;
	font-weight: 700;
	color: #8fd3ff;
	border-left: 1px solid #3a4350;
	padding-left: 9px;
	margin-left: 2px;
}

/* "Time to clear" footer — our added info, separated from the official text */
.tf-clear {
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 3px solid #0b4ea2;
	background: #f4f8fd;
	padding: 10px 16px;
}
.tf-clear__ico { font-size: 1.25rem; line-height: 1; color: #0b4ea2; flex: 0 0 auto; }
.tf-clear__ico--over { color: #c62828; }
.tf-clear__txt { font-size: 0.9rem; line-height: 1.45; color: #1d3a5f; }
.tf-clear__txt--over { color: #8a1c17; }
.tf-clear__approx { color: #5a7290; }
.tf-clear__pill {
	display: inline-block;
	font-weight: 800;
	font-size: 0.82rem;
	padding: 2px 9px;
	border-radius: 6px;
	color: #fff;
}
.tf-clear__pill--soon { background: #1e8e3e; }
.tf-clear__pill--over { background: #c62828; }
/* When the footer is in the overrun state, recolour its top border */
.tf-clear.is-over { background: #fff5f4; border-top-color: #c62828; }

/* Positive empty-state additions */
.tf-empty__hint {
	font-size: 0.86rem;
	line-height: 1.55;
	color: #6a7787;
	font-style: italic;
	margin: 12px 0 0;
}
.tf-empty__head { color: #1e8e3e; }

/* Static "clear run" campervan for the empty state — streaks trail behind it,
   driver waving a thumbs-up, baked into the SVG so it reads without animation. */
.tf-clearrun {
	display: flex;
	justify-content: center;
	margin: 0 0 10px;
}
.tf-clearrun__car { display: inline-block; }
.tf-clearrun__car svg { width: 230px; height: auto; max-width: 80%; }

/* Junction filter helper tip — pill background so it's readable on any page
   colour, centred under the filter boxes. */
.tf-junction-tip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	max-width: 100%;
	margin: 12px auto 0;
	padding: 8px 16px;
	font-size: 0.86rem;
	line-height: 1.4;
	color: #33485f;
	background: #eef3fa;
	border: 1px solid #dce6f4;
	border-radius: 999px;
}
.tf-junction-tip svg { color: #0b4ea2; flex: 0 0 auto; }

/* Planned roadworks footer pill (amber — distinct from active green/red) */
.tf-clear__pill--plan { background: #b9670a; }
.tf-clear--planned { border-top-color: #e2670c; background: #fff8f0; }