/*
	szerokość elementu width: 100%; będzie uwzględniała marginesy, padding i obramowanie
	box-sizing: border-box
*/

* {
    box-sizing: border-box;
}


/*
	Wymuszenie łamania linii (słowo lub znak)
	To wymusi załamanie tekstu w miejscach, gdzie nie ma spacji.
*/

p, div {
  word-wrap: break-word;
  overflow-wrap: break-word;
}


table.agenda-table {
	border: 0px solid #000;
	background-color: #f6f6f6;
}

table.agenda-table td {
	border: 1px solid #c2c2c2;
	padding:15px;
}


/*
----- EVENT VIEW -----
*/


.event-title {
    font-size: clamp(24px, 3vw, 36px);
    color: #000;
    margin-bottom: 1rem;
}

.event-div-datetime {
    background: #f5f5f5;
    padding: 1.0rem;
    border-radius: 3px;
    margin-bottom: 1.0rem;
}

.event-description {
    padding: 1.5rem;
    background: #f8f8f8;
	color:#808080;
	font-size:small;
    border-radius: 3px;
    margin: 1.5rem 0;
    line-height: 1.6;
}



/*
----- TOP Head Title -----
*/

.top-title-container {
	margin: 10px auto;
	padding: 10px;
	text-align: center;
	
	background: #dcdcdc;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.top-title-container h2 {
	color: #333;
}

.top-title-container p {
	color: #333;
	font-size:smaller;
}


/*
----- MAIN-MENU -----
*/
        /* Style menu */
        ul.main-menu {
            padding-left: 0px;
            background-color: #DDDDDD;
            list-style-type: none;
            width: 100%;
            display: flex;
            flex-wrap: nowrap; /* Zapobiega zawijaniu elementów menu */
            overflow-x: auto; /* Dodaje przewijanie w poziomie na małych ekranach */
        }
        
        ul.main-menu > li {
            display: inline-block;
            padding: 15px;
            background-color: #808080;
            white-space: nowrap; /* Zapobiega zawijaniu tekstu w elementach menu */
            margin-right: 2px; /* Dodaje odstęp między elementami menu */
        }
        
        /* Specjalne style dla elementu "dodaj wydarzenie" */
        ul.main-menu > li.menu-right {
            margin-left: auto; /* Przesuwa element na prawą stronę */
            margin-right: 0; /* Usuwa prawy margines dla ostatniego elementu */
        }
        
        ul.main-menu > li:hover {
            background-color: #2779BF;
        }
        
        ul.main-menu > li > a {
            color: white;
            text-decoration: none;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis; /* Dodaje "..." gdy tekst jest zbyt długi */
        }
        
        /* Na małych ekranach skraca tekst w elementach menu */
        @media (max-width: 768px) {
            ul.main-menu > li:first-child > a {
                max-width: 120px; /* Ogranicza szerokość pierwszego elementu */
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            ul.main-menu > li.menu-right > a {
                max-width: 100px; /* Ogranicza szerokość przycisku "dodaj wydarzenie" */
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            ul.main-menu > li {
                padding: 10px; /* Zmniejsza padding na małych ekranach */
            }
        }
        
        /* Na bardzo małych ekranach (telefony) można jeszcze bardziej skrócić */
        @media (max-width: 480px) {
            ul.main-menu > li:first-child > a {
                max-width: 100px;
            }
            
            ul.main-menu > li.menu-right > a {
                max-width: 80px;
            }
        }

/*
----- END MAIN-MENU -----
*/


/*
------------------------------------------
------  BUTTON EYE / SUBSCRIBE   ---------
------------------------------------------
*/

.btn_subscribed {
  background-color: Green; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.btn_unsubscribed {
  background-color: Red; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}


/*
--------------------------------------------------
------  CHECKBOX OBSERVED EYE  ---------
--------------------------------------------------
*/

/*
 -------- END OBSERVED EYE
*/

#search_display {
	background-color:#cdcdcd;
	padding:10px;
}

.search_display_el {
	background-color:#808080;
	padding:10px;
	color:red;
	border:1px solid #000;
}


/* -- */


.hr-delicate {
  border: none;
  height: 1px;
  background: linear-gradient(to right, 
    transparent 0%, 
    rgba(148, 163, 184, 0.4) 30%, 
    rgba(148, 163, 184, 0.8) 50%, 
    rgba(148, 163, 184, 0.4) 70%, 
    transparent 100%);
  margin: 12px 0;
}



/* */

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 40px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.nav-menu li {
  margin: 0;
}

.nav-menu a {
  position: relative;
  text-decoration: none;
  color: #1e293b;
  font-weight: 500;
  font-size: 16px;
  padding: 10px 0;
  transition: color 0.3s ease;
}

.nav-menu a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -8px;
  left: 50%;
  background-color: #3b82f6;
  transition: width 0.35s ease, left 0.35s ease;
  transform: translateX(-50%);
}

.nav-menu a:hover {
  color: #2563eb;
}

.nav-menu a:hover::after {
  width: 100%;
  left: 0;
  transform: translateX(0);
}