/*
Style dla wszystkich stron (base).
*/

/* Różne zmienne */
:root {
    /* Motyw zielony */
    /* --app-clr-primary: #2c7a7b; */
    --app-clr-background:#f8f8f8;
    /* Normalny tekst na 'normalnym' tle */
    --app-clr-text: #333;
    /* Motyw ciepły (pomarańcz/żółć/czerwien) */
    --app-clr-primary: #ff7e28;
    --app-clr-primary-dark: #df4b00;
    --app-clr-primary-light: #ff8a50;
    /* Kolor, gdy w użyciu dla tła jest --app-clr-primary*/
    --app-clr-primary-text: #fff;
}


/*
Poniższe robi też boostrap, ale to nie szkodzi. A przy okazji możemy bawić się tym trickiem
przez niektórych zwanym 'css console' - wszystkim elementom nadać obrys.
https://www.youtube.com/watch?v=DGOeyJjq80g
*/
*,
*::before,
*::after {
  box-sizing: border-box;
  /* Debuggowo */
  /* outline: 2px solid lime;
  background: hsl(0 100% 50% / 0.1); */
}

body{
    min-height:100vh;    
    background-color: var(--app-clr-background);
    color: var(--app-clr-text);
    font-size: 17px;
    line-height: 1.5;

    /* Założenie jest takie, że w base.html jest link w css do czcionki */
    font-family: "Roboto", sans-serif; 
    font-weight: 300;
    font-style: normal;
}

main{
    min-height:100vh;
}

footer {
    /* background-color: #f8f9fa;  */
    background-color:var(--app-clr-primary-dark);
    color:var(--app-clr-primary-text);
    padding:5px;
    padding-right:20px;
    width: 100%;
    text-align:right;
    font-size:0.8rem;
}

footer a {
    color:var(--app-clr-primary-text);
    text-decoration: none;
    margin: 0 10px; 
}

footer a:hover {
    color:var(--app-clr-primary-text);
}

footer .dropdown-menu {
    background-color:var(--app-clr-primary-dark);
    color:var(--app-clr-primary-text);
};

.navbar{
    border:none;
    border-bottom:1px solid #dadada;
    color: black;
    min-height:5em;
}

/* 
Tło jednocześnie dla navbar i wszelkich dropdown w nim obecnych 
Bo tak se boostrap wymyślił, że jest dropdown będzie miał wygląd niezależny od parentów.
*/
.navbar, 
.navbar .dropdown-menu, 
.navbar .dropdown-menu a,
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus   {
    /* background-color: var(--app-clr-primary); */
    background-color: #fafafa;
    
}

.navbar .navbar-brand {
    margin-right:0.5em;
}
.navbar .navbar-brand img{
    width:35px;
}

.navbar .navbar-search{
    width:65%;
}

/* dla mid i large */
@media (min-width: 768px) {
    .navbar .navbar-brand{
        /* Oryginalny boostrapowy margines */
        margin-right:var(--bs-navbar-brand-margin-end);
    }
    .navbar .navbar-search{
        /* width:auto; */
        width: initial;
    }
}

/* 
To dla ikonek typu 'search'. Nie wiem w ogóle czy takie podejście jest prawidłowe (użycie zmiennych --bs...)
Poniższe przy założeniu, że zmieniam sobie tło .navbar na raczej ciemny.
*/
.navbar .btn.btn-outline-secondary{
    /* --bs-btn-color:white;
    --bs-btn-border-color:white;
    --bs-btn-hover-bg:rgba(255,255,255,0.5);
    --bs-btn-hover-border-color:none; */
}

a {
    color: #2b6cb0; /* Niebieskie linki */
}

h1, h2, h3, h4 {
    color: var(--app-clr-primary);
    /* szeryfy ładne są, trzeba uważać, przy czcionkach "grad", "Georgia" liczby słabo wyglądają */
    /* font-family: serif; */
}


