/* =========================================================
   HEALTHLIVE – ARTYKUŁ
   artykuly17.css
   ========================================================= */


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

:root {

    --bg: #121212;
    --card-bg: #1e1e1e;
    --card-alt: #2a2a2a;

    --text: #e0e0e0;
    --muted: #bbbbbb;

    --accent: #fca311;
    --text-color: #3fa795;

    --border: #333333;

    --radius: 10px;

    --shadow: 0 4px 16px rgba(0, 0, 0, 0.5);

    --maxw: 1200px;

    --pad: 16px;
}


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

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


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

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background-color: var(--bg);

    color: var(--text);

    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Ubuntu,
        Arial,
        sans-serif;

    line-height: 1.6;
}


/* =========================================================
   GŁÓWNY KONTENER
   ========================================================= */

.wrap {

    width: 100%;

    max-width: var(--maxw);

    margin: 0 auto;

    padding-left: var(--pad);
    padding-right: var(--pad);
}


/* =========================================================
   NAWIGACJA
   ========================================================= */

nav.navbar {

    width: 100%;

    background: var(--card-bg);

    border-bottom: 1px solid var(--border);

    position: fixed;

    top: 0;
    left: 0;

    z-index: 9999;
}


.nav-inner {

    min-height: 62px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    padding-top: 10px;
    padding-bottom: 10px;
}


/* LOGO */

.navbar .logo {

    font-size: clamp(
        1rem,
        2vw + 0.8rem,
        1.8rem
    );

    font-weight: 700;

    color: var(--accent);
}


.navbar .logo a {

    color: inherit;

    text-decoration: none;
}


/* LINKI */

.nav-links {

    list-style: none;

    display: flex;

    align-items: center;

    margin: 0;

    padding: 0;
}


.nav-links li {

    margin-left: 20px;
}


.nav-links a {

    color: var(--text);

    font-weight: 600;

    text-decoration: none;

    font-size: clamp(
        0.9rem,
        1vw + 0.5rem,
        1.05rem
    );

    transition:
        color 0.25s ease;
}


.nav-links a:hover,
.nav-links a.active {

    color: var(--accent);
}


/* =========================================================
   BURGER
   ========================================================= */

#nav-toggle {

    display: none;
}


.burger {

    display: none;

    position: relative;

    width: 27px;
    height: 21px;

    cursor: pointer;

    justify-content: center;
    align-items: center;
}


.burger span,
.burger span::before,
.burger span::after {

    position: absolute;

    left: 0;

    width: 100%;
    height: 3px;

    background-color: var(--text);

    border-radius: 2px;

    transition:
        all 0.3s ease;

    content: "";
}


.burger span {

    top: 50%;

    transform:
        translateY(-50%);
}


.burger span::before {

    top: -8px;
}


.burger span::after {

    top: 8px;
}


/* X PO OTWARCIU */

#nav-toggle:checked + .burger span {

    background-color: transparent;
}


#nav-toggle:checked + .burger span::before {

    top: 0;

    transform: rotate(45deg);
}


#nav-toggle:checked + .burger span::after {

    top: 0;

    transform: rotate(-45deg);
}


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

.hero {

    width: 100%;

    margin-top: 62px;
}


.hero-img {

    width: 100%;
}


.hero-img img {

    width: 100%;

    height: 250px;

    display: block;

    object-fit: cover;

    border-radius: 0;
}


/* =========================================================
   MAIN
   ========================================================= */

main {

    padding: 20px 0 0;
}


/* =========================================================
   TYTUŁ / WSTĘP
   ========================================================= */

.hero-text {

    text-align: center;

    margin-top: 1rem;
}


.post-title {

    font-size: clamp(
        1.5rem,
        2vw + 1rem,
        2.4rem
    );

    color: var(--accent);

    margin-bottom: 12px;

    line-height: 1.25;
}


.hero-text > p:not(.post-meta) {

    max-width: 950px;

    margin-left: auto;
    margin-right: auto;
}


