/*************************************/
/* CSS for Single Plant pagers       */
/*************************************/

/****************************/
/* SP Main Grid layout      */
/****************************/

.single-plant {
    margin-top: 60px;
    padding: 0;
    width: 100%;
    display: grid;
    /* grid-template-columns: [grid-start double-column-start]repeat(4, minmax(min-content, 20rem))[double-column-end single-column-start] repeat(2, minmax(min-content, 20rem))[single-column-end grid-end]; */
    grid-template-columns: [grid-start double-column-start]repeat(4, minmax(min-content, 1fr))[double-column-end single-column-start] repeat(2, minmax(min-content, 1fr))[single-column-end grid-end];
    grid-gap: 40px;
    box-sizing: border-box;
    background: 0;
    font-size: 95%;
}

.single-plant-container-double-column {
    grid-column: double-column-start / double-column-end;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

}

.single-plant-container-single-column {
    grid-column: single-column-start / single-column-end;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

}


.single-plant__h1 {
    font-size: 3.5rem;
}

.single-plant__h2 {
    padding-top: 50px;
    font-size: 2.5rem;
}

.single-plant__h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}
/* @media only screen and (max-width: $bp-large) {
   grid-template-rows: 6rem 80vh min-content 40vw repeat(3, min-content);
   grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
   }

   @media only screen and (max-width: $bp-medium) {
   // grid-template-rows: 6rem calc(100vh - 6rem) min-content min-content min-content repeat(3, min-content); //No need to write down min-content here, the grid takes care of that itself
   grid-template-rows: 6rem calc(100vh - 6rem) ; */


/* Hastags for posting on social media, keep invisible */
.hashtags__blok {
   display: none;
}

.single-plant__blok--intro {
    /* grid-column: double-column-start / double-column-end; */
    padding: 30px;
    background-color: var(--color-primary-light);
    /* height: 250px; */

}
        .single-plant__blok--intro-image a,
        .single-plant__blok--intro-image a:hover {
            border-bottom: none;
        }

        .single-plant__blok--intro-image img {
            /* max-width: 100%; */
            width: 100%;
            height: auto;
            /* border: 2px solid black; */
            margin-bottom: 35px;
            /* size: cover; */
        }

        .log-in-double-column {
            padding-top: 20px;
            border-top: 1px solid var(--color-primary-dark);
        }

        .log-in-double-column ul {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: 20px;
        }

        /* minimum 700px */
        /*
        .display-small {
            display: none;
        }

        .display-large {
            display: inline-block;
        }
        */


.single-plant__blok--empty{
    display:none;
}

.please-log-in-sidebar {
    padding: 20px;
    background-color: var(--color-primary-light);
}

.single-plant-side-widget {
    width: 100%;
    margin-top: 30px;
    /* padding: 20px;
    border-top: 2px solid var(--color-primary-light); */
}

.single-plant__blok--namen {
    /* font-size: 50%; */
    /* grid-column: single-column-start / single-column-end; */
    padding: 20px;
    background-color: var(--color-primary-light);
    /* height: 250px; */
}

        .single-plant__blok--namen-nederlands,
        .single-plant__blok--namen-latijn,
        .single-plant__blok--namen-engels,
        .single-plant__blok--familie,
        .single-plant__blok--inheems,
        .single-plant__blok--giftigheid,
        .single-plant__blok--type-plant {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: 20px;
        }

            .single-plant__blok--toelichting,
            .kenmerken-tekst {
                /* outside grid */
                font-weight: 300;
            }
            .single-plant__blok--toelichting-text {
                list-style: none;
                /* text-transform: uppercase;
                margin-bottom: 0.5rem; */
                font-weight: 300;
            }
            .single-plant__blok--toelichting-label {
                font-weight: 600;
            }


        .single-plant__blok--namen-label,
        .kenmerken-label {
            font-weight: 600;
        }

        .single-plant__blok--namen-nederlands ul,
        .single-plant__blok--namen-engels ul {
            margin-bottom: 0;
        }

        .single-plant__blok--namen-name,
        .kenmerken-kenmerk {
            list-style: none;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
        }

.single-plant__blok--geneeskrachtige-werking {
    /* grid-column: double-column-start / double-column-end; */
    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-primary-light);
    z-index: 0;
    overflow: hidden;
    /* height: 250px; */
}

