/*
 * Base: resets, page frame, focus ring, small labels, and the details of core blocks that
 * theme.json cannot express. Loaded first, on the website and in the editor.
 * Tokens only (var(--wp--preset--…), var(--wp--custom--…)), no raw colours or sizes.
 *
 * Breakpoints used in all CSS files (CSS variables do not work in media queries):
 *   399px  very narrow phones          599/600px  phones / larger (WordPress' own menu limit)
 *   781/782px  columns stack (WordPress' own columns limit)   1023px  tablets (menu button)
 */

/* Resets every page relies on
 ---------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

b,
strong {
	font-weight: 600;
}

ol,
ul {
	padding: 0;
}

ol:where(:not([class*="wp-block"])),
ol:where(.wp-block-list),
ul:where(:not([class*="wp-block"])),
ul:where(.wp-block-list) {
	padding-inline-start: var(--wp--preset--spacing--medium);
}

img,
figure {
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

/* Page frame: on short pages the footer still sits at the bottom of the window. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Long words in headings (Cinzel is wide) wrap instead of running out of their box. */
h1,
h2,
h3 {
	overflow-wrap: break-word;
}

/* A heading a link points to (#anchor) keeps some room above it. */
:target {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--large));
}

/* Text only for screen readers (e.g. "Skopiowano" after "Kopiuj IBAN"). */
.tylko-czytnik {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Keyboard focus: a clear ring in the site's red (light red on dark backgrounds),
   the same on every browser. :where() keeps it weak, so special cases can change it.
 ---------------------------------------------------------------------------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

:where(.has-dark-background-color, .is-style-pas-naglowka, .is-style-karta-ciemna, .wp-block-cover:not(.is-light), .plan-tygodnia.is-style-akcent) :focus-visible {
	outline-color: var(--wp--preset--color--accent-on-dark);
}

/* Small labels in capitals: eyebrow above a title (Nadtytuł), panel label (Etykieta),
   event date, dates on cards, the label of the "Plan nabożeństw" card. One look for all;
   each only sets its colour.
 ---------------------------------------------------------------------------- */
.is-style-nadtytul,
.is-style-etykieta,
.termin-wydarzenia,
.polecany-wpis .wp-block-post-date,
.album-karta__data,
.plan-tygodnia__eyebrow,
.plan-tygodnia__nastepny-tytul {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	line-height: var(--wp--custom--line-height--snug);
	text-transform: uppercase;
}

.termin-wydarzenia,
.polecany-wpis .wp-block-post-date,
.album-karta__data {
	color: var(--wp--preset--color--accent);
}

/* Things that change colour on dark backgrounds (heading bands, dark cards, photo bands). */
:is(.has-dark-background-color, .is-style-pas-naglowka, .is-style-karta-ciemna, .wp-block-cover:not(.is-light)) :is(.is-style-nadtytul, .termin-wydarzenia) {
	color: var(--wp--preset--color--accent-on-dark);
}

:is(.has-dark-background-color, .is-style-pas-naglowka, .is-style-karta-ciemna, .wp-block-cover:not(.is-light)) .is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--hero-text);
}

/* Core blocks: details theme.json cannot express
 ---------------------------------------------------------------------------- */

/* Captions under photos: small, centred. */
div[class*="wp-block-"] figcaption {
	margin-top: var(--wp--preset--spacing--medium);
	margin-bottom: 0;
	text-align: center;
}

.wp-block-gallery figcaption.blocks-gallery-caption {
	margin-top: 0;
}

/* Outline buttons: the outline is drawn inside the button, so it has the same size as a
   filled one, and it takes the text colour (light on dark backgrounds). */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: none;
	background-color: transparent;
	outline: 2px solid currentColor;
	outline-offset: -3.5px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: currentColor;
}

/* "Czytaj wszystkie ogłoszenia" (Read more block as a red button) */
.wp-block-read-more.is-style-przycisk:hover {
	background: var(--wp--custom--color--accent-hover);
	color: var(--wp--preset--color--surface);
}

/* Link chips (Wspólnoty): red outline on hover. */
.is-style-chip > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent);
}

/* Separator: a 1px line in its text colour. */
.wp-block-separator {
	opacity: 1;
}

.wp-block-separator:not(.is-style-dots) {
	height: 1px;
	border-bottom: 1px solid currentColor;
}

/* Pull quote: no extra margins inside, the source on its own line. */
.wp-block-pullquote blockquote {
	margin: 0;
}

.wp-block-pullquote p {
	margin-block-start: var(--wp--preset--spacing--medium);
}

.wp-block-pullquote cite {
	display: block;
}

/* Quote style "Zwykły" (plain): no panel behind it. */
.wp-block-quote.is-style-plain {
	padding: 0;
	background: none;
}

/* Tables (the schedules restyle them further, see rozklady.css). */
.wp-block-table table {
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--x-small);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
}

.wp-block-table :is(td, th, thead) {
	border: none;
	border-bottom: 1px solid var(--wp--custom--color--divider);
}

.wp-block-table :is(td, th) {
	padding: 0.8em 1em;
}

.wp-block-table th {
	background-color: var(--wp--preset--color--surface-subtle);
	text-align: left;
}

/* Page numbers under post lists. */
.wp-block-query-pagination > * {
	margin: 0 !important;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-block;
	padding-inline: 0.7em;
}

/* Icon tiles: the padding is added around the icon (not taken from its size),
   otherwise a 24px icon with 12px padding would have no room left for the symbol. */
.wp-block-icon svg {
	box-sizing: content-box;
}

/* Photo placeholder (grey picture with "Miejsce na zdjęcie"). */
.miejsce-na-zdjecie img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}