/* Definicje ogólne */
:root {
	--primary: #259000;/*ciemnozielony*//*#0056b3; /*niebieski*/
	--text: #333; /*ciemnoszary*/
	--bg-light: #f4f7f6; /*Szary - tło komunikatów 'alert' i 'alert urgent' */
	--szer: 1400px;
	--navtlo: #228000; /* jasnozielone tło *//*#0669cc; /*niebieskie tło nawigacji*/
}

body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1.4;
	color: var(--text);
	background-color: #fff; /*biały*/
	overflow-x: hidden; /* Zapobiega pojawianiu się pasków przewijania podczas animacji*/
}

/* Nagłówek z Twoją grafiką */
header {
	background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1)), url('jpg2/wejscie1.jpg');
	max-width: var(--szer);
	height: 469px;
	margin: 0 auto;
	background-size: cover;
	background-position: center;
	position: relative; /* Dla pozycjonowania ikon */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 40px;
	box-sizing: border-box;
	color: white;
}

header h1 {
	margin: 0;
	font-size: 2.4rem;
	text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}

header p {
	font-size: 1.2rem;
	margin-top: 10px;
	text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}

header a { color: white; text-decoration: none; }

/* Logo w nagłówku */
.header-logo {
	position: absolute;
	top: 40px;
	right: 20px;
	display: flex;
	gap: 15px; /* Odstęp w pionie i poziomie */
}

.header-logo img {
	height: 100px;
	width: auto;
	filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
	transition: transform 0.3s;
}

.header-logo img:hover { transform: scale(1.3); }


/* Ikony w nagłówku */
.header-icons {
	position: absolute;
	bottom: 20px;
	right: 20px;
	display: flex;
	gap: 15px;
}

.header-icons img {
	height: 50px;
	width: auto;
	filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
	transition: transform 0.3s;
}

.header-icons img:hover { transform: scale(1.1); }

/* Nawigacja */
nav {
	background: var(--navtlo);/*#218201;*/
	max-width: var(--szer);
	margin: 0 auto;
	position: sticky;
}

nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	overflow-wrap: break-word;   /* Zawija tekst, jeśli jest za długi */
}

nav a {
	color: white;
	padding: 15px 20px;
	display: block;
	text-decoration: none;
	/*font-weight: bold;*/
	font-size: 1.4rem;
}

nav a:hover { background: var(--primary); }

/* Styl dla aktywnego linku w menu*/
nav a.active {
	color: #ffcc00 !important;
	font weight: bold;
	border-bottom: 2px solid #ffcc00;
}

/* Treść główna */
main {
	max-width: var(--szer);
	margin: 20px auto;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 30px;
}

.main-1 {
	max-width: var(--szer);
	margin: 20px auto;
	display: block;
	grid-template-columns: 1fr;
	gap: 30px;
}

.main-2 {
	max-width: var(--szer);
	margin: 20px auto;
	display: grid;
	grid-template-columns: 2fr 2fr;
	gap: 30px;
}


		/*Definicje ogólnych stylów */
p { font-size: 1.2rem;}

h2 { border-bottom: 2px solid var(--primary); padding-bottom: 5px; }

h3 { font-size: 1.5rem; color: red;}

h4 {font-size: 1.3rem; font-weight: bold;}

h5 {font-size: 1.3rem; font-weight: 500;}

.hours-grid {							/* Klasa wyświetlania dni i godzin otwarcia w dwóch kolumnach*/
	display: grid;
	grid-template-columns: auto 1fr; 	/* Pierwsza kolumna dopasowana do tekstu, druga zajmuje resztę */
	gap: 2px 20px;						/* Odstęp: 2px między wierszami, 20px między kolumnami */
	max-width: 300px;
}

.day {
	font-weight: bold;
}

