/* farmacianaturala.com — warstwa poprawiajaca wyglad.
 *
 * ⚠ UKLAD TEJ STRONY JEST KRUCHY, sprawdzone w DOM:
 *
 *   .wrapper > .navbg > [ #navcontainer , .banner , .footer ]
 *                              .banner > .<roslina> , .content
 *                                        .content > .leftcolumn , .rightcolumn
 *
 * `.banner` NIE jest naglowkiem — to pojemnik, w ktorym siedzi CALA tresc,
 * a zdjecie rosliny jest jego tlem bez powtarzania, wiec widac je tylko
 * u gory. Pierwsza wersja tego arkusza o tym nie wiedziala i zrobila dwie
 * szkody: `background-size: cover` rozciagnal zdjecie na cala strone,
 * a cien tekstu „dla czytelnosci napisu na zdjeciu" spadl na KAZDY
 * naglowek i odnosnik w serwisie.
 *
 * Dlatego teraz: zero reguł tła dla `.banner`, zero cieni dziedziczonych,
 * nawigacja zostaje w pierwotnym przepływie inline (flex rozpychał ją na
 * drugi wiersz, który nachodził na zdjęcie).
 *
 * Zostaje: zielona szalwia, lawendowa kolumna, zdjecia roslin, uklad
 * dwukolumnowy. Zmienia sie: rozmiar tekstu, oddech i spojnosc kolorow.
 *
 * Arkusz dokladany PO oryginalnych — zeby cofnac lifting, wystarczy
 * usunac jeden <link>. Oryginalne 189 plikow `style.css` nietkniete.
 */

/* ——— podstawa: tekst mial 10,5 px ——— */
body, td, th {
    font-family: "Segoe UI", Candara, Optima, "Trebuchet MS", Verdana,
                 sans-serif;
    font-size: 16px;
    line-height: 1.62;
    color: #2F4F4F;
}

body { background-color: #9ec49e; }

.wrapper {
    width: 94%;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .16);
}

/* ——— nawigacja ———
 * ⚠ CALE MENU TO JEDEN `<li>`: linki i kreski `|` sa jego trescia inline,
 * a nie osobnymi pozycjami listy. Zmierzone w DOM: potrzebuje 898 px,
 * ma 749 px — w jeden wiersz sie NIE zmiesci i nie ma jak go zmusic.
 *
 * Dwie proby, obie zle: `display:flex` rozbil go na drugi wiersz, ktory
 * nachodzil na zdjecie, a `nowrap` + `overflow:hidden` uciely dwie
 * ostatnie pozycje i staly sie nieosiagalne.
 *
 * Wiec: wolno mu sie zawijac, a pojemnik rosnie razem z nim — dwa
 * wiersze menu to nie wada, uciete menu to wada. */
#navcontainer {
    overflow: visible;
    height: auto;
    padding: 2px 0;
}

#navcontainer ul {
    margin: 0;
    padding: 0;
    font-size: 13px;
    white-space: normal;
    line-height: 2.2;
    overflow: visible;
    height: auto;
}

#navcontainer ul li {
    display: inline;
    line-height: 2.2;
}

#navcontainer ul li a,
#navcontainer ul li a:link,
#navcontainer ul li a:visited {
    width: auto;
    padding: 7px 9px;
    font-size: 13px;
    color: #15306e;
    text-decoration: none;
    white-space: nowrap;      /* pojedyncza pozycja sie nie lamie */
}

#navcontainer ul li a:hover {
    width: auto;
    font-size: 13px;            /* w oryginale rosla i uklad podskakiwal */
    color: #ffffff;
    background: #2f7a36;
}

/* ——— napis na zdjeciu ———
 * `a.logo` — blekit (135,206,235) na zdjeciu roslin, czyli jasne na
 * jasnym; z daleka nie dalo sie tego przeczytac. Kolor ZOSTAJE, bo to
 * znak rozpoznawczy serwisu — dochodzi tylko cien, ktory odcina litery
 * od tla. Selektor celuje w JEDEN element: poprzednia wersja arkusza
 * cieniowala `.banner h1, h2, p, span, div` i cien spadl na cala strone,
 * bo `.banner` zawiera cala tresc. */
a.logo,
a.logo:link,
a.logo:visited {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .85),
                 0 0 4px rgba(0, 0, 0, .7);
    letter-spacing: .5px;
    text-decoration: none;
}

/* ——— kolumny ———
 * `.content` zostaje blokiem; kolumny nadal plywaja jak w oryginale,
 * dokladam im tylko oddech.
 *
 * ⚠ `border-box` MUSI byc tutaj, nie tylko w regule telefonu. Oryginal
 * daje `.content` szerokosc 100%, wiec moj margines wewnetrzny doklada
 * sie Z ZEWNATRZ: pomiar pokazal `.content` 797 px przy `.wrapper`
 * 755 px, a prawa kolumna wychodzila 21 px poza biale tlo i tekst
 * uciekal za krawedz. */
.content,
.leftcolumn,
.rightcolumn,
.footer {
    box-sizing: border-box;
    max-width: 100%;
}

.content { padding: 22px 24px 10px; }

.leftcolumn {
    background: #eef0fb;
    border: 1px solid #dcdff2;
    border-radius: 6px;
    padding: 14px 16px;
    box-sizing: border-box;
}

.rightcolumn { box-sizing: border-box; }

.rightcolumn img {
    max-width: 100%;
    height: auto;
}

.rightcolumn p { margin: 0 0 1em; }

/* ——— odnosniki w kolumnie bocznej: byly zielone i fioletowe naprzemian ——— */
.leftcolumn a,
.leftcolumn a:link,
.leftcolumn a:visited {
    display: block;
    padding: 5px 0;
    border-bottom: 1px solid #dcdff2;
    color: #2f6b3a;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.35;
}

.leftcolumn a:hover { color: #1d4a27; text-decoration: underline; }

/* ——— naglowki: #6600FF byl neonowy, zostaje ten sam fiolet, stonowany ——— */
h1, h2, h3 { line-height: 1.3; margin: 1em 0 .45em; }
h1 { font-size: 25px; color: #24502c; }
h2 { font-size: 20px; color: #5b3a8a; }
h3 { font-size: 17px; color: #2f6b3a; }

/* ——— stopka ——— */
.footer { padding: 14px 24px; font-size: 14px; }

/* ——— telefon ——— */
@media (max-width: 760px) {
    /* ⚠ `overflow-x: hidden` nizej tylko UKRYWA wystajace elementy, a nie
     * naprawia ich szerokosci — pomiar na 375 px pokazal `.content` 403 px
     * i `.footer` 423 px, czyli 28-48 px tresci poza kadrem. Przyczyna:
     * szerokosc 100% PLUS margines wewnetrzny. `border-box` wlicza
     * margines w szerokosc i problem znika u zrodla
     * ([[mobile-przewijanie-w-bok]]). */
    .wrapper, .navbg, .banner, .content,
    .leftcolumn, .rightcolumn, .footer, #navcontainer {
        box-sizing: border-box;
        max-width: 100%;
    }

    .wrapper { width: 100%; max-width: none; }
    .content { padding: 16px 14px 6px; }

    .leftcolumn,
    .rightcolumn {
        float: none !important;
        width: auto !important;
        margin: 0 0 16px;
    }

    #navcontainer ul { white-space: normal; }
    #navcontainer ul li a { padding: 8px 9px; }

    h1 { font-size: 22px; }
    h2 { font-size: 18px; }

    img { max-width: 100%; height: auto; }
}

html, body { overflow-x: hidden; }