/* MAIN */

html,
body {
    margin: 0;
    padding: 0;
    background: #F2F2F2;
    font-family: 'Helvetica';
    font-weight: 100;
    letter-spacing: .1rem;
    font-size: 1rem;
    height: calc(100% - 1rem);
}

[id] {
    scroll-margin-top: 1rem;
}

.bar {
    margin: 1rem;
    height: .5rem;
    width: calc(100% - 2rem);
    background: #6C7055;
}

.flex {
    display: flex;
    gap: 1rem;
    margin: 1rem;
}

form {
    width: 100%
}

input {
    outline: none;
    font-size: 1rem;
    background: #FFF;
    border: none;
    /* border: solid .1rem #6C7055; */
    border-radius: 1rem;
    width: calc(100% - 2rem);
    padding: .5rem 1rem;
    text-align: right;
}

main {
    position: relative;
    width: calc(clamp(900px, 100%, 1000px) - 3rem);
    margin: 5rem auto 2rem auto;
    z-index: 10;
    min-height: calc(100% - 15rem);
}

main .content {
    padding: 2rem 1.5rem;
    margin: -12rem 0 1.5rem 0;
    border-radius: 1rem;
    background-color: #FFF;
}

.content + .content {
    margin: 1.5rem 0;
}

.banner-image {
    width: 100%;
    height: 60%;
    background-size: cover;
    background-position: top center;
    
    position: relative;
    z-index: 0;
}

.banner-image::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(242,242,242,0), rgba(242,242,242, 1) 80%);
    width: 100%;
    height: 10rem;
}

.close {
    background-color: rgba(255, 255, 255, 0.75);
    padding: 1rem;
    border-radius: 50%;
    position: fixed;
    box-shadow: 0 0 .25rem #1E1D16;
    top: 6.5rem;
    right: 1.5rem;
    z-index: 99;
}

.giftig,
.eetbaar {
    background-color: rgba(255, 255, 255, 0.75);
    padding: .4rem .35rem .2rem .35rem;
    border-radius: 50%;
    position: fixed;
    box-shadow: 0 0 .25rem #1E1D16;
    top: 6.5rem;
    left: 1.5rem;
    z-index: 99;
}

a.gif + a.eten div {
    left: 4rem;
}

.close::before,
.close::after {
    content: " ";
    background: #1E1D16;
    position: absolute;
    height: .1rem;
    width: 1rem;
    left: .5rem;
}

.close::before { rotate: -45deg; }
.close::after  { rotate: 45deg; }

.selection {
    display: flex;
    background: #FFF;
    padding: .5rem;
    margin: 1rem 0;
    border-radius: 1rem;
    transition: .5s;
}

.selection:hover {
    box-shadow: 0 0 .25rem #1E1D16;
}

.selection .image {
    width: 5rem;
    height: 5rem;
    margin-right: 1rem;
    border-radius: .5rem;
    background-size: cover;
    background-position: center;
}

.selection .text {
    padding: .5rem 0;
    color: #1E1D16;
}

.selection .text .sub {
    color: #BBB;
    margin-top: .5rem;
    font-size: .7rem;
}

.bloeitijd {
    display: flex;
    gap: .25rem;
}

.bloeitijd div {
    width: 100%;
    height: 3rem;
}

.bloeitijd.top div {
    text-transform: uppercase;
    text-align: center;
    font-size: .6rem;
    font-weight: 600;
    padding: .25rem;
    height: auto;
    color: #FFF;
    margin-bottom: .25rem;
}

