/**
 * Water SA — issue list and issue page.
 *
 * Scoped under `.wrc-watersa`, a body class added only on the Water SA landing
 * page and on a single issue (see wsa_body_class() in inc/water-sa.php), so
 * nothing here reaches the Elementor header, the Elementor footer, or any other
 * page.
 *
 * No colours or type are invented: the palette and the Montserrat stack are the
 * same tokens wrc-article.css and wrc-innovations.css already use, and the dark
 * title band, breadcrumbs and headings come from the parent theme untouched.
 *
 * Width: Water SA uses the homepage's own measure, inherited from
 * wrc-container.css (--wrc-content-width / --wrc-content-inset) rather than
 * restated here, so every band on the page — blurb, toolbar, issue list,
 * pagination and the issue pages — starts on the same line as the homepage and
 * follows it if that standard ever changes.
 */

/* ==========================================================================
 * 1. Tokens
 * ========================================================================== */

.wrc-watersa {
	--wsa-blue:      #094E9C;
	--wsa-lightblue: #00AEEF;
	--wsa-green:     #A9CC4F;
	--wsa-white:     #FFFFFF;

	--wsa-ink:       #16202C;
	--wsa-ink-soft:  #4A5764;
	--wsa-grey-bg:   #F4F7FA;
	--wsa-grey-line: #E1E8EF;

	--wsa-radius:    12px;
	--wsa-radius-sm: 8px;

	--wsa-shadow:    0 1px 2px rgba( 9, 78, 156, .04 ), 0 8px 24px rgba( 9, 78, 156, .07 );

	/*
	 * The Water SA measure IS the homepage measure.
	 *
	 * Inherited from wrc-container.css rather than restated, so Water SA tracks the
	 * homepage automatically: change --wrc-content-width once and this page follows.
	 * The homepage is Elementor's 1650px content width with a 30px gutter (16px on
	 * phones), which is what these tokens hold.
	 *
	 * The fallbacks only matter if this stylesheet ever loads without
	 * wrc-container.css, which the enqueue dependency prevents.
	 */
	--wsa-width:  var( --wrc-content-width, 1650px );
	--wsa-gutter: var( --wrc-gutter, 30px );

	/*
	 * The single alignment line every band on the page starts from — the same
	 * inset the homepage and the other standardised sections use.
	 *
	 * The 100% inside it resolves against the element the value is *used* on, so
	 * only ever apply this to something that is already full width.
	 */
	--wsa-inset: var(
		--wrc-content-inset,
		max( var( --wsa-gutter ), calc( ( 100% - var( --wsa-width ) ) / 2 ) )
	);
}

.wrc-watersa .wsa-icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wrc-watersa .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
 * 2. Issue page geometry
 *
 * Same treatment as the article template: the band stays full bleed, its inner
 * container and the content column share one centred 1180px box, and the parent
 * theme's 800px cap and 80px bottom margin come off.
 *
 * `body.wrc-watersa …` so these outrank the parent theme's `.postbarLeftNarrow …`
 * pairs on specificity rather than on load order.
 * ========================================================================== */

body.wrc-watersa .page-header > .container,
body.wrc-watersa .wsa-issue-page > .container,
body.wrc-watersa .container.container_vis {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: var( --wsa-inset );
	padding-right: var( --wsa-inset );
	box-sizing: border-box;
}

body.wrc-watersa .wsa-issue-page #core {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: clamp( 30px, 3.4vw, 46px ) 0 0;
	float: none;
}

body.wrc-watersa .wsa-issue-page .fullcontent {
	width: 100%;
	max-width: 100%;
	margin: 0 auto clamp( 34px, 4vw, 58px );
	padding: 0;
	float: none;
	overflow-x: clip;
}

/*
 * The same site-wide custom-CSS rule that breaks the article meta row out of its
 * column — `.p-border, .meta, … { width: 1180px !important }`, saved against the
 * Elementor kit — would do the same here to anything carrying those classes.
 * Neutralised inside the issue page only.
 */
.wrc-watersa .wsa-issue-page .p-border,
.wrc-watersa .wsa-issue-page .meta {
	width: auto !important;
	max-width: 100% !important;
}

.wrc-watersa .wsa-issue-page .page-header h1.entry-title {
	margin: 0;
	overflow-wrap: break-word;
}

