:root {
      /* Light mode */
      --bg:        #F4F6F8;
      --bg-alt:    #FFFFFF;
      --primary:   #1565C0;
      --secondary: #2E7D32;
      --accent:    #F9A825;
      --text:      #263238;
      --nav-bg:    #1565C0;
      --nav-text:  #FFFFFF;
	  --link-text: #1565C0;
      --link-hover:#F9A825;
      --card-bg:   #FFFFFF;
      --border:    #ECEFF1;
      }
	  
	 /* Dark mode overrides */
body.dark {      
      --bg:        #263238;
      --bg-alt:    #37474F;
      --primary:   #ECEFF1;
      --secondary: #90A4AE;
      --accent:    #F9A825;
      --text:      #ECEFF1;
      --nav-bg:    #37474F;
      --nav-text:  #ECEFF1;
	  --link-text: #00FFFF;	  
      --link-hover:#F9A825;
      --card-bg:   #455A64;
      --border:    #546E7A;
      }
*,
*::before,
*::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      }
/* 1) Cała strona ma „poduszki” przy kotwicach = wysokość nav + 0.5em */

html {
      scroll-padding-top: calc(3rem + 0.5em);
      }
/* 2) Każda sekcja dodatkowo deklaruje minimalny margines od góry */
      section {
      scroll-margin-top: 0.5em;
      }
body {
      font-family: 'Segoe UI', sans-serif;
      line-height: 1.6;
      color: var(--text);
      background: var(--bg);
      }
      a {
      text-decoration: none;
      color: var(--link-text);
      }
      p {
      margin: 0 0 0.5em;
      line-height: 1.6;
      }
	  
	  br {
		display: block;        /* zmienia <br/> na element blokowy */
		margin-bottom: 30px;   /* odstęp poniżej */
	  }
	  
	  hr {
	  width: 30%;
	  margin: auto;
	  margin-top: 1em;
	  margin-bottom: 1em;	  
	  }
	  

/* HEADER & NAVIGATION */
      nav {
      position: sticky;
      /* top: 0; */
      z-index: 100;
      background: var(--nav-bg);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      transition: top 0.3s ease-in-out;
      }
/* Klasa ukrywająca menu (wysokość dostosuj do swojego nav) */
      nav.nav--hidden {
      top: -60px;    /* lub -nav.offsetHeight + "px" */
      }
      nav ul {
      display: flex;
      align-items: center;
      list-style: none;
      padding: 0.5rem 1rem;
      }
      nav li {
      margin: 0.75rem 1rem;
      }
      nav li.theme-switch {
      margin-left: auto;
      }
      nav a {
      color: var(--nav-text);
      font-weight: 600;
      font-size: 0.95rem;
      }
      nav a:hover {
      color: var(--link-hover);
      }	  
      #theme-toggle {
      background: transparent;
      border: none;
      color: var(--nav-text);
      font-size: 1.2rem;
      cursor: pointer;
      }
      #theme-toggle:hover {
      color: var(--link-hover);
      }
	  

/* BANNER */
      .banner {
      width: 100%;
      background: var(--bg-alt);
      }
      .banner img {
      width: 100%;
      max-width: 700px;
      min-width: 300px;
      display: block;
      margin: 0 auto;
      /* logo w jasnym trybie */
      content: url("img/logo/logo1.png");
      }
body.dark .banner img {
      /* logo w ciemnym trybie */
      content: url("img/logo/logo2.png");
      }
	  

/* GENERAL SECTION STYLING */
      section {
      padding: 3rem 1.5rem;
      max-width: 1100px;
      margin: 2rem auto;
      background: var(--bg-alt);
      border-radius: 6px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
      }
      section:nth-of-type(even) {
      background: var(--bg);
      }
	  

/* SEKCJA NAGŁÓWKI */
      h2 {
      text-align: center;
      color: var(--text);
      margin-bottom: 1rem;
      font-size: 1.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      }
      h2 i {
      color: var(--secondary);
      margin-right: 10px;
      }
      footer h2 {
      color: var(--nav-text);
      }
	  footer h2 i {
      color: var(--nav-text);
      }
	  

