/**
 * Webfonts
 */

@font-face {
    font-family: 'QuicheSans';
    src: url('/assets/webfonts/QuicheSansRegular/font.woff2') format('woff2'),
         url('/assets/webfonts/QuicheSansRegular/font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/**
 * Colors
 */
:root {
    --color-bg: #ffffff;
    --color-text: #202c24;                  /* charleston green */
    --color-charleston-green: #202c24;

    /* grey's */
    --color-platinum: #ebe7e2;              /* very-light grey */
    --color-timberwolf: #dfd6ce;            /* light grey */

    /* tinted-grey's */
    --color-eggshell: #f3e9de;              /* very-light tinted-grey */
    --color-bone: #e0ddc7;                  /* light tinted-green */

    /* green-blue's */
    --color-columbia-blue: #c7dad8;         /* light green-blue */
    --color-cambridge-blue: #96BDB5;        /* medium green-blue */

    /* gray-green's */
    --color-pastel-gray: #d4d6b9;           /* light gray-green */

    /* green's */
    --color-wintergreen-dream: #558e80;     /* medium green */
    --color-camouflage-green: #7a8869;      /* dark green */

    /* earth-red's */
    --color-middle-red: #e68b6a;            /* medium earth-red */
    --color-jelly-bean: #db6747;            /* medium-dark earth-red */
}

/**
 * General styles
 */
body {
    font-family: "Raleway", "QuicheSans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 1.2em;
    background-color: var(--color-bg);
    color: var(--color-text);
}

a {
    all: unset;
    cursor: pointer;
    color: var(--color-camouflage-green);
    font-weight: 400;
}

a:hover {
    text-decoration: underline;
}

.home-img {
    width: auto;
    height: auto;
}

@media (max-width: 992px) {
    .home-img {
        max-width: 200px;
        margin-left: 50%;
        margin-right: 50%;
        transform: translateX(-50%);
    }
}

.text-invert a {
    color: var(--color-charleston-green);
    opacity: 0.7;
}

a.footer-link {
    color: var(--color-charleston-green);
    opacity: 0.7;
}

span.link {
    color: var(--color-camouflage-green);
}

span.link:hover {
    font-weight: 400;
}

main {
    position: relative;
}

em {
    all: unset;
    font-weight: 400;
}

.underline {
    text-decoration: underline;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
}

.card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--color-eggshell);
}

.card-img-top {
    object-fit: cover;
}

.card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.card-title {
    color: var(--color-text);
}

.card-body .btn.btn-primary {
    margin-top: auto;
    background-color: var(--color-camouflage-green);
    color: var(--color-eggshell);
    border-color: var(--color-camouflage-green);
}

.feature-icon {
    margin-bottom: 2rem;
    width: 100px;
}

.specialism-icon {
    margin-bottom: 2rem;
    width: 100px;
}

.page-picture {
    width: 100%;
    height: auto;
}

.side-image {
    width: 170px;
    height: auto;
    margin-bottom: 20px;
}

.map-wrapper {
    height: 400px;
}

.map-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--color-camouflage-green);
    user-select: none;
}

.map-toggle .icon {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.map-toggle .icon-hide {
    display: none;
}

.map-toggle.is-open .icon-show {
    display: none;
}

.map-toggle.is-open .icon-hide {
    display: inline-flex;
}

.map-toggler {
    overflow: hidden;
    transition:
        max-height 300ms ease,
        opacity 200ms ease;
    max-height: 0;
    opacity: 0;
}

.map-toggler.is-open {
    max-height: 400px;
    opacity: 1;
}

/**
 * Header style
 */

/* Container */
.site-header {
    position: relative; /* voor overlay positioning */
    width: 100%;
    background-color: var(--color-bg);; /* voor extra ruimte als content hoger is */
    overflow: hidden;
}

/* Achtergrond afbeelding */
.header-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    max-width: 2480px;
    min-height: 496px; /* minimale hoogte van je PNG bij volledige breedte */
    background-image: url('/assets/backgrounds/header.png');
    background-size: contain; /* afbeelding schaalt mee, verhoudingen blijven intact */
    background-repeat: no-repeat;
    background-position: top center; /* bovenaan geankerd */
    z-index: 0;
}

/* Content over de afbeelding */
.header-content {
    position: relative; /* boven de achtergrond */
    min-height: calc(100vw * 496 / 2480);
    z-index: 1;
    padding: 20px 15px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between
}

/* Logo */
.header-logo {
    max-height: 200px;
    width: auto;
    margin-bottom: 10px;
}

