/* -------------------------------
   Reset i ustawienia globalne
---------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  }
body {
  font-family: "Lexend Exa", sans-serif;
  color: rgba(57,57,57,1);
  background-size: cover;
  background-repeat: repeat-y;
  background-position: top center;
  transition: background-image 300ms ease;
  position: relative;
}
/* Tła w zależności od motywu */
body.theme-roz       { background-image: url("backgrounds/tlo_roz.jpg"); }
body.theme-niebieski{ background-image: url("backgrounds/tlo_niebieski.jpg"); }
body.theme-zielony  { background-image: url("backgrounds/tlo_zielony.jpg"); }
body.theme-zolty    { background-image: url("backgrounds/tlo_zolty.jpg"); }

/* ------------------------------------
   Warstwa gradientu (nakładka)
------------------------------------*/
.gradient-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 11000px; /* można dostosować wysokość gradientu */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 300ms ease;
}
/* Obraz gradientu w zależności od motywu */
body.theme-roz .gradient-layer       { background-image: url("backgrounds/gradient_roz.png"); }
body.theme-niebieski .gradient-layer{ background-image: url("backgrounds/gradient_niebieski.png"); }
body.theme-zielony .gradient-layer  { background-image: url("backgrounds/gradient_zielony.png"); }
body.theme-zolty .gradient-layer    { background-image: url("backgrounds/gradient_zolty.png"); }

/* ------------------------------------
   Pasek górny
------------------------------------*/
.top-bar {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 13% 0 13%;
}

/*artykly*/
.icon-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.icon-btn img {
  width: 90px;
}
.logo {
  height: 88px;
  display: block;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 45px);
  grid-template-rows: repeat(2, 45px);
  gap: 1px;
}
.theme-btn {
  width: 45px;
  height: 45px;
  cursor: pointer;
}

/* ------------------------------------
   Główny biały kontener
------------------------------------*/
.container {
  position: relative;
  z-index: 30;
  width: 77%;
  margin: 50px auto 80px;
  background: rgb(255, 255, 255);
  border-radius: 28px;
  box-shadow: 0px 10px 22px rgba(0,0,0,0.32);
  overflow: visible;
}
.content-wrapper {
  margin-left: 11.75%;
  margin-right: 11.5%;
  margin-top: 34px;
  display: block;
  padding-bottom: 50px;
  padding-top: 1%;
}

/* ------------------------------------
   Typografia i lista spisu treści
------------------------------------*/
.page-title,
.topic h1,
.container h1 {
  font-family: "Michroma", sans-serif;
  font-weight:lighter;
  font-size: 62px;
  text-transform: lowercase;
  margin-bottom: 6%;
  margin-top: 4.5%;
  padding-top: 6%;
  color: rgba(57,57,57,1);
  margin-left: -0.35%;
}
.toc {
  list-style: none;
  margin-bottom: 40px;
}
.toc li {
  margin: 10px 0;
}
.toc a {
  text-decoration: none;
  font-size: 20px;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: rgba(57,57,57,1);
}

/* ------------------------------------
   Plansze graficzne
------------------------------------*/
.plan {
  width: 120%;
  display: block;
  margin-top: 30px;
  margin-bottom: 0px;
  margin-left: -11%;
  
}
.topic {
  margin-top: 40px;
}

/* ------------------------------------
   Przycisk powrotu na górę
------------------------------------*/
.top-btn {
  position: fixed;
  right: 40px;
  bottom: 30px;
  z-index: 40;
  background: none;
  border: none;
  cursor: pointer;
}
.top-btn img {
  width: 90px;
  display: block;
}








/* =========================================================
   📲 TABLET — do 900px
=========================================================*/
@media (max-width: 900px){

  /* kontener większy i dłuższy */
  .container{
      width:92%;
      margin:140px auto 80px;
      min-height:92vh;
      padding-bottom:110px;
  }

  .content-wrapper{
      margin:24px;
      padding-bottom:90px;
  }

  /* top bar */
  .top-bar{
      padding:28px 7% 0 7%;
  }

  .logo{ height:68px; }
  .icon-btn img{ width:64px; }
  .top-btn img{width:70px;}

  /* motywy */
  .theme-grid{
      grid-template-columns:repeat(2,38px);
      grid-template-rows:repeat(2,38px);
  }
  .theme-btn{
      width:36px;
      height:36px;
  }

  /* 🔥 mniejsze H1 */
  .page-title,
  .topic h1,
  .container h1{
      font-size:30px !important;
      line-height:1.25;
      margin-top:22px;
      margin-bottom:24px;
  }

  /* 🔥 mniejsze P — TERAZ DZIAŁA */
  .content-wrapper p,
  .container p,
  body p,
  p{
      font-size:15px !important;
      line-height:1.34 !important;
  }

  .plan{ margin:20px 0; }
}



