/*!
 * =============================================================================
 * GPS HEADER
 * =============================================================================
 * PURPOSE      : Ketenpagina-hub (inc/seo/chain-hub.php): feitenregel onder de
 *                kop, en onder de zoeklijst prijzen per vestiging, faciliteiten,
 *                veelgestelde vragen en het blok voor de keten zelf.
 *
 * PATH         : wp-content/themes/sportlist/css/chain-hub.css
 *
 * DEPENDENCIES : css/tokens.css, css/filters-and-cards.css (laadt daarna).
 *                Alleen op de kale ketenpagina (functions-assets.php).
 *
 * =============================================================================
 * CSS-VARIABELEN (gebruik uitsluitend deze)
 * =============================================================================
 *   --space-*, --radius-*, --shadow-card, --fs-body, --fs-body-sm,
 *   --color-text, --color-text-muted, --color-surface, --color-surface-sunken,
 *   --color-border-subtle, --color-border-default, --color-brand,
 *   --color-brand-on, --color-heading
 *
 * =============================================================================
 * SECTIONOVERZICHT
 * =============================================================================
 *   1. FEITENREGEL
 *   2. HUB-BLOKKEN
 *   3. TABEL
 *   4. CHIPS, FAQ, KNOPPEN
 *   5. RESPONSIVE
 *
 * @package Sportlist
 */

/* ============================================================
   1. FEITENREGEL
   ============================================================ */
.sl-chain-hub__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: var(--space-2) 0 var(--space-3);
	padding: 0;
}

.sl-chain-hub__facts li {
	background: var(--color-surface-sunken);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-size: var(--fs-body-sm);
	padding: var(--space-1) var(--space-3);
}

/* ============================================================
   2. HUB-BLOKKEN
   ============================================================ */
.sl-chain-hub {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin: var(--space-8) auto;
	max-width: 1100px;
}

.sl-chain-hub__block {
	background: var(--color-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: var(--space-5) var(--space-6);
}

.sl-chain-hub__block h2 {
	color: var(--color-heading);
	margin: 0 0 var(--space-3);
}

.sl-chain-hub__block p {
	color: var(--color-text);
	font-size: var(--fs-body);
	margin: 0 0 var(--space-2);
}

.sl-chain-hub__note {
	color: var(--color-text-muted) !important;
	font-size: var(--fs-body-sm) !important;
}

/* ============================================================
   3. TABEL
   ============================================================ */
.sl-chain-hub__table-wrap {
	overflow-x: auto;
}

.sl-chain-hub__table {
	border-collapse: collapse;
	font-size: var(--fs-body-sm);
	min-width: 100%;
}

.sl-chain-hub__table th,
.sl-chain-hub__table td {
	border-bottom: 1px solid var(--color-border-subtle);
	padding: var(--space-2) var(--space-3);
	text-align: left;
	white-space: nowrap;
}

.sl-chain-hub__table th {
	color: var(--color-text-muted);
	font-weight: 600;
}

/* ============================================================
   4. CHIPS, FAQ, KNOPPEN
   ============================================================ */
.sl-chain-hub__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-chain-hub__chips li {
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-pill);
	font-size: var(--fs-body-sm);
	padding: var(--space-1) var(--space-3);
}

.sl-chain-hub__faq {
	border-bottom: 1px solid var(--color-border-subtle);
	padding: var(--space-3) 0;
}

.sl-chain-hub__faq summary {
	cursor: pointer;
	font-weight: 600;
}

.sl-chain-hub__faq summary:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

.sl-chain-hub__faq p {
	margin-top: var(--space-2);
}

.sl-chain-hub__btn {
	background: var(--color-brand);
	border: 1px solid var(--color-brand);
	border-radius: var(--radius-pill);
	color: var(--color-brand-on);
	display: inline-block;
	font-weight: 600;
	padding: var(--space-2) var(--space-5);
	text-decoration: none;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.sl-chain-hub__btn--secondary {
	background: transparent;
	color: var(--color-brand);
}

.sl-chain-hub__btn:focus-visible {
	box-shadow: var(--shadow-focus);
	outline: none;
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
	.sl-chain-hub {
		margin: var(--space-6) var(--space-4);
	}

	.sl-chain-hub__block {
		padding: var(--space-4);
	}
}