/*
Theme Name: Dierenarts Ottevaere
Theme URI: https://www.dierenartsottevaere.be/
Author: Benedikt Beun
Template: understrap
*/

:root {
    --groen: 141, 199, 63;
    --bs-primary-rgb: var(--groen);
    --bs-link-color: var( --bs-body-color);
}

.navbar-dark {
    --bs-navbar-color: white;
}

#wrapper-static-hero {
    background: #efefef;
}

#right-sidebar {
    background: #efefef;
    padding: 20px;
    border: 5px solid rgba(var(--bs-primary-rgb));
    border-radius: 20px;
    margin: 10px;
    max-width: calc(100% - 20px);
}

#primary {
    padding: 20px;
    border: 2px solid #d4d4d5;
    margin: 10px;
    border-radius: 20px;
    max-width: calc(100% - 20px);
}

#wrapper-footer {
    text-align: center;
    background: url(assets/footer.png);
    background-repeat: repeat-x;
    height: 130px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 5px;
    color: white;
}

a.wp-element-button:hover {
    color: white;
}

figure.alignright, figure.alignleft  {
    max-width: 50%;
}

figure.wp-block-gallery.has-nested-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 kolommen */
    gap: 10px; /* afstand tussen afbeeldingen */
}

.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
    width: 100%;
}
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
}

@media (min-width: 600px) {
    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2), .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2)~figure.wp-block-image:not(#individual-image) {
        width: 100%;
    }
}

@media (max-width: 1000px) {
    figure.wp-block-gallery.has-nested-images {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 768px) {
    .breadcrumb-title {
        display: none;
    }
}

header a {
    text-decoration: none;
}

.row {
    align-items: flex-start;
}