/* ==========================================================================
 * 3. Issue page — meta bar
 * ========================================================================== */

.wrc-watersa .wsa-issue__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 0 clamp( 22px, 2.6vw, 32px );
	padding-bottom: 16px;
	border-bottom: 1px solid var( --wsa-grey-line );
}

.wrc-watersa .wsa-issue__meta {
	margin: 0;
	color: var( --wsa-ink-soft );
	font-size: 14px;
	font-weight: 600;
}

.wrc-watersa .wsa-issue__sep {
	margin: 0 8px;
	opacity: .5;
}

.wrc-watersa .wsa-issue__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var( --wsa-blue );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .16s ease, border-color .16s ease;
}

.wrc-watersa .wsa-issue__back:hover,
.wrc-watersa .wsa-issue__back:focus-visible {
	color: var( --wsa-lightblue );
	border-bottom-color: var( --wsa-lightblue );
}

/* ==========================================================================
 * 4. Issue page — the article list
 *
 * An ordered list, but numbered by the row's own Sort Order rather than by the
 * browser's counter, so what a reader sees matches what the administrator set.
 * The counter is decorative; the real order comes from the query.
 * ========================================================================== */

.wrc-watersa .wsa-articles {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: wsa-article;
}

.wrc-watersa .wsa-articles__item {
	counter-increment: wsa-article;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin: 0;
	padding: 20px 0 20px 46px;
	position: relative;
	border-top: 1px solid var( --wsa-grey-line );
	transition: background-color .18s ease;
}

.wrc-watersa .wsa-articles__item:first-child {
	border-top: 0;
}

/* The index marker, leading each row. */
.wrc-watersa .wsa-articles__item::before {
	content: counter( wsa-article );
	position: absolute;
	left: 0;
	top: 22px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var( --wsa-grey-bg );
	color: var( --wsa-blue );
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
}

.wrc-watersa .wsa-articles__item:hover {
	background: #F8FBFE;
}

.wrc-watersa .wsa-articles__item:hover::before {
	background: var( --wsa-blue );
	color: var( --wsa-white );
}

.wrc-watersa .wsa-articles__body {
	min-width: 0;
}

.wrc-watersa .wsa-articles__title {
	margin: 0;
	color: var( --wsa-ink );
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.5;
	overflow-wrap: break-word;
}

/* Authors: names only. The importer strips the internal IDs the old metadata
   carried, and nothing here would render them anyway. */
.wrc-watersa .wsa-articles__authors {
	margin: 6px 0 0;
	color: var( --wsa-blue );
	font-size: 14px;
	font-weight: 500;
	font-style: italic;
}

.wrc-watersa .wsa-articles__page {
	margin: 4px 0 0;
	color: var( --wsa-ink-soft );
	font-size: 13px;
	font-weight: 500;
}

.wrc-watersa .wsa-articles__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 2px;
}

/* Secondary to the View button — same target size, less weight. */
.wrc-watersa .wsa-download {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	color: var( --wsa-ink-soft );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .16s ease, border-color .16s ease;
}

.wrc-watersa .wsa-download:hover,
.wrc-watersa .wsa-download:focus-visible {
	color: var( --wsa-blue );
	border-bottom-color: var( --wsa-lightblue );
}

