/* ==========================================================================
   PBC Day — Sponsorship Level Comparison
   --------------------------------------------------------------------------
   Every rule is scoped to #sponsorlevels, so nothing in this file can affect
   the rest of the page.

   TO UPDATE FOR A NEW YEAR
   1. Change the colors in assets/css/theme.css — the --levels-* block.
      You do NOT edit colors in this file any more; the lines below just
      forward whatever theme.css says.
   2. Edit the table content in index.html, inside <section id="sponsorlevels">.

   To ADD a tier: add --levels-tier-6 to theme.css, add the two forwarding
   lines below, then add one chip, one <th>, and one <td> per row in
   index.html. To REMOVE one, delete the same.
   ========================================================================== */


/* --- THEME ---------------------------------------------------------------
   These forward to theme.css. Change the values there, not here.            */

#sponsorlevels {
	--brand:  var(--levels-brand);
	--ink:    var(--levels-ink);
	--muted:  var(--levels-muted);
	--line:   var(--levels-line);
	--stripe: var(--levels-stripe);
	--hover:  var(--levels-hover);
	--cta-link-hover: var(--levels-cta-link-hover);
}

/* --- TIER COLORS ---------------------------------------------------------
   Columns are numbered by position, left to right — 1 is the lowest level.
   The numbers never change from year to year, so renaming a sponsorship
   level is purely a text edit in index.html.

   The colors themselves are in theme.css (--levels-tier-1 … -5). These lines
   only connect column number to color; leave them alone.                    */

#sponsorlevels [data-tier="1"] { --tier: var(--levels-tier-1); }   /* dark green */
#sponsorlevels [data-tier="2"] { --tier: var(--levels-tier-2); }   /* teal       */
#sponsorlevels [data-tier="3"] { --tier: var(--levels-tier-3); }   /* red        */
#sponsorlevels [data-tier="4"] { --tier: var(--levels-tier-4); }   /* purple     */
#sponsorlevels [data-tier="5"] { --tier: var(--levels-tier-5); }   /* copper     */


/* --- Section heading -----------------------------------------------------
   Recolors this one section's bar. Every other heading stays coral.         */

#sponsorlevels header.major h2 {
	background-color: var(--brand);
}


/* Visible to screen readers only (the table caption). */
#sponsorlevels .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* --- Intro + chips ------------------------------------------------------- */

#sponsorlevels .pbc-tiers-intro {
	color: var(--ink);
	font-size: 0.85em;
	line-height: 1.5;
	margin: 0 0 0.9em 0;
}

#sponsorlevels .pbc-tiers-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
	margin: 0 0 1.25em 0;
}

#sponsorlevels .pbc-chip,
#sponsorlevels .pbc-chip-all {
	font-family: inherit;
	font-size: 0.78em;
	line-height: 1.2;
	cursor: pointer;
	border-radius: 2em;
	padding: 0.55em 1.1em;
	margin: 0;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

#sponsorlevels .pbc-chip {
	border: 2px solid var(--tier);
	background: #ffffff;
	color: var(--tier);
	font-weight: 700;
}

	#sponsorlevels .pbc-chip .pbc-chip-price {
		font-weight: 400;
		opacity: 0.85;
		margin-left: 0.45em;
	}

	/* Selected = the column is showing */
	#sponsorlevels .pbc-chip[aria-pressed="true"] {
		background: var(--tier);
		color: #ffffff;
	}

	/* The last remaining column can't be switched off */
	#sponsorlevels .pbc-chip.is-locked {
		cursor: default;
	}

	#sponsorlevels .pbc-chip:focus-visible,
	#sponsorlevels .pbc-chip-all:focus-visible {
		outline: 3px solid var(--brand);
		outline-offset: 2px;
	}

#sponsorlevels .pbc-chip-all {
	border: 2px solid transparent;
	background: none;
	color: var(--brand);
	font-weight: 700;
	text-decoration: underline;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

	#sponsorlevels .pbc-chip-all:hover {
		color: var(--ink);
	}


/* --- Table --------------------------------------------------------------- */

#sponsorlevels .pbc-tiers-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
}

	/* The box takes focus (see the tabindex in the HTML) so it can be scrolled
	   from the keyboard, which means it also has to show that it has focus. */
	#sponsorlevels .pbc-tiers-scroll:focus-visible {
		outline: 3px solid var(--brand);
		outline-offset: 2px;
	}

#sponsorlevels .pbc-tiers-table {
	width: 100%;
	margin: 0;
	/* separate + zero spacing, so position:sticky keeps its cell borders */
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.78em;
	line-height: 1.4;
	color: var(--ink);
}