h1{
    /* font-size:4.23rem; */
    margin-top:1em;
    margin-bottom:1em;
    font-size:2rem;
}

h2{
    margin-top:1em;
    margin-bottom:0.7em;
    font-size:1.4rem;
}

h3{
    font-size:1.2rem;
}


a{
    text-decoration:none;
}

ul {
    list-style-type:none;
    padding:0px;
    margin: 0px;
}


/*
    Do zrobienia 'avatara', takie kółko z pierwszą literą maila/username usera. 
    Używane np., gdy user zalogowany - w header po prawej.
*/
.avatar-auto{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    text-align: center;
    border: 1px solid green;
    border-radius: 50%;
    background-color: #f0f0f0; /* Delikatne tło */
    font-family: Arial, sans-serif; /* Bezszeryfowa czcionka */
    font-size: 1.0em;
    color: var(--app-clr-text);
}           

.avatar-auto.avatar-admin
{
    background-color: #df5900; /* Delikatne tło */
    font-family: Arial, sans-serif; /* Bezszeryfowa czcionka */
    font-size: 1.0em;
    color: #fff;
}

/*
Boostrapowy button primary na pomarańczowo
*/
.btn-primary {
    background-color: var(--app-clr-primary);
    border: var(--app-clr-primary-dark);
}

.btn-primary:hover {
    background-color: var(--app-clr-primary-light);
}

/* 
Lekkie podświetlenie, używane min. przez funkcję js khighlightMatches, ale nie tylko
Prefix 'app' bo istnieją setki 'highlight' w wielu css'ach.
*/
.app-highlight{
    /* background-color:rgba(251, 199, 40, 0.5); */
    background-color:rgba(251, 230, 90, 0.5);
    /* Niby fajne czasem, ale innym razem rozwala trochę layout: */
    /*padding:0px 3px 0px 3px; */
}

/* Ogólno użytkowe */

.rotate-left { 
    display: inline-block; 
    transform: rotate(-90deg);
}

.rotate-right { 
    display: inline-block; 
    transform: rotate(90deg);
}

.rotate-180 { 
    display: inline-block; 
    transform: rotate(180deg);
}


/* 
Artykuł) - np. na stronie głównej (cała strona główna, tuż pod zdjeciem) 

Ale też i na stronie produktu - też pod zdjęciem (carousel).
Stąd ten margines gówny, bo zawsze jest pod zdjęciemm. A nawet jak nie jest to niech będzie.

p.s. Chodzi o podstawowy, najważniejszy artykuł. Bo np. w wynikach szukania też każdy item jest zamnkięty w <article>, 
chociaż to akurat nie wiem czy nie jest głupie
*/
.article{
    margin-top:1em;
    margin-bottom:1em;
}


/*
  Style dla komponentów robiących zawijanie/zwijanie innych elementów 
  (z użyciem data-bs-toggle="collapse" data-bs-target="" ... )
*/
/* 
Oryginalnie było tak (dwie ikony i zabawa z ukrwaniem), ale... prościej jest tak jak zrobiłem dalej z rotatacją.
.collapser {cursor: pointer;}    

.collapser[aria-expanded=true] .fa-chevron-down{display: none;}

.collapser[aria-expanded=false] .fa-chevron-up{display: none;}
*/

.collapser{
    cursor: pointer;
    /*
    flexbox jest tylko po to, by można było potencjalnie odwrócić kolejność <napis><strzałka> i zrobić reverse <strzałka><napis>
    po nic więcej...
    */
    display: flex;
    /* align-items: center; */
    /* Tak można odwrócić kolejność <napis><strzałka> i zrobić <strzałka><napis> */
    /* flex-direction: row-reverse; justify-content: flex-end; */
    gap:0.5em;
}

.collapser span {
    transition: transform 0.3s ease-in-out;
}

.collapser[aria-expanded=true] span {
    transform: rotate(90deg);
}

.collapser[aria-expanded=false] span {
    /* transform: rotate(-180deg); */
}