.bloeitijd .gray  { background-color: #1E1D16; }
.bloeitijd .rood  { background-color: #B00; }
.bloeitijd .groen { background-color: #0B0; }

@media screen and (max-width: 950px) {
    html,
    body {
        height: calc(100% - 2.5rem);
    }
    
    main {
        width: auto;
        margin: 1rem 1rem;
    }
    
    main .content {
        margin: -8rem 0 1.5rem 0;
    }
    
    .close {
        top: .8rem;
        right: .8rem;
    }
    
    .giftig,
    .eetbaar {
        top: .8rem;
        left: .8rem;
    }
    
    a.gif + a.eten div {
        left: 3.5rem;
    }
}


/* TABLE */

table {
    width: 100%;
    margin: .5rem 0;
    border-collapse: collapse;
}

th,
i.trans {
    font-size: .6rem;
    padding-right: 1rem;
    font-weight: 100;
    text-align: right;
    color: #BBB;
    width: 4.5rem;
}

td {
    line-height: 1.5rem;
}


/* SVG */

main svg {
    width: 100%;
    height: 10rem;
    margin: 2rem auto;
}

svg.home {
    fill: #BBB;
    background: #FFF;
    border-radius: 1rem;
    padding: .5rem;
    height: 1rem;
    transition: 0.5s;
}

svg.home:hover {
    fill: #6C7055;
}

.giftig svg,
.eetbaar svg {
    width: 1.3rem;
    height: 1.1rem;
    margin: 0;
}

.giftig svg { fill: #CC3300; }
.eetbaar svg { fill: #1E1D16; }
    
.gradient { fill: url(#svg-gradient); }
.gray     { fill: #1E1D16; }
.green    { fill: #6C7055; }

@media screen and (max-width: 950px) {
    main svg {
        width: auto;
        height: auto;
        margin: 2rem 1rem;
    }
}

/* HEADER */

header {
    width: 100%;
    position: fixed;
    top: 0;
    background: #FFF;
    box-shadow: 0 0 .1rem #1E1D16;
    z-index: 99;
}

@media screen and (max-width: 950px) {
    header {
        top: auto;
        bottom: 0;
        border-bottom: none;
    }
}


/* NAV */

ul {
    width: calc(clamp(900px, 100%, 1000px) - 3rem);
    display: flex;
    gap: 1rem;
    margin: 0 auto;
    padding: 0;
}

li {
    padding: .8rem .5rem;
    list-style: none;
    display: inline-block;
}

li p {
    color: #BBB;
    transition: 0.5s;
    font-size: .8rem;
    text-transform: uppercase;
}

li.active p {
    color: #1E1D16;
}

li svg {
    display: none;
    fill: #BBB;
    transition: 0.5s;
}

li svg:hover {
    fill: #6C7055;
}

@media screen and (max-width: 950px) {
    ul {
        width: calc(100% - 2rem);
        margin: 0 1rem;
    }
    
    li {
        width: 100%;
    }
    
    li p {
        display: none;
    }
    
    li svg {
        display: block;
    }

    li.active svg {
        fill: #1E1D16;
    }
}


/* footer */

footer {
    background: #1E1D16;
    color: #FFF;
    line-height: 1.5rem;
    text-align: justify;
    padding: 2rem 1.5rem 2rem 1.5rem;
    width: calc(100% - 3rem);
    position: sticky;
    bottom: 0;
    z-index: 88;
}

@media screen and (max-width: 950px) {
    footer {
        width: auto;
        padding: 2rem 1.5rem 6.5rem 1.5rem;
        position: inherit;
    }
}


/* TEXT */

h2 {
    font-size: 1rem;
    margin: 1.5rem 0;
    text-transform: uppercase;
}

p {
    font-size: .8rem;
    line-height: 1.5rem;
    text-align: justify;
    position: relative;
    margin: 0 0 .8rem 0;
    margin-top: 4rem;
}

main p::after {
    content: " ";
    width: 25%;
    height: .1rem;
    background: #6C7055;
    position: absolute;
    top: -1rem;
    left: 0;
}

.content h1 {
    text-align: center;
    margin: 0 0 .5rem 0;
    font-size: 1.2rem;
}

.content h2 {
    font-size: .8rem;
    margin: .5rem 0;
}

h3 {
    font-weight: 100;
    text-transform: none;
    text-align: center;
    margin: 0 0 2.5rem 0;
    font-size: .8rem;
    font-style: italic;
    color: #BBB;
}

h3 + h3 {
    margin: -2rem 0 2.5rem 0;
}

.content .class {
    font-size: .8rem;
}

header p {
    margin: 1rem 0;
}

table p {
    margin: 0 .25rem .25rem 0 !important;
    display: inline-block;
    padding: 0 .8rem;
    border-radius: .5rem;
}

h2 + p,
p + p {
    margin: 0 0 .8rem 0;
}

table + h2,
div + h2,
p + h2 {
    padding: 1.5rem 0 0 0;
}

table p::after,
h2 + p::after,
p + p::after {
    display: none;
}
    
footer p {
    font-size: .4rem;
    width: calc(clamp(900px, 100%, 1000px) - 4rem);
    margin: auto;
}

@media screen and (max-width: 950px) {
    main p::after {
        width: 40%;
    }
    
    footer p {
        width: auto;
    }
}

.rood         { background: #ED0707; color: #FFFFFF; }
.oranje       { background: #FF8C00; color: #FFFFFF; }
.groen        { background: #2A9C0E; color: #FFFFFF; }
.geel         { background: #FFF71C; color: #1E1D16; }
.blauw        { background: #349BEB; color: #FFFFFF; }
.paars        { background: #7F0AF5; color: #FFFFFF; }
.lavendel     { background: #B47FEB; color: #FFFFFF; }
.wit          { background: #FAFAFA; color: #1E1D16; }
.creme        { background: #FFFDD0; color: #1E1D16; }
.bruin        { background: #6F4E37; color: #FFFFFF; }
.roze         { background: #E0759E; color: #FFFFFF; }
.zwart        { background: #000000; color: #FFFFFF; }
.donkergrijs  { background: #5C5C5C; color: #FFFFFF; }
.grijs        { background: #C2C2C2; color: #FFFFFF; }
.blauwgrijs   { background: #4A6173; color: #FFFFFF; }

/* ACCORDION */

.group {
    cursor: pointer;
    transition: 0.4s;
}

.group:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.open:after {
    content: "\2212";
}

.panel {
    margin: -1rem;
    padding: 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


/* LINKS */

a:any-link {
    color: #1E1D16;
    text-decoration: none;
}

p a:any-link {
    color: #6C7055;
}