/*
 * 95studio Theme – main.css
 * Podstawa: reset, typografia, układ, bloki Gutenberga, okruszki.
 *
 * Zasady:
 *  - brak narzuconych kolorów, fontów (poza neutralnym stosem systemowym) i gotowego wyglądu,
 *  - reguły ogólne w :where() mają specyficzność 0, więc każde ustawienie bloku
 *    (Gutenberg, Spectra, własny CSS) je nadpisuje,
 *  - brak globalnego overflow: hidden, brak !important, brak wymuszania width/padding kontenerów.
 *
 * Zmienne CSS (--ns-*) są dodawane inline z inc/config.php (filtr ninetyfive_css_variables).
 */

/* ==========================================================================
   1. Reset i baza
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--ns-font-body);
	font-size: var(--ns-font-size-base);
	font-weight: var(--ns-font-weight-body);
	line-height: var(--ns-line-height-body);
	letter-spacing: var(--ns-letter-spacing-body);
}

:where(img, video, canvas, svg) {
	max-width: 100%;
}

:where(img, video) {
	height: auto;
}

:where(iframe, embed, object) {
	max-width: 100%;
}

:where(button, input, select, textarea) {
	font: inherit;
	letter-spacing: inherit;
}

:where(.wp-element-button, .wp-block-button__link) {
	font-family: inherit;
	letter-spacing: inherit;
}

:where(pre) {
	overflow-x: auto;
	max-width: 100%;
}

:where(table) {
	border-collapse: collapse;
	max-width: 100%;
}

:where(figure) {
	margin-inline: 0;
}

:where(a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.site-main:focus {
	outline: 0;
}

/* Dostępność */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal;
}

.screen-reader-text:focus,
.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75em 1.25em;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: Canvas;
	color: CanvasText;
	text-decoration: none;
	box-shadow: 0 0 0 2px currentColor;
}

/* ==========================================================================
   2. Typografia
   ========================================================================== */

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--ns-font-heading);
	font-weight: var(--ns-font-weight-heading);
	line-height: var(--ns-line-height-heading);
	letter-spacing: var(--ns-letter-spacing-heading);
}

:where(h1) { font-size: var(--ns-h1-size); }
:where(h2) { font-size: var(--ns-h2-size); }
:where(h3) { font-size: var(--ns-h3-size); }
:where(h4) { font-size: var(--ns-h4-size); }
:where(h5) { font-size: var(--ns-h5-size); }
:where(h6) { font-size: var(--ns-h6-size); }

/* Rytm pionowy: odstęp pod elementami, bez górnego marginesu. */
:where(p, ul, ol, dl, blockquote, pre, figure, table, h1, h2, h3, h4, h5, h6) {
	margin-block: 0 var(--ns-flow-gap);
}

:where(h1, h2, h3, h4, h5, h6) {
	margin-block-end: 0.6em;
}

:where(p, ul, ol, dl, blockquote, pre, figure, table, h1, h2, h3, h4, h5, h6):where(:last-child) {
	margin-block-end: 0;
}

:where(ul ul, ul ol, ol ul, ol ol) {
	margin-block-end: 0;
}

/* ==========================================================================
   3. Układ: kontener, szerokości, wyrównania
   ========================================================================== */

/*
 * Szerokości są zmiennymi, bo theme.json podaje je jako var(--ns-block-size) i
 * var(--ns-block-wide-size). Zagnieżdżone grupy Gutenberga (układ „constrained”)
 * dostosowują się więc do układu bieżącej strony.
 */
.ns-layout {
	--ns-block-size: var(--ns-content-size);
	--ns-block-wide-size: var(--ns-wide-size);
	--ns-container-size: var(--ns-content-size);
	--wp--style--global--content-size: var(--ns-block-size);
	--wp--style--global--wide-size: var(--ns-block-wide-size);

	width: 100%;
	padding-block: var(--ns-main-space);
}

.ns-layout--narrow {
	--ns-block-size: var(--ns-narrow-size);
	--ns-block-wide-size: var(--ns-content-size);
}

.ns-layout--wide {
	--ns-block-size: var(--ns-wide-size);
	--ns-block-wide-size: var(--ns-wide-size);
	--ns-container-size: var(--ns-wide-size);
}

/* Pełna szerokość: bez ograniczeń i bez odstępu pionowego; blokami rządzi Gutenberg lub Spectra. */
.ns-layout--full {
	padding-block: 0;
}

.ns-main {
	min-width: 0;
}

/* Element ograniczony szerokością układu (tytuł, okruszki, komentarze, paginacja). */
.ns-wrap {
	width: min(var(--ns-block-size), calc(100% - 2 * var(--ns-gutter)));
	margin-inline: auto;
}

.ns-layout--full .ns-wrap {
	width: 100%;
	padding-inline: var(--ns-gutter);
}

/* Treść Gutenberga: dzieci ograniczone szerokością układu, specyficzność 0. */
:where(.ns-content) > :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) {
	width: auto;
	max-width: min(var(--ns-block-size), calc(100% - 2 * var(--ns-gutter)));
	margin-inline: auto;
}

:where(.ns-content) > :where(.alignwide) {
	max-width: min(var(--ns-block-wide-size), calc(100% - 2 * var(--ns-gutter)));
	margin-inline: auto;
}

:where(.ns-content) > :where(.alignfull) {
	max-width: none;
	margin-inline: 0;
}

/* Odstęp pod blokami głównej treści. Pomijamy bloki pełnej szerokości i Spectry, które mają własne odstępy. */
:where(.ns-content) > :where(:not(.alignfull):not([class*="wp-block-uagb-"])) {
	margin-block-end: var(--ns-flow-gap);
}

:where(.ns-content) > :where(:last-child) {
	margin-block-end: 0;
}