/* DWUKOLUMNOWY UKŁAD DLA .projects */
      #postulaty  .projects,
      #cozrobilismy .projects,
      #projektysprzedlat  .projects{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      }
	  

/* Sekcja „Nasza historia” jako jednokolumnowa lista */
      section#historia .history {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;            /* odstępy między wpisami */
      /* max-width: 800px;       /* opcjonalnie: zawężenie szerokości */
      margin: 0 auto;         /* centrowanie */
      }

      section#historia .history-item h3 {
      font-size: 1.2rem;
      color: var(--secondary);
      margin-bottom: 0.5em;
      }

      section#historia .history-item p {
      margin: 0;
      line-height: 1.6;
      color: var(--text);
      }
	  

/* OVERRIDE BACKGROUND FOR HISTORY & GALLERY */
      section#historia {
      background: var(--bg);
      }
	  

/* OVERRIDE BACKGROUND FOR AUTHORITIES SECTION */
      section#wladze {
      background: var(--bg);
      }


/* REUSE HISTORY STYLING FOR AUTHORITIES */
      section#wladze .history {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      margin: 0 auto;
      }

      section#wladze .history-item h3 {
      font-size: 1.5rem;
      color: var(--secondary);
      margin-bottom: 0.5em;
      }

      section#wladze .history-item p {
      margin: 0;
      line-height: 1.6;
      color: var(--text);
      }



/* CARD-LIKE PROJECT BOXES */
      .project {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 1rem;
      }
	  
 

/* FOOTER */
      footer {
      background: var(--nav-bg);
      color: var(--nav-text);
      text-align: center;
      padding: 2rem 1rem;
      border-radius: 6px;
      max-width: 1100px;
      margin: 2rem auto;
      }
	  footer a {
		color: var(--nav-text);
	  }
      footer a:hover {
      color: var(--link-hover);
      }
	  

/* RESPONSIVENESS */
      @media (max-width: 768px) {
      #postulaty  .projects,
      #cozrobilismy .projects,
      #projektysprzedlat  .projects
      {
      grid-template-columns: 1fr; 
      }
      .gallery {
      grid-template-columns: repeat(2, 1fr);
      }
	  

/* ========== NAVIGATION – GLOBAL ========== */
      nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--nav-bg);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      transition: top 0.3s ease-in-out;
      }
      nav ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      list-style: none;
      padding: 0.5rem 1rem;
      }
      nav ul li {
      display: none;
      margin: 0;
      }
      /* przyciski zawsze widoczne */
      nav ul li.mobile-menu-toggle,
      nav ul li.theme-switch {
      display: block;
      }
      /* styl hamburgera */
      #menu-toggle {
      background: transparent;
      border: none;
      color: var(--nav-text);
      font-size: 1rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      cursor: pointer;
      }
      #menu-toggle i {
      font-size: 1.2rem;
      margin-right: 0.5rem;
      }
      #menu-toggle:hover {
      color: var(--link-hover);
      }
	  
	  

/* ========== ROZWINIĘTE MENU (dwie kolumny) ========== */
      nav ul.open {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem 1rem;
      padding: 1rem;
      }
      /* przycisk toggle i switch zajmują pełną szerokość menu */
      nav ul.open li.mobile-menu-toggle,
      nav ul.open li.theme-switch {
      grid-column: 1 / -1;
      }
      /* wyrównanie przycisku zmiany motywu do prawej */
      nav ul.open li.theme-switch {
      display: flex;
      justify-content: flex-end;
      }
      /* pokaż wszystkie linki w menu */
      nav ul.open li:not(.mobile-menu-toggle) {
      display: block;
      margin: 0;
      }
      /* odśwież wygląd linków */
      nav ul.open li a {
      color: var(--link-text);
      font-weight: 600;
      font-size: 0.95rem;
      }
      }
      @media (max-width: 480px) {
      .gallery {
      grid-template-columns: 1fr;
      }
      }

/* ========== Przycisk [rozwiń] ========== */
      .read-more-content {
      display: none;
      }
      .read-more-button {
      color: var(--link-text);
      cursor: pointer;
      text-decoration: none;
      font-weight: bold;
      }