/**
 * WRC Innovations — "7 Key Challenges" table.
 *
 * Every rule is scoped under `.wrc-innovations`, a body class added only on the
 * Innovations page (see wrc_innovations_body_class() in functions.php), so
 * nothing here can reach the Elementor header, the Elementor footer, the
 * accordion above the table, or any other page. No table anywhere else on the
 * site is affected.
 *
 *
 * WHAT WAS WRONG
 * ---------------------------------------------------------------------------
 * The table is a raw `<table>` pasted into an Elementor text-editor widget with
 * `border: 3px solid black` hard-coded onto the table, every row and every third
 * cell. Measured at a 1440px viewport, it rendered 1543px wide inside a 1311px
 * container: the whole "Contribution to Expected Outcomes" column was cut off
 * and reachable only by scrolling the table sideways.
 *
 * The width came from wrc-responsive.css, not from the table itself —
 * wrc-responsive.js wraps editor tables in `.wrc-table-scroll`, and that file
 * sets `.wrc-table-scroll > table { min-width: max-content }`. Sensible for an
 * unknown wide table, wrong for this one, which has only three columns and wraps
 * perfectly well. Section 2 releases it for this table alone.
 *
 * Structure comes from assets/js/wrc-innovations.js, which rebuilds the table
 * with a real `<thead>`, promotes each challenge to a row header, drops the
 * inline borders and adds one themed icon per row. Section 1 below stands on its
 * own, so with JavaScript unavailable the table still loses the black borders and
 * still fits its column — it just has no icons.
 * ========================================================================== */

/* ==========================================================================
 * 0. Tokens
 *
 * The same names and hexes as wrc-article.css, wrc-staff.css and
 * wrc-globalsearch.css, so the child theme keeps one vocabulary.
 * ========================================================================== */

.wrc-innovations {
	--wrc-blue:       #094E9C;
	--wrc-blue-dark:  #073B78;
	--wrc-lightblue:  #00AEEF;
	--wrc-green:      #A9CC4F;
	--wrc-white:      #FFFFFF;

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

	--wrc-radius:     14px;
	--wrc-radius-sm:  10px;

	--wrc-shadow:     0 1px 2px rgba( 9, 78, 156, .04 ), 0 10px 30px rgba( 9, 78, 156, .09 );
	--wrc-shadow-row: 0 2px 6px rgba( 9, 78, 156, .07 ), 0 12px 28px rgba( 9, 78, 156, .10 );
}

/* ==========================================================================
 * 1. Baseline — applies with or without JavaScript
 *
 * Kills the black borders and lets the three columns share the available width
 * instead of overflowing it. `table-layout: fixed` is what does the real work:
 * without it the browser sizes columns to their longest unbroken content, which
 * is how a three-column table ended up 1543px wide.
 *
 * `!important` on the border colour only: the black is an inline style on the
 * elements themselves, and inline styles outrank any stylesheet. The JS removes
 * those attributes outright, so this is the no-JS safety net.
 * ========================================================================== */

/*
 * `:not(.wrc-ktable)` on every selector here matters. Once the JS has run, the
 * table carries that class and takes its styling from section 3 onwards — and
 * these rules must get out of the way, because the `border-color` !important
 * below would otherwise repaint the header's green keyline grey.
 */
.wrc-innovations .elementor-widget-text-editor table:not(.wrc-ktable) {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	border: 0 !important;
	margin: 0;
}

.wrc-innovations .elementor-widget-text-editor table:not(.wrc-ktable) tr,
.wrc-innovations .elementor-widget-text-editor table:not(.wrc-ktable) td,
.wrc-innovations .elementor-widget-text-editor table:not(.wrc-ktable) th {
	border-color: var( --wrc-grey-line ) !important;
}

/* ==========================================================================
 * 2. Release the horizontal-scroll wrapper
 *
 * `.wrc-table-scroll--fit` is added by wrc-innovations.js once it has confirmed
 * this is the challenges table. Specificity is (0,3,1) against
 * wrc-responsive.css's (0,1,1), so no !important is needed.
 * ========================================================================== */