.single-plant__blok--gebruik {
    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-primary-light);
    z-index:0;
    overflow: hidden;
}

.single-plant__blok--gebruik-box {
    padding-left: 30px;
}

.single-plant__blok--magische-werking {
    /* grid-column: double-column-start / double-column-end; */
    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-primary-light);
    z-index: 0;
    overflow: hidden;
    /* height: 250px; */

}
        .single-plant__blok--werking-grid,
        .single-plant__blok--gebruik-grid {
            display: grid;
            /* grid-template-columns: repeat(2, minmax(min-content, 1fr)); */
            grid-template-columns: 50% 50%;
            grid-column-gap: 20px;
            padding: 0 30px;
            margin-bottom: 2rem;

        }

        .single-plant__blok--werking-relatie {
            padding-bottom: 10px;
			/* margin-bottom: 10px;
			padding: 8px;
			background: rgba(0,0,0,0.05); */
        }
        .single-plant__blok--werking-relatie a {
            font-weight:400;
            transition: all 0.25s ease-in-out;
            z-index: 5;
            position: relative;
            border-bottom: none;
        }
        .single-plant__blok--werking-relatie a:hover {
            text-decoration: underline;
             border-bottom: none;
        }

        a.laat-toelichting-zien, a.laat-toelichting-zien:hover {
            text-decoration: none;
        }

        .laat-toelichting-zien {
            z-index: 5;
            position: relative;
        }

        .werking-topper {
            padding: 0 2px;
            color: green;
        }

        /* .single-plant__blok--werking-toelichting { */
        .toelichting-hagetisse {
            font-weight: 300;
            display: none;
        }



.single-plant__kenmerken-2,
.single-plant__kenmerken-3 {
    /* grid-column: single-column-start / single-column-end; */
    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-primary-light);
    /* height: 250px; */
}

    .single-plant__kenmerken-2--bloeikleur,
    .single-plant__kenmerken-2--bloemkenmerken,
    .single-plant__kenmerken-3--omgeving,
    .single-plant__kenmerken-3--standplaats-voorkeur,
    .single-plant__kenmerken-3--schaduw-tolerantie,
    .single-plant__kenmerken-3--hardheidszone,
    .single-plant__kenmerken-3--vruchtbaarheid,
    .single-plant__kenmerken-3--grondsoorten
     {
        display: grid;
        grid-template-columns: 1fr 1fr;

        /* grid-template-columns: repeat(2, minmax(min-content, 1fr)); */

        grid-column-gap: 20px;
    }


    .klimaat-span {
        font-weight: 300;
    }
    .kenmerken-klimaat {
        list-style: none;
        font-weight: 300;
        padding-left: 15px;
    }


    /* ************************** */
    .single-plant__kenmerken-2--bloeitijd-maanden {
        height:30px;
        margin: 10px 0;
        width: 100%;
        display: grid;
        grid-template-columns: 5% repeat(12,1fr) 5%;
        font-size: 75%;
    }

    .single-plant__kenmerken-2--bloeitijd-maand {
        background-color: green;
        color: var(--color-font-light);
        border-left: 1px solid black;
        text-align: center;
        align-self: center;
        padding: 3px;
        box-shadow: 1px 3px 6px rgba(0,0,0,.5);
    }
        /*
        [data-status="true"] {
            background-color: green;
        }

        [data-status="false"] {
            background-color:  var(--color-primary-accent);
        } */

    #bloeitijd-maanden-begin {
        background-color: var(--color-primary-accent);
        border-top-left-radius: 150%;
        border-bottom-left-radius: 150%;
    }

    #bloeitijd-maanden-eind {
        background-color: var(--color-primary-accent);
        border-top-right-radius: 150%;
        border-bottom-right-radius: 150%;
    }




