/**
 * Procurement archive and record pages.
 *
 * WRC identity only: Montserrat, dark blue #094E9C for headings and primary
 * actions, light blue #00AEEF and green #A9CC4F kept for status and focus.
 * White cards on a light grey ground, 1px borders, small radius, restrained
 * shadow — the register a public-sector procurement page should read in.
 *
 * Every selector is scoped under .wrc-proc-scope, and that is deliberate rather
 * than tidiness. Elementor's global kit styles this site at specificity (0,1,1)
 * — `.elementor-kit-255765 h1`, `... button`, `... a` — which outranks a plain
 * single class. Scoping lifts every rule here to (0,2,x) so it wins on
 * specificity instead of on !important. The theme also forces
 * `line-height: 1.2 !important` on form controls, which is the one place below
 * where !important is answered in kind.
 *
 * Status is never carried by colour alone (WCAG 1.4.1): every badge states its
 * status in words and the colour only reinforces it.
 */

/*
 * Horizontal alignment comes from wrc-container.css, not from a margin of our
 * own: --wrc-content-inset is max( gutter, (100% - 1650px) / 2 ), the alignment
 * line every standardised section on the site starts at. Same idiom as
 * wrc-partners.css and wrc-contact.css.
 *
 * This page needs it explicitly because the archive is not an Elementor layout —
 * wrc-container.css only reaches Elementor's own boxed containers, so without
 * this the content ran flush to the window edge. The variable already drops to
 * the 16px mobile gutter under 767px, so no breakpoint is needed here.
 */
.wrc-proc-scope.wrc-proc {
	padding-inline: var( --wrc-content-inset, 30px );
	box-sizing: border-box;
}

.wrc-proc-scope {
	--proc-blue: #094E9C;
	--proc-cyan: #00AEEF;
	--proc-green: #A9CC4F;
	--proc-ink: #1d2530;
	--proc-muted: #5a6472;
	--proc-line: #e2e6ec;
	--proc-ground: #f5f7fa;
	--proc-radius: 8px;

	font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--proc-ink);
}

/* ---------- resets against the theme's form-control rules ---------- */

.wrc-proc-scope button,
.wrc-proc-scope input,
.wrc-proc-scope select {
	margin: 0;
	line-height: 1.35 !important;
}

.wrc-proc-scope .wrc-proc__cta,
.wrc-proc-scope .wrc-proc__submit,
.wrc-proc-scope .wrc-proc__clear {
	line-height: 1.2 !important;
	text-transform: none;
	letter-spacing: normal;
}

/* ---------- intro ---------- */

.wrc-proc-scope .wrc-proc__intro { margin: 0 0 28px; }

/* Only rendered when a page passes an explicit heading; it is an h2, since the
   theme's page-title band already provides the page h1. */
.wrc-proc-scope .wrc-proc__heading {
	margin: 0 0 10px;
	color: var(--proc-blue);
	font-family: inherit;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
}

.wrc-proc-scope .wrc-proc__lede {
	margin: 0;
	max-width: 62ch;
	color: var(--proc-muted);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* ---------- status tabs ---------- */

/*
 * The five status views of one procurement type, in the WRC's own register
 * rather than the CSIR's: Montserrat, the dark blue filled for the tab you are
 * on, a hairline rule under the row to sit the tabs on.
 *
 * Every tab carries its count, because two of them are legitimately empty and
 * a visitor may as well see that before clicking. The count is a pill inside
 * the tab, so the label stays the thing you read.
 *
 * Each tab is an anchor, so the theme's link colour and Elementor's global kit
 * both have opinions about it — hence colour, background and text-decoration
 * are all stated here rather than inherited.
 */
.wrc-proc-scope .wrc-proc__tabs {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 4px;
	margin: 0 0 24px;
	padding: 0 0 0;
	border-bottom: 2px solid var(--proc-line);
}

.wrc-proc-scope .wrc-proc__tab {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 20px;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--proc-blue);
	background: var(--proc-ground);
	border: 1px solid var(--proc-line);
	border-bottom: 0;
	border-radius: var(--proc-radius) var(--proc-radius) 0 0;
	margin-bottom: -2px;
}

