/* Basisopmaak voor de Reisafstanden-pagina */

body {
    font-family: 'Ubuntu', sans-serif;
}

.container {
    max-width: 500px;
    margin: 40px auto;
}

.page-title {
    font-weight: 300;
    font-size: 24px;
    text-align: center;
    color: #66b2ff;
    margin-bottom: 5px;
}

.entry-title {
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

/* Custom blauwe outline-knop */
.btn-outline-blue {
    color: #66b2ff;
    border: 2px solid #66b2ff;
}

.btn-outline-blue i {
    color: #66b2ff;
}

.btn-outline-blue:hover {
    background-color: #66b2ff;
    color: white;
}

.btn-outline-blue:hover i {
    color: white;
}

/* Staafdiagram */
.bars {
    font-size: 0;
    /* Verberg witruimte tussen inline-blocks */
    width: 500px;
    margin: 0 auto;
    height: 50vh;
    /* Max hoogte 80% van viewport */
    position: relative;
}

.bar-container {
    width: 25px;
    display: inline-block;
    font-size: initial;
    /* Herstel font-size binnen containers */
    text-align: center;
    vertical-align: bottom;
    margin-left: 100px;
}

.bar-container:first-child {
    margin-left: 112px;
}

.bar {
    width: 100%;
    background-color: #66b2ff;
    margin-bottom: 8px;
    transition: height 0.5s ease;
}

/* Icon-kleuren per type */
.bar-container.auto .icon {
    color: brown;
}

.bar-container.camper .icon {
    color: gold;
}

.bar-container.vliegtuig .icon {
    color: lightblue;
}

.bar-container.vliegtuig .bar {
    /* blauw 10px, gevolgd door lichtblauw 1px */
    background: repeating-linear-gradient(to bottom,
            #66b2ff 0px,
            #66b2ff 10px,
            #e6f2ff 10px,
            #e6f2ff 11px);
}

/* geen height-animatie op .bar, maar een scale-animatie vanaf de onderkant */
.bar {
    width: 100%;
    height: var(--target-height);        /* Staat al in je inline style */
    transform: scaleY(0);                /* Begin ingeklapt */
    transform-origin: bottom;            /* Groei vanuit de onderkant */
    /* Verwijder hier eventueel ‘transition: height…’ als die er nog staat */
    animation: grow 0.3s ease-out forwards;
  }
  
  /* Sequentiële delays */
  .bar-container.auto      .bar { animation-delay: 0s;   }
  .bar-container.camper    .bar { animation-delay: 0.3s; }
  .bar-container.vliegtuig .bar { animation-delay: 0.6s; }
  
  /* Keyframes voor de groei */
  @keyframes grow {
    to { transform: scaleY(1); }
  }
  

.icon {
    display: block;
    font-size: 1.5em;
    margin: 4px auto;
}

.label {
    font-size: 11px;
    margin-top: 4px;
    color: #777;
}