/* META */

.post-meta {

    font-size: clamp(
        0.85rem,
        0.8vw + 0.5rem,
        0.95rem
    );

    color: var(--muted);

    margin-top: 18px;

    margin-bottom: 1.5rem;

    text-align: center;
}


/* =========================================================
   TEKST
   ========================================================= */

p,
li {

    margin: 12px 0;

    color: var(--text);

    font-size: clamp(
        0.95rem,
        0.8vw + 0.5rem,
        1.08rem
    );

    line-height: 1.65;

    text-align: justify;
}


p {

    text-indent: 1rem;
}


li {

    margin: 7px 0;

    font-style: normal;

    color: var(--text);
}


ul,
ol {

    padding-left: 25px;
}


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

h1 {

    margin: 28px 0 16px;

    color: var(--text);
}


h2 {

    font-size: clamp(
        1.4rem,
        3.5vw,
        1.9rem
    );

    margin: 28px 0 14px;

    color: var(--accent);

    text-align: center;

    line-height: 1.3;
}


h3 {

    margin-left: 1rem;

    margin-top: 22px;

    margin-bottom: 8px;

    color: var(--text-color);

    font-size: clamp(
        1.15rem,
        3vw,
        1.5rem
    );

    line-height: 1.35;
}


h4 {

    margin: 12px 0 6px;

    color: var(--text);
}


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

a {

    color: var(--accent);

    text-decoration: none;

    font-size: inherit;
}


a:hover {

    text-decoration: underline;
}


/* =========================================================
   SEKCJA WPROWADZENIA
   ========================================================= */

.wprowadzenie {

    padding-left: 19px;
    padding-right: 19px;
}


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

.recipe {

    background: var(--card-bg);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 20px;

    margin: 24px 0;

    box-shadow: var(--shadow);
}


.recipe h2 {

    color: var(--accent);

    margin-top: 4px;
}


/* =========================================================
   OBRAZY W ARTYKULE
   ========================================================= */

.image-placeholder {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;
}


.image-placeholder img {

    width: min(80%, 760px);

    height: auto;

    max-height: 360px;

    object-fit: cover;

    border-radius: var(--radius);

    margin: 20px auto;

    display: block;
}


.recipe img {
    width: 100%;
    max-width: 650px;
    height: auto;
    display: block;
    margin: 25px auto;
    border-radius: var(--radius);
}


/* =========================================================
   ZDJĘCIA W TREŚCI ARTYKUŁU
   ========================================================= */

.article-image {
    width: 100%;
    margin: 25px auto;
    text-align: center;
}

.article-image img {
    width: 100%;
    max-width: 750px;
    height: 300px;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    border-radius: var(--radius);
}

.article-image figcaption {
    max-width: 650px;
    margin: 8px auto 0;
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}


/* =========================================================
   WYRÓŻNIENIE – NOTE
   ========================================================= */

.note {

    background: var(--card-alt);

    border-left: 4px solid var(--accent);

    padding: 14px 18px;

    border-radius: 6px;

    margin: 20px 0;

    font-size: clamp(
        0.95rem,
        0.9vw + 0.5rem,
        1.1rem
    );
}


.note p {

    margin-bottom: 6px;

    text-indent: 0;
}


.note strong {

    color: var(--accent);
}


/* =========================================================
   PRZYKŁAD / WYRÓŻNIONY TEKST
   ========================================================= */

.example {

    text-align: center;

    margin: 24px auto;

    padding: 16px;

    background: var(--card-alt);

    border-radius: var(--radius);

    color: var(--text-color);

    font-size: clamp(
        1.1rem,
        0.8vw + 0.9rem,
        1.5rem
    );

    font-weight: 600;
}


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

.toc {

    font-size: clamp(
        0.9rem,
        0.8vw + 0.8rem,
        1.15rem
    );

    background: var(--card-alt);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 16px 20px;

    margin: 24px 0;
}


.toc strong {

    display: block;

    margin-bottom: 10px;

    color: var(--text);

    text-align: center;

    font-size: 1.1em;
}