/* Układ pełnej szerokości: tekst bez kontenera nie dotyka krawędzi okna. */
:where(.ns-layout--full .ns-content) > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre, table) {
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--ns-gutter);
}

:where(.ns-layout--full .ns-content) > :where(:not(.alignfull):not(p):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(ul):not(ol):not(dl):not(blockquote):not(pre):not(table)) {
	max-width: none;
	margin-inline: 0;
}

/* Boxed: treść wpisu w ramce o szerokości kontenera. Domyślnie bez tła i ramki (zmienne --ns-boxed-*). */
.ns-layout--boxed .ns-entry {
	width: min(var(--ns-container-size), calc(100% - 2 * var(--ns-gutter)));
	margin-inline: auto;
	padding: var(--ns-boxed-padding);
	background: var(--ns-boxed-bg);
	border: var(--ns-boxed-border);
	border-radius: var(--ns-boxed-radius);
	box-shadow: var(--ns-boxed-shadow);
}

.ns-layout--boxed .ns-entry .ns-wrap {
	width: 100%;
}

:where(.ns-layout--boxed .ns-content) > :where(*) {
	max-width: 100%;
	margin-inline: 0;
}

:where(.ns-layout--boxed .ns-content) > :where(.alignfull) {
	margin-inline: calc(-1 * var(--ns-boxed-padding));
	max-width: none;
}

/* Wyrównania do lewej/prawej: klasyczne pływanie z marginesem liczonym od szerokości treści. */
:where(.alignleft) {
	float: left;
	margin-inline-end: 1.5em;
	margin-block: 0.3em 1em;
}

:where(.alignright) {
	float: right;
	margin-inline-start: 1.5em;
	margin-block: 0.3em 1em;
}

:where(.aligncenter) {
	margin-inline: auto;
}

:where(.ns-content) > :where(.alignleft) {
	margin-inline-start: max(var(--ns-gutter), calc((100% - var(--ns-block-size)) / 2));
}

:where(.ns-content) > :where(.alignright) {
	margin-inline-end: max(var(--ns-gutter), calc((100% - var(--ns-block-size)) / 2));
}

:where(.ns-layout--full .ns-content) > :where(.alignleft) {
	margin-inline-start: var(--ns-gutter);
}

:where(.ns-layout--full .ns-content) > :where(.alignright) {
	margin-inline-end: var(--ns-gutter);
}

/* Zawiera pływające elementy bez ucinania zawartości. */
.ns-content {
	display: flow-root;
}

/* Układ z sidebarem: treść wypełnia kolumnę; pozycję i siatkę definiuje sidebar.css. */
.ns-has-sidebar .ns-wrap {
	width: 100%;
	margin-inline: 0;
}

:where(.ns-has-sidebar .ns-content) > :where(*) {
	max-width: none;
	margin-inline: 0;
}

:where(.ns-has-sidebar .ns-content) > :where(.alignleft) {
	margin-inline-start: 0;
}

:where(.ns-has-sidebar .ns-content) > :where(.alignright) {
	margin-inline-end: 0;
}

.ns-has-sidebar .ns-entry {
	width: auto;
}

/* ==========================================================================
   4. Elementy wpisu
   ========================================================================== */

.entry-title {
	margin-block-end: 0.4em;
}

.entry-meta,
.entry-tags {
	font-size: 0.875em;
}

.entry-meta > * + * {
	margin-inline-start: 0.75em;
}

.entry-media {
	margin-block-end: var(--ns-flow-gap);
}

.entry-media img {
	display: block;
	width: 100%;
	height: auto;
}

.entry-header {
	margin-block-end: var(--ns-flow-gap);
}

.entry-footer {
	margin-block-start: var(--ns-flow-gap);
}

.page-links {
	margin-block: var(--ns-flow-gap) 0;
}

.ns-post-nav {
	margin-block-start: calc(var(--ns-flow-gap) * 2);
}

.ns-post-nav .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}

.ns-post-nav .nav-subtitle {
	display: block;
	font-size: 0.875em;
}

.ns-archive-header {
	margin-block-end: calc(var(--ns-flow-gap) * 1.5);
}

/* Klasyczne obrazki i podpisy */
.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
figcaption {
	font-size: 0.875em;
}

/* Klasyczna galeria (shortcode [gallery] z html5 support) */
.gallery {
	display: grid;
	grid-template-columns: repeat(var(--ns-gallery-columns, 3), minmax(0, 1fr));
	gap: 1rem;
}

.gallery-columns-1 { --ns-gallery-columns: 1; }
.gallery-columns-2 { --ns-gallery-columns: 2; }
.gallery-columns-4 { --ns-gallery-columns: 4; }
.gallery-columns-5 { --ns-gallery-columns: 5; }
.gallery-columns-6 { --ns-gallery-columns: 6; }
.gallery-columns-7 { --ns-gallery-columns: 7; }
.gallery-columns-8 { --ns-gallery-columns: 8; }
.gallery-columns-9 { --ns-gallery-columns: 9; }

.gallery-item {
	margin: 0;
}

@media (max-width: 600px) {
	.gallery {
		--ns-gallery-columns: 2;
	}
}

/* Formularz wyszukiwania */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.search-form .search-field {
	flex: 1 1 12rem;
	min-width: 0;
}

/* Formularz hasła dla wpisów chronionych */
.post-password-form {
	max-width: 32rem;
}

.post-password-form input[type="password"] {
	max-width: 100%;
}

/* ==========================================================================
   5. Okruszki
   ========================================================================== */

.ns-breadcrumbs {
	margin-block-end: var(--ns-flow-gap);
	font-size: 0.875em;
}

.ns-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ns-breadcrumbs li + li::before {
	content: var(--ns-breadcrumb-separator, "/");
	margin-inline: 0.5em;
}