/* ********************** */
.single-plant__blok--eetbaarheid {
    /* grid-column: double-column-start / double-column-end; */
    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-primary-light);
    z-index: 0;
    overflow: hidden;
    /* height: 250px; */
}

    .single-plant__blok--eetbaarheid-vraag {
        display: flex;
        padding: 0 50px;

        }
        .single-plant__blok-eetbaarheid-vraag-label {
            font-weight: 600;
            margin-right: 20px;
            }

    .specificatie-eetbaarheid {
        margin-top: 30px;
        /* padding: 0 30px 0 50px; */
        list-style: none;

        }
        .specificatie-eetbaarheid ul{
            list-style: none;
        }

        .specificatie-eetbaarheid ul li{
            padding: 0 30px;
        }

        .specificatie-eetbaarheid__item-deel {
            font-style: italic;
            font-weight: 500;
            margin-bottom: 10px;
        }

        .specificatie-eetbaarheid__item-maanden {
            height:40px;
            margin: -3px 0 30px 0;
            width: 100%;
            display: grid;
            grid-template-columns: 5% repeat(12,1fr) 5%;

            /* border-radius: 50%; */

        }
        .specificatie-eetbaarheid__item-maand {
            background-color: green;
            color: var(--color-font-light);
            border-left: 1px solid black;
            text-align: center;
            align-self: center;
            padding: 3px;
            box-shadow: 1px 3px 6px rgba(0,0,0,.5);
        }

        [data-status="true"] {
            background-color: green;
        }

        [data-status="false"] {
            background-color:  var(--color-primary-accent);
        }

        #eetbaarheid-item-begin {
            background-color: var(--color-primary-accent);
            border-top-left-radius: 150%;
            border-bottom-left-radius: 150%;
        }

        #eetbaarheid-item-eind {
            background-color: var(--color-primary-accent);
            border-top-right-radius: 150%;
            border-bottom-right-radius: 150%;
        }


        .specificatie-eetbaarheid__item-toelichting {
            display: none;
            font-weight: 300;
        }

        .specificatie-eetbaarheid__item-oogst {
            font-weight: 300;
            text-transform: lowercase;
            padding-left: 37px;
            margin-top: 7px;
        }




.single-plant__blok--interacties {
    /* grid-column: double-column-start / double-column-end; */
    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-primary-light);
    z-index: 0;
    overflow: hidden;
    /* height: 250px; */
}


    .single-plant__blok--interacties ul {
        list-style: none;
        padding: 0 30px;
        /* font-weight: 500; */
    }
    .single-plant__blok--interacties ul li {
        margin-bottom: 0;
    }

    .single-plant__blok--interacties p {
        font-weight: 300;
        padding: 0 30px;
    }


.single-plant__voedingsstoffen,
.single-plant__inhoudsstoffen {
    /* grid-column: single-column-start / single-column-end; */
    margin-top: 40px;
    padding: 20px 20px 30px 20px;

    background-color: var(--color-primary-light);
    z-index: 0;
    overflow: hidden;
    /* height: 250px; */
}

    .single-plant__blok--stoffen-relatie {
        max-width: 100%;
        padding-left: 30px;
        display: grid;
        /* grid-template-columns: 300px 50px 150px; */
        grid-template-columns: min-content 50px auto;
        grid-column-gap: 30px;
        grid-row-gap: 10px;
        white-space: nowrap;

    }

   

    .single-plant__blok--stoffen-relatie a {
        font-weight: 400;
        transition: all .25s ease-in-out;
        border-bottom: none;
    }

    .single-plant__blok--stoffen-relatie a:hover {
        text-decoration: underline;
        border-bottom: none;
    }

    .single-plant__blok--stoffen-relatie a:last-of-type {
        margin-bottom: 20px;
    }

    .single-plant__blok--stoffen-relatie.voedingstoffen-relatie {
        display: flex;
        flex-direction: column;
        
    }

    .single-plant__blok--stoffen-relatie.voedingstoffen-relatie a {
        display: flex;
        justify-content: space-between;
        
    }

    .stoffen-relatie-item-weight {
        justify-self: end;
    }

    .single-plant__inhoudsstoffen ul {
        list-style: none;

    }
    .single-plant__inhoudsstoffen ul li {
        padding: 0 30px;
    }

    .single-plant__inhoudsstoffen ul li a {
        font-weight: 400;
        transition: all 0.25s ease-in-out;
        border-bottom: none;
    }

    .single-plant__inhoudsstoffen ul li a:hover {
        text-decoration: underline;
        border-bottom: none;
    }


    .toelichting-gebruik-blok a,
    .toelichting-gebruik-blok a:hover {
        border-bottom: none;

    }

    a.toelichting-gebruik {
        font-weight: 400;
        transition: all 0.25s ease-in-out;
        z-index: 5;
        position: relative;
        border-bottom: none;

    }



