/* ==========================================================
   PORADNIK.CSS 3.0
   Biblioteka Wiedzy ZooNet
   Wersja 3.0

   Autor:
   ZooNet + ChatGPT

========================================================== */


/* ==========================================================
   ZMIENNE
========================================================== */

:root{

    --green:#2e7d32;
    --green-dark:#1b5e20;
    --green-light:#edf8ee;

    --yellow:#fff8dc;
    --yellow-border:#e6c54a;

    --blue:#eef7ff;
    --blue-border:#4b88d8;

    --red:#fff3f3;
    --red-border:#d84343;

    --text:#333333;

    --bg:#f5f7f4;

    --shadow:0 8px 22px rgba(0,0,0,.08);

    --radius:18px;

}



/* ==========================================================
   RESET
========================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



/* ==========================================================
   BODY
========================================================== */

body{

    background:var(--bg);

    color:var(--text);

    font-family:Arial,Helvetica,sans-serif;

    font-size:18px;

    line-height:1.8;

}



/* ==========================================================
   LINKI
========================================================== */

a{

    color:var(--green);

    text-decoration:none;

    transition:.25s;

}

a:hover{

    color:var(--green-dark);

}



/* ==========================================================
   OBRAZY
========================================================== */

img{

    display:block;

    max-width:100%;

}



/* ==========================================================
   KONTENER
========================================================== */

.container{

    width:100%;

    max-width:1100px;

    margin:auto;

    padding:0 20px;

}



/* ==========================================================
   MENU
========================================================== */

.menu{

    background:var(--green);

    padding:18px;

    text-align:center;

    position:sticky;

    top:0;

    z-index:1000;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

}

.menu a{

    color:#ffffff;

    font-size:18px;

    font-weight:bold;

    margin:0 18px;

}

.menu a:hover{

    opacity:.85;

}



/* ==========================================================
   NAGŁÓWEK
========================================================== */

.header-box{

    max-width:1100px;

    margin:45px auto 25px;

    text-align:center;

}

