/* ============================================================
   Szkoła Podstawowa w Boguszycach — supplemental styles
   Only what theme.json / block styles cannot express.

   Organised by component, each with its own responsive rules
   nested inline (native CSS nesting — no build step needed) so
   related styles live together instead of being scattered across
   separate @media blocks at the bottom of the file.
   ============================================================ */

:root {
	--spb-blue: var(--wp--preset--color--accent-1, #1e73be);
	--spb-blue-dark: var(--wp--preset--color--accent-2, #0f5fa6);
	--spb-blue-tint: var(--wp--preset--color--accent-3, #eaf1f8);
	--spb-border: var(--wp--preset--color--accent-4, #d6dee6);
	--spb-grey: var(--wp--preset--color--accent-5, #f4f6f8);
}

/* ============================================================
   Top utility bar
   ============================================================ */
.spb-topbar {
	background: var(--spb-blue-dark);
	color: #fff;
	font-size: 0.86rem;

	a { color: #fff; text-decoration: none; }
	a:hover { text-decoration: underline; }

	p { margin: 0; padding-block: 0.4rem; }

	@media (max-width: 680px) {
		font-size: 0.78rem;
		p { text-align: center; }
	}
}

/* ============================================================
   Header shell
   ============================================================ */
header.wp-block-template-part { position: relative; z-index: 20; }

.spb-header-main {
	border-bottom: 1px solid var(--spb-border);

	/* core's default search block is oversized for a header slot */
	.wp-block-search__input {
		height: 2.5rem;
		padding-block: 0;
		padding-inline: 0.9rem;
	}
	.wp-block-search__button {
		height: 2.5rem;
		width: 2.5rem;
		min-width: 2.5rem;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

.wp-block-site-logo img {
	width: 380px;
	max-width: min(380px, 62vw);
	height: auto;

	@media (max-width: 600px) { max-width: 74vw; }
}

/* the theme's global 1.2rem block-gap shouldn't add dead space between
   page regions, or between the header's stacked rows */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer,
.site-header.is-layout-flow > * {
	margin-block: 0;
}

/* The Navigation block has no native padding support (its block.json only
   lists blockGap under "spacing"), and its mobile overlay is a fixed,
   full-screen dialog that padding on an ancestor can't reach — so its
   content sits flush against the screen edge with nothing here. One rule
   to give it the same breathing room the rest of the header has. */
.wp-block-navigation__responsive-container-content { padding-inline: 1.25rem; }

/* the mobile close (X) button is a 24px icon with zero padding by
   default — well under the ~44px touch target size guidelines call
   for. Padding grows the tappable area outward from its own
   top/right anchor, so the icon's position doesn't move. */
.wp-block-navigation__responsive-container-close { padding: 12px; }

/* ============================================================
   Buttons — one consistent size for the "fill" and "outline" styles
   ============================================================ */
.wp-block-button__link {
	padding: 0.72em 1.5em;
	border: 2px solid var(--spb-blue);
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--spb-blue);
	color: #fff;

	&:hover, &:focus { background-color: var(--spb-blue-dark); border-color: var(--spb-blue-dark); }
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--spb-blue);
	border-color: currentColor;

	&:hover, &:focus { background-color: var(--spb-blue); color: #fff; }
}
/* over a Cover image: swap to white so buttons still read on the photo */
.wp-block-cover .wp-block-button {
	&:not(.is-style-outline) .wp-block-button__link {
		background-color: #fff;
		color: var(--spb-blue-dark);
		border-color: #fff;

		&:hover { background-color: var(--spb-blue-tint); border-color: var(--spb-blue-tint); }
	}
	&.is-style-outline .wp-block-button__link {
		color: #fff;
		border-color: #fff;

		&:hover { background-color: #fff; color: var(--spb-blue-dark); }
	}
}

/* ============================================================
   Section rhythm — full-width sections sit flush, no stray gaps
   ============================================================ */
.wp-block-post-content > .alignfull,
.spb-section {
	margin-block: 0;
}
.wp-block-cover.alignfull { border-radius: 0; }

/* ============================================================
   Aktualności — shared horizontal list (homepage teaser + archive)
   ============================================================ */
.spb-news-list {
	.spb-news-row {
		padding-block: 1.4rem;
		border-bottom: 1px solid var(--spb-border);
	}
	.wp-block-post-template > li:first-child .spb-news-row { padding-top: 0; }

	.spb-news-row__thumb {
		flex: 0 0 200px;
		width: 200px;
		height: 140px;
		margin: 0;
		overflow: hidden;

		img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
	}
	.spb-news-row__body {
		flex: 1 1 auto;
		min-width: 0;

		.wp-block-post-title {
			font-size: 1.2rem;
			line-height: 1.3;
			margin: 0 0 0.3rem;
			a { text-decoration: none; }
			a:hover { text-decoration: underline; }
		}
		.wp-block-post-date { display: block; color: var(--spb-blue-dark); margin: 0 0 0.4rem; }
		.wp-block-post-excerpt { margin: 0; }
		.wp-block-post-excerpt__more-text { display: none; }
	}

	@media (max-width: 560px) {
		.spb-news-row { flex-wrap: wrap; }
		.spb-news-row__thumb { flex: 0 0 100%; width: 100%; height: 200px; }
	}
}

/* ============================================================
   Homepage — institution logo strip (full colour, not desaturated)
   ============================================================ */
.spb-logos {
	.wp-block-image, figure { margin: 0; }
	img {
		max-height: 64px;
		width: auto;
		transition: transform 0.15s ease;
	}
	a:hover img { transform: scale(1.06); }

	@media (max-width: 600px) { img { max-height: 48px; } }
}

/* ============================================================
   Galleries (wp:gallery blocks) — forced square grid
   ============================================================ */
/* core's own .has-nested-images flex layout (it ships a whole set of
   width-calc() rules per column count) keeps winning individual property
   fights against a plain grid override — !important is deliberate here,
   confirmed necessary by testing, not just defensive copy-paste. */
.wp-block-gallery.spb-gallery.has-nested-images {
	--spb-gallery-cols: 4;
	display: grid !important;
	grid-template-columns: repeat(var(--spb-gallery-cols), minmax(0, 1fr)) !important;
	gap: 0.55rem !important;
	margin-block: 1.6rem;

	&.columns-1 { --spb-gallery-cols: 1; }
	&.columns-2 { --spb-gallery-cols: 2; }
	&.columns-3 { --spb-gallery-cols: 3; }
	&.columns-5 { --spb-gallery-cols: 5; }
	&.columns-6 { --spb-gallery-cols: 6; }

	> figure.wp-block-image {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;

		> a {
			display: block;
			overflow: hidden;
			border-radius: 8px;
			border: 1px solid var(--spb-border);
		}
		img {
			display: block !important;
			width: 100% !important;
			height: 100% !important;
			max-width: none !important;
			aspect-ratio: 1 / 1;
			object-fit: cover !important;
			border-radius: 8px;
			cursor: zoom-in;
			transition: transform 0.25s ease;
		}
		> a:hover img { transform: scale(1.05); }
	}
	figcaption { display: none; }

	@media (max-width: 640px) { --spb-gallery-cols: 2 !important; gap: 0.4rem !important; }
}

/* GLightbox: match the site accent */
.glightbox-clean .gslide-description { background: #1b2733; }
.glightbox-clean .gslide-title { font-family: var(--wp--preset--font-family--heading, sans-serif); }
.gbtn.giconColor svg path { fill: currentColor; }

/* ============================================================
   Inner page content
   ============================================================ */
.wp-block-post-content {
	li { margin-block: 0.3em; }
	h2 { margin-top: 2em; }
	h3 { margin-top: 1.6em; }

	/* legacy <pre> used for prose on old pages — wrap it like a paragraph */
	pre:not(.wp-block-code):not(.wp-block-preformatted) {
		white-space: pre-wrap;
		word-break: break-word;
		font-family: inherit;
		font-size: inherit;
		background: none;
		padding: 0;
	}
}

/* wp_link_pages() output for Page Break (core/nextpage) posts — see the
   wp_link_pages_args filter in functions.php. Targets core's own
   .post-page-numbers classes directly (current page renders as a nested
   <span class="post-page-numbers current"><span>N</span></span>, other
   pages as <a class="post-page-numbers"><span>N</span></a> — styling both
   levels the same way would double up padding/borders on the current one). */
.spb-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block: 2.5rem 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--spb-border);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 600;

	.post-page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.25rem;
		height: 2.25rem;
		padding-inline: 0.6rem;
		border-radius: 6px;
		text-decoration: none;
	}
	a.post-page-numbers {
		border: 1px solid var(--spb-border);
		color: var(--spb-blue-dark);
		&:hover { background: var(--spb-blue-tint); }
	}
	span.post-page-numbers.current {
		background: var(--spb-blue);
		color: #fff;
	}
}

/* file-download link that replaced the old [pdf-embedder] shortcode */
.spb-doc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55em 1em;
	border: 1px solid var(--spb-border);
	border-radius: 6px;
	background: var(--spb-grey);
	text-decoration: none;
	font-weight: 600;

	&:hover { background: var(--spb-blue-tint); }
}

/* ============================================================
   Header contact info (replaces the old always-visible search box)
   ============================================================ */
.spb-header-contact p {
	margin: 0;
	line-height: 1.4;
}
.spb-header-contact a { color: inherit; text-decoration: none; }
.spb-header-contact a:hover { text-decoration: underline; }

/* logo + contact wrap to their own centered rows once they no longer
   fit side by side (space-between only makes sense with two items
   sharing one row) */
@media (max-width: 990px) {
	.spb-header-row {
		justify-content: center;
		text-align: center;
	}
	.spb-header-contact { justify-content: center; }
}

/* ============================================================
   Search — hidden by default, a button in the nav bar reveals it
   (assets/js/search-toggle.js toggles the [hidden] attribute)
   ============================================================ */
.spb-search-toggle-wrap { position: relative; flex: 0 0 auto; }
.spb-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
}
.spb-search-panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	width: min(320px, 90vw);
	z-index: 30;
}

/* ============================================================
   Footer (copyright bar only)
   ============================================================ */
.spb-footer {
	background: #1b2733;
	color: #d7dee6;

	a { color: #fff; }
}

/* ============================================================
   BIP page — wider content column than the default 780px reading
   width (this page is a two-column menu+text layout, not prose, so
   the usual narrow measure just wastes space). `alignwide` on the
   columns block doesn't reach here: `.entry-content` is itself a
   plain (unaligned) child of an OUTER constrained region and is
   capped to 780px as its own box before the inner alignwide rule
   ever gets a chance — nested layout constraints, not something one
   block-level alignment attribute can break out of. Overriding the
   page's own content width directly is the native attribute's
   floor: core's own child-width rule is a zero-specificity
   `:where()` selector specifically so themes can override it this
   easily, no `!important` needed. Scoped to this one page (body
   class) — every other page keeps the normal 780px reading width.
   ============================================================ */
.page-id-2359 .entry-content { max-width: 1000px; }
/* the columns block is itself an unaligned child of its OWN nested
   constrained-layout context (entry-content re-establishes one for
   its children) — same zero-specificity :where() rule caps IT back
   to 780px independently of the override above; same override, one
   level deeper. */
.page-id-2359 .entry-content > .wp-block-columns { max-width: 1000px; }

/* ============================================================
   BIP sidebar menu — always-expanded, not a hover flyout
   The Navigation block has a native attribute for exactly this —
   "submenuVisibility":"always" on the wp:navigation block itself
   (set on the block instance in the BIP page, not here) — which
   applies core's own `.has-child.open-always` styling: static
   position, transparent background, no border, full-width. That's
   the fix for the original bug (submenu growing the page's
   scrollable height on hover, matching the reference site's plain
   static-list behaviour). What's left here are two small, verified
   gaps in that native behaviour:
   ============================================================ */
/* core still applies its `:hover` rule for hover-opened submenus
   (`min-width:200px` etc.) on top of open-always — since ours is
   never actually closed, that hover state is meaningless here. Fixed
   width applies UNCONDITIONALLY (not just on :hover): scoping it to
   :hover only made the non-hover state fall back to flexbox's normal
   shrink-to-fit sizing, which is narrower than the fixed hover width
   — so the whole line-wrapping of multi-line items shifted every
   time the mouse entered/left, not just their outer box size. */
.spb-bip-menu .has-child > .wp-block-navigation__submenu-container {
	min-width: 0 !important;
	width: 100% !important;
	flex-shrink: 0 !important;
}
/* open-always still renders (non-functional) toggle chevrons and a
   bare, unmarked list — hide the former, add simple bullets so the
   children read as a list rather than plain stacked links */
.spb-bip-menu .wp-block-navigation__submenu-icon { display: none; }
.spb-bip-menu .has-child.open-always .wp-block-navigation-item .wp-block-navigation-item__content {
	position: relative;
	padding-left: 1em !important;
}
.spb-bip-menu .has-child.open-always .wp-block-navigation-item .wp-block-navigation-item__content::before {
	content: "–";
	position: absolute;
	left: 0;
}

/* Main nav's mobile overlay — core also renders submenus always-expanded
   here (its own `.is-menu-open` behaviour, not something we're forcing)
   once the hamburger is open, so the same "bare unmarked list" issue
   applies; same marker treatment for visual consistency with the BIP menu. */
.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	position: relative;
	padding-left: 1.2em;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: "–";
	position: absolute;
	left: 0.2em;
}