/* Afbeeldingen */
.single-plant__blok--afbeelding-overzicht,
.single-plant__blok--afbeelding-2,
.single-plant__blok--afbeelding-3,
.single-plant__blok--afbeelding-4,
.single-plant__blok--afbeelding-5  {
    /* grid-column: single-column-start / single-column-end; */
    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-primary-light);
    /* height: 400px; */
    overflow: hidden;
}

.single-plant__blok--afbeelding-overzicht a,
.single-plant__blok--afbeelding-2 a,
.single-plant__blok--afbeelding-3 a,
.single-plant__blok--afbeelding-4 a,
.single-plant__blok--afbeelding-5 a,
.single-plant__blok--afbeelding-overzicht a:hover,
.single-plant__blok--afbeelding-2 a:hover,
.single-plant__blok--afbeelding-3 a:hover,
.single-plant__blok--afbeelding-4 a:hover,
.single-plant__blok--afbeelding-5 a:hover{
    border-bottom: none;

}

.single-plant__blok--afbeelding-overzicht img,
.single-plant__blok--afbeelding-2 img,
.single-plant__blok--afbeelding-3 img,
.single-plant__blok--afbeelding-4 img,
.single-plant__blok--afbeelding-5 img {
        width: 100%; 
        height: 100%;
        object-fit: cover;
        display: block; 
}

.afbeelding-title {
    padding-top: 5px;
    font-size: 90%;
    font-weight: 300;
}

a.toelichting-eetbaarheid, a.toelichting-eetbaarheid:hover {
    border-bottom: none;
}
/*
.single-plant__blok--groeiomstandigheden {

    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-primary-light);
    height: 250px;
}
*/

.single-plant__blok--middelen {
    /* grid-column: single-column-start / single-column-end; */
    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-primary-light);
    z-index: 0;
    overflow: hidden;
    /* height: 250px; */
}

    .single-plant__blok--middelen ul {
        list-style: none;
    }
    .single-plant__blok--middelen ul li {
        font-weight: 500;
        padding: 0 15px;
    }


/*
.single-plant__blok--giftigheden {

    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-primary-light);
    height: 250px;
}
 */

/*
.single-plant__blok--stoffen {

    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-primary-light);
    height: 250px;
}
 */
.toelichting-gebruik-blok,
.toelichting-werking-blok,
.toelichting-eetbaarheid-blok {
    display: flex;
}

.toelichting-hagetisse-gebruik {
    font-weight: 300;
    display: none;
    padding: 0 30px;
}





.single-blok-icon {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    /* overflow: hidden; */
    z-index: 5;
    font-size: 200px;
    fill: var(--color-icon-background-large);

}

.single-blok-icon i {
    color: var(--color-icon-background-large);
    position: absolute;
    top: -3px;
    right: -3px;
    /* top: -140px;
    right: -110px; */
    z-index:-10;
    /* padding: 0; */

}

.single-blok-icon svg {
    /* fill: var(--color-icon-background-large); */
    position: absolute;
    top: -3px;
    right: -3px;
    /* top: -140px;
    right: -110px; */
    z-index:-4;
}

/* .fa .fa-info-circle {
    color: blue;
} */



/**********************************************/
/*  MEDIA QUERIES                             */
/**********************************************/


@media only screen and (max-width: 1400px) {
    .single-plant__kenmerken-2--bloeitijd-maanden{
        display: flex;
        flex-wrap: wrap;
        height: auto;
        justify-content: center;

    }

    .single-plant__kenmerken-2--bloeitijd-maand {
        margin: 5px 0px;
    }
}

@media only screen and (max-width: 1200px) {
    .single-plant {
        font-size: 90%;
    }
}

@media only screen and (max-width: 1100px) {
    .single-plant {
        font-size: 84%;
    }
}

@media only screen and (max-width: 1000px) {
    .single-plant {
        font-size: 78%;
    }
}


