@import "grids.css";
@import "slides.css";


/*
///////////////////definicja używanych fontów
*/
@font-face {
		font-family: main;
		src: url('../fonts/OpenSansCondensed-Bold.ttf') format("truetype");
		}
		
@font-face {
		font-family: post;
		src: url('../fonts/OpenSansCondensed-Light.ttf') format("truetype");
		}

/*	
@font-face {
		font-family: files;
		src: url('../fonts/OpenSansCondensed-Light.ttf') format("truetype");
		}
*/

/*
///////////////////EFEKTY SPECJALNE
*/

@keyframes background_change {
	from {background-color: white;}
	to {background-color: rgb(133, 122, 25);}
	}

@keyframes pulse {
	  0% {background-color: rgba(225,0,0,0.2);}
	  100% {background-color: rgba(255,255,255,0.0);}
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

	.mask1 {-webkit-mask-image: linear-gradient(to top, transparent 5%, black 95%)}
		
	.mask2 {-webkit-mask-image: linear-gradient(to top, transparent 5%, black 10%);}


/*
///////////////////PODSTAWOWE ZNACZNIKI HTML
*/
		
body {
		background-color: silver;
		font-family: main;
		background-attachment: fixed;
		background-image: url(../graphics/east.jpg);
		background-repeat: no-repeat;
		background-position: left bottom;
		text-align: center;
		margin: 0;
		scrollbar-color: transparent transparent;
	}

img {pointer-events: none;}

h1 {font-size: 35px;}

a {color: inherit; text-decoration: none;}
	
a:hover{opacity: 0.5; color: rgb(133, 122, 25);}

/*///////////focus na linki////////*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(225, 41, 105, 0.85); /* czerwony akcent z motywu */
  outline-offset: 2px;
  border-radius: 4px;
}


/*strong {font-size: 30px;}*/

form input{
		font-family: main;
		color: red;
		font-size: 18px;
		width: 100%;
		border-style: hidden;
		border-radius: 8px;
		margin-left: 2px;
		margin-top: 0px;
		padding-left: 10px;
}

form input[type=submit]{
		background-color: rgb(225,41,105);
		font-family: revert;
		text-align: revert;
		font-size: 22px;
		width: revert;
}

form input[type=submit]:hover{
			opacity: 0.5;
			color: orange;
			font-weight: normal;
}

/*
///////////////////IDENTYFIKATORY
*/

#HIDDEN {
  /* display: hidden; // WRONG */
  display: none;
}

	
#TOP  {
	   position: fixed;
	   top: 0px;
	   left: 0px;
	   height: 25px;
	   background-color: transparent;
	   z-index: 45;
	}

#BOTTOM  {
	   left: 0px;
	   height: 35px;
	   background-color: grey;
	   z-index:100;
	   position: fixed;
	   bottom: 0px;
	   left: 0px;
}

#FILEFIELD {
		font-family: post;
		color: black;
		font-size: 24px;
		text-align: left;
		overflow-y: auto;
		width: 65vw;
		margin-left: 14%;
		margin-right: 15%;
		margin-bottom: 25px;
		padding-top: 25px;
		padding-left: 25px;
		padding-right: 25px;
}


#MENIC {
		width: 35px;
		height: 5px;
		background-color: black;
		margin: 6px 0;
}

#UP {margin: 0;}	


#HIDDEN {display: none;}
	
			
#LIMITER {height: 2px; background-color: rgba(230,0,12,0.1);}

#MANIFESTO{		
			overflow-y: scroll;
			padding-top: 20px;
			padding-left: 20px;
			padding-right: 20px;
			padding-bottom: 20px;
			background-color: rgba(255,255,255,0.8);
			width: 97%;
			margin-right: 3.5px;
			margin-top: 3px;
}

#HEADER {
			position: fixed;
			top: 0px;
			left: 0px;
			background-color: rgb(133, 122, 25);
			height: 35px;
			line-height: 35px;
			color: white;
			font-size: 20px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
			z-index: 150;
	}

#NAV {
		background-color: white;
		color: yellow;
		text-decoration: none;
		z-index: 1;
	}

		
#FOOTER {
			left: 0px;
			background-color: transparent;
			color: white;
			height: 35px;
			line-height: 35px;
			font-family: post;
			font-size: 15px;
	}
	
		
#POST {
		height: 25px;
	}
		
		
#RESPONSE {
			height: 45px;
			text-overflow: scroll;
	}

/*
///////////////////KLASY
*/
.TITLE {margin-left: 2.5%; width: 90%;}
.HEADLINE > .TITLE > strong {font-size: 35px;}
.TITLE > strong {font-size: 30px;}
.TITLE > strong > small {text-decoration: overline;}

.HEADLINE {		
			color: rgb(133, 122, 25);
			width: 60vw;
			min-height: 350px;
			max-height: 400px;
			overflow-y: hidden;
			border: 3px solid red;
			background-color: rgba(255,255,255,0.8);
			margin-left: 5%;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
		}
.HEADLINE:hover{animation: pulse 2s;color: black;}


