/*
 * Reg Watch — alert index, alert post, and rail.
 *
 * Every rule is scoped under .rw-index / .rw-alert / .rw-wrap, and every class carries the rw-
 * prefix, so nothing here can reach the MyAgLife theme or collide with the Industry News Hub
 * plugin. Colours and type are MyAgLife's own, measured from the live site: the Reg Watch identity
 * is carried by the green and the modules, not by importing a typeface the site does not use.
 */

.rw-index,
.rw-alert,
.rw-wrap,
body.rw-alert-page,
body.rw-index-page {
	--rw-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--rw-green: #176B3A;
	--rw-link: #529046;
	--rw-bright: #8FD14F;
	--rw-tint: rgba(111, 191, 60, .14);
	--rw-ink: #343942;
	--rw-body: #333333;
	--rw-muted: #6E7681;
	--rw-surface: #ffffff;
	--rw-inset: #f4f7f3;
	--rw-line: #e3e8e3;
}

.rw-index *,
.rw-alert *,
.rw-wrap * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * The page title
 * ------------------------------------------------------------------ */

/* Hello Elementor is a deliberately blank starter theme: it leaves <h1 class="entry-title">
   unstyled, so it renders in the browser's default monospace at weight 500. That is not a design to
   respect, it is the absence of one -- the site's good-looking titles are Elementor heading widgets,
   which our pages do not use. Every alert headline lands in this element, so it gets the same
   treatment: MyAgLife green, heavy, sans. Anchored to the body class the plugin adds, so it can
   never reach another page on the site. */
body.rw-alert-page .entry-title,
body.rw-index-page .entry-title {
	font-family: var(--rw-sans);
	font-size: clamp(29px, 4vw, 42px);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: var(--rw-green);
	text-wrap: balance;
}

/* ------------------------------------------------------------------ *
 * Shared atoms
 * ------------------------------------------------------------------ */

.rw-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.5;
	background: var(--rw-green);
	color: #fff;
	border-radius: 999px;
	padding: 4px 10px;
}

.rw-badge-digest {
	background: var(--rw-link);
}

.rw-date {
	font-size: 12.5px;
	color: var(--rw-muted);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * The index — [reg_watch]
 * ------------------------------------------------------------------ */

.rw-index-h {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 18px;
}

.rw-index-h .rw-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--rw-green);
	flex: none;
}

.rw-index-h h2 {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	color: var(--rw-ink);
	letter-spacing: -.02em;
	text-wrap: balance;
}

.rw-empty {
	color: var(--rw-muted);
	font-size: 15px;
	margin: 0;
}

.rw-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rw-card {
	border: 1px solid var(--rw-line);
	border-radius: 12px;
	background: var(--rw-surface);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.rw-card:hover {
	border-color: var(--rw-link);
	box-shadow: 0 6px 20px rgba(23, 107, 58, .09);
}

.rw-card-meta {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-wrap: wrap;
}

.rw-card-h {
	margin: 0;
	font-size: 19px;
	line-height: 1.32;
	font-weight: 800;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.rw-card-h a {
	color: var(--rw-ink);
	text-decoration: none;
}

.rw-card-h a:hover {
	color: var(--rw-green);
}

.rw-card-sum {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--rw-muted);
	max-width: 72ch;
}

.rw-card-foot {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 2px;
}

.rw-chip {
	font-size: 12px;
	font-weight: 700;
	color: var(--rw-green);
	background: var(--rw-tint);
	border-radius: 999px;
	padding: 5px 11px;
	font-variant-numeric: tabular-nums;
}

.rw-more {
	margin-left: auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--rw-link);
	text-decoration: none;
	white-space: nowrap;
}

.rw-more:hover {
	color: var(--rw-green);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * The lead card
 * ------------------------------------------------------------------ */

/* The newest alert is the only one on the index whose deadline is still live, so it leads: bigger
   headline, and the deadline promoted from a chip to the same green-railed module the post itself
   uses. Written as .rw-card.rw-hero so it beats .rw-card on specificity rather than on the accident
   of source order. */
.rw-card.rw-hero {
	border-top: 3px solid var(--rw-green);
	padding: 24px 26px 22px;
	gap: 11px;
}

.rw-hero .rw-card-h {
	font-size: 25px;
	line-height: 1.24;
}

.rw-hero .rw-card-sum {
	font-size: 15.5px;
	color: var(--rw-body);
	max-width: 68ch;
}

.rw-hero .rw-deadline {
	margin: 5px 0 3px;
}

.rw-hero .rw-deadline-v {
	font-size: 22px;
}

@media (max-width: 640px) {
	.rw-card.rw-hero {
		padding: 20px 18px;
	}

	.rw-hero .rw-card-h {
		font-size: 21px;
	}
}

/* ------------------------------------------------------------------ *
 * The alert post
 * ------------------------------------------------------------------ */

/* Names the section under the headline and routes back to the index. Small on purpose: it orients,
   it does not announce. */
.rw-kicker {
	margin: 0 0 15px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1.4;
}

.rw-kicker a {
	color: var(--rw-link);
	text-decoration: none;
}

.rw-kicker a:hover {
	color: var(--rw-green);
	text-decoration: underline;
}

.rw-alert p {
	font-size: 16.5px;
	line-height: 1.68;
	color: var(--rw-body);
}

/* Deadline module. The left rail is inherited from the established email design. */
.rw-deadline {
	background: var(--rw-inset);
	border-left: 4px solid var(--rw-bright);
	border-radius: 0 10px 10px 0;
	padding: 16px 20px;
	margin: 24px 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.rw-deadline-k {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--rw-muted);
}

.rw-deadline-v {
	font-size: 25px;
	font-weight: 800;
	color: var(--rw-green);
	letter-spacing: -.02em;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
}

.rw-sec-h {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--rw-green);
	margin: 30px 0 12px;
	padding-top: 22px;
	border-top: 1px solid var(--rw-line);
}

