/*
Theme Name: CHO
Author: Custom
Version: 1.0
*/
/* noto-sans-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/noto-sans-v42-latin-ext-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/noto-sans-v42-latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-sans-v42-latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/noto-sans-v42-latin-ext-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/noto-sans-v42-latin-ext-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/noto-sans-v42-latin-ext-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/noto-sans-v42-latin-ext-italic.eot'); /* IE9 Compat Modes */
  src: url('fonts/noto-sans-v42-latin-ext-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-sans-v42-latin-ext-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/noto-sans-v42-latin-ext-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/noto-sans-v42-latin-ext-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/noto-sans-v42-latin-ext-italic.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-700 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/noto-sans-v42-latin-ext-700.eot'); /* IE9 Compat Modes */
  src: url('fonts/noto-sans-v42-latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-sans-v42-latin-ext-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/noto-sans-v42-latin-ext-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/noto-sans-v42-latin-ext-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/noto-sans-v42-latin-ext-700.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-900 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/noto-sans-v42-latin-ext-900.eot'); /* IE9 Compat Modes */
  src: url('fonts/noto-sans-v42-latin-ext-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-sans-v42-latin-ext-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/noto-sans-v42-latin-ext-900.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/noto-sans-v42-latin-ext-900.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('fonts/noto-sans-v42-latin-ext-900.svg#NotoSans') format('svg'); /* Legacy iOS */
}

:root {
    --bg: white;
    --text: black;
	--green:#2f5d1d;
	--lightgreen:#568646;
	--lightlightgreen:#acc8a8;
}

body {
    background: var(--bg);
    color: var(--text);
	    margin: 0;
		font-family: "Noto Sans"; 
}

body.dark-mode {
    --bg: black;
    --text: white;
	--green:#568646;
	--lightgreen:#acc8a8;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4  {   font-weight:900;}
h1, .h1{font-size:2.5rem;     }	
h2, .h2{font-size:1.75rem; line-height:1.4;margin-bottom:1.75rem;}
h3, .h3{font-size:1.25rem; line-height:1.4;margin-bottom:1.25rem;}
h4, .h4{font-size:1.1rem; line-height:1.4;margin-bottom:1.1rem}
p {font-size:1rem; line-height:1.6;margin-bottom:1rem;}
p a {color:var(--green)}
.headertitle{text-align:right;font-size:5rem;padding-right:30px;line-height: 1;}
.page-template-projekty .headertitle, .single-post .headertitle, .projekty .headertitle{padding-right:0px;}

.corobimy{text-align:right;font-size:1.5rem;display:block;color:var(--green);font-weight:700;margin-bottom:-40px; margin-top:20px;}

.kalendarium-desc{text-align:right;font-size:1.5rem;display:block;color:var(--green);font-weight:700;margin-top:-40px;padding-bottom:30px;}
@media(max-width:768px){.corobimy{font-size:1rem;line-height:1.2;margin-bottom:-20px; margin-top:-20px;}.kalendarium-desc{font-size:1rem;margin-top:-10px}}
.corobimy a {color:var(--green); text-decoration:none;}
.corobimy .corobimy2 {color:var(--lightgreen);}

/* kontener główny */
.container {
    max-width: 1024px;
    margin: 0 auto;
	padding:0px 20px;
}
main {padding-bottom:6rem;}
/* HEADER */

.header {
  display: flex;

  justify-content: flex-start; /* wszystko do lewej */
  padding: 0;                  /* usuwa odstępy */
}

.logo {

  display: block;
  margin: 0;                   /* brak odstępów */
}
.logo img {
  height: 68px;
width: auto;
margin-top:16px;}

body.dark-mode .logo img 
{
 filter: invert(1); /* białe ikony */}
.title {
  font-size: 3.6rem;
  font-weight: 700;
  margin-left: 10px;           /* mały odstęp od logo */
  display:block;

}
@media(max-width:768px){
	.title {
  font-size: 2rem;
  padding-top:5px;
  line-height:1;}
  .headertitle{font-size:2rem;}
}

.title a{color:var(--text);
text-decoration:none;}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:20px;
  padding:20px 0px 0px 0px;
}
.header{  padding:20px 0px 0px 0px;}

.navmenu {
  display: flex;
  gap: 10px;
  flex:1;
}
@media(max-width:768px){
	.navmenu, .topbar nav {display:none;}
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
    flex:1;
	justify-content: flex-end;
}
/* pasek menu */
.nav-row {
    width: 100%;
    display: flex;
    margin: 30px 0 0 0;
	justify-content: flex-start;
	line-height:0;
	 position: relative;
}