.PRVHEADER {
			width: 94.5%;
			margin-left: 2.5%;
			color: black;
			margin-top: 25px;
			margin-bottom: 10px;
			/*margin-right: 13%;*/
			background-color: rgb(133, 122, 25);
			height: 30px;
			line-height: 30px;
			color: white;
			font-size: 18px;
			padding-right: 10px;
			text-align: right;
		}


/*//////////////////////////////////////////////////////////*/

.PREVIEW {		
			float: left;
			width: 17vw;
			height: 300px;
			overflow-y: hidden;
			padding-left: 0.5%;
			padding-right: 1%;
			background-color: rgba(255,255,255,0.5);
			margin-left: 5%;
			margin-top: 5px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
		}
.PREVIEW:hover{animation: pulse 2s;}
.OLDHEADER {
			width: 99%;
			color: black;
			margin-top: 25px;
			margin-bottom: 10px;
			/*margin-right: 13%;*/
			background-color: grey;
			height: 30px;
			line-height: 30px;
			color: white;
			font-size: 16px;
			padding-right: 5px;
			text-align: right;
		}
		
/*//////////////////////////////////////////////////////////*/
	

.TRANSFORM {background-color: inherit;}
.TRANSFORM:hover {opacity: 0.5; color: yellow;}

.RIGHT {text-align: right;}

.LEFT {text-align: left;}
	
.SEPARATOR {text-align: center;}

.DROPPER {height: 1px; overflow: hidden;}
	
.nodrop {color: rgb(225,41,105); font-size: 0px;}
.nodrop:hover {color: rgb(225,41,105);}
		

.SPACER {
			font-size: 28px;
			text-align: center;
			line-height: 28px;
			font-family: main;
			color: transparent;
}
	
.PICTURE {
			display: block;
			margin-top: 30px;
			margin-bottom: 30px;
			margin-left: auto;
			margin-right: auto;
			width: 95%;
			height: 95%;
			min-width: 280px;
			text-align: center;
			font-family: main;
			object-fit: contain;
}

.PICTURE,
.PICTURE img {
  max-width: 100%;
  height: auto;
  /* WHY: nie naruszamy Twoich object-fit na konkretnych klasach; to tylko guard */
}

.iconav {
			display: block;
			margin-left: auto;
			margin-right: auto;
			width: 100%;
			text-align: center;
			font-family: main;
			object-fit: contain;
			line-height: 40px;
			padding-left: 1.1vw;
}

.mtext{ padding-right: 50px;
		padding-left: 50px;
		padding-bottom: 50px;
		overflow-y: scroll;
			
}
	

.mpic{ 	background-image: url(../graphics/manif.jpg);
		background-repeat: no-repeat;
		min-height: 640px;
		background-position: center;
		background-size: contain;
}

.LOGO {height: 150px; margin-top: 50px;}

/* EXPECTS: hover/animacje tylko na urządzeniach z kursorem (desktop) */
@media (hover: hover) and (pointer: fine) {
  a:hover { opacity: 0.5; color: rgb(133, 122, 25); }
  .TRANSFORM:hover { opacity: 0.5; color: yellow; }
  .PREVIEW:hover { animation: pulse 2s; }
  .HEADLINE:hover { animation: pulse 2s; color: black; }
}

/* EXPECTS: szacunek dla prefers-reduced-motion (ogranicz animacje) */
@media (prefers-reduced-motion: reduce) {
  /* wycisz pulsacje i flashowanie :target – wygląd bez zmian, mniej „ruchu” */
  .PREVIEW:hover,
  .HEADLINE:hover,
  :target {
    animation: none !important;
    transition: none !important;
  }
}


/*  GO FULL WIDTH BELOW 1280 PIXELS */
@media only screen and (max-width: 1500px) {
	/*.col {  margin: 0; }*/
	
	form input { width: 75%;}
	
	.span_1_of_4,.span_2_of_4,.span_3_of_4,.span_4_of_4 { width: 100%; }
	.span_1_of_5,.span_2_of_5,.span_3_of_5,.span_4_of_5,.span_5_of_5 { width: 100%; }
	.span_1_of_3,.span_2_of_3,.span_3_of_3 {width: 100%; }
	
	.noshow {height: 3%; font-size:0px; background-color: white;}
	
	.nodrop {font-size: 20px; color: white;}
	.nodrop:hover {color: orange;}
	
	.PREVIEW {width: 90.5%; height: 270px;}
	
	.HEADLINE {width: 91.5%; height: 300px;}
	
	.PRVHEADER {margin-left: 6px;}
	
	.OLDHEADER {margin-left: 5px;}
	
	.LOGIN-INPUT {width: 100px;}
	
	.LOGIN-BUTTON:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}
	
	.mask1 {-webkit-mask-image: linear-gradient(to top, transparent 20%, black 95%);}
	
	.LOGO {height: 0px; width: 100%; margin-top: -150px;}
	
	
	#FILEFIELD {padding-top: 0.2%; width: 72%; margin-left: 11%;  font-size:18px;}
	
	#LIMITER {height: 1px; background-color: black;}
	
	#TOP {height: 180px; background-color: white;}
	
	#HEADER {line-height: 25px; height: 25px; overflow: hidden;}
	
	#HEADER:hover {line-height: 35px; height: 190px; overflow: hidden; animation: revert;}
	
	#RESPONSE {height: auto; min-height: 15px;}
	
	#LEFT {color: rgb(133, 122, 25);}
	
	#LOGIN-FORM {color:black; font-size: 12px; text-align: center;}
	
	#BOTTOM {height: 7px;}
	
	#FOOTER {height: 7px;}
	
}