/* Honest about the 69 archive articles whose scans are missing. */
.wrc-watersa .wsa-nopdf {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var( --wsa-grey-bg );
	color: var( --wsa-ink-soft );
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.wrc-watersa .wsa-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var( --wsa-grey-line );
	border-radius: 999px;
	background: var( --wsa-white );
	color: var( --wsa-blue );
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.wrc-watersa .wsa-btn:hover,
.wrc-watersa .wsa-btn:focus-visible {
	background: var( --wsa-blue );
	border-color: var( --wsa-blue );
	color: var( --wsa-white );
	transform: translateY( -2px );
	box-shadow: var( --wsa-shadow );
}

.wrc-watersa .wsa-empty {
	margin: 0;
	padding: 22px;
	border-radius: var( --wsa-radius );
	background: var( --wsa-grey-bg );
	color: var( --wsa-ink-soft );
}

/* ==========================================================================
 * 5. Landing page — the issue list
 *
 * Rendered by [water_sa_issues]. Flat on purpose: issue straight to articles,
 * with no Volume tier in between.
 * ========================================================================== */

/* ==========================================================================
 * 2b. The Elementor blurb needs no override
 *
 * The intro, archive blurb, open-access text and impact factors are top-level
 * Elementor containers, and wrc-container.css already caps them at the homepage's
 * --wrc-content-width with the homepage gutter — for `wp-post` documents as well
 * as `wp-page`, which matters because Elementor labels this page `wp-post`.
 *
 * An earlier revision of this file re-capped them at 1400px. That override is gone:
 * duplicating the site standard here is exactly how two files end up disagreeing
 * about the width. The blurb is left to the shared rules, and everything this file
 * adds uses --wsa-inset, which resolves to the same line.
 * ========================================================================== */

/*
 * The old WP File Download folder tree — "Water SA Journals > Volume 3 1977 > …"
 * with raw filenames for titles. Superseded by the issue list below it.
 *
 * Hidden rather than deleted because it is an Elementor widget stored in the
 * page's post meta, which a stylesheet cannot remove. Scoped to the Water SA page,
 * so any other page using the plugin is untouched. Once the widget is deleted in
 * Elementor this rule simply stops matching anything.
 */
.wrc-watersa .elementor-widget-wpfd {
	display: none !important;
}

/*
 * Wrapper for the automatically appended list (see wsa_append_archive_to_landing).
 * Elementor's own containers have closed by this point, so the measure has to be
 * re-established here or the list would run edge to edge.
 */
.wrc-watersa .wsa-archive-outer {
	width: 100%;
	max-width: none;
	margin: 0;
	/* Shared inset, so the list starts exactly where the blurb above it does. */
	padding-left: var( --wsa-inset );
	padding-right: var( --wsa-inset );
	padding-bottom: clamp( 34px, 4vw, 58px );
	box-sizing: border-box;
}

.wrc-watersa .wsa-archive {
	margin: clamp( 26px, 3vw, 40px ) 0 0;
}

/*
 * The site's own section-heading format, as used further up this same page for
 * "Water SA / Science Citation Index Impact Factor" and "Water SA / Open Access
 * Policy". Measured from those headings rather than invented:
 *
 *   eyebrow  h6-sized 12px, weight 500, #66777D, sentence case
 *   rule     40 x 2px in #00AEEF, sitting 32px below the top of the eyebrow
 *   title    32px, weight 700, UPPERCASE, #222
 *
 * The parent theme draws that rule with a `.dekoline::before`; reproduced here on
 * the eyebrow itself so this block does not depend on Elementor widget classes.
 */
.wrc-watersa .wsa-archive__head {
	margin: 0 0 clamp( 18px, 2vw, 26px );
}

.wrc-watersa .wsa-archive__eyebrow {
	position: relative;
	margin: 0;
	/* 12px line + 22px padding leaves room for the rule pinned at 32px below. */
	padding-bottom: 22px;
	color: #66777D;
	font-size: 12px;
	font-weight: 500;
	line-height: 12px;
	letter-spacing: 0;
	text-transform: none;
}

.wrc-watersa .wsa-archive__eyebrow::before {
	content: '';
	position: absolute;
	left: 0;
	/* The same 32px offset the parent theme's .dekoline::before uses. */
	top: 32px;
	width: 40px;
	height: 2px;
	background: var( --wsa-lightblue );
}

.wrc-watersa .wsa-archive__title {
	margin: 22px 0 0;
	padding: 0;
	color: #222222;
	font-size: clamp( 24px, 2.4vw, 32px );
	font-weight: 700;
	/* 1, matching the site's 32px line on a 32px heading. */
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* -- search / filter / sort toolbar --------------------------------------- */

.wrc-watersa .wsa-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 16px;
	border: 1px solid var( --wsa-grey-line );
	border-radius: var( --wsa-radius );
	background: var( --wsa-grey-bg );
}

/* The search field takes the slack; the dropdowns keep their natural size. */
.wrc-watersa .wsa-toolbar__search {
	position: relative;
	flex: 1 1 320px;
	min-width: 240px;
}

.wrc-watersa .wsa-toolbar__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY( -50% );
	font-size: 18px;
	color: var( --wsa-blue );
	pointer-events: none;
}