.wrc-proc-scope .wrc-proc__tab:hover,
.wrc-proc-scope .wrc-proc__tab:focus-visible {
	color: var(--proc-blue);
	background: #eef3fa;
	border-color: #c9d2dd;
}

.wrc-proc-scope .wrc-proc__tab.is-active,
.wrc-proc-scope .wrc-proc__tab.is-active:hover {
	color: #fff;
	background: var(--proc-blue);
	border-color: var(--proc-blue);
}

.wrc-proc-scope .wrc-proc__tabcount {
	display: inline-block;
	min-width: 1.6em;
	padding: 2px 7px;
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--proc-blue);
	background: #fff;
	border: 1px solid var(--proc-line);
	border-radius: 999px;
}

.wrc-proc-scope .wrc-proc__tab.is-active .wrc-proc__tabcount {
	color: var(--proc-blue);
	background: #fff;
	border-color: transparent;
}

/* ---------- archive years ---------- */

/*
 * The archive organised by year, inside the design the archive already had.
 * One row of years above the same filter bar and the same cards: the year is
 * the filter it always was, laid out so the shape of the archive — which years
 * exist, how much is in each — can be read at a glance.
 */
.wrc-proc-scope .wrc-proc__yearnav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
}

.wrc-proc-scope .wrc-proc__yearnavlabel {
	margin-right: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--proc-muted);
}

.wrc-proc-scope .wrc-proc__yearlink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--proc-blue);
	background: #fff;
	border: 1px solid #c9d2dd;
	border-radius: 999px;
}

.wrc-proc-scope .wrc-proc__yearlink:hover,
.wrc-proc-scope .wrc-proc__yearlink:focus-visible {
	color: var(--proc-blue);
	background: #eef3fa;
	border-color: var(--proc-blue);
}

.wrc-proc-scope .wrc-proc__yearlink.is-active,
.wrc-proc-scope .wrc-proc__yearlink.is-active:hover {
	color: #fff;
	background: var(--proc-blue);
	border-color: var(--proc-blue);
}

.wrc-proc-scope .wrc-proc__yearlinkcount {
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

/*
 * The year heading inside the card list. A list item rather than a heading
 * between lists, so the cards stay one list for anything reading the page
 * structure; the cyan eyebrow is the same one the record page uses for its
 * section headings.
 */
.wrc-proc-scope .wrc-proc__yearmark {
	margin: 26px 0 12px;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}

.wrc-proc-scope .wrc-proc__list > .wrc-proc__yearmark:first-child { margin-top: 0; }

.wrc-proc-scope .wrc-proc__yearmarkhead {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--proc-blue);
}

.wrc-proc-scope .wrc-proc__yearmarkhead::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	background: var(--proc-cyan);
	opacity: 0.5;
}

/* ---------- search + filters ---------- */

.wrc-proc-scope .wrc-proc__form {
	margin: 0 0 24px;
	padding: 20px;
	background: var(--proc-ground);
	border: 1px solid var(--proc-line);
	border-radius: var(--proc-radius);
}

.wrc-proc-scope .wrc-proc__searchrow { display: flex; gap: 10px; flex-wrap: wrap; }

.wrc-proc-scope .wrc-proc__search {
	flex: 1 1 320px;
	min-width: 0;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--proc-ink);
	background: #fff;
	border: 1px solid #c9d2dd;
	border-radius: var(--proc-radius);
}

.wrc-proc-scope .wrc-proc__search::placeholder { color: #8b95a3; }

.wrc-proc-scope .wrc-proc__submit {
	flex: 0 0 auto;
	padding: 14px 28px;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	background: var(--proc-blue);
	border: 1px solid var(--proc-blue);
	border-radius: var(--proc-radius);
	cursor: pointer;
}

.wrc-proc-scope .wrc-proc__submit:hover { background: #073d7c; color: #fff; }

.wrc-proc-scope .wrc-proc__filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin: 16px 0 0;
}

.wrc-proc-scope .wrc-proc__field { margin: 0; }

.wrc-proc-scope .wrc-proc__label {
	display: block;
	margin: 0 0 5px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--proc-muted);
}