/* =========================================================
   📲📱 RESPONSYWNOŚĆ — KOMPLETNY BLOK DO PODMIANY
   Tablet ≤900px  •  Telefon ≤520px
=========================================================*/


/* =========================================================
   📲 TABLET — max 900px
=========================================================*/
@media (max-width: 900px){

  /* ================================
   SKRÓCENIE NADMIERNEJ DŁUGOŚCI STRONY
================================ */

.gradient-layer {
    height: 200vh !important;  /* zamiast 11000px */
    max-height: 2500px;        /* zabezpieczenie */
}


  /* KONTENER */
  .container{
      width:90%;
      margin:140px auto 80px;
      min-height:92vh;
      padding-bottom:0px;
      margin-top:0px;
  }

  .content-wrapper{
      margin:24px;
      padding-bottom:90px;
  }

  /* TOP BAR */
  .top-bar{
      padding:28px 7% 0 7%;
  }
  .logo{height:68px;}
  .icon-btn img{width:64px;}
  .top-btn img{width:70px;}
  

  /* MOTYWY */
  .theme-grid{
      grid-template-columns:repeat(2,38px);
      grid-template-rows:repeat(2,38px);
      gap:4px;
  }
  .theme-btn{
      width:36px;
      height:36px;
  }

  /* NAGŁÓWKI */
  .page-title,
  .topic h1,
  .container h1{
      font-size:38px !important;
      line-height:1.25;
      margin:10px 25px 22px;
  }

  /* TEKST STRONY GŁÓWNEJ */
  .toc li a{
      font-size:14px !important;
      line-height:1.28;
      margin-left: 25px;
      margin-right: 25px;
  }

  /* PARAGRAFY (tylko w artykułach) */
  p{
      font-size:15px !important;
      line-height:1.34 !important;
  }

  /* ===========================
     PLANSZE (.plan)
     Tablet = delikatnie mniejsze
  ===========================*/
  .plan{
      width:106%;
      margin:22px auto;
      margin-left: -24px;
      margin-right: -10px;
  }

  /* dodatkowe klasy sterujące */
  .plan.small {width:75%;}
  .plan.tiny {width:60%;}
  .plan.left {margin-left:0;margin-right:auto;}
  .plan.right{margin-left:auto;margin-right:0;}
}





/* =========================================================
   📱 TELEFON — max 520px
=========================================================*/
@media (max-width: 520px){

  /* HEADER */
  .top-bar{
      padding:15px 5%;
      gap:6px;
  }
  .icon-btn img{width:42px;}
  .logo{height:52px;}
  .top-btn img{width:50px;}

  /* MOTYWY */
  .theme-grid{
      grid-template-columns:repeat(2,28px);
      grid-template-rows:repeat(2,28px);
      gap:4px;
  }
  .theme-btn{
      width:26px;
      height:26px;
  }

  /* NAGŁÓWKI */
  .page-title,
  .topic h1,
  .container h1{
      font-size:25px !important;
      line-height:1.22;
      margin:20px 15px 22px 15px;
  }

  /* SPIS TREŚCI */
  .toc li a{
      font-size:12px !important;
      line-height:1.26;
      margin-left:15px;
      margin-right:15px;
      
  }

  /* PARAGRAFY */
  p{
      font-size:11px !important;
      line-height:1.30 !important;
  }

  /* KONTENER */
  .container{
      width:92%;
      margin-top:10px;
      min-height:100vh;
      padding-bottom:0px;
  }
  .content-wrapper{padding-bottom:110px;}

  /* ===========================
     📌 PLANSZE (.plan)
     Telefon = najbardziej zmniejszone
  ===========================*/
  .plan{
      width:111%;
      margin:18px auto;
      margin-left: -24px;
  }

  /* dodatkowe sterowanie */
  .plan.small {width:65%;}
  .plan.tiny {width:50%;}
  .plan.left {margin-left:0;}
  .plan.right{margin-left:auto;margin-right:0;}
}