.wrc-watersa .wsa-toolbar__search input[type="search"] {
	width: 100%;
	height: 46px;
	/* room for the icon */
	padding: 0 14px 0 42px;
	border: 1px solid var( --wsa-grey-line );
	border-radius: var( --wsa-radius-sm );
	background: var( --wsa-white );
	color: var( --wsa-ink );
	font-family: inherit;
	font-size: 15px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.wrc-watersa .wsa-toolbar__search input::placeholder {
	color: #7C8894;
}

.wrc-watersa .wsa-toolbar__field select {
	height: 46px;
	max-width: 100%;
	padding: 0 34px 0 14px;
	border: 1px solid var( --wsa-grey-line );
	border-radius: var( --wsa-radius-sm );
	background-color: var( --wsa-white );
	/* Chevron drawn inline so no image request is needed. */
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23094E9C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px 16px;
	color: var( --wsa-ink );
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.wrc-watersa .wsa-btn--solid {
	min-height: 46px;
	padding: 0 22px;
	border-color: var( --wsa-blue );
	background: var( --wsa-blue );
	color: var( --wsa-white );
	cursor: pointer;
}

.wrc-watersa .wsa-btn--solid:hover,
.wrc-watersa .wsa-btn--solid:focus-visible {
	background: var( --wsa-lightblue );
	border-color: var( --wsa-lightblue );
}

.wrc-watersa .wsa-toolbar__clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var( --wsa-ink-soft );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.wrc-watersa .wsa-toolbar__clear:hover,
.wrc-watersa .wsa-toolbar__clear:focus-visible {
	color: #B32D2E;
	border-bottom-color: #B32D2E;
}

/* Submitting is a normal page load; this just stops it looking inert. */
.wrc-watersa .wsa-toolbar.is-loading {
	opacity: .6;
	pointer-events: none;
}

/* -- result count and search highlighting -------------------------------- */

.wrc-watersa .wsa-count {
	margin: 0 0 14px;
	color: var( --wsa-ink-soft );
	font-size: 14px;
	font-weight: 500;
}

.wrc-watersa .wsa-count strong {
	color: var( --wsa-blue );
	font-weight: 700;
}

.wrc-watersa .wsa-mark {
	padding: 0 2px;
	border-radius: 3px;
	/* Dark text on the brand green: green text on white fails contrast. */
	background: var( --wsa-green );
	color: #14370A;
}

/* -- the issue list ------------------------------------------------------
 *
 * A vertical list, not a grid: one issue per row, title then date then a
 * View Issue action.
 * ----------------------------------------------------------------------- */

.wrc-watersa .wsa-issues {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var( --wsa-grey-line );
}

.wrc-watersa .wsa-issues__item {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var( --wsa-grey-line );
}

.wrc-watersa .wsa-issues__item::before,
.wrc-watersa .wsa-issues__item::marker {
	content: none;
}

.wrc-watersa .wsa-issues__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 16px;
	transition: background-color .18s ease;
}

.wrc-watersa .wsa-issues__item:hover .wsa-issues__row,
.wrc-watersa .wsa-issues__item:focus-within .wsa-issues__row {
	background: #F8FBFE;
}

.wrc-watersa .wsa-issues__text {
	min-width: 0;
}

.wrc-watersa .wsa-issues__label {
	margin: 0;
	color: var( --wsa-blue );
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.wrc-watersa .wsa-issues__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 5px 0 0;
	color: var( --wsa-ink-soft );
	font-size: 13.5px;
	font-weight: 500;
}

.wrc-watersa .wsa-issues__date {
	font-weight: 600;
}

.wrc-watersa .wsa-issues__sep {
	opacity: .45;
}

.wrc-watersa .wsa-issues__hits {
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba( 0, 174, 239, .13 );
	color: var( --wsa-blue );
	font-size: 12px;
	font-weight: 700;
}

/* Which articles matched the search, so the row explains itself. */
.wrc-watersa .wsa-issues__preview {
	margin: 10px 0 0;
	padding: 0 0 0 14px;
	border-left: 3px solid var( --wsa-grey-line );
	list-style: none;
}

.wrc-watersa .wsa-issues__preview li {
	margin: 0 0 5px;
	font-size: 13.5px;
	line-height: 1.5;
}

.wrc-watersa .wsa-issues__preview li::before,
.wrc-watersa .wsa-issues__preview li::marker {
	content: none;
}

.wrc-watersa .wsa-issues__preview-title {
	color: var( --wsa-ink );
	font-weight: 600;
}

.wrc-watersa .wsa-issues__preview-authors {
	display: block;
	color: var( --wsa-ink-soft );
	font-style: italic;
}

.wrc-watersa .wsa-issues__preview-more {
	color: var( --wsa-ink-soft );
	font-style: italic;
}

.wrc-watersa .wsa-issues__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid var( --wsa-grey-line );
	border-radius: 999px;
	background: var( --wsa-white );
	color: var( --wsa-blue );
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.wrc-watersa .wsa-issues__cta:hover,
.wrc-watersa .wsa-issues__cta:focus-visible {
	background: var( --wsa-blue );
	border-color: var( --wsa-blue );
	color: var( --wsa-white );
	transform: translateY( -1px );
	box-shadow: var( --wsa-shadow );
}

.wrc-watersa .wsa-issues__cta .wsa-icon {
	font-size: 17px;
	transition: transform .18s ease;
}

.wrc-watersa .wsa-issues__cta:hover .wsa-icon {
	transform: translateX( 3px );
}

/* -- pagination ---------------------------------------------------------- */

.wrc-watersa .wsa-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 22px 0 0;
}

