/*
Theme Name: Base Block
Theme URI:
Author: expe
Author URI:
Description: Universal WordPress block theme. Use as parent for child themes.
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: base-block
Tags: block-theme, full-site-editing
*/

/* ─── Spacing token overrides (mobile) ─────────────────────────── */
@media (max-width: 782px) {
	:root {
		--wp--preset--spacing--20: 0.25rem;
		--wp--preset--spacing--30: 0.5rem;
		--wp--preset--spacing--40: 1rem;
		--wp--preset--spacing--50: 1.5rem;
		--wp--preset--spacing--60: 2rem;
		--wp--preset--spacing--70: 2.5rem;
		--wp--preset--spacing--80: 3rem;
	}
}

/* ─── Base ──────────────────────────────────────────────────────── */
body {
	overflow-x: hidden;
}

/* ─── Fixed header ──────────────────────────────────────────────── */
header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1200;
	background: rgba(255, 255, 255, 0.71);
}
/* Tło + blur na ::before, NIE na samym <header>. backdrop-filter na     */
/* elemencie czyni go containing blockiem dla position:fixed potomków —  */
/* przez to overlay menu mobilnego był przycinany do wysokości headera.  */
header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 1);
	backdrop-filter: blur(5px);
	transition: background 0.25s ease;
}

header.is-scrolled::before {
	background: rgba(255, 255, 255, 0.7);
	box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 10px 0px;
}
.admin-bar header {
	top: 32px;
}


.backdrop-5 {
	backdrop-filter: blur(5px);
}


/* ─── Mobile navigation breakpoint → 992px ──────────────────────── */
/* WP core zwija nawigację do hamburgera tylko poniżej 600px.        */
/* Poniżej wymuszamy stan zwinięty w zakresie 600–991px, żeby        */
/* menu mobilne (overlay) działało aż do 992px.                      */
@media (max-width: 991.98px) {
	.wp-block-navigation.is-responsive
		.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.wp-block-navigation.is-responsive
		.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

}

/* ─── Kolejność elementów flex (mobile) ─────────────────────────── */
/* Klasa na .wp-block-column (lub innym elemencie flex). Działa       */
/* ≤992px — tam gdzie kolumny są zwinięte; desktop bez zmian.         */
/* `first`/`last` do pojedynczych przesunięć; `1`–`6` gdy chcesz      */
/* ustawić pełną kolejność (wtedy oklasuj wszystkie kolumny).         */
@media (max-width: 991.98px) {
	.order-first { order: -1 !important; }
	.order-last  { order: 999 !important; }
	.order-1 { order: 1 !important; }
	.order-2 { order: 2 !important; }
	.order-3 { order: 3 !important; }
	.order-4 { order: 4 !important; }
	.order-5 { order: 5 !important; }
	.order-6 { order: 6 !important; }
	.hero-zabieg-wpis .wp-block-group.is-vertical{
		left: var(--wp--style--root--padding-right);
		right: var(--wp--style--root--padding-right);
	}
}
/* Sticky nie ma sensu gdy kolumny się zwijają — wyłącz poniżej 782px */
@media (max-width: 781.98px) {
	.sticky-group {
		position: static !important;
		top: auto !important;
	}
	header .wp-block-site-logo img {
		max-height: 50px;
		width: auto;
	}
}
/* ─── wp:columns — responsywność 4→2→1 ──────────────────────────── */
/* Rdzeń skacze 4→1 przy 782px. Ta reguła dokłada poziom „2-up"      */
/* w zakresie 600–992px. Poniżej 600px — 1 kolumna (zachowanie       */
/* rdzenia). Kolumny z `is-not-stacked-on-mobile` są pomijane.       */
@media (min-width: 600px) and (max-width: 991.98px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		box-sizing: border-box !important;   /* wlicza padding/border */
    	flex: 1 1 40% !important; 
	}
}
/* ─── Utilities ─────────────────────────────────────────────────── */
.d-none {
	display: none !important;
}

.sticky-group {
	top: 120px !important;
}

/* Klasy dodaje się w edytorze: panel boczny bloku → Zaawansowane →   */
/* „Dodatkowe klasy CSS". Breakpoint = 782px (mobile = telefon).      */
@media (max-width: 781.98px) {
	.hide-mobile { display: none !important; }
}
@media (min-width: 782px) {
	.hide-desktop { display: none !important; }
}