.owner{

    color:var(--green);

    font-weight:bold;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.header-box h1{

    color:var(--green);

    font-size:48px;

    margin-bottom:12px;

}

.header-box h2{

    color:#666;

    font-size:28px;

    font-weight:400;

    margin-bottom:20px;

}

.header-box p{

    max-width:760px;

    margin:auto;

}



/* ==========================================================
   ZIELONA LINIA
========================================================== */

.linia{

    width:140px;

    height:5px;

    background:var(--green);

    margin:25px auto;

    border-radius:50px;

}



/* ==========================================================
   BREADCRUMBS
========================================================== */

.breadcrumbs{

    max-width:900px;

    margin:20px auto 35px;

    color:#777;

    font-size:15px;

}

.breadcrumbs span{

    margin:0 10px;

}



/* ==========================================================
   HERO
========================================================== */

.hero{

    max-width:850px;

    margin:0 auto;

}

.hero img{

    width:100%;

    height:auto;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.hero-info{

    max-width:850px;

    margin:0 auto 45px;

    padding:18px;

    background:var(--green);

    color:white;

    text-align:center;

    border-radius:0 0 var(--radius) var(--radius);

}
/* ==========================================================
   SEKCJE ARTYKUŁU
========================================================== */

.section{

    max-width:900px;

    margin:45px auto;

    padding:40px;

    background:#ffffff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    border-top:6px solid var(--green);

}

.section h2{

    color:var(--green);

    font-size:34px;

    text-align:center;

    margin-bottom:25px;

}

.section h3{

    color:var(--green-dark);

    font-size:24px;

    margin:30px 0 15px;

}

.section p{

    text-align:justify;

    margin-bottom:18px;

}

.section ul{

    margin:20px 0 20px 25px;

}

.section li{

    margin-bottom:10px;

}



/* ==========================================================
   SPIS TREŚCI
========================================================== */

.spis{

    max-width:700px;

    margin:45px auto;

    background:#ffffff;

    padding:35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.spis h3{

    color:var(--green);

    text-align:center;

    margin-bottom:25px;

}

.spis ul{

    list-style:none;

}

.spis li{

    border-bottom:1px solid #e8e8e8;

    padding:12px 0;

}

.spis li:last-child{

    border:none;

}

.spis a{

    display:block;

    font-weight:bold;

}

.spis a:hover{

    padding-left:8px;

}



/* ==========================================================
   ZDJĘCIA W TREŚCI
========================================================== */

.article-image{

    max-width:800px;

    margin:40px auto;

}

.article-image img{

    width:100%;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.article-image figcaption{

    margin-top:12px;

    text-align:center;

    color:#777;

    font-size:15px;

    font-style:italic;

}



/* ==========================================================
   TABELA
========================================================== */

.tabela{

    width:100%;

    max-width:850px;

    margin:35px auto;

    border-collapse:collapse;

}

.tabela th{

    background:var(--green);

    color:#ffffff;

    padding:16px;

    text-align:center;

}

.tabela td{

    padding:15px;

    border:1px solid #dddddd;

    vertical-align:top;

}

.tabela tr:nth-child(even){

    background:#f8f8f8;

}



/* ==========================================================
   CYTAT
========================================================== */

blockquote{

    max-width:850px;

    margin:35px auto;

    padding:25px 30px;

    background:#f8fbf8;

    border-left:6px solid var(--green);

    font-style:italic;

    border-radius:0 var(--radius) var(--radius) 0;

}



/* ==========================================================
   POZIOMA LINIA
========================================================== */

hr{

    border:none;

    height:1px;

    background:#dddddd;

    margin:50px auto;

    max-width:900px;

}
/* ==========================================================
   BOKSY INFORMACYJNE
========================================================== */

.rada,
.ciekawostka,
.ostrzezenie,
.zapamietaj{

    max-width:900px;

    margin:45px auto;

    padding:35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.rada{

    background:#edf8ee;

    border-left:8px solid var(--green);

}

.ciekawostka{

    background:#fff8dc;

    border-left:8px solid var(--yellow-border);

}

.ostrzezenie{

    background:#fff3f3;

    border-left:8px solid var(--red-border);

}

.zapamietaj{

    background:#eef7ff;

    border-left:8px solid var(--blue-border);

}



/* ==========================================================
   NAGŁÓWKI BOKSÓW
========================================================== */

.rada h3,
.ciekawostka h3,
.ostrzezenie h3,
.zapamietaj h3{

    margin:0 0 20px;

    color:var(--green);

    text-align:center;

    font-size:28px;

}

.rada p,
.ciekawostka p,
.ostrzezenie p,
.zapamietaj p{

    margin:0;

    text-align:justify;

}



/* ==========================================================
   FEATURE GRID
========================================================== */

.feature-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:28px;

    margin-top:35px;

}



/* ==========================================================
   KARTA
========================================================== */

.feature-card{

    background:#ffffff;

    border-radius:var(--radius);

    padding:30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.30s;

    border-top:5px solid var(--green);

}

.feature-card:hover{

    transform:translateY(-6px);

    box-shadow:0 14px 30px rgba(0,0,0,.12);

}



/* ==========================================================
   IKONA
========================================================== */

.feature-icon{

    font-size:52px;

    margin-bottom:18px;

}



/* ==========================================================
   NAGŁÓWKI KART
========================================================== */

.feature-card h3{

    color:var(--green);

    margin-bottom:15px;

    font-size:24px;

}



/* ==========================================================
   OPIS KART
========================================================== */

.feature-card p{

    text-align:center;

    margin:0;

}



/* ==========================================================
   WYRÓŻNIONY PRZYCISK
========================================================== */

.button{

    display:inline-block;

    background:var(--green);

    color:#ffffff;

    padding:16px 34px;

    border-radius:40px;

    font-weight:bold;

    transition:.25s;

}

.button:hover{

    background:var(--green-dark);

    color:#ffffff;

}



/* ==========================================================
   WYŚRODKOWANIE
========================================================== */

.center{

    text-align:center;

}
.rada:hover,
.ciekawostka:hover,
.ostrzezenie:hover,
.zapamietaj:hover{

    transform:translateY(-3px);

    transition:.25s;

}
/* ==========================================================
   KONTAKT
========================================================== */

.article-contact{

    max-width:1100px;

    margin:60px auto;

    padding:45px;

    background:#ffffff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    border-top:6px solid var(--green);

}

.article-contact h2{

    color:var(--green);

    text-align:center;

    font-size:36px;

    margin-bottom:15px;

}

.article-contact>p{

    text-align:center;

    max-width:700px;

    margin:0 auto 40px;

}



/* ==========================================================
   GRID KONTAKTU
========================================================== */

.contact-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

    margin-bottom:45px;

}



/* ==========================================================
   KARTY KONTAKTU
========================================================== */

.contact-card{

    background:#f8faf8;

    padding:30px;

    border-radius:var(--radius);

    text-align:center;

    border-top:5px solid var(--green);

    box-shadow:0 4px 12px rgba(0,0,0,.06);

    transition:.30s;

}

.contact-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 28px rgba(0,0,0,.12);

}

.contact-card h3{

    color:var(--green);

    margin-bottom:15px;

    font-size:24px;

}

.contact-card p{

    margin:8px 0;

    text-align:center;

}



/* ==========================================================
   STOPKA
========================================================== */

.article-footer{

    max-width:1100px;

    margin:50px auto 40px;

    padding:40px;

    background:var(--green);

    color:#ffffff;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:var(--shadow);

}

.article-footer p{

    margin:12px 0;

    text-align:center;

    line-height:1.8;

}

.article-footer strong{

    font-size:22px;

}



/* ==========================================================
   ANIMACJE
========================================================== */

.section,
.feature-card,
.contact-card,
.rada,
.ciekawostka,
.ostrzezenie,
.zapamietaj{

    transition:.30s;

}

.section:hover{

    box-shadow:0 14px 30px rgba(0,0,0,.10);

}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:900px){

.section{

    padding:30px;

}

.header-box h1{

    font-size:40px;

}

.header-box h2{

    font-size:24px;

}

}



@media (max-width:768px){

body{

    font-size:17px;

}

.menu{

    padding:15px;

}

.menu a{

    display:block;

    margin:12px 0;

}

.hero{

    max-width:100%;

}

.hero-info{

    max-width:100%;

    border-radius:0;

}

.section{

    max-width:100%;

    margin:30px 15px;

    padding:25px;

}

.section h2{

    font-size:28px;

}

.section h3{

    font-size:22px;

}

.spis{

    margin:30px 15px;

    padding:25px;

}

.article-image{

    margin:30px auto;

}

.rada,
.ciekawostka,
.ostrzezenie,
.zapamietaj{

    margin:30px 15px;

    padding:25px;

}

.article-contact{

    margin:30px 15px;

    padding:30px;

}

.article-footer{

    margin:30px 15px;

    padding:30px;

}

}



@media (max-width:480px){

.header-box h1{

    font-size:32px;

}

.header-box h2{

    font-size:20px;

}

.owner{

    font-size:14px;

    letter-spacing:1px;

}

.menu a{

    font-size:17px;

}

.button{

    display:block;

    width:100%;

    text-align:center;

}

}