/* Szkoła Pijarów — wersja mobilna nagłówka, menu i paska (Margol, 2026-09-30).
   Zakres: tylko ekrany z nagłówkiem mobilnym Kadence (<=1024 px). Desktop bez zmian.
   Element 3999 „Nawigacja” (hook kadence_before_header): rząd c75e78-61 = górne linki,
   rząd 3bc7ef-03 = duże logo + dane adresowe. */

@media (max-width: 1024px) {
	/* --- Górne linki: jeden poziomy rząd, pola do kliknięcia >= 44 px --- */
	/* Rząd ma w CSS bloku `padding-left: 180px !important` (miejsce na logo na desktopie). */
	#wrapper .kb-row-layout-id3999_c75e78-61 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	#wrapper .kb-row-layout-id3999_c75e78-61 > .kt-row-column-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0 4px;
		padding: 4px 8px;
		min-height: 0;
	}
	.kb-row-layout-id3999_c75e78-61 .kadence-column3999_1af422-e7 {
		display: none;
	}
	.kb-row-layout-id3999_c75e78-61 .kadence-column3999_a1faa8-30,
	.kb-row-layout-id3999_c75e78-61 .kadence-column3999_746684-d4 {
		flex: 0 1 auto;
		width: auto;
	}
	.kb-row-layout-id3999_c75e78-61 .kt-inside-inner-col {
		padding: 0;
		margin: 0;
	}
	.wp-block-kadence-navigation4048-cpt-id .menu-container > ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 2px;
	}
	.wp-block-kadence-navigation4048-cpt-id .menu-container > ul > li > .kb-link-wrap > a,
	.wp-block-kadence-navigation4048-cpt-id .menu-container > ul > li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 10px;
		font-size: 15px;
		line-height: 1.2;
		white-space: nowrap;
	}
	.kb-row-layout-id3999_c75e78-61 .kt-svg-icon-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

/* Telefon: 4 linki + 2 ikony to ~470 px — nie mieszczą się w jednym rzędzie na 360–390 px.
   Dwa zwarte rzędy: linki po równo, pod nimi FB/YT. */
@media (max-width: 767px) {
	.kb-row-layout-id3999_c75e78-61 .kadence-column3999_a1faa8-30,
	.kb-row-layout-id3999_c75e78-61 .kadence-column3999_746684-d4 {
		flex: 1 1 100%;
	}
	/* Linki w naturalnej szerokości (~330 px) mieszczą się w jednym rzędzie od 360 px. */
	.wp-block-kadence-navigation4048-cpt-id .menu-container > ul {
		flex-wrap: nowrap;
		justify-content: space-evenly;
		gap: 0;
	}
	.wp-block-kadence-navigation4048-cpt-id .menu-container > ul > li > .kb-link-wrap > a,
	.wp-block-kadence-navigation4048-cpt-id .menu-container > ul > li > a {
		justify-content: center;
		padding: 0 6px;
		font-size: 14px;
	}
	.kb-row-layout-id3999_c75e78-61 .kadence-column3999_746684-d4 .kt-inside-inner-col {
		justify-content: center;
	}
	.kb-row-layout-id3999_c75e78-61 .kt-svg-icon-link {
		min-height: 36px;
	}
}

@media (max-width: 1024px) {

	/* --- Duże logo + boksy adresowe: na telefonie ich rolę przejmuje pasek --- */
	.kb-row-layout-id3999_3bc7ef-03 {
		display: none;
	}

	/* --- Pasek nad treścią ---
	   #masthead (z-index 11) zamyka przyklejony pasek w swojej warstwie, a Kadence daje
	   rzędom z blokiem nawigacji z-index 49 → stopka i hero przykrywały pasek.
	   1000: ponad sekcjami, poniżej szuflady menu (99999) i panelu dostępności. */
	#masthead {
		z-index: 1000;
	}

	/* --- Pasek: czerwony, herb na białym tle + nazwa szkoły --- */
	#mobile-header .site-main-header-wrap .site-header-row-container-inner {
		background: var(--global-palette13);
	}
	#mobile-header .site-main-header-inner-wrap {
		min-height: 64px;
	}
	#mobile-header .mobile-site-branding .brand {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 4px 0;
	}
	#mobile-header .mobile-site-branding .brand img {
		width: auto;
		height: 56px;
		max-height: 56px;
		max-width: none;
	}
	#mobile-header .mobile-site-branding .site-title {
		margin: 0;
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.25;
		max-width: 220px;
	}
	#mobile-header .mobile-toggle-open-container .menu-toggle-open {
		color: #fff;
		min-width: 48px;
		min-height: 48px;
	}

	/* --- Menu w szufladzie: jeden kolor, herb w tle --- */
	/* Bez nadpisywania position — Kadence trzyma panel jako fixed na pełną wysokość. */
	#mobile-drawer .drawer-inner {
		background: var(--global-palette13);
		overflow-x: hidden;
	}
	#mobile-drawer .drawer-inner::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url("/wp-content/uploads/2025/12/footer-logo-sp-1.svg") no-repeat 50% 62% / 78% auto;
		opacity: 0.1;
		pointer-events: none;
	}
	#mobile-drawer .drawer-header,
	#mobile-drawer .drawer-content {
		position: relative;
		z-index: 1;
	}
	#mobile-drawer .mobile-navigation ul li > a,
	#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
		background: transparent;
		color: #fff;
		font-size: 18px;
	}
	#mobile-drawer .mobile-navigation ul ul li > a {
		font-size: 16px;
		padding-left: 1.2em;
	}
	#mobile-drawer .mobile-navigation ul li > a:hover,
	#mobile-drawer .mobile-navigation ul li > a:focus-visible,
	#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap:hover {
		background: rgba(255, 255, 255, 0.14);
		color: #fff;
	}
	#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
	#mobile-drawer .mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap {
		background: rgba(0, 0, 0, 0.2);
		color: #fff;
		font-weight: 700;
	}
	#mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
	#mobile-drawer .mobile-navigation ul li:not(.menu-item-has-children) a {
		border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	}
	#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap button,
	#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap .drawer-sub-toggle {
		color: #fff;
		border-left-color: rgba(255, 255, 255, 0.22);
	}
}