.dev-mode-info
{
    font-family: "Courier New", Courier, monospace;
    font-size: 90%;
    opacity: 0.90;
    padding: 5px;
    color: rgb(10, 10, 82) !important;
}

input::placeholder, .form-control::placeholder { 
    color: #999; /* Kolor placeholdera */ 
    opacity: 1; /* Ustawia krycie (opcjonalne, wartość domyślna to 0.54) */
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Carousel */


/* Będzie warunkowo włączone przez skrypt */
#photos-carousel {
    visibility: hidden;
    border:1px solid #ddd;
    /* 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:50vh;
}

#photos-carousel .carousel-item{
    /* height: 400px; */
    height:50vh;
    width: 100%;
    /* background-color: black; */
    /* background-color: #ff9f40;  */
    background-color: #fff; 
    
}

#photos-carousel .carousel-item .nphoto-image {
    /* max-height: 70%; */
    /* max-height: 500px; */
    height:75%;
    max-width: 100%;
    object-fit: cover; /* zapewnia, że obraz będzie pokrywał cały dostępny obszar bez rozciągania */
}

/* dla mid i large */
@media (min-width: 768px) {
    #photos-carousel .carousel-item{
        /* height: 700px; */

    }
    #photos-carousel .carousel-item img {
        /* max-height: 85%; */
    }
    
}        

/* Caption: By dało się przeczytać tekst, no to jakieś tam tło. */
#photos-carousel .carousel-caption {
    width: 100%;
    left: 0;
    /* background-color: rgba(0, 0, 200, 0.5);  */
    /* background-color: rgba(255, 255, 255, 0.5); */
    /* color: white; */
    color: rgb(60,60,60);
    font-size:0.8em;
}

#photos-carousel .carousel-caption .carousel-caption-title {
    font-size:1.1em;
    color:#666;
    margin:0.5rem;
    font-size:1.1rem;
    background:white;
}

#photos-carousel .carousel-caption .carousel-caption-title:first-letter {
    text-transform: uppercase;
}

#photos-carousel .carousel-caption p{
    margin-bottom:0.5rem;
}

#photos-carousel .carousel-caption a {
    color: black;
    text-decoration: underline;
}

/* Tu zaczyna się struktura konkretnego zdjęcia. To zawiera w sobie dane, a potem menu-btn, ribbon, caption... */
.nphoto {
    overflow:hidden;
}

/* Napis z tekstem "For illustration purposes only" lub podobnym */
.nphoto .nphoto-ribbon{   
    position:absolute;
    box-sizing: content-box;
    transform: rotate(-45deg);            
    --width: 200px;
    --edgeOffset: calc( var(--width) / 2);
    --topOffset: calc( (var(--width) *.9));
    width: var(--width);
    transform-origin: 0 var(--edgeOffset);
    top: var(--topOffset);
    left:0px;
    padding: 0.3rem var(--edgeOffset);
    background-color:rgba(255, 165, 0, 0.8);
    font-size: 0.9em;
    text-align:center;
}

/* Kontener <ul> dla like/dislike/menu button i może inne, takie na górze zdjęcia */
.nphoto .nphoto-toolbar{
    display: flex;
    position: absolute;
    align-items: center;
    gap:0.5em;
    right: 20px;
    top: 10px;
    z-index:2;
    /* background-color:var(--app-clr-background); */
    background-color: rgba(255,255,255,0.5);
    padding:5px 10px 5px 10px;
}

