/**
 * Persimmon performance table — [persimmon_performance] shortcode.
 *
 * Styled to sit inside the existing Performance page content column and match
 * the site's typography (Playfair Display headings, Open Sans body) and the
 * bundled Foundation grid. Kept intentionally light so it inherits the theme's
 * colours and fonts rather than redefining them.
 */

.persimmon-performance {
	margin: 0 0 1.5rem;
}

.persimmon-performance__heading {
	margin: 0 0 1rem;
}

.persimmon-performance__asof {
	font-weight: 400;
	font-size: 0.7em;
	white-space: nowrap;
}

/* Horizontal scroll on narrow screens instead of squashing the table. */
.persimmon-performance__table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.persimmon-performance__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.4;
}

.persimmon-performance__table caption {
	text-align: left;
}

.persimmon-performance__table th,
.persimmon-performance__table td {
	padding: 0.65rem 0.75rem;
	text-align: right;
	border-bottom: 1px solid #e2e2e2;
	white-space: nowrap;
}

/* Column headers + the first (row-label) column. */
.persimmon-performance__table thead th {
	font-weight: 700;
	border-bottom-width: 2px;
	border-bottom-color: #c9c9c9;
}

.persimmon-performance__rowhead {
	text-align: left;
	font-weight: 600;
	white-space: normal;
	min-width: 14rem;
}

.persimmon-performance__table tbody tr:nth-child(even) {
	background: #f6f6f6;
}

.persimmon-performance__table tbody tr:last-child th,
.persimmon-performance__table tbody tr:last-child td {
	border-bottom: 0;
}

.persimmon-performance__note {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	color: #5b5b5b;
}

.persimmon-performance__disclaimer {
	line-height: 1.5;
}

.persimmon-performance--unavailable .persimmon-performance__note {
	font-size: 0.95rem;
	color: #333;
}

/* Screen-reader-only caption helper (Foundation provides .show-for-sr too,
   but define it here in case the page is viewed without that vendor CSS). */
.persimmon-performance .show-for-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * iPad + mobile (<= 1023px): stack each fund into a card so the six return
 * periods read top-to-bottom as "label … value" pairs — no horizontal scroll.
 * ---------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
	/* No longer need the scroll container to scroll. */
	.persimmon-performance__table-wrap {
		overflow-x: visible;
	}

	.persimmon-performance__table {
		font-size: 0.9rem;
		border-collapse: separate;
		border-spacing: 0;
	}

	/* Linearise the table. */
	.persimmon-performance__table,
	.persimmon-performance__table tbody,
	.persimmon-performance__table tr,
	.persimmon-performance__table th,
	.persimmon-performance__table td {
		display: block;
		width: 100%;
	}

	/* The column-header row is redundant once each cell carries its own label. */
	.persimmon-performance__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	/* Each data row becomes a bordered card. */
	.persimmon-performance__table tbody tr {
		margin: 0 0 1.25rem;
		border: 1px solid #d8d8d8;
		border-radius: 4px;
		overflow: hidden;
	}
	.persimmon-performance__table tbody tr:nth-child(even) {
		background: transparent;
	}

	/* Fund / benchmark name = card header. */
	.persimmon-performance__table .persimmon-performance__rowhead {
		min-width: 0;
		margin: 0;
		padding: 0.7rem 0.85rem;
		background: #f2f2f2;
		border-bottom: 1px solid #d8d8d8;
		font-weight: 700;
		text-align: left;
		white-space: normal;
	}

	/* Value cells: period label on the left, return on the right. */
	.persimmon-performance__table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 0.55rem 0.85rem;
		border-bottom: 1px solid #ededed;
		text-align: right;
		white-space: nowrap;
	}
	.persimmon-performance__table tbody td::before {
		content: attr(data-label);
		margin-right: 1.5rem;
		color: #5b5b5b;
		font-weight: 600;
		text-align: left;
	}
	.persimmon-performance__table tbody tr td:last-child {
		border-bottom: 0;
	}
}