.wrc-proc-scope .wrc-proc__filters select,
.wrc-proc-scope .wrc-proc__filters input[type="date"] {
	width: 100%;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--proc-ink);
	background: #fff;
	border: 1px solid #c9d2dd;
	border-radius: 6px;
}

.wrc-proc-scope :focus-visible {
	outline: 3px solid var(--proc-cyan);
	outline-offset: 2px;
}

/* ---------- count row ---------- */

.wrc-proc-scope .wrc-proc__count {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--proc-line);
}

.wrc-proc-scope .wrc-proc__countline {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--proc-ink);
}

.wrc-proc-scope .wrc-proc__clear {
	padding: 9px 16px;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--proc-blue);
	background: #fff;
	border: 1px solid #c9d2dd;
	border-radius: 6px;
	cursor: pointer;
}

.wrc-proc-scope .wrc-proc__clear:hover { border-color: var(--proc-blue); background: #f4f8fd; }
.wrc-proc-scope .wrc-proc__clear--solo { margin-top: 10px; }

/* The rolling-window notice, on pages given years="n". It explains a shortened
   list before the visitor wonders where the older records went. */
.wrc-proc-scope .wrc-proc__windownote {
	margin: 12px 0 0;
	padding: 11px 14px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--proc-ink);
	background: #f4f8fd;
	border: 1px solid #d8e4f2;
	border-radius: 6px;
}

.wrc-proc-scope .wrc-proc__windownote a {
	color: var(--proc-blue);
	font-weight: 600;
	text-decoration: underline;
}

/* ---------- cards ---------- */

.wrc-proc-scope .wrc-proc__list { margin: 0; padding: 0; list-style: none; }
.wrc-proc-scope .wrc-proc__item { margin: 18px 0 0; list-style: none; }

.wrc-proc-scope .wrc-proc__card {
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--proc-line);
	border-radius: var(--proc-radius);
	box-shadow: 0 1px 2px rgba(16, 30, 54, 0.04);
}

.wrc-proc-scope .wrc-proc__card:hover { box-shadow: 0 3px 12px rgba(16, 30, 54, 0.08); }

.wrc-proc-scope .wrc-proc__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.wrc-proc-scope .wrc-proc__badge {
	display: inline-block;
	padding: 4px 10px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 4px;
	border: 1px solid transparent;
}

