/* DABA Deacon Board */

.ddb-wrap {
	--ddb-red: #B0061F;
	--ddb-ink: #1D2420;
	--ddb-muted: #6B7570;
	--ddb-border: #E4DFD1;
	--ddb-cream: #F6F3EB;
	--ddb-font-display: 'Phudu', sans-serif;
	--ddb-font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	font-family: var(--ddb-font-body);
	color: var(--ddb-ink);
	max-width: 980px;
	margin: 0 auto;
	padding: calc(var(--ddb-header-offset, 160px) + 2rem) 1.25rem 4rem;
}

@media (max-width: 782px) {
	.ddb-wrap {
		padding-top: calc(var(--ddb-header-offset, 160px) * 0.6 + 2rem);
	}
}

.ddb-header {
	text-align: center;
	margin-bottom: 1.5rem;
}

/* Same look as the DABA Staff category heading: the category name, big and black. */
.ddb-title {
	font-family: var(--ddb-font-display) !important;
	font-weight: 600;
	font-size: clamp(1.9rem, 4vw, 2.4rem) !important;
	line-height: 1.15;
	color: #000 !important;
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0 0 0.5rem;
}

.ddb-board-caption {
	margin: 0 0 1.25rem;
	color: var(--ddb-muted);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ddb-description {
	color: var(--ddb-muted);
	max-width: 56ch;
	margin: 0 auto 1rem;
}

/* Category tabs (like DABA Staff) */
.ddb-cat-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}

/* Outlined pills with a dark navy active pill, matching DABA Staff. */
.ddb-cat-nav__item {
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1px solid #ccc;
	background: transparent;
	color: #666;
	text-decoration: none;
	font-size: 0.9rem;
}

.ddb-cat-nav__item.is-active,
.ddb-cat-nav__item:hover {
	background: #2c3e50;
	border-color: #2c3e50;
	color: #fff;
}

.ddb-cat-nav-mobile {
	display: none;
	margin: 0 0 1.25rem;
}

.ddb-cat-nav-mobile select {
	display: block;
	width: 100%;
	padding: 0.65rem 0.9rem;
	border-radius: 10px;
	border: 1px solid #ccc;
	background: #fff;
	font: inherit;
	font-size: 0.95rem;
}

@media (max-width: 640px) {
	/* Swipeable single row when the "scroll" style is chosen */
	.ddb-cat-nav:not(.ddb-cat-nav--desktop-only) {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 0.25rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ddb-cat-nav:not(.ddb-cat-nav--desktop-only)::-webkit-scrollbar {
		display: none;
	}

	.ddb-cat-nav:not(.ddb-cat-nav--desktop-only) .ddb-cat-nav__item {
		white-space: nowrap;
		flex: 0 0 auto;
	}

	.ddb-cat-nav--desktop-only {
		display: none;
	}

	.ddb-cat-nav-mobile {
		display: block;
	}
}

/* Year switcher */
.ddb-boards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.ddb-boards__item {
	padding: 0.4rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--ddb-border);
	background: #fff;
	color: var(--ddb-muted);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
}

.ddb-boards__item:hover {
	background: var(--ddb-cream);
}

.ddb-boards__item.is-active {
	background: var(--ddb-red);
	border-color: var(--ddb-red);
	color: #fff;
}

/* The list — ruled top and bottom like the printed page */
.ddb-table {
	width: 100%;
	border-collapse: collapse;
	border-top: 2px solid var(--ddb-ink);
	border-bottom: 2px solid var(--ddb-ink);
	font-size: 0.95rem;
}

.ddb-table th {
	font-family: var(--ddb-font-display);
	font-weight: 600;
	text-align: left;
	padding: 0.85rem 0.75rem;
	border-bottom: 2px solid var(--ddb-ink);
	white-space: nowrap;
}

.ddb-table td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--ddb-border);
	vertical-align: top;
}

.ddb-table tbody tr:last-child td {
	border-bottom: none;
}

.ddb-table tbody tr:hover td {
	background: var(--ddb-cream);
}

.ddb-col-sl {
	width: 4.5rem;
	color: var(--ddb-muted);
	font-variant-numeric: tabular-nums;
}

.ddb-col-name {
	font-weight: 600;
}

.ddb-table a {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ddb-table a:hover {
	color: var(--ddb-red);
}

.ddb-empty {
	text-align: center;
	color: var(--ddb-muted);
}

/* Phones: each row becomes a small card with its column label shown */
@media (max-width: 640px) {
	.ddb-table,
	.ddb-table tbody,
	.ddb-table tr,
	.ddb-table td {
		display: block;
		width: 100%;
	}

	.ddb-table thead {
		position: absolute;
		left: -9999px;
	}

	.ddb-table {
		border-top: 2px solid var(--ddb-ink);
	}

	.ddb-table tr {
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--ddb-border);
	}

	.ddb-table td {
		border: none;
		padding: 0.15rem 0;
		display: flex;
		gap: 0.75rem;
	}

	.ddb-table td::before {
		content: attr(data-label);
		flex: 0 0 6rem;
		color: var(--ddb-muted);
		font-size: 0.8rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		padding-top: 0.15rem;
	}

	.ddb-col-sl {
		width: auto;
	}
}