/* czarna kropka po lewej */
.dot {
    width: 38px;
    height: 38px;
    background: var(--text);
    border-radius: 50%;
	cursor: pointer;
	margin-left:10px;

}
.menu1{display: block;
position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 🔥 idealne centrowanie */
  margin-left:-20px;}
.noabsolute{position:relative;margin-left:10px;}


@media(max-width:768px){
.dot {	
padding:0px;}
.menu1{display: none;}
}

/*hamburger menu*/
/* HAMBURGER */
.hamburger{
  width:40px;
  height:40px;
  background:transparent;
  border:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  cursor:pointer;
  z-index:1001;
  padding-left: 20px;
}

.hamburger span{
  width:24px;
  height:3px;
  background:var(--text);
  transition:.3s;
}

/* animacja → X */
.hamburger.active span:nth-child(1){
  transform:rotate(45deg) translate(5px,5px);
}
.hamburger.active span:nth-child(2){
  opacity:0;
}
.hamburger.active span:nth-child(3){
  transform:rotate(-45deg) translate(5px,-5px);
}

/* OVERLAY */
.overlay{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  width:300px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;

  z-index:2009;
}

.overlay.active{
  opacity:1;
  pointer-events:auto;
}

/* MENU */
.overlay-nav ul{
  list-style:none;
  width: 90%;
  padding:10px;
  margin:0;
  text-align:center;
    background:var(--green);
}

.overlay-nav li{
  margin:0;
width: 90%;
}

.overlay-nav a{
    font-size:1rem;
  text-decoration:none;
  display: block;
  width: 90%;
  padding: 15px;
  text-align: center;

}

/* CLOSE BUTTON */
.close2{

  top:0px;
  right:0px;
  font-size:60px;
  font-weight:700;
  background:none;
  border:none;
  color:white;
  cursor:pointer;
    background:var(--green);
margin-top: -116px;
margin-left:-10px;
}

/* RESPONSIVE */
@media(min-width:769px){
  .hamburger{
    display:none;
  }
}
/* menu */
nav {
    display: flex;
    gap: 15px;
	margin-left:-50px;
	}
.menu1 nav {display:inline;
text-align:center;
margin-left:-50px;}

.topbar nav {margin-left:0px;}
@media(max-width:768px){
	.navmenu {display:none;}
	nav {
    padding-top:5px;
	margin-left:0px;}
}
nav ul {padding:0px 20px;}

nav ul li a {
    text-decoration: none;
    background: var(--bg);
    border: 2px solid var(--text);
	 padding: 8px 16px;
    color: var(--text);


}
nav ul li a:hover {box-shadow: 3px 3px 0 var(--text);
font-weight:700;
  transition: transform 0.8s ease;}
nav ul li{
	display:inline-block;
	list-style:none;
	padding:2px;
			margin-bottom:10px;
}

.topbar nav ul{background:var(--text); padding:10px;box-shadow: 8px 8px 0px var(--green);}
.topbar nav ul li { padding: 0px;margin-bottom:0px;}
.topbar nav ul li a {
    text-decoration: none;
   	 padding: 8px 16px;
    color: var(--bg);
	background:none;
    border: none;

}
.topbar nav ul li a:hover {color: var(--bg);
font-weight:700;
  transition: transform 0.8s ease;
  background:none;
    border: none;
	box-shadow:none;}
	
.topbar nav ul li:nth-child(2)::before, .topbar nav ul li:nth-child(3)::before {
  content: "•";        /* kropka */
  margin: 0px 5px;      /* odstęp z lewej i prawej */
  color: var(--bg);        /* kolor kropki, dostosuj do tła */
  font-weight: bold;
}	
	

@media(max-width:768px){	
	#menu-menu-1 li:nth-child(2)::before,
	#menu-menu-1 li:nth-child(3)::before {content:none;}
	.topbar nav ul li {padding:5px 0px;}
	nav ul li {   padding: 2px;}
}
.name {font-size:1.5rem; font-weight:700; margin-top:-10px;line-height:1;}

.name a{ color:var(--text); text-decoration:none; }
/* SEKCJA TEKSTU */
.text-section {
    padding: 20px;
}
section, footer {padding:3rem 1rem;}
/* AKORDEON */
.accordion-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  max-width:600px;
}
.accordion-header h3 {color:var(--bg);
background-color:var(--text);
width:570px;
padding:5px 10px;
}

/*trójkącik osoby*/
.label {
  display: inline-flex;
  align-items: center;
  line-height:0;
}

.triangle {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid var(--text);
  margin-right: 10px;
}

