/* Opis kategorii produktów - fdcm.eu
   Wszystko zakotwiczone w .category-desc-style, czyli kontenerze opisu
   kategorii. Poza tym blokiem te reguły nie obowiązują.

   Jednostki: rem. Nigdzie nie ma em, żeby odstęp nie zmieniał się razem
   z rozmiarem pisma rodzica. */

.category-desc-style {
    --cd-text: #1f1f1f;
    --cd-accent: #145238;
    --cd-accent-soft: #43a15b;
    --cd-border: #d8ded9;

    line-height: 1.65;
    color: var(--cd-text);
}

.category-desc-style > *:first-child {
    margin-top: 0;
}

.category-desc-style > *:last-child {
    margin-bottom: 0;
}

/* Edytor zostawia puste <b></b> - inaczej robią zbędny odstęp. */
.category-desc-style b:empty,
.category-desc-style strong:empty,
.category-desc-style p:empty {
    display: none;
}

/* ------------------------------------------------------------- nagłówki */

.category-desc-style h2,
.category-desc-style h3,
.category-desc-style h4 {
    margin: 3rem 0 1rem;
    color: var(--cd-accent);
    font-weight: 700;
    line-height: 1.5;
}

.category-desc-style h2 { font-size: 2.75rem; }
.category-desc-style h3 { font-size: 2.25rem; }
.category-desc-style h4 { font-size: 1.875rem; }

/* W treści nagłówki mają w środku <b> - bez tego waga skacze na 800. */
.category-desc-style h2 b,
.category-desc-style h3 b,
.category-desc-style h4 b {
    font-weight: inherit;
}

/* ------------------------------------------------------------- akapity */

.category-desc-style p {
    margin: 0 0 1.25rem;
}

/**
 * Śródtytuły ("Erytrytol (E968)", "Produkcja napojów:", pytania z FAQ) są
 * w treści zwykłym pogrubieniem, nie nagłówkiem. Dwa warianty w HTML-u:
 *   - pogrubienie otwiera akapit            -> b:first-child
 *   - kilka linii sklejonych w jeden akapit -> br + b
 * Drugi przypadek to większość sekcji "Przykłady zastosowań" i całe FAQ.
 */
.category-desc-style p > b:first-child,
.category-desc-style p > strong:first-child,
.category-desc-style p > br + b,
.category-desc-style p > br + strong {
    display: block;
    margin: 1.5rem 0 .35rem;
    font-size: 1.725rem;
    line-height: 1.4;
    color: var(--cd-accent);
}

/* Na starcie akapitu górny odstęp daje już sam akapit. */
.category-desc-style p > b:first-child,
.category-desc-style p > strong:first-child {
    margin-top: 0;
}

/**
 * Te <br> nie są w treści - dokłada je wpautop(), które w opisie kategorii
 * zamienia pojedynczy enter z edytora na <br />. Skoro śródtytuł jest już
 * blokiem i sam łamie linię, każdy <br> stykający się z nim daje pusty
 * wiersz. Ukrywamy oba przypadki: przed śródtytułem i zaraz po nim.
 */
.category-desc-style p > br:has(+ b),
.category-desc-style p > br:has(+ strong),
.category-desc-style p > b + br,
.category-desc-style p > strong + br {
    display: none;
}

/* --------------------------------------------------------------- listy */

.category-desc-style ul {
    margin: 0 0 1.5rem;
    padding-left: 0;
    list-style: none;
}

.category-desc-style ul li {
    position: relative;
    margin-bottom: .5rem;
    padding-left: 1.5rem;
}

.category-desc-style ul li::before {
    content: "";
    position: absolute;
    left: .35rem;
    top: .65rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cd-accent-soft);
}

.category-desc-style ol {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
}

.category-desc-style ol li {
    margin-bottom: .5rem;
}

.category-desc-style li > ul,
.category-desc-style li > ol {
    margin-top: .5rem;
}

/* -------------------------------------------------------------- tabele */

/* Treść niesie inline'owe width/height z Worda - stąd !important. */
.category-desc-style table {
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 1.75rem;
    border-collapse: collapse;
    background: transparent;
}

.category-desc-style table td,
.category-desc-style table th {
    width: auto !important;
    height: auto !important;
    padding: .75rem 1rem;
    border: 1px solid var(--cd-border);
    background: transparent;
    vertical-align: top;
    text-align: left;
}

/* W treści nie ma <th>, więc pierwszy wiersz wyróżniamy samą wagą pisma. */
.category-desc-style table th,
.category-desc-style table tbody tr:first-child td {
    font-weight: 600;
    color: var(--cd-accent);
}

/* --------------------------------------------------------------- reszta */

.category-desc-style a {
    color: var(--cd-accent-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.category-desc-style a:hover {
    color: var(--cd-accent);
}

.category-desc-style hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--cd-border);
}

.category-desc-style img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 640px) {
    .category-desc-style h2 { font-size: 2rem; }
    .category-desc-style h3 { font-size: 1.75rem; }
    .category-desc-style h4 { font-size: 1.5rem; }

    .category-desc-style h2,
    .category-desc-style h3,
    .category-desc-style h4 {
        margin: 2.25rem 0 .75rem;
    }

    .category-desc-style p > b:first-child,
    .category-desc-style p > strong:first-child,
    .category-desc-style p > br + b,
    .category-desc-style p > br + strong {
        font-size: 1.375rem;
    }

    /* Szeroka tabela przewija się w poziomie zamiast rozpychać stronę. */
    .category-desc-style table {
        display: block;
        overflow-x: auto;
    }
}