/*
 * Seasonal Price Tables – front end.
 *
 * Colours are custom properties so a theme can restyle the tables without
 * touching this file, e.g.
 *   .spt { --spt-accent: #0b7285; --spt-head-bg: #e3f2f7; }
 */

.spt {
	--spt-head-bg: #fbe36a;
	--spt-head-text: #1c1c1c;
	--spt-row-bg: #ffffff;
	--spt-row-alt: #eef7fb;
	--spt-border: #cfe1ea;
	--spt-text: inherit;
	--spt-muted: #4a5560;
	--spt-tag-bg: #fde68a;
	--spt-tag-text: #3b2f00;
	--spt-accent: #1b6f8c;
	--spt-section-bg: #1b6f8c;
	--spt-section-text: #ffffff;
	--spt-radius: 8px;

	container-type: inline-size;
	container-name: spt;
	margin: 0 0 2.5em;
	color: var(--spt-text);
}

.spt *,
.spt *::before,
.spt *::after {
	box-sizing: border-box;
}

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

.spt-intro > :last-child,
.spt-notes > :last-child {
	margin-bottom: 0;
}

.spt-intro {
	margin-bottom: 1em;
}

.spt-notes {
	margin-top: 1em;
	font-size: 0.95em;
}

/* Scroll container: wide tables scroll sideways rather than break the layout. */
.spt-scroll {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--spt-border);
	border-radius: var(--spt-radius);
	-webkit-overflow-scrolling: touch;
}

.spt-scroll:focus-visible {
	outline: 3px solid var(--spt-accent);
	outline-offset: 2px;
}

.spt-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border: 0;
	font-size: 0.95em;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	background: var(--spt-row-bg);
}

.spt-table caption {
	padding: 0.85em 1em;
	text-align: left;
	caption-side: top;
	background: var(--spt-row-bg);
	border-bottom: 1px solid var(--spt-border);
}

.spt-caption-title {
	display: block;
	font-size: 1.2em;
	font-weight: 700;
}

.spt-caption-unit {
	display: block;
	margin-top: 0.15em;
	color: var(--spt-muted);
	font-size: 0.9em;
}

.spt-table th,
.spt-table td {
	padding: 0.65em 0.8em;
	border: 0;
	border-bottom: 1px solid var(--spt-border);
	vertical-align: middle;
	text-align: left;
}

.spt-table thead th {
	background: var(--spt-head-bg);
	color: var(--spt-head-text);
	font-weight: 700;
	vertical-align: bottom;
	text-align: center;
}

.spt-table thead th.spt-corner {
	text-align: left;
}

.spt-col-label {
	display: block;
}

.spt-col-sub {
	display: block;
	margin-top: 0.25em;
	font-size: 0.8em;
	font-weight: 400;
	line-height: 1.3;
}

/* Row headers stay visible while a wide table scrolls sideways. */
.spt-table tbody th[scope="row"] {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 11em;
	background: var(--spt-row-bg);
	font-weight: 600;
	box-shadow: 1px 0 0 var(--spt-border);
}

.spt-table tbody .spt-row:nth-child(even) th[scope="row"],
.spt-table tbody .spt-row:nth-child(even) td {
	background: var(--spt-row-alt);
}

.spt-row-label {
	display: inline;
}

.spt-tag {
	display: inline-block;
	margin: 0 0 0.3em;
	padding: 0.1em 0.55em;
	border-radius: 999px;
	background: var(--spt-tag-bg);
	color: var(--spt-tag-text);
	font-size: 0.8em;
	font-weight: 700;
	white-space: nowrap;
}

.spt-row--tagged .spt-tag {
	display: table;
}

.spt-table td {
	text-align: center;
	white-space: nowrap;
}

.spt-cell--price .spt-cell-value {
	font-weight: 700;
}

.spt-cell--text .spt-cell-value {
	font-size: 0.85em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: normal;
}

/* Only shown in the stacked layout. */
.spt-cell-label {
	display: none;
}

