/* The bylaws, bylaws.njk: one long document. The title on the darker band,
   the sections on the lighter one, each a card with its numeral. The page
   runs from the left edge rather than centring. On a wide screen the contents
   list stays in view beside the sections. */

/* The head and the body share one grid, the contents column and its gap, so
   the title starts where the sections do rather than over the contents. */
.bylaws-head,
.bylaws-layout {
	--toc-width: 220px;
	--toc-gap: 28px;
	display: grid;
	grid-template-columns: var(--toc-width) minmax(0, 1fr);
	column-gap: var(--toc-gap);
	max-width: 1080px;
}

.bylaws-head > * {
	grid-column: 2;
}

.bylaws-head h4 {
	color: var(--ccpl-muted);
	margin-bottom: 12px;
}

.bylaws-head p {
	max-width: 72ch;
	font-size: 17px;
	margin: 0;
}

.bylaws-layout {
	row-gap: 16px;
	align-items: start;
}

/* One column below Bootstrap's lg: the contents above the sections, and the
   title over both. */
@media (max-width: 991.98px) {
	.bylaws-head,
	.bylaws-layout { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
	.bylaws-head > * { grid-column: 1; }
}

/* --- contents ------------------------------------------------------------ */
.bylaws-toc {
	position: sticky;
	top: calc(var(--ccpl-navbar-offset) + 16px);
	background-color: var(--ccpl-surface);
	border: 1px solid var(--ccpl-rule);
	border-top: 3px solid var(--ccpl-red);
	border-radius: 6px;
	padding: 12px 16px 10px;
	box-shadow: 0 1px 2px rgba(var(--ccpl-ink-rgb), .04), 0 4px 12px rgba(var(--ccpl-ink-rgb), .06);
}

@media (max-width: 991.98px) {
	.bylaws-toc { position: static; }
}

.toc-label {
	font-family: var(--ccpl-font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ccpl-muted);
	margin: 0 0 6px;
}

.bylaws-toc ol {
	list-style: upper-roman;
	padding-left: 1.8rem;
	margin: 0;
}

.bylaws-toc li {
	padding: 3px 0;
}

.bylaws-toc li::marker {
	font-family: var(--ccpl-font-display);
	font-weight: 700;
	color: var(--ccpl-red);
}

.bylaws-toc a {
	text-decoration: none;
}

.bylaws-toc a:hover,
.bylaws-toc a:focus {
	text-decoration: underline;
}

/* --- sections ------------------------------------------------------------
   The numerals are a counter, not the list's markers, so they can sit in
   the heading as a chip. */
.bylaws-sections {
	list-style: none;
	counter-reset: bylaw;
	padding: 0;
	margin: 0;
}

.bylaws-sections > li {
	counter-increment: bylaw;
	max-width: 820px;
	background-color: var(--ccpl-surface);
	border: 1px solid var(--ccpl-rule);
	border-radius: 6px;
	padding: 22px 28px 12px;
	box-shadow: 0 1px 2px rgba(var(--ccpl-ink-rgb), .05), 0 8px 20px rgba(var(--ccpl-ink-rgb), .06);
	scroll-margin-top: calc(var(--ccpl-navbar-offset) + 16px);
}

.bylaws-sections > li + li {
	margin-top: 18px;
}

@media (max-width: 575.98px) {
	.bylaws-sections > li { padding: 18px 18px 8px; }
}

.bylaws-sections > li > h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 28px;
	margin-bottom: 14px;
}

.bylaws-sections > li > h2::before {
	content: counter(bylaw, upper-roman);
	display: inline-flex;
	justify-content: center;
	min-width: 44px;
	padding: 3px 8px;
	border-radius: 6px;
	background-color: rgba(var(--ccpl-red-rgb), .10);
	color: var(--ccpl-red-dark);
	font-size: 20px;
	line-height: 1.2;
}

.bylaws-sections h5 {
	font-size: 20px;
	color: var(--ccpl-red-dark);
	margin: 22px 0 6px;
}

.bylaws-sections h6 {
	font-size: 17px;
	color: var(--ccpl-text);
	margin: 18px 0 6px;
}

.bylaws-sections h2 + h5 {
	margin-top: 0;
}

.bylaws-sections ul {
	padding-left: 1.3rem;
}

.bylaws-sections ul > li + li {
	margin-top: 3px;
}

/* Titles and Roles, Personnel: the role, then what it does or who holds it. */
dl.roles {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: 10px 16px;
	margin-bottom: 12px;
}

dl.roles dt {
	font-family: var(--ccpl-font-display);
	font-size: 18px;
	color: var(--ccpl-text);
}

dl.roles dd {
	margin: 0;
}

/* No bullets: the role on the left is what the lines belong to. */
dl.roles dd ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

@media (max-width: 575.98px) {
	dl.roles { grid-template-columns: minmax(0, 1fr); gap: 0; }
	dl.roles dd { margin-bottom: 10px; }
}

/* The four playoff brackets, by number of qualifiers. */
.playoff-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.playoff-options dl {
	margin: 0;
	padding: 10px 12px;
	background-color: var(--ccpl-ground);
	border: 1px solid var(--ccpl-rule);
	border-radius: 6px;
}

.playoff-options dt {
	font-family: var(--ccpl-font-display);
	font-size: 18px;
	color: var(--ccpl-red-dark);
}

.playoff-options dd {
	margin: 0;
	font-size: 14.5px;
}

/* Wider on a large screen: the league pages' measure, the sections filling
   the column beside the contents. Last in the file, so it outranks the
   widths above. */
@media (min-width: 1200px) {
	.bylaws-head,
	.bylaws-layout { --toc-width: 240px; --toc-gap: 32px; max-width: 1320px; }
	.bylaws-sections > li { max-width: none; }
}