@media (max-width: 576px) {
    .header-logo {
        max-height: 130px;
    }
}

/* Slogan */
.header-slogan {
    margin: 0;
    font-size: 2em;
    font-weight: normal;
    color: #333333;
}

/* Optioneel: responsive padding of text-align aanpassen */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding: 15px 10px;
        text-align: center;
    }

    .header-slogan {
        margin-top: 10px;
    }
}

/**
 * Navbar style
 */
.navbar {
    font-size: 1.0em;
    font-weight: 400;
    background-color: var(--color-cambridge-blue);
    color: var(--color-eggshell);
}

.navbar .nav-link {
    text-decoration: none;
    color: var(--color-eggshell);
    margin-left: 3px;
    margin-right: 3px;
}

.navbar .nav-link.active {
    color: var(--color-eggshell);
    border-bottom: 1px solid var(--color-eggshell);
}

.navbar .nav-link:hover {
    color: var(--color-eggshell);
    border-bottom: 1px solid var(--color-eggshell);
}

.navbar-toggler {
    box-shadow: none;
    border: none;
    background: transparent;
    outline: none;
}

.navbar-toggler:focus {
    box-shadow: none;
    border: none;
    background: transparent;
    outline: none;
}

.navbar-toggler-icon-path {
    stroke: var(--color-eggshell);
    stroke-width: 2;
    stroke-linecap: round;
}


@media (max-width: 992px) {
    .navbar .nav-link {
        margin-top: 3px;
        margin-bottom: 3px;
        margin-left: 0;
        margin-right: 0;
        padding-left: 5px;
    }

    .navbar .nav-link.active {
        border-bottom: none;
        border-left: 1px solid var(--color-eggshell);
    }

    .navbar .nav-link:hover {
        border-bottom: none;
        border-left: 1px solid var(--color-eggshell);
    }
}

/**
 * Side nav style
 */

.side-menu {
    position: absolute;
    top: 20px;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 999;
}

.side-item {
    position: relative !important;
    width: 60px;
    height: 60px;
    /*background-color: var(--color-middle-red);*/
    background-color: var(--color-cambridge-blue);
    /*color: var(--color-eggshell);*/
    color: var(--color-jelly-bean);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    overflow: visible;
    padding-left: 5px;
    padding-right: 5px;
}

.side-icon {
    width: 45px;
    height: auto;
    display: block;
    margin: auto;
}

.side-item:hover {
    /*background-color: var(--color-jelly-bean);*/
    background-color: var(--color-columbia-blue);
}

.side-label {
    position: absolute;
    left: 65px;
    top: 0;
    height: 60px;
    /*background-color: var(--color-jelly-bean);*/
    background-color: var(--color-columbia-blue);
    /*color: var(--color-eggshell);*/
    color: var(--color-jelly-bean);
    padding: 0 15px;
    display: flex;
    align-items: center;
    white-space: nowrap;

    font-weight: 400;
    font-size: 1.2em;

    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
    transition: opacity 0.2s, transform 0.2s;

    /*border-radius: 5px;*/
    border-radius: 0 20px 20px 0;
    border-width: 0;
}

.side-item:hover .side-label {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

@media (max-width: 992px) {
    .side-menu {
        display: none;
    }
}

/**
 * Footer style
 */
footer {
    font-size: 0.8em;
    background-color: var(--color-wintergreen-dream);
    color: var(--color-eggshell);
}

a.footer-link {
    color: var(--color-eggshell);
}

/**
 * Pages
 */

.full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.full-width-bg {
    width: 100%;
}

.full-width-bg.bg1 {
    background-color: var(--color-platinum);
}

.full-width-bg.bg2 {
    background-color: var(--color-middle-red);
}

.text-link {
    color: var(--color-wintergreen-dream);
}

.text-invert {
    color: var(--color-eggshell);
}

.page-title {
    color: var(--color-jelly-bean);
}

.subtitle {
    font-weight: 200;
    letter-spacing: 0.15em;
}


.carousel-item {
    min-height: 70px;
}

.carousel-quote {
    margin: 0 auto;
    max-width: 75%
}

.link-tile {
    padding: 5px;
    border-style: solid;
    border-width: 5px;
    border-radius: 30px;
    border-color: transparent;
    text-decoration: none;
}

@media (max-width: 992px) {

    div:has(> .link-tile) {
        margin: 20px;
    }
}

.link-tile:hover {
    text-decoration: none;
    background-color: var(--color-cambridge-blue);
    border-color: var(--color-cambridge-blue);
}

.link-tile a {
    text-decoration: none;
}