.hours {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.blue-head {
	grid-column: 1 /  span 2;
}

.blue-head h3 {
	color: #0056b3;
	padding-bottom: 5px;
}

.about-brief {
	grid-column: 1 /  span 2;
	border-bottom: 4px solid #ffcc00;
}

/* Kontener dla listy linków  wyświetlanie zdjęć posiłków - trzy kolumny*/
.three-column-list {
	display: grid;
	/* Tworzy 3 kolumny o równej szerokości */
	grid-template-columns: repeat(3, 1fr); 
	gap: 15px; /* Odstęp między kolumnami i wierszami */
	list-style: none; /* Usuwa kropki przy liście */
	padding: 0;
}

/* Styl dla telefonów (przełącza na 1 kolumnę) */
@media (max-width: 768px) {
	.three-column-list {
		grid-template-columns: 1fr;
	}
}

.alert-card {
	background: var(--bg-light); /* szare tło komunikatów z belką - zmiana w root*/
	padding: 20px;
	margin-bottom: 20px;
	border-left: 15px solid var(--primary);
}

.urgent { border-left-color: #d40000; }

.date { color: #888; font-size: 0.9rem; font-weight: bold; }

.date-mid { color: #888; font-size: 1.1rem; font-weight: bold; }

/* Dla informacji o pacjentach */

.patient-info {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
}

.patient-info h3 {
	color: #0056b3;
	border-bottom: 2px solid #ffcc00;
	margin-top: 30px;
	padding-bottom: 5px;
}

.important-link {
	background: #e7f3ff;
	padding: 15px;
	border-left: 5px solid #0056b3;
	margin: 20px 0;
}

.warning-box {
	background: #fff3cd;
	border: 1px solid #ffeeba;
	padding: 15px;
	margin-top: 20px;
	color: #856404;
}

.diagnostic-list p {
	margin-bottom: 15px;
	padding-left: 10px;
	border-left: 2px solid #ddd;
}

/* Styl dla nowoczesnej tabeli przetargów */
.modern-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 0.95rem;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

.modern-table thead tr {
	background-color: #0056b3;
	color: #ffffff;
	text-align: left;
}

.modern-table th, .modern-table td {
	padding: 12px 15px;
	border-bottom: 1px solid #dddddd;
}

.modern-table tbody tr:nth-of-type(even) {
	background-color: #f3f3f3;
}

.modern-table tbody tr:hover {
	background-color: #f1f7ff;
	transition: 0.3s;
}

.btn-download {
	display: inline-block;
	padding: 6px 12px;
	background-color: #28a745;
	color: white;
	text-decoration: none;
	border-radius: 4px;
	font-size: 0.85rem;
}

.btn-download:hover {
	background-color: #218838;
}

/* Responsywność tabeli na telefonach */
@media screen and (max-width: 600px) {
	.modern-table thead { display: none; }
	.modern-table td {
		display: block;
		text-align: right;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}
	.modern-table td::before {
		content: attr(data-label);
		position: absolute;
		left: 0;
		width: 50%;
		padding-left: 15px;
		font-weight: bold;
		text-align: left;
	}
}

/* Style dla statusów */
.status {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: bold;
	margin-bottom: 8px;
	text-transform: uppercase;
}

/* Style dla statusów */
.status {
	display: inline-flex; /* Zmienione na flex, aby ikona i tekst były w jednej linii */
	align-items: center;
	gap: 6px; /* Odstęp między ikoną a tekstem */
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: bold;
	margin-bottom: 8px;
	text-transform: uppercase;
}

/* Ikony za pomocą pseudo-elementów */
.status::before {
	font-size: 1.1rem; /* Ikona nieco większa od tekstu */
}

/* Rozstrzygnięto - ZIELONY + Ptaszek */
.status.solved {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}
.status.solved::before {
	content: "✔"; /* Symbol zatwierdzenia */
}

/* Unieważniono - CZERWONY + Krzyżyk */
.status.cancelled {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}
.status.cancelled::before {
	content: "✘"; /* Symbol zamknięcia/anulowania */
}

/* W toku - ZŁOTY + Zegar */
.status.active {
	background-color: #ffcc00; /* Twój złoty kolor */
	color: #333; /* Ciemny tekst dla lepszego kontrastu na złotym */
	border: 1px solid #e6b800;
}
.status.active::before {
	content: "⌛"; /* Symbol klepsydry/czasu */
}

.status-note {
	font-size: 0.85rem;
	color: #666;
	margin: 5px 0;
	font-style: italic;
}

.btn-download {
	display: block;
	margin-top: 5px;
	text-align: center;
	padding: 6px 12px;
	background-color: #0056b3;
	color: white;
	text-decoration: none;
	border-radius: 4px;
}


/* Styl dla artykułu historycznego */
.history-article {
	max-width: 900px; /* Nieco węższy kontener dla lepszego czytania */
	margin: 40px auto;
	background: #fff;
	padding: 40px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	line-height: 1.8; /* Większy odstęp między liniami */
}

.article-content p {
	margin-bottom: 20px;
	text-align: justify; /* Tekst wyjustowany wygląda w referatach bardzo dobrze */
	text-wrap: pretty;
}

/* 	Sekcja stylów dla informacji o oddziałach*/
.department-navigation {
	padding: 20px 0;
	text-align: center;
}

/*	Układ siatki - na komputerze 3 kolumny, na telefonie 1 */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
	margin-top: 20px;
}

.card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 30px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: left;
	display: flex;
	flex-direction: column;
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	border-color: #ffcc00;
}

.card-icon {
	font-size: 2.5rem;
	margin-bottom: 15px;
}

.card h3 {
	color: #0056b3;
	margin-bottom: 15px;
	border-bottom: 2px solid #ffcc00;
	padding-bottom: 10px;
}

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

.card ul li {
	margin-bottom: 10px;
}

.card ul li a {
	text-decoration: none;
	color: #333;
	display: block;
	padding: 5px 0;
}

.card ul li a:hover {
	color: #0056b3;
	padding-left: 5px; /* Delikatny efekt przesunięcia */
	transition: all 0.2s;
}

/* style dla informacji o oddziałach */
/* Layout oddziału */
.dept-grid {
	display: /*grid*/block;
	grid-template-columns: 2fr 1fr;
	gap: 30px;
	margin-top: 30px;
}

.dept-header {
	/*border-bottom: 4px solid #ffcc00;*/
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.dept-intro {
	font-size: 1.1rem;
	color: #555;
	line-height: 1.6;
}

/* Karty personelu */
.staff-card {
	background: #f8f9fa;
	border-left: 5px solid #0056b3;
	padding: 15px;
	margin-bottom: 15px;
	border-radius: 0 8px 8px 0;
}

.staff-info strong {
	display: block;
	color: #0056b3;
	font-size: 0.9rem;
}

.staff-info span {
	font-size: 1.1rem;
	font-weight: bold;
	display: block;
}

.staff-info small {
	color: #666;
}

.info-card {
	background: #e7f3ff;
	padding: 25px;
	border-radius: 12px;
	position: sticky;
	top: 100px;
}

.btn-link {
	display: block;
	margin-top: 20px;
	text-align: center;
	background: #0056b3;
	color: white;
	text-decoration: none;
	padding: 10px;
	border-radius: 5px;
	transition: background 0.3s;
}

.btn-link:hover {
	background: #004494;
}

/* Responsywność */
@media (max-width: 768px) {
	.dept-grid {
		grid-template-columns: 1fr;
	}
}


/*	=====================================================
	Sekcja przycisków dla programu żywienie dla zdrowia
	=====================================================*/

/* Kontener siatki dla linków PDF */
.pdf-grid {
	display: grid;
	/* Tworzy 3 równe kolumny, na telefonach przełącza się na 1 */
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Szerokość przycisków = 150px*/
	gap: 10px;
	margin-top: 20px;
}

/* Wygląd pojedynczego przycisku-linku */
.pdf-btn {
	display: block;
	padding: 12px;
	background-color: #f8f9fa;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
	color: #0056b3;
	font-weight: bold;
	transition: all 0.2s ease;
}

/* Efekt po najechaniu myszką */
.pdf-btn:hover {
	background-color: #0056b3;
	color: #ffffff;
	border-color: #004494;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Lista materiałów edukacyjnych */
.edu-links {
	list-style: none;
	padding: 0;
}

.edu-links li {
	font-size: 1.2rem;
	margin-bottom: 10px;
	padding-left: 30px;
	position: relative;
}

.edu-links li::before {
	content: "➜";
	position: absolute;
	left: 0;
	color: #ffcc00;
}
/* Kolory dla przycisków - różne dla miesięcy */
/* Zima - chłodne błękity i szarości */
.m-12 { background-color: #f0f8ff; border-color: #d1e9ff; } /* Grudzień */
.m-01 { background-color: #e6f2ff; border-color: #cce5ff; } /* Styczeń */
.m-02 { background-color: #f1f1f1; border-color: #dbdbdb; } /* Luty */

/* Wiosna - świeże zielenie i żółcie */
.m-03 { background-color: #d1ffe3; border-color: #82ffb2; } /* Marzec */
.m-04 { background-color: #deffde; border-color: #baffba; } /* Kwiecień */
.m-05 { background-color: #d3ff91; border-color: #bfff5e; } /* Maj */

/* Lato - ciepłe beże i błękit nieba */
.m-06 { background-color: #fffaf0; border-color: #ffebcc; } /* Czerwiec */
.m-07 { background-color: #f0ffff; border-color: #c2ffff; } /* Lipiec */
.m-08 { background-color: #fdf5e6; border-color: #f5deb3; } /* Sierpień */

/* Jesień - stonowane pomarańcze i wrzosy */
.m-09 { background-color: #fff5ee; border-color: #ffdab9; } /* Wrzesień */
.m-10 { background-color: #faf0e6; border-color: #eeddcc; } /* Październik */
.m-11 { background-color: #f5f5f5; border-color: #e0e0e0; } /* Listopad */

/* Wspólny efekt najechania dla wszystkich miesięcy */
.pdf-btn[class*="m-"]:hover {
	background-color: #0056b3 !important;
	color: #fffff0 !important;
	border-color: red /*#004494*/ !important;
}
/*	=====================================================
	Sekcja przycisków dla archiwum programu Dobry posiłek
	=====================================================*/

/* Siatka kart posiłków */
.meal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

/* Pojedyncza karta dnia */
.meal-card {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 15px;
	background: #fff;
	transition: transform 0.2s;
}

.meal-card:hover {
	transform: scale(1.02);
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.meal-date {
	font-weight: bold;
	color: #0056b3;
	border-bottom: 2px solid #ffcc00;
	margin-bottom: 15px;
	text-align: center;
}

.meal-images {
	display: flex;
	justify-content: center;
	gap: 15px;
	min-height: 50px; /* Zapewnia odstęp nawet gdy brak zdjęć */
}

.meal-images figure {
	margin: 0;
	flex: 0 1 200px; /* Zdjęcia nie będą się rozciągać */
}

.meal-images img {
	width: 200px;
	height: 150px;
	object-fit: cover; /* Ładnie przycina zdjęcia, jeśli mają różne proporcje */
	background: #f0f0f0; /* Lekkie tło zamiast pustki podczas ładowania */
}


.meal-images figcaption {
	font-size: 0.8rem;
	color: #666;
	margin-top: 5px;
}

.meal-footer {
	margin-top: 15px;
	text-align: center;
}

.meal-footer small {
	display: block;
	margin-top: 5px;
	color: #888;
}

/* Wsparcie dla kolorów miesięcy z poprzedniej sekcji */
/* Zima - chłodne błękity i szarości */
.meal-card.m-12 { background-color: #f0f8ff; } /* Grudzień */
.meal-card.m-01 { background-color: #e6f2ff; } /* Styczeń */
.meal-card.m-02 { background-color: #f1f1f1; } /* Luty */

/* Wiosna - świeże zielenie i żółcie */
.meal-card.m-03 { background-color: #d1ffe3; } /* Marzec */
.meal-card.m-04 { background-color: #deffde; } /* Kwiecień */
.meal-card.m-05 { background-color: #d3ff91; } /* Maj */

/* Lato - ciepłe beże i błękit nieba */
.meal-card.m-06 { background-color: #fffaf0; } /* Czerwiec */
.meal-card.m-07 { background-color: #f0ffff; } /* Lipiec */
.meal-card.m-08 { background-color: #fdf5e6; } /* Sierpień */

/* Jesień - stonowane pomarańcze i wrzosy */
.meal-card.m-09 { background-color: #fff5ee; } /* Wrzesień */
.meal-card.m-10 { background-color: #faf0e6; } /* Październik */
.meal-card.m-11 { background-color: #f5f5f5; } /* Listopad */


@media (max-width: 500px) {
	.meal-grid { grid-template-columns: 1fr; }
	.meal-images { flex-direction: column; }
}


/*	========================================================
	Sekcja dla strony Projekty Unijne
	========================================================*/

/* Kontener projektu */
.project-box {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 30px;
	margin-bottom: 40px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	width: 100%;
}

.project-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	border-bottom: 2px solid #ffcc00;
	margin-bottom: 20px;
	padding-bottom: 10px;
}

.project-header h2 {
	color: #0056b3;
	margin: 0;
}

.project-logos img {
	max-height: 60px; /* Logotypy nie powinny dominować */
	width: auto;
}

/* Galeria wewnątrz projektu */
.project-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 25px;
}

.project-gallery figure {
	margin: 0;
	text-align: center;
}

.project-gallery img {
	border-radius: 4px;
	transition: transform 0.3s ease;
}

.project-gallery img:hover {
	transform: scale(1.05);
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.project-gallery figcaption {
	font-size: 0.85rem;
	color: #666;
	margin-top: 8px;
}

/* Responsywność dla nagłówka projektu */
@media (max-width: 768px) {
	.project-header {
		flex-direction: column;
		gap: 15px;
	}
}

/*	============================================================*/
/* Stopka */
/*	============================================================*/
footer {
	background: /*#f8f9fa*/#eefcc0;
	max-width: var(--szer);
	margin: 40px auto 0;
	padding: 30px;
	box-sizing: border-box;
	border-top: 1px solid #ddd;
}

.footer-grid { display: flex; justify-content: space-between; }
.copy { text-align: center; margin-top: 30px; font-size: 0.8rem; color: #777; }



/*	============================================================*/
/* Styl dla ekranów mniejszych niż 768px (tablety i telefony)   */
/*	============================================================*/


@media screen and (max-width: 768px) {
	nav ul {
		flex-direction: column; /* Linki jeden pod drugim zamiast obok siebie */
		align-items: stretch;
		padding: 0;
	}

	nav ul li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Delikatna linia podziału */
	}

	nav a {
		padding: 15px 20px; /* Większy obszar klikalny dla kciuka */
		text-align: left;
	}

	/* Ukrywamy nagłówek (grafikę), jeśli na telefonie zajmuje zbyt dużo miejsca */
	header {
		height: auto; 
		min-height: 200px; /* Zmniejszamy wysokość nagłówka na mobile */
		padding: 20px;
	}
	
	header h1 {
		font-size: 1.5rem; /* Mniejszy tekst nagłówka */
	}
}