.wrc-proc-scope .wrc-proc__badge--type { color: #fff; background: var(--proc-blue); }
.wrc-proc-scope .wrc-proc__badge--year { color: var(--proc-muted); background: #eef1f6; border-color: var(--proc-line); }
.wrc-proc-scope .wrc-proc__badge--status { color: #33403a; background: #eef4dd; border-color: var(--proc-green); }
.wrc-proc-scope .wrc-proc__badge--open { color: #2c4a1d; background: #eaf4d5; border-color: var(--proc-green); }
.wrc-proc-scope .wrc-proc__badge--closed { color: #40484f; background: #eceff3; border-color: #c3ccd6; }
.wrc-proc-scope .wrc-proc__badge--awarded { color: #05445e; background: #e0f4fc; border-color: var(--proc-cyan); }
.wrc-proc-scope .wrc-proc__badge--cancelled { color: #6d2a25; background: #fbeceb; border-color: #e3aca7; }
.wrc-proc-scope .wrc-proc__badge--received-bids { color: #05445e; background: #e8f6fd; border-color: #9adcf5; }
.wrc-proc-scope .wrc-proc__badge--archived { color: #40484f; background: #f2f4f7; border-color: #cfd6de; }

.wrc-proc-scope .wrc-proc__ref {
	margin: 0 0 4px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--proc-blue);
	word-break: break-word;
}

.wrc-proc-scope .wrc-proc__title {
	margin: 0 0 14px;
	font-family: inherit;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--proc-ink);
	overflow-wrap: anywhere;
}

.wrc-proc-scope .wrc-proc__title a { color: var(--proc-ink); text-decoration: none; }
.wrc-proc-scope .wrc-proc__title a:hover { color: var(--proc-blue); text-decoration: underline; }

.wrc-proc-scope .wrc-proc__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 8px 22px;
	margin: 0 0 16px;
}

/*
 * The theme styles bare dl/dt/dd as a bordered definition table with grey label
 * cells, which turned the date row into a spreadsheet. Reset inside the scope.
 */
.wrc-proc-scope .wrc-proc__meta,
.wrc-proc-scope .wrc-proc__meta dt,
.wrc-proc-scope .wrc-proc__meta dd,
.wrc-proc-scope .wrc-proc-record__details,
.wrc-proc-scope .wrc-proc-record__details dt,
.wrc-proc-scope .wrc-proc-record__details dd {
	padding: 0;
	background: none;
	border: 0;
	width: auto;
	float: none;
	font-style: normal;
}

.wrc-proc-scope .wrc-proc__metarow {
	display: flex;
	gap: 6px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 0.875rem;
}
.wrc-proc-scope .wrc-proc__metarow dt { color: var(--proc-muted); }
.wrc-proc-scope .wrc-proc__metarow dt::after { content: ':'; }
.wrc-proc-scope .wrc-proc__metarow dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- actions ---------- */

.wrc-proc-scope .wrc-proc__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.wrc-proc-scope .wrc-proc__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 6px;
	border: 1px solid var(--proc-blue);
	background: var(--proc-blue);
	color: #fff;
	cursor: pointer;
}

.wrc-proc-scope .wrc-proc__cta:hover,
.wrc-proc-scope .wrc-proc__cta:focus { background: #073d7c; color: #fff; }

.wrc-proc-scope .wrc-proc__cta--ghost { background: #fff; color: var(--proc-blue); }
.wrc-proc-scope .wrc-proc__cta--ghost:hover,
.wrc-proc-scope .wrc-proc__cta--ghost:focus { background: #eef3fa; color: var(--proc-blue); }

.wrc-proc-scope .wrc-proc__cta--link {
	padding-left: 10px;
	padding-right: 10px;
	background: none;
	border-color: transparent;
	color: var(--proc-muted);
}

.wrc-proc-scope .wrc-proc__cta--link:hover,
.wrc-proc-scope .wrc-proc__cta--link:focus { background: none; color: var(--proc-blue); text-decoration: underline; }

.wrc-proc-scope .wrc-proc__cta--small { padding: 7px 14px; font-size: 0.8125rem; }

.wrc-proc-scope .wrc-proc__nodocs { font-size: 0.875rem; color: var(--proc-muted); }

.wrc-proc-scope .wrc-proc__chev { font-size: 0.75rem; transition: transform 0.15s ease; }
.wrc-proc-scope [aria-expanded="true"] .wrc-proc__chev { transform: rotate(180deg); }

/* ---------- documents ---------- */

.wrc-proc-scope .wrc-proc__docs {
	margin: 18px 0 0;
	padding: 16px 18px;
	background: var(--proc-ground);
	border: 1px solid var(--proc-line);
	border-radius: 6px;
}

.wrc-proc-scope .wrc-proc__docshead {
	margin: 0 0 10px;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--proc-muted);
}

.wrc-proc-scope .wrc-proc__doclist { margin: 0; padding: 0; list-style: none; }

.wrc-proc-scope .wrc-proc__doc {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 0;
	border-top: 1px solid var(--proc-line);
	list-style: none;
}

.wrc-proc-scope .wrc-proc__doclist .wrc-proc__doc:first-child { border-top: 0; }

.wrc-proc-scope .wrc-proc__docicon {
	flex: 0 0 auto;
	min-width: 46px;
	padding: 5px 8px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--proc-blue);
	background: #fff;
	border: 1px solid #c9d2dd;
	border-radius: 4px;
}

.wrc-proc-scope .wrc-proc__docname { flex: 1 1 240px; min-width: 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
.wrc-proc-scope .wrc-proc__docsize { margin-left: 8px; font-size: 0.8125rem; color: var(--proc-muted); }
.wrc-proc-scope .wrc-proc__docactions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- empty ---------- */

.wrc-proc-scope .wrc-proc__empty {
	margin: 28px 0;
	padding: 40px 24px;
	text-align: center;
	background: #fff;
	border: 1px dashed #c9d2dd;
	border-radius: var(--proc-radius);
}

.wrc-proc-scope .wrc-proc__empty h2 {
	margin: 0 0 10px;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--proc-blue);
}

.wrc-proc-scope .wrc-proc__empty p { margin: 0 0 6px; color: var(--proc-muted); }

/* ---------- pager ---------- */

/*
 * Why width, border-colour and padding are answered with !important here.
 *
 * The site's theme-options CSS carries one grab-bag selector list — .p-border,
 * .sidebar_item, .meta, .tagcloud a, .page-numbers, .nav_item a and half a
 * dozen more — and gives all of them
 *
 *     border-color: #ffffff !important;
 *     width: 1180px !important;
 *
 * It is the theme's content-width control reaching a class it has no business
 * touching, and it is what stacked this pager vertically: every page number was
 * 1180px wide, so a flex row had to wrap after each one, the current page
 * rendered as a full-width blue band, and the white border-colour made the rest
 * look like bare text. The parent theme separately sets `padding: 12px 16px
 * !important` on .page-numbers and a 50px bottom margin on a.page-numbers,
 * which is where the tall gaps came from.
 *
 * That rule is global and shared with unrelated widgets, so it is overridden
 * here rather than edited there. Both declarations are !important, so
 * specificity decides: (0,3,1) below beats the (0,1,0) list. Nothing outside
 * .wrc-proc__pager is affected.
 */
.wrc-proc-scope .wrc-proc__pager {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 32px 0 8px;
	padding: 0;
	list-style: none;
}

.wrc-proc-scope .wrc-proc__pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Each item is exactly as wide as its label, and never a flex-basis of 1180px. */
	flex: 0 0 auto;
	width: auto !important;
	max-width: none !important;
	min-width: 42px;
	margin: 0;
	padding: 9px 14px !important;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	color: var(--proc-blue);
	background: #fff;
	border: 1px solid #c9d2dd !important;
	border-radius: 6px;
	float: none;
}

.wrc-proc-scope .wrc-proc__pager .page-numbers:hover,
.wrc-proc-scope .wrc-proc__pager .page-numbers:focus-visible {
	border-color: var(--proc-blue) !important;
	background: #eef3fa;
}

.wrc-proc-scope .wrc-proc__pager .page-numbers.current {
	color: #fff;
	background: var(--proc-blue);
	border-color: var(--proc-blue) !important;
}

.wrc-proc-scope .wrc-proc__pager .page-numbers.dots {
	min-width: 0;
	padding: 9px 4px !important;
	background: none;
	border-color: transparent !important;
}

/* Previous and Next carry words, not a digit, so they set their own width. */
.wrc-proc-scope .wrc-proc__pager .page-numbers.prev,
.wrc-proc-scope .wrc-proc__pager .page-numbers.next { min-width: 0; }

/* ---------- busy ---------- */

.wrc-proc-scope .wrc-proc__results[aria-busy="true"] { opacity: 0.55; transition: opacity 0.12s ease; }

/* ---------- record page ---------- */

/*
 * Three nested width caps, all of which have to go for the record to reach the
 * alignment line every other procurement page sits on.
 *
 *   1. .postbarLeftNarrow .fullcontent { max-width: 800px }   — parent theme
 *   2. .container { max-width: 1180px; padding: 0 20px }      — parent theme
 *   3. .wrc-proc-record { max-width: 900px }                  — this file
 *
 * Removing only the first two left the content at 1140px while the page-title
 * band above it — which wrc-container.css already widens through the
 * .wrc-std-width body class — ran to 1905px on a 1920px screen. The band and
 * the content read as two different pages.
 *
 * So the content container takes the same treatment the title band gets, and
 * from the same variable: --wrc-content-inset is
 * max( 30px, (100% - 1650px) / 2 ), the line every standardised section on this
 * site starts at. The listing pages reach it through .wrc-proc; this template
 * is not an Elementor layout, so it needs the inset on the theme's own
 * container. Content is then 1650px at 1920, full width minus the 16px gutter
 * on a phone, and flush with the title above it at every size between.
 *
 * All of it is scoped to .wrc-proc-single, which is on this template's wrapper
 * and nowhere else, so no other page using postbarLeftNarrow or .container_vis
 * changes.
 */
.wrc-proc-single.postbarLeftNarrow .fullcontent {
	max-width: none;
	margin-inline: 0;
}

.wrc-proc-single .container.container_vis {
	max-width: none;
	padding-left: var( --wrc-content-inset, 30px );
	padding-right: var( --wrc-content-inset, 30px );
}

.wrc-proc-scope.wrc-proc-record { max-width: none; }

.wrc-proc-scope .wrc-proc-record__block { margin: 0 0 30px; }

.wrc-proc-scope .wrc-proc-record__block h2 {
	margin: 0 0 12px;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--proc-cyan);
}

.wrc-proc-scope .wrc-proc-record__ref {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--proc-blue);
	overflow-wrap: anywhere;
}

/*
 * 420px, not 280px, now that the record runs to 1650px: at 280 the grid fell to
 * five 307px columns, and a column that narrow gives "Successful bidder /
 * service provider" 135px for its label. Three columns of ~530px instead, and
 * one column below 880px.
 */
.wrc-proc-scope .wrc-proc-record__details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	gap: 0 28px;
	margin: 0;
}

.wrc-proc-scope .wrc-proc-record__row {
	display: flex;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--proc-line);
	font-size: 0.9375rem;
}

.wrc-proc-scope .wrc-proc-record__row dt { flex: 0 0 44%; padding: 0; background: none; border: 0; color: var(--proc-muted); }
.wrc-proc-scope .wrc-proc-record__row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/*
 * The width serves the details grid and the document rows; running prose does
 * not want it. A description set across 1650px is about 200 characters a line,
 * roughly three times a comfortable measure, so this one block keeps a reading
 * width while everything around it stays flush with the page.
 */
.wrc-proc-scope .wrc-proc-record__desc { max-width: 78ch; font-size: 1rem; line-height: 1.7; }
.wrc-proc-scope .wrc-proc-record__desc p { margin: 0 0 1em; }

.wrc-proc-scope .wrc-proc-record__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 36px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--proc-line);
}