.wrc-innovations .wrc-table-scroll--fit {
	overflow: visible;
}

.wrc-innovations .wrc-table-scroll--fit > table {
	min-width: 0;
	width: 100%;
}

/* ==========================================================================
 * 3. The table as a card
 * ========================================================================== */

.wrc-innovations table.wrc-ktable {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	border: 0;
	margin: 0;
	border-radius: var( --wrc-radius );
	box-shadow: var( --wrc-shadow );
	/* Clips the header's corners to the card's radius. */
	overflow: hidden;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/*
	 * The header gradient is painted here, on the table, rather than on the
	 * header row.
	 *
	 * Chrome paints a `<tr>` background once per cell, so a gradient set on the
	 * row restarted at every column boundary and drew two visible vertical seams
	 * across the header. Painted on the table it is one continuous sweep. The
	 * band is taller than the header on purpose — every body row below carries an
	 * opaque background of its own (see section 3) and covers the remainder.
	 *
	 * `to right` rather than an angle so the sweep is purely horizontal and the
	 * band height cannot change the colours.
	 */
	background-color: var( --wrc-white );
	background-image: linear-gradient( to right, var( --wrc-blue ) 0%, #0A62BE 55%, var( --wrc-lightblue ) 100% );
	background-repeat: no-repeat;
	background-size: 100% 240px;
}

/* Column widths. The icon column is fixed; the two text columns split the rest,
   with slightly more room for the longer challenge wording. */
.wrc-innovations table.wrc-ktable .wrc-ktable__th--icon      { width: 92px; }
.wrc-innovations table.wrc-ktable .wrc-ktable__th--challenge  { width: 54%; }
.wrc-innovations table.wrc-ktable .wrc-ktable__th--outcome    { width: auto; }

/* -- header --------------------------------------------------------------- */

/* Transparent, so the table's gradient band shows through. */
.wrc-innovations .wrc-ktable__th {
	padding: 18px 22px;
	background: transparent;
	color: var( --wrc-white );
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.45;
	text-align: left;
	vertical-align: middle;
	border: 0;
	/* The brand keyline that ties the table to the rest of the site. */
	border-bottom: 3px solid var( --wrc-green );
}

.wrc-innovations .wrc-ktable__th--icon {
	padding-left: 26px;
	padding-right: 0;
}

/* -- body rows ------------------------------------------------------------ */

.wrc-innovations .wrc-ktable__row {
	transition: box-shadow .2s ease;
}

/*
 * Row fills live on the cells, not on the `<tr>`.
 *
 * Chrome paints a row background once per cell, and with fractional column
 * widths (54% of 1311px) the seam between two of those paints antialiases into a
 * visible hairline down the table. Cell backgrounds are snapped to device pixels
 * and tile cleanly.
 *
 * Being opaque, they also mask the gradient band the table paints behind the
 * header — the header cells are the only transparent ones, so that is the only
 * place the gradient shows.
 */
.wrc-innovations .wrc-ktable__cell {
	padding: 20px 22px;
	border: 0;
	border-top: 1px solid var( --wrc-grey-line );
	background: var( --wrc-white );
	vertical-align: middle;
	font-size: 15.5px;
	line-height: 1.6;
	text-align: left;
	transition: background-color .2s ease;
}

.wrc-innovations .wrc-ktable__row:nth-child( even ) .wrc-ktable__cell {
	background: var( --wrc-grey-bg );
}

.wrc-innovations .wrc-ktable__row:first-child .wrc-ktable__cell {
	border-top: 0;
}

/*
 * Hover lifts the whole row. `position: relative` so the raised row's shadow
 * paints over its neighbours rather than under them.
 */
.wrc-innovations .wrc-ktable__row:hover,
.wrc-innovations .wrc-ktable__row:focus-within {
	position: relative;
	z-index: 1;
	box-shadow: var( --wrc-shadow-row );
}

/* A pale blue wash, so hovering reads on the white rows as well as the tinted ones. */
.wrc-innovations .wrc-ktable__row:hover .wrc-ktable__cell,
.wrc-innovations .wrc-ktable__row:focus-within .wrc-ktable__cell {
	background: #EAF4FC;
}

/* ==========================================================================
 * 4. Icon chip and row number
 * ========================================================================== */

.wrc-innovations .wrc-ktable__cell--icon {
	padding-left: 26px;
	padding-right: 0;
	width: 92px;
}

.wrc-innovations .wrc-ktable__chip {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient( 140deg, var( --wrc-blue ) 0%, var( --wrc-lightblue ) 100% );
	color: var( --wrc-white );
	box-shadow: 0 4px 12px rgba( 9, 78, 156, .22 );
	transition: transform .22s ease, box-shadow .22s ease;
}

.wrc-innovations .wrc-ktable__icon {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The row number, as a small badge tucked into the chip's lower-right. */
.wrc-innovations .wrc-ktable__num {
	position: absolute;
	right: -5px;
	bottom: -5px;
	display: grid;
	place-items: center;
	min-width: 21px;
	height: 21px;
	padding: 0 5px;
	border-radius: 999px;
	border: 2px solid var( --wrc-white );
	background: var( --wrc-green );
	color: #14370A;   /* dark on green — green text on white fails contrast */
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.wrc-innovations .wrc-ktable__row:hover .wrc-ktable__chip,
.wrc-innovations .wrc-ktable__row:focus-within .wrc-ktable__chip {
	transform: translateY( -2px ) scale( 1.06 );
	box-shadow: 0 8px 20px rgba( 9, 78, 156, .3 );
}

/* ==========================================================================
 * 5. Challenge and outcome cells
 * ========================================================================== */

/* The challenge is this row's header, so reset the browser's bold-centred default. */
.wrc-innovations .wrc-ktable__cell--challenge {
	color: var( --wrc-ink );
	font-weight: 600;
	text-align: left;
}

.wrc-innovations .wrc-ktable__cell--outcome {
	color: var( --wrc-blue );
	font-weight: 600;
}

/*
 * The flex lives on this inner wrapper, not on the `<td>`: flexing a table cell
 * takes it out of the table formatting context and the columns stop lining up.
 */
.wrc-innovations .wrc-ktable__outcome {
	display: flex;
	align-items: flex-start;
}

/*
 * The arrow reads "this challenge leads to this outcome". It is decorative, and
 * the heavier stroke keeps it legible at 20px.
 */
.wrc-innovations .wrc-ktable__arrow {
	width: 20px;
	height: 20px;
	margin: 3px 10px 0 0;
	flex: 0 0 auto;
	color: var( --wrc-lightblue );
	stroke-width: 2;
	transition: transform .22s ease, color .22s ease;
}

.wrc-innovations .wrc-ktable__row:hover .wrc-ktable__arrow,
.wrc-innovations .wrc-ktable__row:focus-within .wrc-ktable__arrow {
	transform: translateX( 3px );
	color: var( --wrc-blue );
}

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

.wrc-innovations .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;
}

.wrc-innovations table.wrc-ktable caption {
	padding: 0;
}

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

	.wrc-innovations .wrc-ktable__row,
	.wrc-innovations .wrc-ktable__chip,
	.wrc-innovations .wrc-ktable__arrow {
		transition-duration: .01ms !important;
	}

	.wrc-innovations .wrc-ktable__row:hover .wrc-ktable__chip,
	.wrc-innovations .wrc-ktable__row:hover .wrc-ktable__arrow {
		transform: none;
	}
}

/* ==========================================================================
 * 7. Responsive
 *
 * Breakpoints match wrc-responsive.css and wrc-container.css — 1024 and 767.
 * ========================================================================== */

@media ( max-width: 1024px ) {

	.wrc-innovations .wrc-ktable__th,
	.wrc-innovations .wrc-ktable__cell {
		padding: 16px 16px;
	}

	.wrc-innovations table.wrc-ktable .wrc-ktable__th--icon,
	.wrc-innovations .wrc-ktable__cell--icon {
		width: 76px;
		padding-left: 18px;
	}

	.wrc-innovations .wrc-ktable__chip {
		width: 42px;
		height: 42px;
	}

	.wrc-innovations .wrc-ktable__icon {
		width: 21px;
		height: 21px;
	}

	.wrc-innovations .wrc-ktable__cell {
		font-size: 15px;
	}
}

/*
 * Phones: a three-column table cannot stay legible at 343px, so each row becomes
 * its own card — icon and number at the top, then the challenge, then the
 * outcome under the label it belongs to. `data-label` is written onto the cells
 * by wrc-innovations.js from the table's own header text, so the labels always
 * match whatever the header says.
 */
@media ( max-width: 767px ) {

	.wrc-innovations table.wrc-ktable {
		display: block;
		background: none;
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
	}

	.wrc-innovations table.wrc-ktable thead {
		/* The per-cell labels replace it. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
	}

	.wrc-innovations table.wrc-ktable tbody {
		display: block;
	}

	.wrc-innovations .wrc-ktable__row,
	.wrc-innovations .wrc-ktable__row:nth-child( even ) {
		display: block;
		position: relative;
		margin: 0 0 14px;
		padding: 18px 18px 16px;
		background: var( --wrc-white );
		border: 1px solid var( --wrc-grey-line );
		border-radius: var( --wrc-radius );
		box-shadow: var( --wrc-shadow );
	}

	/* The green keyline moves from under the header onto each card. */
	.wrc-innovations .wrc-ktable__row::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 4px;
		border-radius: var( --wrc-radius ) 0 0 var( --wrc-radius );
		background: linear-gradient( 180deg, var( --wrc-blue ) 0%, var( --wrc-lightblue ) 100% );
	}

	.wrc-innovations .wrc-ktable__row:last-child {
		margin-bottom: 0;
	}

	.wrc-innovations .wrc-ktable__row:hover {
		box-shadow: var( --wrc-shadow );
	}

	.wrc-innovations .wrc-ktable__cell {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		font-size: 15px;
	}

	/*
	 * The card supplies the background now, so the cells go transparent. Kept as
	 * its own rule so the more specific selectors needed to beat the zebra and
	 * hover fills cannot also override the cells' padding and borders below.
	 */
	.wrc-innovations .wrc-ktable__cell,
	.wrc-innovations .wrc-ktable__row:nth-child( even ) .wrc-ktable__cell,
	.wrc-innovations .wrc-ktable__row:hover .wrc-ktable__cell,
	.wrc-innovations .wrc-ktable__row:focus-within .wrc-ktable__cell {
		background: transparent;
	}

	.wrc-innovations .wrc-ktable__cell--icon {
		width: auto;
		padding: 0 0 12px;
	}

	.wrc-innovations .wrc-ktable__chip {
		width: 44px;
		height: 44px;
	}

	/*
	 * The label above each value, so a card still says which column is which.
	 * `data-short` ("Challenge" / "Expected outcome") rather than `data-label`:
	 * the real header wording — "Contribution to Expected Outcomes in the
	 * country" — takes two lines on a 343px card and crowds out the content it is
	 * supposed to be introducing.
	 */
	.wrc-innovations .wrc-ktable__cell--challenge::before,
	.wrc-innovations .wrc-ktable__cell--outcome::before {
		content: attr( data-short );
		display: block;
		margin-bottom: 4px;
		color: var( --wrc-ink-soft );
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .09em;
		text-transform: uppercase;
		line-height: 1.4;
	}

	.wrc-innovations .wrc-ktable__cell--challenge {
		font-size: 16px;
		line-height: 1.5;
	}

	.wrc-innovations .wrc-ktable__cell--outcome {
		display: block;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var( --wrc-grey-line );
	}

	/* In a stacked card the arrow no longer points across at anything. */
	.wrc-innovations .wrc-ktable__cell--outcome .wrc-ktable__arrow {
		display: none;
	}
}