:root{
  --pttk-green:#1c7c3d;
  --pttk-dark:#1e2a22;
  --rail-gray:#d9d9d9;
  --ink:#111;
  --paper:#fff;
  --muted:#666;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}

img{max-width:100%;height:auto}
h1,h2,h3{color:var(--pttk-dark);margin:.6rem 0}

/* layout */
.container{max-width:1000px;margin:0 auto;padding:0 1rem}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
  position:relative;
}

/* delikatny separator POD przyciskami w headerze */
.header::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  border-top:4px dotted var(--rail-gray);
  opacity:.6;
}

/* brand */
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  color:var(--pttk-dark);
}

.brand-logo{
  width:100px;
  height:auto;
  margin-right:.6rem;
}

.brand-text{
  font-weight:700;
  font-size:1.8rem;
  line-height:1.2;
}

.brand-text small{
  font-weight:500;
  color:var(--muted);
  font-size:1rem;
}

/* NAVIGATION (desktop) */
.nav{
  display:flex;
  align-items:center;
  gap:0; /* separatory robią border-left na linkach */
}

.nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:0 .9rem;
  text-decoration:none;
  color:var(--pttk-dark);
  border-left:2px solid var(--muted);
  white-space:nowrap;
}

.nav a:first-child{border-left:none}
.nav a:hover{color:var(--pttk-green)}

/* Ikona FB w top-nav */
.nav .fb-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:.9rem;
}

.nav .fb-icon svg{
  fill:#1877f2;
  transition:fill .2s ease;
}

.nav .fb-icon:hover svg{fill:#145dbf}

/* fb link badge (jeśli używasz gdzieś poza nav) */
.fb-link a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  text-decoration:none;
}
.fb-link svg{fill:#1877f2}
.fb-link a:hover{text-decoration:underline}

/* cards / grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.card{border:1px solid #eee;border-radius:14px;padding:1rem;background:#fff}
.card img{border-radius:10px}

/* messages */
.messages{list-style:none;margin:0;padding:0}
.messages li{
  padding:.6rem 1rem;
  border:1px solid #cfe3cf;
  background:#f6fff6;
  border-radius:8px;
  margin:.5rem 0;
}

/* footer */
.footer{
  margin-top:2rem;
  padding:1rem 0;
  border-top:4px dotted var(--rail-gray);
  text-align:left;
}

.footer-cols{
  display:flex;
  justify-content:center;
  gap:3rem;
  flex-wrap:wrap;
  margin:.5rem 0 1rem;
}

.footer-cols>div{min-width:225px}

.footer a{
  text-decoration:none;
  color:var(--pttk-green);
}

.footer a:hover{text-decoration:underline}

.copyright{color:#888;font-size:.9rem}

/* helpers */
.lead{font-weight:600}

/* HERO slider (desktop) */
.hero-slider{
  position:relative;
  width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;

  height:min(60vh, 600px);
  max-height:500px;
  overflow:hidden;
  border-radius:0;
}

/* wrapper na slajdy */
.hero-slides{
  position:absolute;
  inset:0;
}

.hero-slider .slide{
  position:absolute;
  inset:0;
  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 800ms ease-in-out;
}

.hero-slider .slide.is-active{opacity:1}

.hero-slider .slide{z-index:0}
.hero-slider .hero-overlay{z-index:1}
.hero-side,.hero-dots{z-index:3}

.hero-slider .hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  box-shadow:inset 0 0 60px rgba(0,0,0,.5);
  pointer-events:none;
}

/* boczne przyciski (desktop) */
.hero-side{
  position:absolute;
  left:1rem;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.hero-side a{
  display:block;
  padding:.6rem .9rem;
  min-width:180px;
  background:rgba(28,124,61,.9);
  color:#fff;
  text-decoration:none;
  border-radius:10px;
  font-weight:600;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.15);
}

.hero-side a:hover{background:rgba(28,124,61,1)}

/* kropki */
.hero-dots{
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:.5rem;
}

.hero-dots .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:rgba(255,255,255,.6);
}

