/* parafia2026 overrides. MUST load after style.css and fixes.css.
   Three jobs, all resolved by load order alone:
     1. dark-mode variants for the colours fixes.css hardcodes light-mode
     2. the quick-links list, which fixes.css lays out in two wrapped columns
     3. the parish teal that fixes.css still hardcodes in three rules
   fixes.css is a byte-identical copy of the one used with Boom, so the shared
   accessibility and mobile work stays in sync rather than forked. */

/* ---------------------------------------------- the teal fixes.css still has
   fixes.css predates the palette change and hardcodes the old parish teal
   #51C6AB in three rules — the sidebar link hovers, the focus outline, and
   the live-poster label hover. Left alone they would be the only cool things
   left on a warm page, and the focus ring is the one element a keyboard user
   is guaranteed to meet.

   Overridden rather than edited, for the same reason as everything else in
   this file. Light values are --accent-ink, which measures 6.61:1 on white;
   the dark overrides live in the media query below. */
#sidebar p a:hover,
#sidebar .article a:hover,
.sb-links a:hover {
	color: var(--accent-ink);
}

a:focus-visible,
select:focus-visible,
button:focus-visible {
	outline-color: var(--accent-ink);
}

.sb-live-poster:hover .sb-live-label,
.sb-live-poster:focus-visible .sb-live-label {
	color: var(--accent-ink);
}

@media (prefers-color-scheme: dark) {
	#sidebar p a,
	#sidebar .article a,
	.sb-links a {
		color: var(--ink-2);
	}

	#sidebar p a:hover,
	#sidebar .article a:hover,
	.sb-links a:hover {
		color: var(--accent-deep);
	}

	.sb-links h2 {
		color: var(--ink);
	}

	.sb-live-label {
		color: var(--ink-2);
	}

	.sb-live-poster:hover .sb-live-label,
	.sb-live-poster:focus-visible .sb-live-label {
		color: var(--accent-deep);
	}
}

/* ---------------------------------------------------------------- quick links
   One link per line, at every width.

   fixes.css lays this list out as a wrapping flex row ("two columns once there
   is room, so the block does not become a tall column of nine lone words").
   Measured, that produced five ragged rows for nine links at 1280px, with the
   items in no reliable reading order — "Czytania na dzisiejszy dzień" sat
   under "Msze Święte i intencje" while "Nabożeństwa" sat to its right, so
   there was no telling where one link ended. It is a nine-item navigation menu;
   it should read top to bottom.

   It was also worse on touch than the mobile rule it was meant to improve on:
   the two-column rule gives each link 6px of vertical padding, measured 34px
   tall, while the block layout fixes.css applies below 768px gives 11px and
   measures 44px. So the phone got the accessible tap target and the desktop
   did not. These are the same numbers fixes.css already uses, which is why the
   list is now simply the same at both sizes instead of a third variant.

   Colour is deliberately NOT set here: the light and dark rules for
   .sb-links a are above, and a colour on this block would beat both. */
.sb-links ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sb-links li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sb-links a {
	display: block;
	padding: 11px 0;
}

/* ---------------------------------------------------------------- large
   Monitors are wide; the site was not using it. The obvious move — raise
   --maxw — was measured and is the wrong one: at 1184px the main column is
   already 92 characters per line, and the sidebar plus the card padding
   leave no room to widen it without pushing past 110. Longer lines are
   strictly worse to read.

   So the spare width is spent on the type instead, which is what actually
   made the site look lost on a 1920px screen. Bumping the root scales every
   rem-based step (all the headings) at once.

   fixes.css sets `body { font-size: 16px }` in px to undo Boom's mobile
   14px, so the root bump alone would leave the body copy stranded at 16px
   while the headings grew. Hence the body override below, in rem so it
   scales with the root. --maxw is pinned back to a px value for the same
   reason in reverse: it is a rem length, so without the pin the container
   would grow 74rem -> 1332px along with the type and undo the whole point. */
@media (min-width: 1600px) {
	html { font-size: 18px; }
	:root { --maxw: 1184px; }
	body { font-size: 1.0625rem; }
}

/* Past about 1800px there is finally room to widen the container as well,
   but only by taking it out of the text column. The 1280px here is not
   arbitrary: at 19.1px type it lands the measure at ~80 characters, which is
   still better than the 88 the layout already shows at 1280px wide. So the
   box gets 96px wider and the sidebar 36px wider while the lines get
   SHORTER, not longer.

   Raising --maxw further starts costing readability immediately — there is no
   sweet spot past this, because a two-column text-and-sidebar layout simply
   occupies about 1200-1300px at a readable measure. Filling a 2560px monitor
   with this content would need a third column or 24px body type, not a wider
   box. */
@media (min-width: 1800px) {
	:root { --maxw: 1280px; }
	.layout { grid-template-columns: minmax(0, 1fr) 24rem; }
}