/* Column header row */
#sponsorlevels .pbc-tiers-table thead th {
	background: var(--tier);
	color: #ffffff;
	font-size: 1em;
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
	padding: 0.9em 0.6em;
	border: 0;
}

	/* Five level columns nearly fill the site's 50em content column, so a long
	   name or price has to wrap inside its own column — otherwise it widens
	   the table and pushes the last level off the right edge. Must stay
	   "anywhere": "break-word" looks equivalent but does not let the column
	   itself get any narrower, and the table still overflows. */
	#sponsorlevels .pbc-tiers-table thead th[data-tier] {
		overflow-wrap: anywhere;
	}

	#sponsorlevels .pbc-tiers-table thead th .pbc-price {
		display: block;
		font-size: 1.15em;
		font-weight: 700;
		margin-top: 0.15em;
	}

	/* Top-left cell: sits above the pinned benefit column */
	#sponsorlevels .pbc-tiers-table thead th.pbc-tiers-corner {
		position: sticky;
		left: 0;
		z-index: 3;
		background: #ffffff;
		color: var(--ink);
		text-align: left;
		padding-left: 0.9em;
		min-width: 190px;
		width: 32%;
		box-shadow: 2px 0 0 var(--line);
	}

/* Benefit name column — stays put while the tier columns scroll sideways */
#sponsorlevels .pbc-tiers-table tbody th {
	position: sticky;
	left: 0;
	z-index: 2;
	text-align: left;
	font-size: 1em;
	font-weight: 600;
	color: var(--ink);
	padding: 0.85em 0.9em;
	min-width: 190px;
	width: 32%;
	box-shadow: 2px 0 0 var(--line);
}

#sponsorlevels .pbc-tiers-table tbody td {
	text-align: center;
	vertical-align: middle;
	padding: 0.85em 0.6em;
	min-width: 118px;
	border-left: 1px solid var(--line);
}

/* Every level column asks for the same width, so the browser splits the space
   evenly however many are on show. Without this the table falls back to sizing
   each column by its own content, and the cheapest level — which has the
   shortest text in every row — comes out visibly narrower than the rest. */
#sponsorlevels .pbc-tiers-table thead th[data-tier],
#sponsorlevels .pbc-tiers-table tbody td[data-tier] {
	width: 13%;
}

#sponsorlevels .pbc-tiers-table tbody tr + tr > * {
	border-top: 1px solid var(--line);
}

#sponsorlevels .pbc-tiers-table tbody tr {
	border: 0;
}

/* Zebra striping. Set on every cell (not the row) because the pinned
   column needs an opaque background of its own to scroll underneath. */
#sponsorlevels .pbc-tiers-table tbody tr > * {
	background: #ffffff;
}

#sponsorlevels .pbc-tiers-table tbody tr:nth-child(even) > * {
	background: var(--stripe);
}

#sponsorlevels .pbc-tiers-table tbody tr:hover > * {
	background: var(--hover);
}

/* Included / not included.
   The glyph carries the meaning — color is only reinforcement, so the table
   still reads correctly in greyscale or with color vision deficiency. */
#sponsorlevels .pbc-tiers-table td.yes::before {
	content: "\2713";
	color: var(--tier);
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1;
}

#sponsorlevels .pbc-tiers-table td.no::before {
	content: "\2013";
	color: var(--levels-mark-no);   /* the only "not included" marker; keep it 4.5:1 on a striped row */
	font-size: 1.4em;
	line-height: 1;
}


/* --- Footnote + contact -------------------------------------------------- */

/* Shown by sponsor-tiers.js only while the table is genuinely wider than its
   box. On a Mac the scrollbar stays invisible until you scroll, so without
   this a real overflow looks exactly like a chart with a chopped-off edge. */
#sponsorlevels .pbc-tiers-hint {
	color: var(--muted);
	font-size: 0.72em;
	font-style: italic;
	margin: 0.6em 0 0 0;
}

/* Some stylesheets set display on every element, defeating [hidden]. */
#sponsorlevels .pbc-tiers [hidden] {
	display: none !important;
}

#sponsorlevels .pbc-tiers-note {
	color: var(--muted);
	font-size: 0.72em;
	font-style: italic;
	margin: 0.9em 0 0 0;
}

#sponsorlevels .pbc-tiers-cta {
	background: var(--brand);
	color: #ffffff;
	border-radius: 12px;
	font-size: 0.82em;
	line-height: 1.5;
	text-align: center;
	padding: 1em 1.25em;
	margin: 1.25em 0 0 0;
}

	#sponsorlevels .pbc-tiers-cta a {
		color: #ffffff;
		font-weight: 700;
		text-decoration: underline;
		border-bottom: 0;
	}

	/* Needs !important to beat the global a:hover in main.css, which
	   matches the bar color and would hide the link. */
	#sponsorlevels .pbc-tiers-cta a:hover,
	#sponsorlevels .pbc-tiers-cta a:focus-visible {
		color: var(--cta-link-hover) !important;
	}


/* --- Column show / hide --------------------------------------------------
   The JS writes a space-separated list of switched-off column numbers onto
   .pbc-tiers as data-off, and these rules do the rest. Scoped to the table
   so the chips themselves never disappear. Add one line per new column.     */