/* Fine cards: the whole story of a penalty rule in one glance. */
.rw-fines {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	gap: 12px;
	margin: 0 0 8px;
}

.rw-fine {
	border: 1px solid var(--rw-line);
	border-radius: 10px;
	padding: 14px 15px;
	background: var(--rw-surface);
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.rw-fine-new {
	border-color: var(--rw-bright);
	background: var(--rw-tint);
}

.rw-fine-k {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--rw-muted);
}

.rw-fine-v {
	font-size: 19px;
	font-weight: 800;
	color: var(--rw-green);
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

.rw-fine-was {
	font-size: 12px;
	color: var(--rw-muted);
	font-variant-numeric: tabular-nums;
}

.rw-fine-was s {
	opacity: .75;
}

.rw-alert .rw-hits {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.rw-alert .rw-hits li {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--rw-body);
	padding-left: 15px;
	border-left: 2px solid var(--rw-line);
	margin: 0;
}

/* Key dates. A passed date goes quiet rather than disappearing: a reader arriving
   late still needs to know the hearing happened. */
.rw-alert .rw-dates {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rw-alert .rw-dates li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0;
}

.rw-day {
	flex: none;
	width: 62px;
	text-align: center;
	border-radius: 8px;
	padding: 7px 0;
	background: var(--rw-green);
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* The date box shows "JUL 8"; the full date as the source wrote it rides along for screen readers
   and keeps the fact verbatim in the published markup. */
.rw-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.rw-day-m {
	display: block;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .85;
}

.rw-day-d {
	display: block;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.15;
}

/* Shown only when the date is not in the current year. A set of compliance milestones years apart
   would otherwise render as a column of identical days. */
.rw-day-y {
	display: block;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .05em;
	line-height: 1.35;
	opacity: .85;
	font-variant-numeric: tabular-nums;
}

.rw-alert .rw-dates li.rw-past .rw-day {
	background: var(--rw-inset);
	color: var(--rw-muted);
	border: 1px solid var(--rw-line);
}

.rw-alert .rw-dates li.rw-past .rw-txt {
	color: var(--rw-muted);
}

.rw-txt {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--rw-body);
	padding-top: 2px;
}

.rw-txt s {
	opacity: .7;
}

/* Numbering survives only here, where the steps genuinely have an order. */
.rw-alert .rw-steps {
	margin: 0;
	padding: 0 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rw-alert .rw-steps li {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--rw-body);
	padding-left: 4px;
	margin: 0;
}

.rw-alert .rw-steps li::marker {
	color: var(--rw-green);
	font-weight: 800;
}

.rw-src {
	margin: 26px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--rw-line);
	font-size: 13.5px;
	color: var(--rw-muted);
}

.rw-src a {
	color: var(--rw-link);
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * The rail
 * ------------------------------------------------------------------ */

.rw-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	gap: 42px;
	align-items: start;
}

.rw-main {
	min-width: 0;
}

.rw-rail {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.rw-rail-h {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rw-muted);
}

.rw-rail-card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	text-decoration: none;
	border-left: 2px solid var(--rw-line);
	padding: 1px 0 1px 13px;
	transition: border-left-color .15s ease;
}

.rw-rail-card:hover {
	border-left-color: var(--rw-green);
}

.rw-rail-mini {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rw-link);
}

.rw-rail-t {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--rw-ink);
	text-wrap: balance;
}

.rw-rail-card:hover .rw-rail-t {
	color: var(--rw-green);
}

.rw-rail-all {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--rw-link);
	text-decoration: none;
	margin-top: 2px;
}

.rw-rail-all:hover {
	text-decoration: underline;
}

/* On a phone the rail stops being a rail and becomes the "more alerts" strip,
   in the one place a mobile reader looks for it. Same markup, no second design. */
@media (max-width: 900px) {
	.rw-wrap {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.rw-rail {
		border-top: 1px solid var(--rw-line);
		padding-top: 24px;
	}
}

/* ------------------------------------------------------------------ *
 * Link decoration
 * ------------------------------------------------------------------ */

/* The theme underlines links inside content. That is correct for body copy (the source link keeps
   its underline), and noise on a card headline the whole card already advertises. These win on
   specificity rather than !important, and only inside our own containers. */
.rw-index .rw-card-h a,
.rw-index .rw-more,
.rw-wrap .rw-rail-card,
.rw-wrap .rw-rail-all {
	text-decoration: none;
}

.rw-index .rw-more:hover,
.rw-wrap .rw-rail-all:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Accessibility
 * ------------------------------------------------------------------ */

.rw-index a:focus-visible,
.rw-alert a:focus-visible,
.rw-wrap a:focus-visible {
	outline: 2px solid var(--rw-green);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.rw-card,
	.rw-rail-card {
		transition: none;
	}
}