/*
 * `width` and `border-color` carry !important here for a specific reason.
 *
 * The site-wide custom CSS saved against the Elementor kit reads:
 *
 *     .p-border, .sidebar_item, .meta, …, .page-numbers, … {
 *         border-color: #ffffff !important;
 *         width: 1180px !important;
 *     }
 *
 * `.page-numbers` is in that list, so every pagination link was being forced to
 * 1180px wide with white borders. That is what made page 1 render as a full-width
 * blue bar and pages 2, 3, … 8, Next each take a line of their own instead of
 * sitting in a row — 1180px items cannot share a line, so the flex row wrapped
 * after every one of them.
 *
 * Matching !important with a more specific selector is the only way to get a sane
 * width here without editing that site-wide CSS, which is configuration and is
 * left alone. Same correction already applied to the article meta row in section 2.
 */
.wrc-watersa .wsa-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	width: auto !important;
	min-width: 40px;
	max-width: 100% !important;
	height: 40px;
	/*
	 * The parent theme gives these `margin: 10px 8px 50px 0` — and a different
	 * margin again on `.current` and `.dots`. Those uneven margins are why the
	 * numbers sat at three different heights, and the 50px bottom is what made the
	 * row 100px tall. Spacing comes from the flex `gap` instead.
	 */
	margin: 0;
	padding: 0 12px;
	border: 1px solid var( --wsa-grey-line );
	border-color: var( --wsa-grey-line ) !important;
	border-radius: var( --wsa-radius-sm );
	background: var( --wsa-white );
	color: var( --wsa-blue );
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.wrc-watersa .wsa-pagination a.page-numbers:hover,
.wrc-watersa .wsa-pagination a.page-numbers:focus-visible {
	background: var( --wsa-lightblue );
	border-color: var( --wsa-lightblue ) !important;
	color: var( --wsa-white );
}

.wrc-watersa .wsa-pagination .page-numbers.current {
	background: var( --wsa-blue );
	border-color: var( --wsa-blue ) !important;
	color: var( --wsa-white );
}

.wrc-watersa .wsa-pagination .page-numbers.dots {
	border-color: transparent !important;
	background: none;
	/* Its own margin rule is separate from the one above, so reset it here too. */
	margin: 0;
	min-width: 24px;
	padding: 0 4px;
}

/* ==========================================================================
 * 6. Accessibility
 * ========================================================================== */

.wrc-watersa .wsa-issues__link:focus-visible,
.wrc-watersa .wsa-btn:focus-visible,
.wrc-watersa .wsa-issue__back:focus-visible {
	outline: 3px solid var( --wsa-lightblue );
	outline-offset: 3px;
}

.wrc-watersa .page-header a:focus-visible {
	outline: 3px solid var( --wsa-green );
	outline-offset: 3px;
}