.hero-dots .dot.is-active{background:#fff}

/* --- MOBILE MENU (hamburger) --- */
.mobile-toggle{
  display:none; /* desktop: ukryty */
}

.mobile-menu{
  display:none; /* domyślnie zamknięte */
  background:#fff;
  border-top:1px dotted var(--rail-gray);
  border-bottom:1px dotted var(--rail-gray);
  padding:.4rem 0;
}

.mobile-menu a{
  display:block;
  padding:.7rem 1rem;
  text-decoration:none;
  color:var(--pttk-dark);
  font-weight:600;
}

.mobile-menu a:hover{background:#f6fff6}

.mobile-menu.is-open{display:block}

/* =========================
   MOBILE (<=700px) – JEDNA, SPÓJNA WERSJA
   ========================= */
@media (max-width:700px){

  /* header układ: brand na górze, nav w jednym wierszu pod spodem */
  .header{
    flex-direction:column;
    align-items:stretch;
    gap:.4rem;
    padding-bottom:.4rem;
  }

  .brand{width:100%}

  .brand-logo{width:64px;margin-right:.6rem}

  .brand-text{
    font-size:1.25rem;
    line-height:1.15;
  }

  .brand-text small{font-size:.9rem}

  /* nav: trzymamy w 1 wierszu */
  .nav{
    width:100%;
    display:flex;
    align-items:center;
    gap:.6rem;
    flex-wrap:nowrap;        /* klucz: nie łamie na 2 linie */
  }

  .nav a{
    padding:.35rem .4rem;
    font-size:.95rem;
    border-left:none;        /* na mobile separatory tylko psują */
  }

  /* FB wypychamy na prawo */
  .nav .fb-icon{
    margin-left:auto;
  }

  /* hamburger na sam koniec (WAŻNE: w HTML też najlepiej daj go na końcu nav) */
  .mobile-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:.3rem;       /* nie auto, bo to robiło “rozjechanie” */
    padding:.35rem .6rem;
    font-size:1.25rem;
    border:1px solid var(--rail-gray);
    border-radius:10px;
    background:#fff;
    cursor:pointer;
  }

  /* hero: na mobile wyłączamy dodatkowe menu przy sliderze */
  .hero-side{display:none !important;}

  /* hero slider: zostawiamy, ale jeśli chcesz go skracać na mobile – możesz tu zmienić wysokość */
  .hero-slider{
    height:min(45vh, 420px);
    max-height:420px;
  }
}

/* ładna typografia długich tekstów */
.prose{
  max-width: 72ch;        /* czytelna szerokość kolumny */
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.8;
}

.prose p{
  margin: 0 0 1rem;
  text-align: justify;
  hyphens: auto;
}

.prose h1{ margin-top: .2rem; }
.prose h3{ margin-top: .4rem; color: var(--muted); font-weight: 700; }

.prose b{ color: var(--pttk-dark); }

.prose ul{
  padding-left: 1.2rem;
  margin: .4rem 0 1rem;
}

.prose li{ margin: .35rem 0; }


/* ===== WŁADZE – styl statutowy (funkcja — osoba) ===== */

.authority{
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
}

.authority-section{
  margin: 1.6rem 0 2.2rem;
}

.authority-section h2{
  font-size: 1.35rem;
  margin: 0 0 .9rem;
  padding-bottom: .35rem;
  border-bottom: 2px dotted var(--rail-gray);
  color: var(--pttk-dark);
}

/* UL bez kropek */
.authority-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

/* każdy wiersz jak “Prezes — Jan Kowalski” */
.authority-row{
  display: grid;
  grid-template-columns: 180px 24px 1fr; /* rola | — | imię i nazwisko */
  gap: .4rem;
  padding: .35rem 0;
  /*border-bottom: 0px solid #f1f1f1;*/
}

.authority-role{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--pttk-dark);
}

.authority-sep{
  color: #999;
  text-align: center;
}

.authority-name{
  font-weight: 400;
  color: var(--ink);
}

/* mobile: rola nad nazwiskiem */
@media (max-width: 520px){
  .authority-row{
    grid-template-columns: 1fr;
  }
  .authority-sep{ display: none; }
  .authority-name{ padding-left: 0; }
  .authority-role{
    font-size: .95rem;
  }
}

/* =======================
   ODZNAKI (tylko ta strona)
   ======================= */

.odznaki-page{max-width: 920px; margin: 0 auto;}
.odznaki-page .muted{color: var(--muted);}

.odznaki-page .odznaki-actions{margin-top:.6rem;}
.odznaki-page .btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem .9rem;
  border-radius:999px;
  border:1px solid var(--rail-gray);
  text-decoration:none;
  color:var(--pttk-dark);
  background:#fff;
  font-weight:700;
}
.odznaki-page .btn:hover{color:var(--pttk-green); border-color:var(--pttk-green);}

.odznaki-page .badge-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1rem;
  margin:1rem 0 1.4rem;
}
@media (max-width: 760px){
  .odznaki-page .badge-grid{grid-template-columns:1fr; }
}

.odznaki-page .badge-card{
  border:1px solid #eee;
  border-radius:16px;
  padding:.9rem;
  background:#fff;
  text-align:center;
}
.odznaki-page .badge-card img{
  width:min(220px, 100%);
  height:auto;
  display:block;
  margin:0 auto .6rem;
}

.odznaki-page .card{
  border:1px solid #eee;
  border-radius:16px;
  padding:1rem;
  background:#fff;
  margin:1rem 0;
}
.odznaki-page .card.soft{background:#fbfffb; border-color:#e6f3e6;}

.odznaki-page .nice-list{margin:.6rem 0 0; padding-left:1.1rem;}
.odznaki-page .nice-list li{margin:.35rem 0;}

.odznaki-page .table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid #eee;
  border-radius:14px;
  background:#fff;
}

.odznaki-page .nice-table{
  width:100%;
  border-collapse:collapse;
  min-width:640px; /* na telefonie będzie scroll poziomy */
}
.odznaki-page .nice-table th,
.odznaki-page .nice-table td{
  padding:.7rem .8rem;
  border-bottom:1px solid #eee;
  vertical-align:top;
}
.odznaki-page .nice-table thead th{
  background:#f6fff6;
  color:var(--pttk-dark);
  text-align:left;
  border-bottom:1px solid #e6f3e6;
}
.odznaki-page .nice-table .num{
  text-align:center;
  font-weight:700;
  white-space:nowrap;
}
.odznaki-page .nice-table tbody tr:nth-child(even){background:#fafafa;}
.odznaki-page .nice-table tbody tr:hover{background:#f3fff3;}

.odznaki-page .contact-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem;
}
@media (max-width: 760px){
  .odznaki-page .contact-grid{grid-template-columns:1fr;}
}


/* === CONTACT FORM === */
.contact-form .field{margin: .85rem 0;}
.contact-form label{
  display:block;
  font-weight:700;
  margin: 0 0 .35rem;
  color: var(--pttk-dark);
}

.contact-form input,
.contact-form textarea{
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  font: inherit;
  background: #fff;
}

.contact-form textarea{
  min-height: 180px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: var(--pttk-green);
  box-shadow: 0 0 0 3px rgba(28,124,61,.12);
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 760px){
  .form-grid{grid-template-columns: 1fr;}
}

.field-error{
  margin-top: .35rem;
  color: #b00020;
  font-size: .95rem;
}

.form-actions{
  margin-top: 1rem;
}