:root{
    --rood:#a8141c; --rood-donker:#7c0e14;
    --groen-donker:#123a24;
    --goud:#e8c26a; --cream:#fdf6ec; --tekst:#2b2118;
    --tekst-licht:#f4efe6; --groen:#1a5c38;
}
*{box-sizing:border-box;}
body{
    margin:0; background:var(--groen-donker); color:var(--tekst-licht);
    font-family:Georgia,'Times New Roman',serif; overflow-x:hidden;
}

/* Voorpagina en nieuws: wazige kerstverlichting als achtergrond */
body.is-home, body.is-news{
    background-color:#081d12;
    background-image:
        linear-gradient(180deg,rgba(6,20,13,.18),rgba(6,20,13,.55)),
        url('../images/achtergrond-kerstshow-2018-schoon.jpg');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    background-repeat:no-repeat;
}
body.is-home .site-header, body.is-news .site-header{
    background:linear-gradient(180deg,rgba(13,40,24,.88),rgba(18,58,36,.72));
}
@media(max-width:800px){
    body.is-home, body.is-news{background-attachment:scroll;}
}

/* Header */
.site-header{
    background:linear-gradient(180deg,#0d2818,var(--groen-donker));
    border-bottom:6px solid var(--goud); text-align:center;
}
.header-inner{padding:18px 16px 14px;}
.logo{display:inline-block; line-height:0; text-decoration:none;}
.site-logo{display:block; width:clamp(90px,18vw,140px); height:auto; margin:0 auto 8px;}
.site-title{color:var(--cream); font-size:clamp(1.6rem,5vw,2.6rem); margin:.2rem 0;}
.tagline{color:#cfe3d6; font-style:italic; margin-top:4px;}
.lights{display:flex; justify-content:center; gap:10px; margin-top:10px;}
.bulb{width:14px; height:14px; border-radius:50%; animation:blink 2.4s infinite;}
.bulb-0{background:#ff5d5d; box-shadow:0 0 12px #ff5d5d;}
.bulb-1{background:#ffd166; box-shadow:0 0 12px #ffd166; animation-delay:.5s;}
.bulb-2{background:#6ee7a0; box-shadow:0 0 12px #6ee7a0; animation-delay:1s;}
.bulb-3{background:#7fd4ff; box-shadow:0 0 12px #7fd4ff; animation-delay:1.5s;}
.bulb-4{background:#ff9de2; box-shadow:0 0 12px #ff9de2; animation-delay:2s;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* Menu */
.mainnav{background:var(--rood); border-top:3px solid var(--goud);}
.mainnav ul{list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:4px; margin:0; padding:10px;}
.mainnav li a{
    color:#fff; text-decoration:none; padding:7px 16px; border-radius:20px; font-size:.95rem; display:inline-block;
}
.mainnav li a:hover,.mainnav li.active a{background:var(--rood-donker); color:var(--goud);}

/* Layout */
.wrap{max-width:1100px; margin:0 auto; padding:24px 16px 40px;}
.content-grid{display:grid; grid-template-columns:1fr;}
.content-grid.has-sidebar{grid-template-columns:1.4fr 1fr; gap:20px;}
@media(max-width:800px){.content-grid.has-sidebar{grid-template-columns:1fr;}}
.sidebar .moduletitle,.sidebar h3{color:var(--goud); font-size:1.2rem;}

/* Nieuwsartikelen (com_content blog) */
/* Lead-container: pagina-breed, 1 kolom, grotere kaart */
.blog-items.items-leading{
    display:grid; grid-template-columns:1fr; gap:20px;
    margin:0 0 20px; padding:0; list-style:none;
}
.items-leading .blog-item{
    grid-column:1 / -1;
    width:100%; max-width:none; flex:none;
}
.items-leading .blog-item .page-header,
.items-leading .blog-item .item-title{
    font-size:1.7rem;
}
.items-leading .blog-item .item-introtext{
    font-size:1.05rem;
}

/* Overige (intro) containers: grid met 3 kolommen */
.blog-items:not(.items-leading){
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    margin:0 0 20px; padding:0; list-style:none;
}
.blog-items:not(.items-leading) .blog-item,
.blog-items:not(.items-leading) .blog-item[class*="col-"]{
    width:100%; max-width:none; flex:none;
}
@media(max-width:800px){
    .blog-items:not(.items-leading){grid-template-columns:1fr 1fr;}
}
@media(max-width:520px){
    .blog-items:not(.items-leading){grid-template-columns:1fr;}
}

/* Alle artikelkaarten: basisstijl */
.blog-item, .com-content-category-blog__item, .item{
    background:var(--cream); border-radius:10px; overflow:hidden;
    border:1px solid rgba(232,194,106,.5); box-shadow:0 4px 14px rgba(0,0,0,.35);
    padding:0 0 16px; color:var(--tekst);
}
/* Foto's in vervolgartikelen: vaste hoogte, net zo breed als het kaartje */
.item-image, .item-intro-image, .item-fulltext-image{
    display:block; width:100%; height:220px; object-fit:cover;
    margin:0 0 12px; border-radius:8px;
}
/* Foto in het top-/leadartikel: groter en gecentreerd */
.items-leading .item-image,
.items-leading .item-intro-image,
.items-leading .item-fulltext-image{
    height:420px; margin-left:auto; margin-right:auto;
    width:100%; max-width:900px; object-fit:cover;
}
/* Joomla zet introboterfoto's soms in een aside met float — die neutraliseren we in het leadartikel */
.items-leading .item-image + .item-introtext,
.items-leading aside{
    float:none; width:100%;
}
.page-header, .item-title{
    color:var(--rood-donker); font-size:1.25rem; line-height:1.3; margin:0 16px 8px;
}
.page-header a{color:inherit; text-decoration:none;}
.page-header a:hover{color:var(--rood);}
.item-info{font-size:.8rem; color:#8a7a66; margin:0 16px 10px;}
.item-introtext, .item-body{padding:0 16px; font-size:.95rem; line-height:1.55;}
.readmore{margin:12px 16px 0;}
.readmore .btn{color:var(--groen); font-weight:bold; text-decoration:none; border-bottom:2px solid var(--goud);}

/* Algemene pagina's */
.page-item .item-page, .com-content-article.item-page, .com-content-article .item-page{
    background:var(--cream); border-radius:10px; padding:20px; border:1px solid rgba(232,194,106,.5);
    color:var(--tekst);
}
h1,h2,h3{font-family:Georgia,serif;}

/* Voorpagina en nieuws: glazen contentpaneel */
body.is-home .com-content-article.item-page,
body.is-news .com-content-article.item-page{
    background:linear-gradient(135deg,rgba(253,246,236,.16),rgba(18,58,36,.42));
    -webkit-backdrop-filter:blur(14px) saturate(1.25);
    backdrop-filter:blur(14px) saturate(1.25);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 12px 40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14);
    color:var(--tekst-licht);
}
body.is-home .com-content-article.item-page .page-header,
body.is-home .com-content-article.item-page .page-header a,
body.is-home .com-content-article.item-page h1,
body.is-news .com-content-article.item-page .page-header,
body.is-news .com-content-article.item-page .page-header a,
body.is-news .com-content-article.item-page h1{color:var(--cream);}
body.is-home .com-content-article.item-page .page-header h1,
body.is-news .com-content-article.item-page .page-header h1{font-size:1.5rem;}
body.is-home .com-content-article.item-page .com-content-article__body,
body.is-news .com-content-article.item-page .com-content-article__body{font-size:1.1rem;}
body.is-home .com-content-article.item-page .com-content-article__body a,
body.is-news .com-content-article.item-page .com-content-article__body a{color:var(--goud);}
body.is-home .com-content-article.item-page .article-info{display:none;}
body.is-news .com-content-article.item-page .article-info,
body.is-news .com-content-category-blog .blog-item .article-info{
    display:flex; align-items:center; gap:6px; margin:0 0 10px;
    color:rgba(244,239,230,.8); font-size:.82rem; line-height:1.4;
}
body.is-news .com-content-article.item-page .article-info .published,
body.is-news .com-content-category-blog .blog-item .article-info .published{margin:0;}
body.is-news .com-content-article.item-page .article-info .icon-calendar,
body.is-news .com-content-category-blog .blog-item .article-info .icon-calendar{color:var(--goud); margin-right:4px;}
body.is-home .com-content-article.item-page .icons .float-end a,
body.is-news .com-content-article.item-page .icons .float-end a{
    display:inline-block; width:1.15rem; height:1.15rem; padding:0;
    font-size:0; line-height:1; vertical-align:middle;
    background:url('../images/pencil.png') center / contain no-repeat;
    text-decoration:none;
}
body.is-home .com-content-article.item-page .icons .float-end a .icon-edit,
body.is-news .com-content-article.item-page .icons .float-end a .icon-edit{display:none;}
body.is-home .com-content-article.item-page .icons .float-end a:hover,
body.is-news .com-content-article.item-page .icons .float-end a:hover{opacity:.72;}
body.is-home .com-content-article.item-page .icons .float-end a:focus-visible,
body.is-news .com-content-article.item-page .icons .float-end a:focus-visible{outline:2px solid var(--goud); outline-offset:2px;}

/* Nieuws: glazen artikelkaarten en dezelfde typografie als de voorpagina */
body.is-news .com-content-category-blog .blog-item{
    background:linear-gradient(135deg,rgba(253,246,236,.16),rgba(18,58,36,.42));
    -webkit-backdrop-filter:blur(14px) saturate(1.25);
    backdrop-filter:blur(14px) saturate(1.25);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 12px 40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14);
    color:var(--tekst-licht);
}
body.is-news .com-content-category-blog .blog-item .page-header,
body.is-news .com-content-category-blog .blog-item .page-header a,
body.is-news .com-content-category-blog .blog-item .item-title,
body.is-news .com-content-category-blog .blog-item .item-title a{color:var(--cream);}
body.is-news .com-content-category-blog .items-leading .blog-item .page-header{font-size:1.5rem;}
body.is-news .com-content-category-blog .blog-item .item-image{
    display:block; width:100%; height:220px; margin:0 0 12px;
    border-radius:8px; overflow:hidden;
}
body.is-news .com-content-category-blog .items-leading .blog-item .item-image{
    height:420px; max-width:900px; margin-left:auto; margin-right:auto;
}
body.is-news .com-content-category-blog .blog-item .item-image img{
    display:block; width:100%; height:100%;
    object-fit:contain; object-position:center;
}
body.is-news .com-content-category-blog .blog-item .item-content{padding:0 16px; font-size:1.1rem;}
body.is-news .com-content-category-blog .blog-item .page-header{margin-left:0; margin-right:0;}
body.is-news .com-content-category-blog .blog-item .item-introtext,
body.is-news .com-content-category-blog .blog-item .item-body{padding:0; font-size:1.1rem; line-height:inherit;}
body.is-news .com-content-category-blog .blog-item .item-content p a{color:var(--goud);}
body.is-news .com-content-category-blog .blog-item .icons .float-end a{
    display:inline-block; width:1.15rem; height:1.15rem; padding:0;
    font-size:0; line-height:1; vertical-align:middle;
    background:url('../images/pencil.png') center / contain no-repeat;
    text-decoration:none;
}
body.is-news .com-content-category-blog .blog-item .icons .float-end a .icon-edit{display:none;}
body.is-news .com-content-category-blog .blog-item .icons .float-end a:hover{opacity:.72;}
body.is-news .com-content-category-blog .blog-item .icons .float-end a:focus-visible{outline:2px solid var(--goud); outline-offset:2px;}
body.is-news .tags{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0; list-style:none;}
body.is-news .tags .btn{
    background:transparent; border:1px solid rgba(232,194,106,.55); border-radius:999px;
    color:var(--goud); padding:2px 10px; font-size:.8rem; text-decoration:none;
}
body.is-news .tags .btn:hover{background:rgba(232,194,106,.15); color:var(--cream);}
body.is-news .items-more{display:none;}
body.is-news .com-content-category-blog__navigation{color:var(--tekst-licht);}
body.is-news .pagination{display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin:0 0 16px; padding:0; list-style:none;}
body.is-news .pagination .page-link{
    display:inline-block; min-width:2rem; padding:.3rem .55rem; text-align:center;
    background:rgba(253,246,236,.1); border:1px solid rgba(255,255,255,.14);
    border-radius:6px; color:var(--cream); text-decoration:none;
}
body.is-news .pagination .active .page-link{background:rgba(232,194,106,.22); border-color:rgba(232,194,106,.6); color:var(--goud);}
body.is-news .pagination .disabled .page-link{opacity:.35;}
body.is-news .pagenavigation a{color:var(--goud);}

/* Modules in zijkolom */
.well, .card{background:var(--cream); border-radius:10px; padding:14px; margin-bottom:18px; border:1px solid rgba(232,194,106,.5); color:var(--tekst);}
.footer .moduletitle{color:var(--goud);}

/* Footer */
.site-footer{
    background:var(--rood-donker); color:#f3d9d9; text-align:center;
    padding:20px; font-size:.85rem; border-top:4px solid var(--goud);
}
.site-footer a{color:var(--goud);}

/* Sneeuw */
.snow{position:fixed; top:-10px; pointer-events:none; z-index:50; color:#fff; animation:fall linear infinite;}
@keyframes fall{to{transform:translateY(110vh) translateX(30px);}}