.spt-section-row th {
	background: var(--spt-section-bg);
	color: var(--spt-section-text);
	font-weight: 700;
	text-align: left;
}

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

.spt-table tbody tr:last-child th[scope="row"] {
	border-bottom: 0;
}

.spt [data-spt-hidden] {
	display: none !important;
}

/* "Show prices for" picker, added by spt-front.js. */
.spt-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 0.75em;
	margin: 0 0 0.85em;
}

.spt-filter label {
	font-weight: 600;
}

.spt-filter select {
	min-height: 2.75em;
	max-width: 100%;
	padding: 0.4em 2em 0.4em 0.75em;
	border: 1px solid #8a99a6;
	border-radius: 6px;
	background-color: #fff;
	color: #1c1c1c;
	font: inherit;
}

.spt-filter select:focus-visible {
	outline: 3px solid var(--spt-accent);
	outline-offset: 2px;
}

/*
 * Narrow containers (phones, sidebars): each date / unit becomes a card
 * listing the price for every column. Explicit ARIA roles in the markup keep
 * table semantics for screen readers despite the display changes.
 */
@container spt (max-width: 34rem) {
	.spt-scroll {
		overflow: visible;
		border: 0;
		border-radius: 0;
	}

	.spt-table,
	.spt-table caption,
	.spt-table thead,
	.spt-table tbody,
	.spt-table tr,
	.spt-table th,
	.spt-table td {
		display: block;
		width: auto;
	}

	.spt-table {
		background: transparent;
	}

	.spt-table caption {
		padding: 0 0 0.75em;
		border: 0;
		background: transparent;
	}

	.spt-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.spt-table .spt-row {
		margin: 0 0 0.75em;
		border: 1px solid var(--spt-border);
		border-radius: var(--spt-radius);
		overflow: hidden;
		background: var(--spt-row-bg);
	}

	.spt-table tbody th[scope="row"],
	.spt-table tbody .spt-row:nth-child(even) th[scope="row"] {
		position: static;
		min-width: 0;
		background: var(--spt-head-bg);
		color: var(--spt-head-text);
		box-shadow: none;
		border-bottom: 0;
	}

	.spt-table tbody .spt-row:nth-child(even) td,
	.spt-table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1em;
		background: var(--spt-row-bg);
		border-bottom: 1px solid var(--spt-border);
		text-align: right;
		white-space: normal;
	}

	.spt-table .spt-row td:last-child {
		border-bottom: 0;
	}

	.spt-table tbody th .spt-tag {
		background: #fff;
	}

	.spt-cell-label {
		display: block;
		text-align: left;
		font-weight: 400;
	}

	.spt-section-row th {
		margin: 1.25em 0 0.75em;
		border-radius: var(--spt-radius);
	}

	.spt-filter select {
		width: 100%;
	}
}

@media print {
	.spt-scroll {
		overflow: visible;
		border: 0;
	}

	.spt-filter {
		display: none;
	}

	.spt-table tr {
		break-inside: avoid;
	}

	.spt-table tbody th[scope="row"] {
		position: static;
	}
}

/* [seasonal_prices_link]: "View our 2027 camping prices" button near a page title. */

.spt-price-link {
	--spt-link-bg: #1b6f8c;
	--spt-link-text: #ffffff;
	--spt-link-hover-bg: #155a72;

	margin: 0.75em 0 1.5em;
}

.spt-price-link__a {
	display: inline-block;
	padding: 0.7em 1.25em;
	border-radius: 999px;
	background: var(--spt-link-bg);
	color: var(--spt-link-text) !important;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
}

.spt-price-link__a:hover {
	background: var(--spt-link-hover-bg);
}

.spt-price-link__a:focus-visible {
	outline: 3px solid var(--spt-link-bg);
	outline-offset: 3px;
}

.spt-price-link--text .spt-price-link__a {
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--spt-link-bg) !important;
	text-decoration: underline !important;
}