/*
|--------------------------------------------------------------------------
| Huisstijl kleuren
|--------------------------------------------------------------------------
*/


@font-face {
    font-family: 'Oswald';
    src: url('/font/oswald/Oswald-Bold.ttf') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('/font/oswald/Oswald-Bold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  

:root {

    /* Eigen kleuren */
    --warm-creme: #f4efe8;
    --cortenstaal: #A04F24;
    --donker-bruin: #5A2E18;
    --landelijk-groen: #5E7654;

    /*
    |--------------------------------------------------------------------------
    | Bootstrap overrides
    |--------------------------------------------------------------------------
    */

    --bs-primary: #A04F24;
    --bs-primary-rgb: 160,79,36;

    --bs-secondary: #5E7654;
    --bs-secondary-rgb: 94,118,84;

    --bs-dark: #5A2E18;
    --bs-dark-rgb: 90,46,24;

    --bs-light: #f4efe8;
    --bs-light-rgb: 244,239,232;

    --bs-body-bg: #f7f6f4;
    --bs-body-color: #2b2b2b;

    --bs-link-color: #A04F24;
    --bs-link-hover-color: #5A2E18;
}

body {
    background-color: #fffefb;
}

section {
    margin-bottom: 5rem;
}

h1{
    font-family: oswald;
}

.btn{
    border-radius: 5px !important;
}

.navbar-logo {

    height: 75px;

    width: auto;

    margin-top: -15px;

    margin-bottom: -15px;

    
}

.custom-navbar {

    background: var(--warm-creme);

    backdrop-filter: blur(10px);

    border-radius: 20px 20px 0 0;

    margin-top: 1rem;

    padding: 1rem;

    box-shadow: 0 5px 20px rgba(0,0,0,.05);
}
.custom-navbar .navbar-nav {

    gap: 1rem;
}

.custom-navbar .nav-link {

    font-family: 'Oswald', sans-serif;

    text-transform: uppercase;

    font-size: .95rem;

    color: var(--donker-bruin);

    position: relative;
}
.custom-navbar .nav-link.active {

    color: var(--cortenstaal);
}

.custom-navbar .nav-link:hover {

    color: #ad4225;
}

.custom-navbar .nav-link.active::after {

    content: '';

    position: absolute;

    left: 0;
    right: 0;
    bottom: -8px;

    height: 2px;

    background: var(--cortenstaal);
}

.custom-navbar .nav-link:hover::after {

    content: '';

    position: absolute;

    left: 0;
    right: 0;
    bottom: -8px;

    height: 2px;

    background: #ad4225;
}

.navbar-cta {

    min-width: 150px;

    text-transform: uppercase;

    font-weight: 600;

    border-radius: 10px;
}
@media (max-width: 991px) {

    .navbar-cta {

        margin-top: 1rem;

        width: 100%;
    }

    .custom-navbar .navbar-nav {

        margin-top: 1rem;

        gap: .5rem;
    }
}

.navbar{
    z-index:2;
}

.card {

    border: none;

    border-radius: 1rem;

    transition: .2s ease;
}

.card:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(0,0,0,.1);
}

.news-card-title {

    color: var(--cortenstaal);

    font-weight: 700;
}

.footer {

    margin-top: 6rem;

    background: var(--cortenstaal);

    color: #fffefb;

    position: relative;

    overflow: hidden;
}

.footer-wave {
    width: 100%;
    line-height: 0;
    transform: rotate(180deg);
}

.footer-wave svg {

    display: block;

    width: 100%;

    height: 70px;
}

.footer-wave path {

    fill: white;
}

.footer h5 {

    font-family: 'Oswald', sans-serif;

    text-transform: uppercase;

    margin-bottom: 1rem;
}

.footer a {

    color: white;

    text-decoration: none;
}

.footer a:hover {

    opacity: .8;
}

.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;
}

.footer-links li {

    margin-bottom: .5rem;
}

.footer-logo {

    max-width: 150px;
}

/*
|--------------------------------------------------------------------------
| Primary button
|--------------------------------------------------------------------------
*/

.btn-primary {

    background-color: var(--cortenstaal);
    border-color: var(--cortenstaal);

    color: white;
}

.btn-primary:hover {

    background-color: var(--donker-bruin);
    border-color: var(--donker-bruin);

    color: white;
}

.btn-primary:focus {

    background-color: var(--donker-bruin);
    border-color: var(--donker-bruin);

    box-shadow: 0 0 0 .25rem rgba(160,79,36,.25);
}

.btn-primary:active {

    background-color: var(--donker-bruin) !important;
    border-color: var(--donker-bruin) !important;
}

/* secondary */

.btn-secondary {

    background-color: var(--landelijk-groen);
    border-color: var(--landelijk-groen);

    color: white;
}

.btn-secondary:hover {

    background-color: var(--landelijk-groen);
    border-color: var(--landelijk-groen);

    color: white;
}

.btn-secondary:focus {

    background-color: var(--landelijk-groen);
    border-color: var(--landelijk-groen);

    box-shadow: 0 0 0 .25rem rgba(160,79,36,.25);
}

.btn-secondary:active {

    background-color: var(--landelijk-groen) !important;
    border-color: var(--landelijk-groen) !important;
}

/* ==========================================================
   Nieuws overzicht
========================================================== */

.page-header {

    text-align: center;

    margin-bottom: 4rem;
}

.page-title {

    color: var(--cortenstaal);

    font-family: 'Oswald', sans-serif;

    font-size: 3rem;

    margin-bottom: 1rem;
}