/* ---------- responsive ---------- */

@media (max-width: 782px) {
	.wrc-proc-scope .wrc-proc__form { padding: 16px; }

	/* Tabs wrap rather than scroll: five of them fit two to a row on a phone. */
	.wrc-proc-scope .wrc-proc__tabs { gap: 3px; border-bottom-width: 1px; }
	.wrc-proc-scope .wrc-proc__tab { flex: 1 1 auto; justify-content: center; padding: 11px 14px; font-size: 0.875rem; }
	.wrc-proc-scope .wrc-proc__yearnav { gap: 6px; }
	.wrc-proc-scope .wrc-proc__yearlink { padding: 7px 12px; font-size: 0.8125rem; }
	.wrc-proc-scope .wrc-proc__filters { grid-template-columns: 1fr 1fr; }
	.wrc-proc-scope .wrc-proc__submit { flex: 1 1 100%; }
	.wrc-proc-scope .wrc-proc__card { padding: 18px 16px; }
	.wrc-proc-scope .wrc-proc__meta { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 540px) {
	.wrc-proc-scope .wrc-proc__filters { grid-template-columns: 1fr; }

	/* Still one row where it fits; wraps neatly rather than scrolling when it does not. */
	.wrc-proc-scope .wrc-proc__pager { gap: 6px; }
	.wrc-proc-scope .wrc-proc__pager .page-numbers {
		min-width: 38px;
		padding: 8px 10px !important;
		font-size: 0.8125rem;
	}
	.wrc-proc-scope .wrc-proc__actions { flex-direction: column; align-items: stretch; }
	.wrc-proc-scope .wrc-proc__actions .wrc-proc__cta { justify-content: center; }
	.wrc-proc-scope .wrc-proc__doc { flex-direction: column; align-items: flex-start; }
	.wrc-proc-scope .wrc-proc__docactions { width: 100%; }
	.wrc-proc-scope .wrc-proc__docactions .wrc-proc__cta { flex: 1 1 auto; justify-content: center; }
	.wrc-proc-scope .wrc-proc-record__row { flex-direction: column; gap: 2px; }
	.wrc-proc-scope .wrc-proc-record__row dt { flex: 1 1 auto; }
}