@media only screen and (max-width: 900px) {
    .single-plant {
        font-size: 95%;
        grid-template-columns: minmax(250px, 1fr);
        grid-gap: 0;
    }

    .single-plant-container-double-column {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .single-plant-side-widget {
        display: none;
    }

    .single-plant__kenmerken-2--bloeitijd-maanden {
        display: grid;
    }

    .single-plant__blok--namen,
    .please-log-in-sidebar {
        margin-top: 30px;
    }

    .specificatie-eetbaarheid__item-maanden {
        height: auto;
        margin: 10px 0;
        /* width: 100%; */
        /* display: grid; */
        /* grid-template-columns: 5% repeat(12,1fr) 5%; */
        /* border-radius: 50%; */
        justify-content: center;
    }
    .specificatie-eetbaarheid__item-maand {
        font-size: 75%;
    }
    .specificatie-eetbaarheid ul li {
        padding: 0;
    }

    .please-log-in-sidebar {
        display: none;
    }
    /* putting al blocks in the right order  */
    /* .single-plant__blok--intro { grid-row: 1}
    .single-plant__blok--namen {grid-row:2}
    .single-plant__kenmerken-2 {grid-row: 3}
    .single-plant__kenmerken-3 {grid-row: 4}
    .single-plant__blok--afbeelding-overzicht {grid-row: 5}
    .single-plant__blok--geneeskrachtige-werking {grid-row: 6}
    .single-plant__blok--gebruik {grid-row: 7}
    .single-plant__blok--interacties {grid-row: 8}
    .single-plant__blok--afbeelding-2 {grid-row: 9}
    .single-plant__blok--magische-werking {grid-row: 10}
    .single-plant__blok--afbeelding-3 {grid-row: 11}
    .single-plant__blok--eetbaarheid {grid-row: 12}
    .single-plant__blok--afbeelding-4 {grid-row: 13}
    .single-plant__voedingsstoffen {grid-row: 14}
    .single-plant__inhoudsstoffen {grid-row: 15}
    .single-plant__blok--afbeelding-5 {grid-row: 16}
    .single-plant__blok--middelen {grid-row: 17} */
}


@media only screen and (max-width: 800px) {
    .single-plant__blok--werking-grid,
    .single-plant__blok--gebruik-grid {
        display: grid;
        grid-template-columns: 1fr;
        padding: 0 25px;
    }

    /* .single-plant__blok--namen,
    .single-plant__kenmerken-2,
    .single-plant__kenmerken-3, */
    .single-plant__inhoudsstoffen ul li,
    .single-plant__blok--gebruik-box,
    .single-plant__blok--werking-grid,
    .single-plant__blok--gebruik-grid,
    .single-plant__blok--stoffen-relatie {
        padding-left: 25px;
    }

    .single-plant {
        font-size: 90%;
    }

}

@media only screen and (max-width: 700px) {
    .single-plant {
    font-size: 84%;
    }

    /* .single-plant__blok--namen,
    .single-plant__kenmerken-2,
    .single-plant__kenmerken-3, */
    .single-plant__inhoudsstoffen ul li,
    .single-plant__blok--gebruik-box,
    .single-plant__blok--werking-grid,
    .single-plant__blok--gebruik-grid,
    .single-plant__blok--stoffen-relatie {
        padding-left: 20px;
    }
    i.fa.fa-info-circle {
        font-size: 120%;
        padding: 5px 10px;
    }

    .log-in-double-column ul {
        grid-template-columns: 1fr;
    }

    /*
    .display-small {
        display: inline-block;
    }

    .display-large {
        display: none;
    }
    */
}

@media only screen and (max-width: 600px) {
    
    .single-plant__inhoudsstoffen ul li,
    .single-plant__blok--gebruik-box,
    .single-plant__blok--werking-grid,
    .single-plant__blok--gebruik-grid,
    .single-plant__blok--stoffen-relatie {
        padding-left: 15px;
    }

}

@media only screen and (max-width: 500px) {
    .single-plant {
        font-size: 80%;
    }
    .single-plant__blok--namen,
    .single-plant__kenmerken-2,
    .single-plant__kenmerken-3,
    .single-plant__inhoudsstoffen ul li,
    .single-plant__blok--gebruik-box,
    .single-plant__blok--werking-grid,
    .single-plant__blok--gebruik-grid,
    .single-plant__blok--stoffen-relatie {
        padding-left: 10px;
    }

    i.fa.fa-info-circle {font-size: 120% }
}



/*
1.	Intro
2.	Kenmerken 1
3.	kenmerken 2
4.	kenmerken 3
5.	foto helemaal
6.	geneeskrachtige werking
7.	gebruik
8.	interacties
9.	plaatje blad
10.	magische werking
11.	Plaatje bloem
12.	Eetbaarheid
13.	Plaatje steel
14.	Voedingsstoffen
15.	Inhoudstoffen
16.	Plaatje
17.	Gerelateerde middelen