.page-intro {

    color: var(--donker-bruin);

    max-width: 700px;

    margin: 0 auto;
}

/* ==========================================================
   News cards
========================================================== */

.news-overview-card {

    background: white;

    border-radius: 20px;

    overflow: hidden;

    height: 100%;

    box-shadow: 0 5px 20px rgba(0,0,0,.05);

    transition: .2s ease;
}

.news-overview-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(0,0,0,.1);
}

.news-overview-image {

    height: 240px;

    overflow: hidden;
}

.news-overview-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .3s ease;
}

.news-overview-card:hover .news-overview-image img {

    transform: scale(1.05);
}

.news-overview-body {

    padding: 1.75rem;
}

.news-date {

    color: #888;

    font-size: .9rem;

    margin-bottom: .75rem;
}

.news-overview-title {

    color: var(--donker-bruin);

    font-family: 'Oswald', sans-serif;

    margin-bottom: 1rem;

    min-height: 3rem;
}

.news-overview-text {

    margin-bottom: 1.5rem;

    color: #555;
}

/* ==========================================================
   Nieuws artikel
========================================================== */

.news-article {

    margin-bottom: 5rem;
}

.back-link {

    display: inline-block;

    margin-bottom: 2rem;

    color: var(--cortenstaal);

    text-decoration: none;

    font-weight: 600;
}

.back-link:hover {

    color: var(--donker-bruin);
}

.news-header {

    margin-bottom: 2rem;
}

.news-meta {

    color: #888;

    margin-bottom: 1rem;

    font-size: .95rem;
}

.news-article-title {

    color: var(--donker-bruin);

    font-family: 'Oswald', sans-serif;

    font-size: clamp(2rem, 5vw, 4rem);

    line-height: 1.1;

    max-width: 900px;
}

.news-hero-image {

    margin-bottom: 3rem;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.news-hero-image img {

    width: 100%;

    max-height: 500px;

    object-fit: cover;

    display: block;
}

.news-article-content {

    max-width: 850px;

    margin: 0 auto;

    font-size: 1.15rem;

    line-height: 1.9;

    color: #444;
}

.news-article-content p {

    margin-bottom: 1.5rem;
}

/* ==========================================================
   activiteiten
========================================================== */


.activity-card {

    background: white;

    border-radius: 20px;

    padding: 1.5rem;

    margin-bottom: 1.5rem;

    display: flex;

    align-items: center;

    gap: 2rem;

    box-shadow: 0 5px 20px rgba(0,0,0,.05);
}

.activity-date {

    min-width: 100px;

    text-align: center;
}

.activity-date .day {

    display: block;

    font-size: 3rem;

    font-weight: 700;

    color: var(--cortenstaal);

    line-height: 1;
}

.activity-date .month {

    display: block;

    text-transform: uppercase;

    color: var(--landelijk-groen);
}

.activity-content {

    flex: 1;
}

.activity-content h3 {

    color: var(--donker-bruin);

    margin-bottom: .5rem;
}

.activity-action {

    white-space: nowrap;
}

.activity-date.detail .day{
    display:block;
    font-size:5rem;
    line-height:1;
}

.activity-date.detail .month{
    display:block;
    font-size:2rem;
    text-transform:uppercase;
}

.activity-body{

    max-width:900px;

    margin:3rem auto 0;

    font-size:1.1rem;

    line-height:1.9;
}

.activity-meta{

    background:white;

    border:none;

    border-radius:20px;

    box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.activity-date{

    text-align:center;

    padding-bottom:1rem;

    border-bottom:1px solid rgba(0,0,0,.08);

    margin-bottom:1rem;
}

.activities-card {

    background: white;

    border-radius: 20px;

    padding: 2rem;

    height: 100%;

    box-shadow: 0 5px 20px rgba(0,0,0,.05);
}

.activity-item {

    display: flex;

    align-items: center;

    gap: 1rem;

    text-decoration: none;

    color: inherit;

    padding: 1rem 0;

    border-bottom: 1px solid rgba(0,0,0,.08);

    transition: .2s;
}

.activity-item:hover {

    transform: translateX(4px);
}

.activity-item-date {

    min-width: 75px;

    text-align: center;

    background: var(--warm-creme);

    border-radius: 12px;

    padding: .75rem;
}

.activity-item-date .day {

    display: block;

    font-size: 2rem;

    line-height: 1;

    font-weight: 700;

    color: var(--cortenstaal);
}

.activity-item-date .month {

    display: block;

    font-size: .85rem;

    font-weight: 600;

    color: var(--landelijk-groen);
}

.activity-item-content {

    flex: 1;
}

.activity-item-content h5 {

    margin-bottom: .25rem;

    color: var(--donker-bruin);
}

.activity-item-content small {

    color: #888;

    display: block;

    margin-bottom: .5rem;
}

.activity-item-content p {

    margin: 0;

    font-size: .9rem;
}

/* ==========================================================
  fotos
========================================================== */


.album-card{

    display:block;

    text-decoration:none;

    color:inherit;

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 5px 20px rgba(0,0,0,.05);

    transition:.2s;
}

.album-card:hover{

    transform:translateY(-5px);
}

.album-card img{

    width:100%;

    height:250px;

    object-fit:cover;
}

.album-card-body{

    padding:1.5rem;
}

.photo-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(250px,1fr));

    gap:1rem;

    margin-top:2rem;
}

.photo-item{

    display:block;

    overflow:hidden;

    border-radius:15px;
}

.photo-item img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.3s;
}

.photo-item:hover img{

    transform:scale(1.05);
}

.photo-grid a{
    text-decoration:none;
    color:unset;
}