#sponsorlevels .pbc-tiers[data-off~="1"] .pbc-tiers-table [data-tier="1"] { display: none; }
#sponsorlevels .pbc-tiers[data-off~="2"] .pbc-tiers-table [data-tier="2"] { display: none; }
#sponsorlevels .pbc-tiers[data-off~="3"] .pbc-tiers-table [data-tier="3"] { display: none; }
#sponsorlevels .pbc-tiers[data-off~="4"] .pbc-tiers-table [data-tier="4"] { display: none; }
#sponsorlevels .pbc-tiers[data-off~="5"] .pbc-tiers-table [data-tier="5"] { display: none; }


/* --- Responsive ----------------------------------------------------------
   Breakpoints follow the ladder already used across the site
   (1680 / 1280 / 1024 / 736 / 480).                                         */

/* The site drops to 11pt here, which shrinks .container from ~867px to
   ~733px. The columns have to come down with it or the last level would be
   cut off and every laptop visitor would land on a sideways-scrolling table. */
@media screen and (max-width: 1280px) {

	#sponsorlevels .pbc-tiers-table {
		font-size: 0.82em;
	}

	#sponsorlevels .pbc-tiers-table thead th.pbc-tiers-corner,
	#sponsorlevels .pbc-tiers-table tbody th {
		min-width: 160px;
		width: 30%;
	}

	#sponsorlevels .pbc-tiers-table tbody td {
		min-width: 106px;
	}

}

/* Sized for the narrow end of this band (737px, just above the point where
   the phone layout takes over) so all five columns still fit unscrolled.
   On a roomier tablet the columns simply expand to fill the container. */
@media screen and (max-width: 1024px) {

	#sponsorlevels .pbc-tiers-table thead th.pbc-tiers-corner,
	#sponsorlevels .pbc-tiers-table tbody th {
		min-width: 155px;
		width: 30%;
	}

	#sponsorlevels .pbc-tiers-table tbody td {
		min-width: 102px;
	}

}

@media screen and (max-width: 736px) {

	#sponsorlevels .pbc-tiers-table {
		font-size: 0.85em;
	}

	#sponsorlevels .pbc-tiers-table thead th.pbc-tiers-corner,
	#sponsorlevels .pbc-tiers-table tbody th {
		min-width: 150px;
		width: 56%;
		padding: 0.75em 0.7em;
	}

	/* Long benefit names in a narrow column leave ragged gaps otherwise.
	   Needs lang="en" on <html> to pick the right dictionary. */
	#sponsorlevels .pbc-tiers-table tbody th {
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	#sponsorlevels .pbc-tiers-table tbody td {
		min-width: 96px;
		padding: 0.75em 0.4em;
	}

	#sponsorlevels .pbc-tiers-table thead th {
		padding: 0.75em 0.4em;
	}

	#sponsorlevels .pbc-chip,
	#sponsorlevels .pbc-chip-all {
		font-size: 0.82em;
		padding: 0.5em 0.85em;
	}

	/* Stack name over price so chips stay narrow enough to wrap tidily */
	#sponsorlevels .pbc-chip .pbc-chip-price {
		display: block;
		margin-left: 0;
	}

}

@media screen and (max-width: 480px) {

	/* Sized so the two default columns fit a 360px screen without the second
	   one being clipped on load. The benefit names run 60-80 characters, so
	   most of the width goes here — at the older 104px they stacked six lines
	   deep. Below 360px the table scrolls and .pbc-tiers-hint says so. */
	#sponsorlevels .pbc-tiers-table thead th.pbc-tiers-corner,
	#sponsorlevels .pbc-tiers-table tbody th {
		min-width: 176px;
		width: 57%;
		padding: 0.7em 0.5em;
	}

	#sponsorlevels .pbc-tiers-table tbody td {
		min-width: 66px;
		padding: 0.7em 0.3em;
	}

	/* The base 13% is sized for five columns; only two are on show here. */
	#sponsorlevels .pbc-tiers-table thead th[data-tier],
	#sponsorlevels .pbc-tiers-table tbody td[data-tier] {
		width: 21%;
	}

	#sponsorlevels .pbc-tiers-table thead th {
		padding: 0.7em 0.3em;
	}

	#sponsorlevels .pbc-tiers-table td.yes::before {
		font-size: 1.4em;
	}

}


/* --- Print ---------------------------------------------------------------
   Sponsors ask for a printable sheet — force every column back on.          */

@media print {

	#sponsorlevels .pbc-tiers-chips,
	#sponsorlevels .pbc-tiers-intro,
	#sponsorlevels .pbc-tiers-hint {
		display: none;
	}

	#sponsorlevels .pbc-tiers-table [data-tier] {
		display: table-cell !important;
	}

	#sponsorlevels .pbc-tiers-scroll {
		overflow: visible;
		box-shadow: none;
	}

	#sponsorlevels .pbc-tiers-table thead th,
	#sponsorlevels .pbc-tiers-cta {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

}


/* Live region for the show/hide announcement (WCAG 4.1.3). Never visible. */

#sponsorlevels .pbc-tiers-status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}