/*  FOR MOBILE MODE 760 PIXELS */
@media only screen and (max-width: 760px) {
	body{
		background-image: url(../graphics/east.jpg);
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: 50% 125px;
		/*background-size: 60px;*/
		background-size: 120vh;
		}
	
	h1 {font-size: 20px;}
	
	.span_1_of_4,.span_2_of_4,.span_3_of_4,.span_4_of_4 { width: 100%; }
	.span_1_of_5,.span_2_of_5,.span_3_of_5,.span_4_of_5,.span_5_of_5 { width: 100%; }
	.noshow {height: 3%; font-size:0px; background-color: white;}
	
	.PREVIEW {box-shadow: revert; width: 93%; /*max-height: 200px;*/background-color: transparent; border-bottom: 2px solid grey; margin-left: 2%;}
	/*.PREVIEW > strong {font-size: 20px; width: 95%;/* margin-left: 2.8%;*/ /*padding-left: 2.8%;}*/
	.PRVHEADER {width: 90%; height: 25px; font-size: 1.9vh; line-height: 25px; margin-left: 2.8%;}
	
	.HEADLINE {width: 95%; /*max-height: 220px; height: revert;*/ min-height: revert; max-height: 35vh; background-color: rgba(255,255,255,0.4); border-style: hidden; margin-left: 2%; margin-top: 20%;}
	/*#mask1 > img {margin-left: 8px;}*/
	/*.HEADLINE > strong {font-size: 20px; width: 95%; margin-left: 2.8%;}*/
	.OLDHEADER {width: 90%; height: 25px; font-size: 1.9vh; line-height: 25px; margin-left: 2.8%;}
	.TITLE {width: 90%;}
	.HEADLINE > .TITLE > strong {font-size: 3vh;}
	.PREVIEW > .TITLE > strong {font-size: 2.9vh;}
	
	.LOGIN-INPUT {width: 100px;}
	
	.LOGIN-BUTTON:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}
	
	
	.mask1 {-webkit-mask-image: linear-gradient(to top, transparent 0%, black 95%);}
	
	.icon {height: 15px;}
	
	.iconav {height: 50px;z-index:100; padding-left: revert;}
	
	.PICTURE {max-width: 250px; min-width: 230px; /*margin-bottom: 20px;*/}
	
	/*.SPACER {font-size: 20px; line-height: 20px;}*/
	
	#FILEFIELD {padding-top: 0; width: 75vw; margin-left: 6vw;  font-size:18px; background-color: transparent /*rgba(255,255,255,0.4)*/;}
	
	#LIMITER {width: 95%; height: 1px; background-color: black;}

	#mask1 {text-align: center;}
	
	#RESPONSE {height: auto; min-height: 15px;}
	
	#LEFT {color: rgb(133, 122, 25);}
	
	#LOGIN-FORM {color:black; font-size: 20px; text-align: center;}

	#BOTTOM {height: 20px; line-height: 20px; background-color: transparent;}
	
	#FOOTER {height: 20px; line-height: 20px; color: white; background-color: grey;}
		
	#TOP {height: 0px; background-color: transparent;}
}

/* === COOKIE BANNER ==================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: rgba(20, 20, 20, 0.95);
  color: #fff;
  font-family: post, sans-serif;
  text-align: center;
  padding: 1.5em;
  z-index: 9999;
  line-height: 2;
  box-shadow: 0 -3px 8px rgba(0,0,0,0.5);
  overflow-y: auto;               /* pozwala przewijać na mobile */
  max-height: 70vh;               /* ograniczenie wysokości */
  box-sizing: border-box;
}

/* desktop – większa czytelność */
@media (min-width: 900px) {
  .cookie-banner {
    font-size: 25px;              /* standardowy tekst */
    line-height: 1.6;
    padding: 2em 4em;
    max-height: none;             /* pełna wysokość */
    overflow: visible;
  }
}

/* mobile – mniejszy padding i kontrola tekstu */
@media (max-width: 899px) {
  .cookie-banner {
    font-size: 0.85rem;
    padding: 1em;
  }
}

.cookie-banner small {
  font-size: 0.95em;
  color: #ddd;
  display: inline-block;
  text-align: left;
  max-width: 90vw;                /* ograniczenie szerokości tekstu */
}

.cookie-btn {
  margin-top: 1em;
  margin-right: 1em;
  background: rgb(133, 122, 25);
  border: none;
  color: #fff;
  padding: 0.5em 1.2em;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
}

.cookie-btn:hover {
  background: rgb(133, 122, 25);
}

.cookie-link {
  color: #ff9;
  font-size: 0.9em;
  text-decoration: none;
}

.cookie-link:hover {
  text-decoration: underline;
}