/* ==========================================================================
 * 8. Article search results
 *
 * A search returns articles, not issues, so a result has to carry everything
 * needed to recognise the paper — title, authors, issue, date — and every action
 * worth taking on it. The card is deliberately NOT a single link: the title, the
 * PDF and the issue are three different destinations and each is its own target.
 * ========================================================================== */

.wrc-watersa .wsa-results {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}

.wrc-watersa .wsa-result {
	margin: 0;
	padding: 20px 22px;
	border: 1px solid var( --wsa-grey-line );
	border-radius: var( --wsa-radius );
	background: var( --wsa-white );
	transition: border-color .18s ease, box-shadow .18s ease;
}

.wrc-watersa .wsa-result:hover {
	border-color: #C9D8E8;
	box-shadow: var( --wsa-shadow );
}

.wrc-watersa .wsa-result__title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.34;
	/* Long journal titles must wrap, never widen the card or clip. */
	overflow-wrap: anywhere;
}

.wrc-watersa .wsa-result__title a {
	color: var( --wsa-blue );
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .16s ease, border-color .16s ease;
}

.wrc-watersa .wsa-result__title a:hover,
.wrc-watersa .wsa-result__title a:focus-visible {
	color: var( --wsa-lightblue );
	border-bottom-color: var( --wsa-lightblue );
}

.wrc-watersa .wsa-result__line {
	margin: 0 0 6px;
	color: var( --wsa-ink-soft );
	font-size: 13.5px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.wrc-watersa .wsa-result__label {
	font-weight: 700;
	color: var( --wsa-ink );
}

.wrc-watersa .wsa-result__sep {
	margin: 0 6px;
	color: var( --wsa-grey-line );
}

.wrc-watersa .wsa-result__abstract {
	margin: 10px 0 0;
	color: var( --wsa-ink-soft );
	font-size: 13.5px;
	line-height: 1.6;
}

.wrc-watersa .wsa-result__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var( --wsa-grey-line );
}

/* Secondary by design — the issue is the fallback, not the destination. */
.wrc-watersa .wsa-result__issue-link,
.wrc-watersa .wsa-article__issue-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	color: var( --wsa-ink-soft );
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .03em;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .16s ease, border-color .16s ease;
}

.wrc-watersa .wsa-result__issue-link:hover,
.wrc-watersa .wsa-result__issue-link:focus-visible,
.wrc-watersa .wsa-article__issue-link:hover,
.wrc-watersa .wsa-article__issue-link:focus-visible {
	color: var( --wsa-blue );
	border-bottom-color: var( --wsa-lightblue );
}

.wrc-watersa .wsa-result__issue-link .wsa-icon,
.wrc-watersa .wsa-article__issue-link .wsa-icon {
	width: 15px;
	height: 15px;
}

/* -- the "issues also match" strip ---------------------------------------- */

.wrc-watersa .wsa-results__issues {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var( --wsa-grey-line );
}