/* plus jako pseudo-element */
.accordion-header::after {
  content: '+';
  font-size:2.75rem;
  font-weight:900;
  transition: transform 0.3s ease;
  padding:0px 20px;
}

/* po otwarciu → minus */
.accordion-item.active .accordion-header::after {
  content: '−';
}

/* content animacja */
.accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 
    max-height 0.4s ease,
    opacity 0.3s ease;
}

.accordion-content p{
border:2px solid var(--text);
padding:20px;
color:var(--green)}
.accordion-content p a{color:var(--lightgreen);}
/* otwarty stan */
.accordion-item.active .accordion-content {
  max-height: 3000px; /* zwiększ jeśli potrzeba */
  opacity: 1;
  background-color:white;
}

/* FOOTER */
footer {
    background: var(--text);
    display: flex;
    justify-content: center;
    padding: 20px 0;
	
}
.footer {
  display: flex;
  padding: 10px 20px;
  font-weight: bold;
   align-items: center;

}
.footer-left a {
  color: var(--bg);
  text-decoration: none;
  margin-right: 20px;
  padding-bottom:20px;
  font-size:1.2rem;
}
.footer-left {
  display: flex;
  align-items: flex-start;
  margin: 0;

}
@media(max-width:768px){
	.footer-left a {font-size:1rem;}
	.footer-left span {display:block; padding:10px;}
	.footer-left {padding:20px;}
  .footer {flex-direction:column;}
}
.footer a:hover {
  text-decoration: underline;
}
.footer-right {
  display: flex;
  align-items: center;

	text-align:right;
	  margin-left: auto;

}
.logo-uam {
  margin-right: 15px;
  height:54px;
}

.icon1 {
  width: 34px;
  height: 34px;
  margin-left: 10px;

}
.icon2 {
  width: 42px;
  height: 34px;
  margin-left: 10px;

}
body.dark-mode img.icon1,body.dark-mode img.icon2,body.dark-mode img.logo-uam
{  filter: invert(1); /* białe ikony */}  
.title-footer {
  font-size: 3.3rem;
  font-weight: 900;
  text-align: right;
  padding: 20px;
  text-transform: lowercase;
  color:var(--bg);
  background-color:var(--text);
  display:block;
}
@media(max-width:768px){
	.title-footer {
	font-size: 2rem;}
}
/*HOME*/


.text-section {
position: relative;
  font-size: 20px;
  line-height: 1.4;

padding-right: 40px; /* miejsce na plusa */}
.flexhome {
  display: flex;
  align-items: flex-end; /* plus na dole tekstu */
}

.flextext {
  flex: 1;              /* zajmuje całą dostępną przestrzeń */
}
.flextext p {font-size:1.5rem;font-weight:700;line-height:1.4;}
@media(max-width:768px){.flextext p {font-size:1rem;line-height:1.4;}
}
.flexplus {
  flex: 0 0 auto;       /* nie rozciąga się */
  margin-left: 10px;    /* odstęp od tekstu */
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
    font-size: 60px;
  font-weight: bold;
  line-height: 1;
    text-decoration: none;
	transition: transform 0.3s ease;
	color:var(--text);
 
}

.more-text {
  display: none; /* ukryte na start */
transition: transform 0.3s ease;

}
.more-text.active {
 display: block;
}
/*animacje*/
.fade-in {
  animation: fadeIn 1.2s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*formularz*/
.search{text-align:right;
padding-right:120px;
}
.search2{
padding-right:60px;
}

input{background-color:var(--text);
border:none;
color:var(--bg);
height:1.5rem;
width:240px;}
.search-btn {
  background: none;
  border: none;
  cursor: pointer;
  color:var(--text);
}
@media(max-width:768px){
.search{padding:40px 0px 20px 0px;
text-align:center;width:100%;}
input{width:90%;}
.search-btn{width:5%;}
}
/*co robimy*/
/* GRID FLEX */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.projekty .grid {
display:block;
}
/* każda karta = 50% szerokości */
.card {
  display: flex;
  flex-direction: column;
  width: calc(50% - 30px);
}
.projekty .grid .card{  width: calc(100% - 10px);
margin-bottom:30px;}
@media(max-width:768px) {
	.card {

  width: calc(100% - 30px);
}
}

/* górna część */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid var(--text);
  background:var(--bg);
  padding: 0px 20px 20px 20px;
  z-index:1;
  height:150px;
}


.projekty .grid .card-top {  justify-content:start;}
body.dark-mode .card-top{
  background: var(--bg);

}

