/*
Theme Name: Pictorico PP36
Theme URI: https://wordpress.com/themes/pictorico/
Description: Motyw potomny Pictorico dla Przedszkola Publicznego nr 36 we Włocławku: cienki pasek nawigacji z logo i rozwijanym menu, baner nagłówka na każdej podstronie, stopka bez informacji o motywie.
Author: migracja PP36
Template: pictorico
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: pictorico-pp36
*/

/* ------------------------------------------------------------------ pasek */
/* Cienki pasek: logo po lewej, wyszukiwarka i jeden przycisk menu po prawej.
   Motyw rodzic ustawia .site-branding / .main-navigation / .header-search na
   float i procentowe szerokosci — tu uzywamy wlasnych klas pp36-*, a elementy
   rodzica w ogole sie nie pojawiaja (wlasny header.php). */
.site-header {
	background: #fff;
	border-bottom: 1px solid #e2e6e9;
	position: relative;
	z-index: 100;
}

.pp36-bar {
	align-items: center;
	display: flex;
	gap: 16px;
	margin: 0 auto;
	max-width: 1180px;
	min-height: 84px;
	padding: 8px 15px;
	position: relative;   /* panel menu kotwiczy sie do paska, nie do calej szerokosci naglowka */
}

.pp36-logo {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
	text-decoration: none;
}

.pp36-logo img {
	display: block;
	height: 72px;
	width: auto;
}

.pp36-logo .pp36-logo-text {
	color: #07a1f2;
	font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	max-width: 15em;
	text-transform: uppercase;
}

.pp36-bar-right {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-left: auto;
}

/* --------------------------------------------------------- wyszukiwarka */
/* Jedna linia: pole + ikona lupy w jednym zaokraglonym polu. */
.pp36-search .search-form {
	align-items: center;
	background: #f2f5f7;
	border: 1px solid #dfe5e9;
	border-radius: 999px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	padding: 2px 6px 2px 14px;
	width: 100%;
}

/* w pasku wyszukiwarka ma stala szerokosc, w panelu (telefon) pelna */
.pp36-bar-right .pp36-search .search-form { width: 240px; }

.pp36-search .search-form label {
	display: block;
	margin: 0;
}

.pp36-search .search-form .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.pp36-search .search-field {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #32373c;
	flex: 1 1 auto;       /* pole rosnie... */
	font-size: 15px;
	line-height: 1.4;
	min-width: 0;         /* ...i moze sie zwezic ponizej domyslnej szerokosci pola tekstowego */
	padding: 6px 0;
	width: auto;
}

.pp36-search .search-field:focus {
	outline: 2px solid #07a1f2;
	outline-offset: 2px;
}

.pp36-search .search-submit {
	background: transparent;
	border: 0;
	color: #5a6b76;
	align-items: center;
	cursor: pointer;
	/* inline-flex, nie flex: "display: flex" na <button> robi z niego element
	   BLOKOWY, ktory poza kontenerem elastycznym zajmuje cala szerokosc pola */
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	line-height: 1;
	padding: 6px 8px;
	text-indent: 0;
	/* KONIECZNE: rodzic ma "button { width: 100% }" ponizej 50em (800px) —
	   bez tego przycisk zajmuje cale pole wyszukiwania na telefonie */
	width: auto;
}

.pp36-search .search-submit svg {
	display: block;
	height: 18px;
	width: 18px;
}

.pp36-search .search-submit:hover,
.pp36-search .search-submit:focus {
	color: #07a1f2;
}

/* ---------------------------------------------------------------- menu */
.pp36-menu-toggle {
	align-items: center;
	background: #07a1f2;
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 700;
	gap: 8px;
	letter-spacing: 0.04em;
	padding: 10px 18px;
	text-transform: uppercase;
	width: auto;          /* jw. — rodzic ustawia button { width: 100% } na malych ekranach */
}

.pp36-menu-toggle:hover,
.pp36-menu-toggle:focus-visible {
	background: #0570a8;
}