.wrc-watersa .wsa-results__issues-title {
	margin: 0 0 12px;
	color: var( --wsa-ink-soft );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.wrc-watersa .wsa-results__issue-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wrc-watersa .wsa-results__issue-list li {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid var( --wsa-grey-line );
	border-radius: 999px;
	background: var( --wsa-grey-bg );
}

.wrc-watersa .wsa-results__issue-list a {
	color: var( --wsa-blue );
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.wrc-watersa .wsa-results__issue-list a:hover,
.wrc-watersa .wsa-results__issue-list a:focus-visible {
	color: var( --wsa-lightblue );
}

.wrc-watersa .wsa-results__issue-count {
	color: var( --wsa-ink-soft );
	font-size: 11.5px;
}

/* -- "taken straight here" notice ----------------------------------------- */

.wrc-watersa .wsa-jump {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid var( --wsa-grey-line );
	border-left: 3px solid var( --wsa-lightblue );
	border-radius: var( --wsa-radius-sm );
	background: var( --wsa-grey-bg );
	color: var( --wsa-ink-soft );
	font-size: 13.5px;
	line-height: 1.5;
}

.wrc-watersa .wsa-jump .wsa-icon {
	width: 16px;
	height: 16px;
	flex: none;
	color: var( --wsa-lightblue );
}

.wrc-watersa .wsa-jump strong {
	color: var( --wsa-ink );
}

.wrc-watersa .wsa-jump a {
	margin-left: auto;
	color: var( --wsa-blue );
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .16s ease, border-color .16s ease;
}

.wrc-watersa .wsa-jump a:hover,
.wrc-watersa .wsa-jump a:focus-visible {
	color: var( --wsa-lightblue );
	border-bottom-color: var( --wsa-lightblue );
}

/* ==========================================================================
 * 9. The single article page
 * ========================================================================== */

.wrc-watersa .wsa-article {
	padding: 4px 0 0;
}

.wrc-watersa .wsa-article__meta {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 10px 20px;
	margin: 0 0 26px;
	padding: 20px 22px;
	border: 1px solid var( --wsa-grey-line );
	border-radius: var( --wsa-radius );
	background: var( --wsa-grey-bg );
}

.wrc-watersa .wsa-article__meta dt {
	margin: 0;
	color: var( --wsa-ink-soft );
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.7;
}

.wrc-watersa .wsa-article__meta dd {
	margin: 0;
	color: var( --wsa-ink );
	font-size: 14.5px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.wrc-watersa .wsa-article__meta dd a {
	color: var( --wsa-blue );
	text-decoration: none;
	border-bottom: 1px solid var( --wsa-grey-line );
}

.wrc-watersa .wsa-article__meta dd a:hover,
.wrc-watersa .wsa-article__meta dd a:focus-visible {
	color: var( --wsa-lightblue );
	border-bottom-color: var( --wsa-lightblue );
}

.wrc-watersa .wsa-article__section {
	margin: 0 0 10px;
	color: var( --wsa-blue );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.wrc-watersa .wsa-article__abstract {
	margin: 0 0 26px;
}

.wrc-watersa .wsa-article__abstract p {
	margin: 0 0 12px;
	color: var( --wsa-ink );
	font-size: 15px;
	line-height: 1.7;
}

.wrc-watersa .wsa-article__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding-top: 20px;
	border-top: 1px solid var( --wsa-grey-line );
}

.wrc-watersa .wsa-article__actions .wsa-nopdf {
	margin: 0;
	white-space: normal;
}

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

	.wrc-watersa .wsa-issues__link,
	.wrc-watersa .wsa-btn,
	.wrc-watersa .wsa-articles__item,
	.wrc-watersa .wsa-issues__link .wsa-icon {
		transition-duration: .01ms !important;
	}

	.wrc-watersa .wsa-issues__link:hover,
	.wrc-watersa .wsa-btn:hover {
		transform: none;
	}

	.wrc-watersa .wsa-issues__link:hover .wsa-icon {
		transform: none;
	}
}

/* ==========================================================================
 * 7. Responsive
 * ========================================================================== */

@media ( max-width: 1024px ) {

	.wrc-watersa .wsa-toolbar {
		padding: 14px;
	}

	/* Search on its own line, the two dropdowns sharing the next. */
	.wrc-watersa .wsa-toolbar__search {
		flex: 1 1 100%;
	}

	.wrc-watersa .wsa-toolbar__field {
		flex: 1 1 200px;
	}

	.wrc-watersa .wsa-toolbar__field select {
		width: 100%;
	}

	.wrc-watersa .wsa-issues__label {
		font-size: 16px;
	}

	/* Labels above values rather than a 150px column eating the tablet width. */
	.wrc-watersa .wsa-article__meta {
		grid-template-columns: 130px 1fr;
		gap: 8px 16px;
		padding: 18px;
	}
}

@media ( max-width: 767px ) {

	.wrc-watersa .wsa-issue-page .page-header {
		padding-top: 34px;
		padding-bottom: 30px;
	}

	.wrc-watersa .wsa-issue-page .page-header h1.entry-title {
		font-size: 24px;
		line-height: 1.26;
	}

	/* The View Issue button drops beneath the title rather than crushing it. */
	.wrc-watersa .wsa-issues__row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 16px 12px;
	}

	.wrc-watersa .wsa-issues__cta {
		justify-content: center;
		width: 100%;
	}

	.wrc-watersa .wsa-issues__label {
		font-size: 15.5px;
	}

	.wrc-watersa .wsa-toolbar {
		gap: 8px;
	}

	.wrc-watersa .wsa-toolbar__field,
	.wrc-watersa .wsa-btn--solid {
		flex: 1 1 100%;
	}

	.wrc-watersa .wsa-btn--solid {
		justify-content: center;
	}

	.wrc-watersa .wsa-pagination .page-numbers {
		min-width: 36px;
		height: 36px;
		padding: 0 9px;
		font-size: 13px;
	}

	/* The PDF button drops under the title rather than squeezing it. */
	.wrc-watersa .wsa-articles__item {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding-left: 40px;
	}

	.wrc-watersa .wsa-articles__item::before {
		width: 26px;
		height: 26px;
		top: 20px;
		font-size: 11.5px;
	}

	.wrc-watersa .wsa-articles__title {
		font-size: 15.5px;
	}

	.wrc-watersa .wsa-articles__actions {
		padding-top: 0;
	}

	.wrc-watersa .wsa-btn {
		justify-content: center;
	}

	.wrc-watersa .wsa-articles__actions {
		flex-wrap: wrap;
		gap: 8px 16px;
	}

	/* -- search results ---------------------------------------------------- */

	.wrc-watersa .wsa-result {
		padding: 16px 14px;
	}

	.wrc-watersa .wsa-result__title {
		font-size: 15.5px;
	}

	/*
	 * Buttons go full width and stack. margin-left:auto would otherwise strand
	 * "View Full Issue" on a line of its own against the right edge.
	 */
	.wrc-watersa .wsa-result__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.wrc-watersa .wsa-result__actions .wsa-btn {
		width: 100%;
		justify-content: center;
	}

	.wrc-watersa .wsa-result__issue-link {
		margin-left: 0;
		justify-content: center;
		padding-top: 2px;
	}

	.wrc-watersa .wsa-results__issue-list li {
		width: 100%;
		justify-content: space-between;
	}

	/* -- the article page -------------------------------------------------- */

	.wrc-watersa .wsa-article-page .page-header {
		padding-top: 34px;
		padding-bottom: 30px;
	}

	.wrc-watersa .wsa-article-page .page-header h1.entry-title {
		font-size: 22px;
		line-height: 1.28;
	}

	/* One column: a 130px label column leaves nothing usable for the value. */
	.wrc-watersa .wsa-article__meta {
		grid-template-columns: 1fr;
		gap: 2px;
		padding: 16px;
	}

	.wrc-watersa .wsa-article__meta dt {
		margin-top: 10px;
	}

	.wrc-watersa .wsa-article__meta dt:first-child {
		margin-top: 0;
	}

	.wrc-watersa .wsa-article__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.wrc-watersa .wsa-article__actions .wsa-btn {
		width: 100%;
		justify-content: center;
	}

	.wrc-watersa .wsa-article__issue-link {
		margin-left: 0;
		justify-content: center;
	}

	/* The escape link drops to its own full-width line rather than crowding the text. */
	.wrc-watersa .wsa-jump a {
		margin-left: 0;
		width: 100%;
	}
}

/* ==========================================================================
 * Landing page: the one full-bleed section
 *
 * The "Open Access Policy" block on /research/water-sa/ (Elementor container
 * 68bf2f2) is an `e-con-full`, so wrc-container.css leaves it edge to edge by
 * design — that file treats full-width containers as a deliberate choice by the
 * page author and never touches them.
 *
 * On this page it was the only section that did so: everything else on the page,
 * and every section of /about-us/, starts on the shared alignment line, so the
 * block's image ran out to x=0 while its neighbours began at 135px (measured at
 * a 1920px viewport). This pulls just that container back onto the same line.
 *
 * The `min()` reproduces what a boxed section resolves to, so the two stay in
 * step at every width: capped at the content width above it, and inset by the
 * standard gutter below it.
 *
 *   1920px viewport -> min( 1860, 1650 ) = 1650, centred -> 135 … 1785
 *   1600px viewport -> min( 1540, 1650 ) = 1540          ->  30 … 1570
 *
 * Scoped to the page and the element, so no other full-bleed section anywhere
 * on the site is affected. Remove this block to restore the edge-to-edge look.
 * ========================================================================== */

.page-id-67616 .elementor[data-elementor-type="wp-post"] > .e-con.elementor-element-68bf2f2 {
	max-width: min(
		calc( 100% - 2 * var( --wrc-gutter, 30px ) ),
		var( --wrc-content-width, 1650px )
	);
	margin-left: auto;
	margin-right: auto;
}