.card-top h2 {
  font-size: 2rem;
  margin-bottom:0px;
}
@media (max-width: 768px) {
	.card-top { height:auto;}
.card-top h2 {
  font-size: 1.2rem;
  margin-bottom:0px;
}
}
.card-top h2 a {
	color:var(--text);
	text-decoration:none;
}

.close {
  font-size: 4rem;
  font-weight:900;
   transform: rotate(45deg);
   transform-origin: center;
     padding-right:20px;
	 margin-top:40px;
}

/* dolna część */
.card-bottom {
  background: var(--green);
  color:white;
  padding: 80px 15px 15px 15px;
 margin-top: -70px;
  margin-left: 10px;
  max-width: 100%;
  margin-right: -10px;
  border:2px solid black;
  min-height: 80px;
  display: flex;
  align-items: center; 
}
.card-bottom p {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* liczba linii */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/*single*/
.content {
  display: flex;
  gap: 40px;
}

/* LEWA KOLUMNA */
.left {
  flex: 2;
  font-size: 14px;
  line-height: 1.6;
}

/* PRAWA KOLUMNA */
.right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* VIDEO */
.video {
  width: 100%;
  margin-bottom: 20px;
}
.video img {max-width:100%}

/* PRZYCISKI */
.buttons {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.btn {
  width: 100px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

/* obrazy */
.btn.video {
  background-image: url('images/video1.png');
}

.btn.pdf {
  background-image: url('images/pdf1.png');
}

.btn.mp3 {
  background-image: url('images/podcast1.png');
}
body.dark-mode .btn.video {
  background-image: url('images/video2.png');
}

body.dark-mode .btn.pdf {
  background-image: url('images/pdf2.png');
}

body.dark-mode .btn.mp3 {
  background-image: url('images/podcast2.png');
}
.icon {
  width: 60px;
  height: 60px;
  border: 2px solid #3b5d1e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

/* OPIS */
.note {
  font-size: 1rem;
  text-align: center;
  color:var(--lightgreen);
  font-style: italic;
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }

  .right {
    align-items: flex-start;
  }
}
/*video modal*/
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
}

.video-content {
  position: relative;
  width: 90%;
  max-width: 800px;
  margin: 5% auto;
}

.video-container iframe {
  width: 100%;
  height: 450px;
}

.video-close {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}
/*timeline*/
/* kontener scrolla */
.timeline-wrapper{margin:5rem 1rem;}

.timeline-grid {
  display: grid;
  grid-auto-flow: row;        /* pionowo */
  grid-template-columns: 1fr; /* jedna kolumna dla całego timeline */
  gap: 40px;    
}

/* KOLUMNA */
.timeline-col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* dwie równe kolumny 50/50 */
  align-items: start;

}

/* KWADRATY */

.timeline-box1, 
.timeline-box2, 
.timeline-box3, 
.timeline-box4 {
  width: 100%;       /* zajmują 100% swojej kolumny */
  box-sizing: border-box;
}
.timeline-box1 {display:block;text-align:right; border-right: 2px solid var(--green);height:100%;}
.timeline-box4 {display:block;text-align:left;  border-left: 2px solid var(--green);height:100%;}
.timeline-box1, .timeline-box4 {
  align-items: flex-end;     /* dolne wyrównanie */
  justify-content: flex-start;
  font-size: 2rem;
  color: var(--green);
  font-weight: 700;
   
}

.timeline-box2, .timeline-box3 {
  align-items: flex-start;   
  justify-content: flex-start;
  font-size: 0.5rem;
border-top: 2px solid var(--green);}
.timeline-box2 p, .timeline-box3 p{font-size:1rem; }
.timeline-box3{
  border-right: 2px solid var(--green);
  padding: 30px 130px 5px 30px;
}
.timeline-box2{ border-left: 2px solid var(--green);padding: 30px 30px 5px 130px;}

@media (max-width: 768px) {
	.timeline-box3{
padding: 0 30px 5px 30px;}

.timeline-box2{padding: 0 30px 5px 30px;}
}
/* Usunięcie aspect-ratio, bo teraz boxy dzielą się równo */
.timeline-box1, .timeline-box2, .timeline-box3, .timeline-box4 {
  aspect-ratio: unset;
}

/* Opcjonalne style dla tekstu */
.year {display: block;margin-right:-3px;font-size:2rem;}
.year2 {margin-left:-3px;font-size:2rem;}
.month, .timeline-box2 strong {color:var(--green);font-weight:700;}
.timeline-box2 p strong ,strong{color:var(--green);font-weight:700;}

/*animacja sekcji*/
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}