.pp36-menu-toggle:focus-visible {
	outline: 2px solid #044b70;
	outline-offset: 2px;
}

.pp36-burger {
	display: inline-block;
	height: 12px;
	position: relative;
	width: 18px;
}

.pp36-burger::before,
.pp36-burger::after,
.pp36-burger span {
	background: currentColor;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%;
}

.pp36-burger::before { top: 0; }
.pp36-burger span { top: 5px; }
.pp36-burger::after { bottom: 0; }

.pp36-panel {
	background: #fff;
	border: 1px solid #e2e6e9;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(15, 42, 60, 0.16);
	max-height: min(70vh, 620px);
	overflow-y: auto;
	padding: 10px;
	position: absolute;
	right: 15px;
	top: calc(100% + 8px);
	width: min(340px, calc(100vw - 30px));
	z-index: 200;
}

.pp36-panel[hidden] { display: none; }

.pp36-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp36-panel li { margin: 0; }

.pp36-panel a {
	border-radius: 6px;
	color: #2b3a44;
	display: block;
	font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 9px 12px;
	text-decoration: none;
	text-transform: uppercase;
}

.pp36-panel a:hover,
.pp36-panel a:focus-visible {
	background: #eef7fd;
	color: #0570a8;
}

.pp36-panel .current_page_item > a,
.pp36-panel .current-menu-item > a {
	color: #07a1f2;
}

/* podstrony: wciecie i mniejszy stopien */
.pp36-panel .children a,
.pp36-panel .sub-menu a {
	font-size: 15px;
	padding-left: 26px;
	text-transform: none;
}

.pp36-search-mobile { display: none; }

/* Na duzym ekranie panel w dwoch kolumnach — 16 pozycji miesci sie bez przewijania.
   break-inside pilnuje, zeby pozycja z podstronami nie pekala miedzy kolumnami. */
@media screen and (min-width: 721px) {
	.pp36-panel { width: min(640px, calc(100vw - 30px)); }
	.pp36-panel > ul { columns: 2; column-gap: 18px; }
	.pp36-panel > ul > li { break-inside: avoid; page-break-inside: avoid; }
}

@media screen and (max-width: 720px) {
	.pp36-bar { gap: 10px; min-height: 64px; }
	.pp36-logo img { height: 56px; }
	.pp36-logo .pp36-logo-text { font-size: 16px; max-width: 9em; }
	.pp36-bar-right .pp36-search { display: none; }        /* wyszukiwarka wchodzi do panelu */
	.pp36-search-mobile { display: block; margin: 2px 4px 10px; }
	.pp36-panel { left: 15px; right: 15px; width: auto; }
}

/* --------------------------------------------- baner nad trescia strony */
/* Nic do dodania: motyw rodzic ma gotowa galaz .header-image dla wpisow i stron
   bez obrazka wyrozniajacego (.has-thumbnail .entry-header { height: 525px }).
   Wystarczy ustawiony obrazek naglowka — Wyglad -> Naglowek. */

/* ------------------------------------------------------------- stopka */
/* Rodzic zostawia pasek stopki (padding: 15px 0) nawet bez tresci — usuwamy caly. */
.site-footer { display: none; }

/* -------------------------------------------------------- baner cookies */
/* Zamiast okna "Cenimy prywatnosc uzytkownikow" otwierajacego sie samoczynnie
   zostaje okragla ikona w lewym dolnym rogu, ktora otwiera ustawienia cookies.
   Okno preferencji (.cky-modal) jest osobnym elementem, nie dzieckiem kontenera
   banera, wiec ukrycie kontenera go nie blokuje. Wtyczka podpina klikniecie
   ikony zawsze; sama ukrywa ja tylko do czasu wyrazenia zgody — stad !important. */
.cky-consent-container { display: none !important; }
.cky-btn-revisit-wrapper.cky-revisit-hide { display: flex !important; }