:root,
[data-bs-theme=light] {

--zf-deepblue: #062642;
--zf-midblue: #063762;
--zf-lightblue: #0B5696;
--zf-softblue: #D0EFFF;
--zf-pink: #FB8CE2;
--zf-brightblue: #0069FF;

--zf-component_padding_desktop: 80px;
--zf-component_padding_mobile: 40px;
}

#zomer-festival {
  background: var(--zf-deepblue);
  color: var(--zf-softblue);

  .component {
    margin-top: var(--zf-component_padding_desktop);
    margin-bottom: var(--zf-component_padding_desktop);

    &.background {
      padding-top:var(--zf-component_padding_desktop);
      padding-bottom:var(--zf-component_padding_desktop);
    } 
  }
  @media only screen and (max-width: 576px) {
    .component {
      margin-top: var(--zf-component_padding_mobile);
      margin-bottom: var(--zf-component_padding_mobile);

      &.background {
        padding-top: var(--zf-component_padding_mobile);
        padding-bottom: var(--zf-component_padding_mobile);
      }
    }
  }

  h1, h2, h3, h4, h5, 
  strong, b {
    color: #fff;
  }

  p, small, li, span {
    color: var(--zf-softblue);
    font-size: 17px;
  }

  p a, 
  li a,
  span a,
  li a {
    color: var(--zf-pink);
    text-decoration: underline;

    &:hover, &:focus, &:active {
      color: #fff;
    }
  }

  .wp-caption-text {
    color: var(--zf-softblue);
  }
  
  .pronouns {
    font-weight: 400;
    font-size: 15px;
    color: #fff;
  }

  hr {
    background: var(--zf-softblue);
    width: 60px;
    height: 1px;
    max-width: 70%;
    margin: 12px auto;
  }

  .background {
    background: var(--zf-midblue);
  }

  .cta {
    line-height: 1.3em;
    font-weight: 700;
    display: block;
    color: #fff;
  }

  .title {
    font-size: 58px;
    line-height: 1.1em;
    margin-bottom: 8px;
    
    @media only screen and (max-width: 576px) {
      font-size: 34px;
    }
  }

  .btn {
    font-size: 18px;
    background: var(--zf-brightblue);
    border: 1px solid var(--zf-brightblue);
    text-transform: uppercase;
    padding: 20px 30px;
    border-radius: 30px !important;

    &:hover, &:active, &:focus {
      background-color: var(--zf-pink);
      border: 1px solid var(--zf-pink);
    } 
  }

  .btn-outline-primary {
    background: none;
    color: #fff;
    border:1px solid #fff;

    &:hover, &:active, &:focus {
      background-color: var(--zf-brightblue) !important;
      border:1px solid var(--zf-brightblue) !important;
    } 
  }

  .block {
    background:var(--zf-midblue);
    border:1px solid var(--zf-lightblue);
  }
  
  .bd-callout.warning {
    padding: 10px;
    font-weight: 700;
    text-align: center;
    background: #4F3434;
    border: 1px solid #860909;
    margin-bottom: 40px;
  }

  /* Header */
  #header {
    background: url('images/zomer-festival/header-mussennest.jpg') no-repeat center center;
    background-size: cover;
    margin-top: -120px;

    .zomer-festival-logo {
      width: 220px;
      height: auto;
      margin-top: 120px;
      margin-bottom: 48px;
    }
  }
  
  .header-blocks {
    background: var(--zf-midblue);
  }

  .play-sfeervideo {
    background: url('assets/images/zomer-festival/sfeervideo-bg.jpg') no-repeat center center;
    background-size: cover;

    a {
      display: block;
      color: #fff;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: 15px;
      
      i {
        display: block;
        font-size: 40px;
      }

      &:hover, &:active, &:focus {
        color: var(--zf-pink);
        text-decoration: none;
      }
    }
  }

  /* Accordion voor programma en FAQ */
  .accordion-button,
  .accordion-body {
    background: none;
    color: #fff;
  }
  .accordion-item {
    border: none;
    border-bottom: 1px solid var(--zf-lightblue);
    background: none;
  }

  .accordion-button {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    box-shadow: none !important;

    h3 {
      margin-bottom: 0;
    }

    &::after {
      position: absolute;
      width: 20px;
      text-align: center;
      top: 30px;
      right: 8px;
      background: none;
      content: "+";
      color: #fff;
      font-weight: 700;
      font-size: 24px;
      line-height: 1;
    }
    &:not(.collapsed)::after {
      transform: none !important;
      content: "-";
    }
  }
  
  .accordion-header {
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    
    h3 {
      font-weight: 300;
      padding-right: 16px;

      span.organizer {
        display: block;
        color: var(--zf-softblue);
        font-size: 17px;
        font-weight: 400;
      }
      span.titel {
        display: block;
        color: #fff;
        font-weight: 700;
        font-size: 20px;
      }
    }
  }

  .accordion-body {
    padding-top: 0 !important;
  }

  /* Tabs voor programma */
  .nav-tabs {
    border:0;
    margin-bottom:16px;
    background:var(--zf-midblue); 
  }
  .nav-link {
    position: relative;
    border-radius: 0;
    text-decoration: none;
    background: var(--zf-midblue); 
    color: #FFF;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 22px;
    font-weight: 700;
    border: 0;

    &:hover, &:active, &:focus {
      background-color: var(--zf-lightblue);
    }

    &.active { 
      background: #fff;
      color: var(--zf-deepblue);
    }
  }

  /* Ticketprijzen */
  #ticketprijzen {
    ul {
      margin: 0;
      padding: 0;
      
      li {
        display: block;
        list-style: none;
        padding: 6px;
        border-bottom: 1px solid var(--zf-lightblue);
        color: #fff;
      }
    }

    .card-body {
      padding: 0;
    }
    .card-footer {
      background: none;
      border: none;
      padding: 0;
    }
  }

  .date {
    font-size: 19px;
    font-weight: 700;
    color: var(--zf-softblue);
    margin-bottom: 24px;
  }

  .badge-tag {
    background: var(--zf-midblue);
    border: var(--zf-midblue) 1px solid;
    color:#FFF;
    font-size: 13px;
    font-weight: 400;
  }

  .ticket-price {
    position: relative;
    display: inline-block;
    font-weight: 700;
    font-size: 78px;
    margin-top: 30px;
    margin-bottom: 20px;
    line-height: 1;
    color: #fff;

    &::before {
      position: absolute;
      top: 6px;
      left: -30px;
      content: "€";
      font-size: 40px;
    }

    &::after {
      content: ",-";
      font-size: 40px;
      margin-left: 2px;
    }
  }

  /* Ticketverkoop */
  #ticketverkoop {
    margin-bottom: -40px;
  }
}