.nphoto .nphoto-toolbar li {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.nphoto .nphoto-toolbar li:hover {
    opacity: 1;
}

.nphoto .nphoto-toolbar img{
    width:1em;
}

/* 3 kropkowe menu */
.nphoto .nphoto-menu-btn{
    /* display: flex;
    align-items: center;
    justify-content: center; */
    /* width:1.5em; */
    /* background: linear-gradient(180deg,#0000 50%,#0b151e05),#fff; */
    /* background-color:var(--app-clr-background);
    color: #767676;
    font-size:1.2em;
    border-radius: 5px;
    cursor: pointer; */
}

/* Ten element wbrew pozorom **nie** jest w środku nphoto, jest osobno, pojedynczym elementem */
.nphoto-menu
{
    display: none;
    position: absolute;
    z-index: 2;
    font-size:0.9em;
    /* padding: 10px; */
    background-color: white;
    border:1px solid #ccc;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 16px;
    min-width: 100px;            
}

.nphoto-menu ul li {
    padding: 10px 10px 10px 10px;
    cursor: pointer;
}

.nphoto-menu ul li:hover{
    background-color: rgba(0, 0, 0, 0.03);
}

.nphoto .nphoto-rate{
    /* padding:7px 10px 7px 10px; */
    /* background: linear-gradient(180deg,#0000 50%,#0b151e05),#fff; */
    /* border:1px solid red; */
    /* color: #767676; */
    /* font-size:1.2em; */
    /* border-radius: 5px; */
    /* cursor: pointer; */
}

.nphoto .nphoto-rate.rate-vote-up:not(.rate-type-universal) img{
    content: url("../images/icons/rate-up.png");
}

.nphoto .nphoto-rate.rate-vote-up.rate-voted:not(.rate-type-universal) img{
    content: url("../images/icons/rate-up-fill.png");
}

.nphoto .nphoto-rate.rate-vote-down:not(.rate-type-universal) img{
    content: url("../images/icons/rate-down.png");
}
.nphoto .nphoto-rate.rate-vote-down.rate-voted:not(.rate-type-universal) img{
    content: url("../images/icons/rate-down-fill.png");
}


.carousel-control-prev, #photos-carousel .carousel-control-next{
    width:10%;
} 


#photos-carousel .carousel-control-prev .carousel-control-prev-icon , #photos-carousel .carousel-control-next .carousel-control-next-icon{
    filter: none;
} 

#photos-carousel .carousel-control-prev-icon, .carousel  .carousel-control-next-icon{
    /* Bo inaczej jest jakaś przestrzeń pod nami */
    display:block;
}

/* Wrapper wokół ikonki lewo/prawo, chodzi o tło czarne */
#photos-carousel .carousel-control-icon-wrap  {
    /* zoom:0.7; */
    background-color: black;
    padding:10px;
    border-radius: 50%;
}

/*
Ikonki. Wada jest taka, że no trudno zmienić kolor... dlatego akurat jak chodzi o search to na razie cały
svg (path...) wstawiłem po prostu do html.
*/
.icon-search {
    background: url('../images/icons/search.svg') no-repeat center center;
    width: 1em;
    height: 1em;
}                                    


/* ------------------------------------------------------------------------- */
/* Foods - lista. Dla search/list/nutrient details */ 

.food-list {
    display: flex;
    width:100%;
    flex-wrap: wrap;
}

.food-list>article {
    background-color:white;
    /* border: 1px solid #ccc; */
    width: 100%;
    /* padding: 0.1em; */
    text-decoration: none; 
    color: inherit;
    margin-bottom:1em;
}

.food-list>article .text{
    padding:0.5em;
}

.food-list>article .text h3 {
    color: var(--app-clr-text);
    margin:0px;
}

.food-list picture {
    display: block;
    width: 100%;
    height: 200px; 
    overflow: hidden;
}

.food-list img {
    width: 100%;
    height: 100%;
     object-fit: cover;
    object-position: center; 
}

@media (min-width: 600px) {
    .food-list article {
        margin-right:1em;
        width: calc(50% - 1em);
    }

    .food-list article .text{
        padding:1em;
    }
}

@media (min-width: 1000px) {
    .food-list article {
        margin-right:1em;
        width: 300px;
    }
}

.food-list .food-list-extra-display{
    color:var(--app-clr-text);
    margin-left:0.5em;
    font-size:0.85em;
}

/* Wartość składnika, np. '9 mg' */
.food-list .food-list-extra-display ul li span{
    font-weight:bold;
}