.toc ul {

    list-style: none;

    padding-left: 0;

    margin: 0;
}


.toc ul li {

    margin: 7px 0;

    text-align: left;
}


.toc a {

    color: var(--accent);

    text-decoration: none;
}


.toc a:hover {

    text-decoration: underline;
}


/* =========================================================
   SIATKA
   ========================================================= */

.grid {

    display: grid;

    gap: 16px;

    align-items: stretch;
}


@media (min-width: 720px) {

    .grid.two {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   CTA
   ========================================================= */

.cta {

    margin: 30px 0;

    padding: 20px;

    background: var(--accent);

    color: #fff;

    border-radius: var(--radius);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;

    box-shadow: var(--shadow);

    font-size: clamp(
        0.95rem,
        1vw + 0.5rem,
        1.05rem
    );
}


.cta strong {

    color: #fff;
}


.cta a {

    background: #fff;

    color: var(--accent);

    text-decoration: none;

    padding: 11px 16px;

    border-radius: 8px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.cta a:hover {

    background: var(--card-alt);

    color: #fff;

    text-decoration: none;

    transform: translateY(-1px);
}


/* =========================================================
   LINIA ODDZIELAJĄCA
   ========================================================= */

.line {

    padding: 1rem;

    border-bottom: 1px solid #444;

    margin-bottom: 5px;
}


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

.table-wrapper {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    margin: 20px 0;
}


table {

    width: 100%;

    min-width: 600px;

    border-collapse: collapse;

    margin-bottom: 1rem;
}


th,
td {

    padding: 9px;

    text-align: left;

    border: 1px solid var(--accent);

    font-size: clamp(
        0.75rem,
        1.5vw,
        1rem
    );

    line-height: 1.4;
}


th {

    background: var(--card-bg);

    color: var(--text);

    font-weight: 700;
}


td {

    color: var(--text);
}


/* =========================================================
   FAQ
   ========================================================= */

.faq {

    margin-top: 20px;
}


.faq h2 {

    margin-bottom: 25px;
}


.faq h3 {

    font-size: clamp(
        1.05rem,
        2vw,
        1.35rem
    );

    margin-left: 0;

    margin-top: 24px;

    margin-bottom: 8px;

    color: var(--text-color);
}


.faq p {

    font-size: clamp(
        0.9rem,
        1.2vw,
        1.05rem
    );

    color: var(--muted);

    line-height: 1.6;

    text-indent: 0;
}


/* =========================================================
   ŹRÓDŁA
   ========================================================= */

.zrodla {

    padding-left: 20px;
}


.zrodla li {

    color: var(--muted);

    font-size: clamp(
        0.8rem,
        1.2vw,
        1rem
    );

    line-height: 1.5;

    margin: 8px 0;
}


/* =========================================================
   TEKST "WIĘCEJ"
   ========================================================= */

.more {

    text-indent: 0;

    text-align: left;
}


.more a {

    display: inline-block;

    margin: 4px 0;

    color: var(--accent);
}


/* =========================================================
   REKLAMY
   ========================================================= */

.ad-container {

    width: 100%;

    max-width: 760px;

    margin: 30px auto;

    text-align: center;

    font-family: Arial, sans-serif;
}


.ad-label {

    font-size: 12px;

    color: #888;

    margin: 6px 0;

    text-align: center;
}


.adslot {

    display: block;

    margin: 0 auto;

    width: 320px;

    height: 60px;
}


/* TABLET */

@media (min-width: 768px) {

    .adslot {

        width: 468px;

        height: 60px;
    }

}


/* KOMPUTER */

@media (min-width: 1024px) {

    .adslot {

        width: 728px;

        height: 90px;
    }

}


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

footer {

    background: var(--card-bg);

    text-align: center;

    padding: 16px 10px;

    color: var(--text);

    font-size: clamp(
        0.75rem,
        2vw,
        1rem
    );

    margin-top: 35px;
}


footer p {

    text-align: center;

    text-indent: 0;

    margin: 7px 0;
}


footer a.polityka {

    color: var(--text);

    text-decoration: underline;
}


footer a.polityka:hover {

    color: var(--accent);
}


/* =========================================================
   SOCIAL MEDIA
   ========================================================= */

.social-links {

    margin-top: 12px;

    display: flex;

    gap: 20px;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;
}


.social-links .icon {

    width: 28px;

    height: 28px;

    transition:
        transform 0.25s ease;
}


.social-links a:hover .icon {

    transform: scale(1.2);
}


/* =========================================================
   RESPONSYWNOŚĆ – TABLET / TELEFON
   ========================================================= */

@media (max-width: 768px) {


    /* NAV */

    .nav-inner {

        padding-top: 11px;
        padding-bottom: 11px;
    }


    .burger {

        display: flex;
    }


    .nav-links {

        display: none;

        width: 100%;

        flex-direction: column;

        align-items: flex-start;

        margin-top: 10px;

        padding-bottom: 8px;
    }


    .nav-links li {

        width: 100%;

        margin: 8px 0;
    }


    .nav-links a {

        display: block;

        padding: 4px 0;
    }


    #nav-toggle:checked ~ .nav-links {

        display: flex;
    }


    /* HERO */

    .hero {

        margin-top: 58px;
    }


    .hero-img img {

        height: 200px;
    }


    /* CONTENT */

    :root {

        --pad: 12px;
    }


    .recipe {

        padding: 16px;

        margin: 20px 0;
    }


    .wprowadzenie {

        padding-left: 8px;

        padding-right: 8px;
    }


.image-placeholder img {
    width: min(75%, 650px);
    height: auto;
    max-height: 320px;
    object-fit: cover;
    border-radius: var(--radius);
    margin: 20px auto;
    display: block;
}


    .cta {

        flex-direction: column;

        align-items: stretch;

        text-align: center;
    }


    .cta a {

        width: 100%;

        text-align: center;
    }


    .line {

        padding: 0.7rem;
    }

}


/* =========================================================
   RESPONSYWNOŚĆ – MAŁE TELEFONY
   ========================================================= */

@media (max-width: 480px) {


    .hero-img img {

        height: 170px;
    }


    .post-title {

        font-size: 1.45rem;
    }


    h2 {

        font-size: 1.35rem;

        margin-top: 23px;
    }


    h3 {

        font-size: 1.1rem;

        margin-left: 0;
    }


    p,
    li {

        font-size: 0.95rem;

        line-height: 1.6;
    }


    .recipe {

        padding: 13px;

        border-radius: 8px;
    }


    .image-placeholder img {

        width: 100%;

        max-height: 240px;

        border-radius: 8px;
    }


    .toc {

        padding: 13px 15px;
    }


    .example {

        padding: 13px;

        font-size: 1rem;
    }


    .note {

        padding: 12px 14px;
    }


    .social-links {

        gap: 14px;
    }


    .social-links .icon {

        width: 24px;

        height: 24px;
    }


    table {

        min-width: 560px;
    }

}


/* =========================================================
   OCHRONA PRZED WYSUWANIEM SIĘ TREŚCI
   ========================================================= */

img {

    max-width: 100%;
}


pre,
code {

    max-width: 100%;

    overflow-x: auto;
}



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

.calorie-table {
    margin: 30px 0;
}

.calorie-table h3 {
    margin-bottom: 15px;
}

.calorie-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: var(--card-bg);
}

.calorie-table th,
.calorie-table td {
    padding: 12px 10px;
    border: 1px solid var(--accent);
    text-align: center;
}

.calorie-table th {
    font-weight: 700;
}

.calorie-table td {
    color: var(--text);
}

.table-note {
    font-size: 0.95rem;
    color: var(--muted);
}


@media (max-width: 600px) {

    .calorie-table {
        overflow-x: auto;
    }

    .calorie-table table {
        min-width: 600px;
    }

}