/* --------------------------------------------------------------------------------------------------- */
/* Ogólne */

/* Głównie chodzi o h2 - wszystkie niech wyglądają podobnie */
.fancy-header{
    border:2px dotted #bbb;
    padding:0.8em;
    display: flex;
    align-items: center;
    gap: 0.5em;
}    

.fancy-header img {
    width:1.2em;
}


/* --------------------------------------------------------------------------------------------------- */
/* Ingredient list jeśli food.data_type to FNDDS */

.ingredient-list {
    list-style-type: disc;
    list-style-position: inside; /* Ustawia kulki wewnątrz kontenera */
    margin: 0; 
    padding: 0;
}

.ingredient-list li::marker {
    color: rgb(44, 122, 123); /* Kolor kulek */
    font-size: 0.8em; /* Rozmiar kulek */
}

.ingredient-list li {
    margin-bottom: 10px; /* Margines między elementami listy */
}   


/* --------------------------------------------------------------------------------------------------- */
/* General (wykres, kalorie, białka i trochę może innych podstawowych) */

.food-general-chart-wrap, .food-general{
    /* Problem z CLS (Cumulative Layout Shift) na https://pagespeed.web.dev. Skrypt potem po załadowaniu obrazów tu daje z powrotem domyślne 0px*/
    min-height:20vh;
}    

.food-general {
    flex-direction: column;
}

.food-general-chart-wrap,
.food-general-table-wrap {
    flex-basis: 100%;
}

/* Wykres kołowy kalorii oraz tabelka podstawowych informacji o produkcie */
/* Na szerokim ekranie */
@media (min-width: 768px) {
    /* .food-general {
        display: flex;
    } */
    .food-general {
        flex-direction: row;
    }

    .food-general-chart-wrap {
        flex-basis: 30%;
        margin-right:30px;
    }
    .food-general-chart-wrap canvas {
        width: 80%;
        
    }            
    .food-general-table-wrap {
        flex-basis: 70%;
    }
}

/* 
    Style dla wszystkich tabelek z nutrients, w tym dla general
*/
.nutrients-table .nutrients-header th{
    background-color:#eee;
    border:1px solid #ccc;
}

/* Hover myszą. Jakoś inne tricki nie chcą działąć box-shadow czy tam inne, nie chciało mi się analizowac.
    więc jest lekka obręcz. P.s. oczywiście border też zadziała, ale spowoduje przesunięcie w środku. */
.nutrients-table tr:hover {
    outline: 1px solid rgba(0,0,0,0.2);
    
}
.nutrients-table tr:hover td {
    color: black;
}   

/* Specjalizacji styli dla tabelki general */
.nutrients-table-general .nutrients-header th{
    background-color:#eee;
    border:1px solid #ccc;
}

.nutrients-table-general tr {
    border: 1px solid #ccc;
}

/* Zaakcentowanie wiersza z energią i osobno macros */ 
.nutrients-table-general .nutrient-energy td:nth-child(1),
.nutrients-table-general .nutrient-macro td:nth-child(1)
{
    font-weight: bold;
}

/* Jako że białka, tłuszcze, węgle są częścia 'energy' no to małe wcięcie */
.nutrients-table-general tr.nutrient-macro td:nth-child(1) {
    padding-left: 15px;
}

/* podmacros węgli */
.nutrients-table-general tr.nutrient-sub-macro td:nth-child(1){
    padding-left: 30px;
}

/* woda, popiół */
.nutrients-table-general tr.nutrient-unimportant{
    opacity:0.7;
}


.nutrients-table td img {
    width:1.2em;
}


/* --------------------------------------------------------------------------------------------------- */
/* Sekcje z witaminkami, minerałami etc */


/* Wszystko - cała część poświęcona nutrients (poza general) */
.layout-nutrients {
    display:flex;
    flex-direction: column;
}

/* Działy - np. lista witamin. */
.layout-nutrients section{
    width:100%;
}

@media (min-width:768px){

    .layout-nutrients {
        flex-direction:row;
        flex-wrap:wrap;
        gap:2em;
    }

    .layout-nutrients section{
        width:calc(50% - 1em);
        /* border:2px solid red; */
        /* padding:0.7em 0.7em 0.7em 0.7em; */
        margin:0px
        /* margin-right:5px; */
    }

    /* Informacyjnie - :has działa w FF od 111, można np. zmieniać cały parent (section) w zależności 
    od potomków. */
    .layout-nutrients section:has(h2[aria-expanded="false"]) {
        /* background-color: lightgreen; */
        /* border:2px dotted #666;  */
    }

    .layout-nutrients section h2{
        margin:0px;
    }

    /* collapes to ta część rozwijana, collapsing to przez chwilę nadawany jest podczas animacji */
    .layout-nutrients section .collapse, .layout-nutrients section .collapsing{
        margin-top:1em;
    }            
}


/* References, czyli no źródła, np. danego food */
.food-references{
    margin-top:7em;
    padding-top:0px;
    font-size:0.9rem;
    color:#444;
    border-top:1px solid #ccc;
}

.food-references h2{
    font-size:1.5rem;
    color:#444;
}