/* =========================================================
   Feed (activiteiten) – Buurtverbinders Roerdalen
   Staat los van site.css; gebruikt wel dezelfde kleurvariabelen.
   ========================================================= */

.fd-scope {
    --fd-brand:  var(--brand, #2F6F5F);
    --fd-dark:   var(--brand-dark, #245649);
    --fd-deep:   var(--brand-deep, #173f35);
    --fd-soft:   var(--brand-soft, #e8f3f0);
    --fd-mist:   var(--brand-mist, #f3f8f6);
    --fd-accent: var(--accent, #E9A23B);
    --fd-ink:    var(--ink, #16231f);
    --fd-muted:  var(--muted, #54655f);
    --fd-line:   var(--line, #dfe8e5);
    --fd-danger: #c0392b;
    --fd-shadow: 0 1px 2px rgba(16, 40, 33, .06), 0 4px 14px rgba(16, 40, 33, .07);
}

[hidden] { display: none !important; }

/* ---------- pagina ---------- */
.fd-section { padding: 44px 0 90px; background: var(--brand-mist, #f3f8f6); }

.fd-layout {
    display: grid;
    grid-template-columns: minmax(0, 680px) 380px;
    gap: 28px;
    justify-content: center;
    align-items: start;
}
.fd-col  { display: grid; gap: 20px; min-width: 0; }
.fd-list { display: grid; gap: 20px; min-width: 0; }
.fd-aside { position: sticky; top: calc(var(--header-h, 72px) + 20px); }

@media (max-width: 1000px) {
    .fd-layout { grid-template-columns: minmax(0, 680px); }
    .fd-aside { position: static; order: 2; }
}
@media (max-width: 640px) {
    .fd-section { padding: 28px 0 70px; }
    .fd-layout { gap: 20px; }
}

.fd-card {
    padding: 22px;
    color: var(--fd-ink);
    background: #fff;
    border: 1px solid var(--fd-line);
    border-radius: 18px;
    box-shadow: var(--fd-shadow);
}
.fd-card h2 { margin: 0 0 14px; font-family: var(--font-body, inherit); font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--fd-ink); }
.fd-card h2 i { margin-right: 6px; color: var(--fd-brand); }

/* ---------- knoppen en velden ---------- */
.fd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 11px 20px;
    border: 2px solid transparent; border-radius: 999px;
    font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s, color .2s;
}
.fd-btn:disabled { opacity: .6; cursor: progress; }
.fd-btn-brand { color: #fff; background: var(--fd-brand); }
.fd-btn-brand:hover:not(:disabled) { background: var(--fd-dark); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(23, 63, 53, .22); }
.fd-btn-line { color: var(--fd-brand); background: #fff; border-color: var(--fd-line); }
.fd-btn-line:hover { border-color: var(--fd-brand); background: var(--fd-soft); }
.fd-wide { width: 100%; }

.fd-label { display: block; margin: 14px 0 8px; font-size: 14px; font-weight: 600; color: var(--fd-ink); }
.fd-label small { font-weight: 400; color: var(--fd-muted); }

.fd-input {
    width: 100%; padding: 13px 16px;
    font: inherit; font-size: 16px; color: var(--fd-ink);
    background: var(--fd-mist);
    border: 2px solid transparent; border-radius: 14px;
    resize: none; transition: border-color .2s, background .2s;
}
.fd-input::placeholder { color: #7b8c86; }
.fd-input:focus { outline: none; background: #fff; border-color: var(--fd-brand); }
.fd-input.fd-line { background: #fff; border-color: var(--fd-line); }
.fd-input.fd-line:focus { border-color: var(--fd-brand); }

.fd-flash {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 18px; border-radius: 14px; font-weight: 500;
}
.fd-flash.is-ok  { color: #14532d; background: #e3f6ea; border: 1px solid #b7e4c7; }
.fd-flash.is-err { color: #7f1d1d; background: #fdecee; border: 1px solid #f5c2c7; }
.fd-login .fd-flash { margin-bottom: 12px; }
.fd-flash code { display: inline-block; margin-top: 6px; padding: 6px 10px; background: rgba(255,255,255,.7); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }

.fd-error { margin: 10px 0 0; padding: 12px 16px; color: #7f1d1d; background: #fdecee; border: 1px solid #f5c2c7; border-radius: 12px; font-size: 15px; }

/* ---------- zoekbalk ---------- */
.fd-searchbox { display: grid; gap: 8px; }
.fd-search { position: relative; display: flex; align-items: center; margin: 0; }
.fd-search-ico {
    position: absolute; left: 18px; top: 50%; translate: 0 -50%;
    color: var(--fd-brand); font-size: 16px; pointer-events: none;
}
.fd-search-input {
    width: 100%; padding: 14px 50px 14px 48px;
    font: inherit; font-size: 16px; color: var(--fd-ink);
    background: #fff;
    border: 1px solid var(--fd-line); border-radius: 999px;
    box-shadow: var(--fd-shadow);
    -webkit-appearance: none; appearance: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.fd-search-input::placeholder { color: #7b8c86; }
.fd-search-input:focus {
    outline: none; border-color: var(--fd-brand);
    box-shadow: 0 0 0 3px rgba(47, 111, 95, .16), var(--fd-shadow);
}
.fd-search-input::-webkit-search-cancel-button,
.fd-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.fd-search-clear {
    position: absolute; right: 9px; top: 50%; translate: 0 -50%;
    width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
    color: var(--fd-muted); background: var(--fd-soft);
    border: none; border-radius: 50%; font-size: 14px; cursor: pointer;
    transition: background .2s, color .2s;
}
.fd-search-clear:hover { color: #fff; background: var(--fd-brand); }
.fd-search-info { margin: 0 0 0 18px; font-size: 14px; font-weight: 600; color: var(--fd-muted); }

/* ---------- formulier (nieuw bericht / bewerken) ---------- */
.fd-compose { display: flex; gap: 12px; align-items: flex-start; }
.fd-fields { flex: 1; min-width: 0; display: grid; gap: 8px; }
.fd-compose textarea.fd-input { min-height: 92px; max-height: 420px; overflow-y: auto; }
.fd-title-input { font-weight: 700; font-size: 17px; }

.fd-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 12px; }
.fd-previews:empty { display: none; }
.fd-photos-label { margin-bottom: 0; }

.fd-prev {
    position: relative; aspect-ratio: 1; overflow: hidden; cursor: grab;
    background: var(--fd-soft); border-radius: 14px;
    box-shadow: 0 0 0 1px var(--fd-line);
    transition: transform .15s, box-shadow .15s, opacity .15s;
}
.fd-prev:active { cursor: grabbing; }
.fd-prev img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; transition: opacity .2s, filter .2s; }
.fd-prev.is-drag { opacity: .45; transform: scale(.96); box-shadow: 0 0 0 3px var(--fd-accent); }
.fd-prev.is-busy::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.7) 50%, transparent 80%) var(--fd-soft);
    background-size: 200% 100%;
    animation: fdShimmer 1.1s linear infinite;
}
@keyframes fdShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.fd-prev input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

.fd-first {
    position: absolute; top: 6px; left: 6px; z-index: 2; display: none;
    padding: 3px 9px; color: #2a1d05; background: var(--fd-accent);
    border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.fd-prev.is-first .fd-first { display: block; }

.fd-x {
    position: absolute; top: 6px; right: 6px; z-index: 3;
    width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
    color: #fff; background: rgba(16, 30, 26, .72);
    border: none; border-radius: 50%; font-size: 12px; cursor: pointer;
    transition: background .2s;
}
.fd-x:hover { background: var(--fd-danger); }

.fd-mv {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; justify-content: space-between; padding: 6px;
    background: linear-gradient(0deg, rgba(10, 25, 21, .55), transparent);
}
.fd-mv button {
    width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
    color: #fff; background: rgba(16, 30, 26, .65);
    border: none; border-radius: 50%; font-size: 12px; cursor: pointer;
    transition: background .2s;
}
.fd-mv button:hover { background: var(--fd-brand); }
.fd-prev:first-child .fd-mv [data-act="left"],
.fd-prev:last-child  .fd-mv [data-act="right"] { visibility: hidden; }

.fd-gone {
    position: absolute; inset: 0; z-index: 1; display: none; place-items: center; padding: 8px; text-align: center;
    color: #7f1d1d; background: rgba(253, 236, 238, .75); font-size: 12px; font-weight: 700;
}
.fd-prev.is-removed img { opacity: .35; filter: grayscale(1); }
.fd-prev.is-removed .fd-gone { display: grid; }
.fd-prev.is-removed .fd-mv, .fd-prev.is-removed .fd-first { display: none; }
.fd-prev.is-removed .fd-x { background: var(--fd-brand); }

.fd-drop {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    margin-top: 14px; padding: 18px 16px; text-align: center;
    color: var(--fd-muted); background: var(--fd-mist);
    border: 2px dashed #b8d3ca; border-radius: 16px; cursor: pointer;
    transition: background .2s, border-color .2s;
}
.fd-drop:hover, .fd-drop.is-over { background: var(--fd-soft); border-color: var(--fd-brand); }
.fd-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fd-drop i { font-size: 24px; color: var(--fd-brand); }
.fd-drop strong { color: var(--fd-ink); }
.fd-drop span { font-size: 13px; }

.fd-progress { height: 8px; margin-top: 12px; overflow: hidden; background: var(--fd-soft); border-radius: 999px; }
.fd-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--fd-brand), #4aa58f); border-radius: inherit; transition: width .2s; }

.fd-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.fd-count { margin-right: auto; font-size: 13px; color: var(--fd-muted); }

/* ---------- bericht ---------- */
.fd-post {
    background: #fff; color: var(--fd-ink);
    border: 1px solid var(--fd-line); border-radius: 18px;
    box-shadow: var(--fd-shadow);
    animation: fdIn .5s ease both;
}
@keyframes fdIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* gele gloed na opslaan/annuleren: even zichtbaar en dan vanzelf weg */
.fd-post:target { animation: fdFlash 2.6s ease forwards; }
@keyframes fdFlash {
    0%, 55% { box-shadow: 0 0 0 3px var(--fd-accent), var(--fd-shadow); }
    100%    { box-shadow: var(--fd-shadow); }
}

/* tijdens het bewerken blijft de gele gloed staan; na opslaan/annuleren vervaagt hij via :target hierboven */
.fd-post.fd-editing,
.fd-post.fd-editing:target {
    animation: none;
    box-shadow: 0 0 0 3px var(--fd-accent), var(--fd-shadow);
}

.fd-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 0; }
.fd-avatar {
    position: relative; flex: none; width: 46px; height: 46px; overflow: hidden;
    display: grid; place-items: center;
    color: #fff; background: linear-gradient(135deg, var(--fd-brand), #3f8a77);
    border-radius: 50%; font-size: 14px; font-weight: 700;
}
.fd-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.fd-who { min-width: 0; }
.fd-name { margin: 0; font-weight: 700; line-height: 1.25; }
.fd-time { margin: 2px 0 0; font-size: 13px; color: var(--fd-muted); }
.fd-time a { color: inherit; text-decoration: none; }
.fd-time a:hover { text-decoration: underline; }

.fd-menu { position: relative; margin-left: auto; align-self: flex-start; }
.fd-menu summary {
    width: 38px; height: 38px; display: grid; place-items: center;
    list-style: none; color: var(--fd-muted); border-radius: 50%; cursor: pointer;
    transition: background .2s;
}
.fd-menu summary::-webkit-details-marker { display: none; }
.fd-menu summary:hover, .fd-menu[open] summary { background: var(--fd-soft); color: var(--fd-brand); }
.fd-menu-list {
    position: absolute; right: 0; top: 100%; z-index: 20; min-width: 190px; padding: 6px;
    background: #fff; border: 1px solid var(--fd-line); border-radius: 14px;
    box-shadow: 0 14px 34px rgba(16, 40, 33, .18);
}
.fd-menu-list a, .fd-menu-list button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
    color: var(--fd-ink); background: none; border: none; border-radius: 10px;
    font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer;
}
.fd-menu-list a:hover, .fd-menu-list button:hover { background: var(--fd-soft); }
.fd-menu-list .fd-danger { color: var(--fd-danger); }
.fd-menu-list .fd-danger:hover { background: #fdecee; }
.fd-menu-list form { margin: 0; }

.fd-title { margin: 14px 18px 0; font-family: var(--font-body, inherit); font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--fd-ink); overflow-wrap: anywhere; }
.fd-text.has-title { padding-top: 6px; }
.fd-pin {
    display: flex; align-items: center; gap: 8px; padding: 9px 18px;
    color: var(--fd-dark); background: var(--fd-soft);
    border-radius: 18px 18px 0 0; border-bottom: 1px solid var(--fd-line);
    font-size: 13px; font-weight: 700;
}
.fd-pin i { color: var(--fd-accent); transform: rotate(35deg); }
.fd-post.is-pinned { border-color: #cfe3dc; }
.fd-pin + .fd-head { padding-top: 14px; }

.fd-text { padding: 14px 18px 4px; font-size: 16.5px; line-height: 1.6; overflow-wrap: anywhere; }
.fd-text a { color: var(--fd-brand); font-weight: 600; }
.js .fd-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.fd-readmore { display: block; margin: 0 18px; padding: 2px 0 4px; color: var(--fd-brand); background: none; border: none; font: inherit; font-weight: 700; cursor: pointer; }
.fd-readmore:hover { text-decoration: underline; }

/* fotoraster */
.fd-imgs { display: grid; gap: 3px; margin-top: 12px; background: #fff; }
.fd-imgs a { position: relative; display: block; overflow: hidden; background: #dbe7e3; cursor: zoom-in; }
.fd-imgs img { display: block; width: 100%; transition: transform .45s ease; }
.fd-imgs a:hover img { transform: scale(1.04); }

.fd-n1 { grid-template-columns: 1fr; }
.fd-n1 img { height: auto; max-height: 640px; object-fit: cover; }

.fd-n2 a, .fd-n3 a, .fd-n4 a, .fd-n5 a { min-height: 0; }
.fd-n2 img, .fd-n3 img, .fd-n4 img, .fd-n5 img { position: absolute; inset: 0; height: 100%; object-fit: cover; }

.fd-n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 10; }
.fd-n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.fd-n3 a:first-child { grid-row: 1 / 3; }
.fd-n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.fd-n5 { grid-template-columns: repeat(6, 1fr); grid-template-rows: 3fr 2fr; aspect-ratio: 1 / 1; }
.fd-n5 a:nth-child(-n+2) { grid-column: span 3; }
.fd-n5 a:nth-child(n+3)  { grid-column: span 2; }

.fd-more::after {
    content: attr(data-more); position: absolute; inset: 0; z-index: 1;
    display: grid; place-items: center;
    color: #fff; background: rgba(10, 30, 25, .58);
    font-size: clamp(24px, 5vw, 38px); font-weight: 700;
}

/* oogjes (views) */
.fd-stats { display: flex; align-items: center; gap: 10px; padding: 12px 18px 0; }
.fd-views {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px;
    color: var(--muted, #54655f);
    background: rgba(47, 111, 95, .08);
    border-radius: 999px;
    font-size: 13px; font-weight: 600; cursor: default;
}
.fd-views i { color: var(--brand, #2F6F5F); }
.fd-views b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* knoppenbalk onder een bericht */
.fd-foot { display: flex; gap: 6px; margin: 12px 14px 0; padding: 6px 0 8px; border-top: 1px solid var(--fd-line); }
.fd-act {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 10px; color: var(--fd-muted); background: none; border: none; border-radius: 12px;
    font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background .2s, color .2s;
}
.fd-act:hover { background: var(--fd-soft); color: var(--fd-brand); }

/* likes */
.fd-like b { font-weight: 700; font-variant-numeric: tabular-nums; }
.fd-like b:empty { display: none; }
.fd-like.is-liked, .fd-like.is-liked i { color: #d6336c; }
.fd-like:disabled { opacity: .6; cursor: progress; }

@media (max-width: 480px) {
    .fd-act { gap: 6px; padding: 10px 4px; font-size: 14px; }
}

/* bewerken */
.fd-editing { padding: 22px; }
.fd-edit-title { margin: 0 0 14px; font-family: var(--font-body, inherit); font-size: 17px; font-weight: 700; letter-spacing: 0; }
.fd-edit-title i { margin-right: 6px; color: var(--fd-brand); }

/* ---------- overig ---------- */
.fd-empty { padding: 56px 24px; text-align: center; color: var(--fd-muted); background: #fff; border: 1px dashed var(--fd-line); border-radius: 18px; }
.fd-empty i { font-size: 34px; color: var(--fd-brand); opacity: .7; }
.fd-empty p { margin: 12px 0 0; overflow-wrap: anywhere; }

.fd-back { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--fd-brand); font-weight: 700; text-decoration: none; }
.fd-back:hover { text-decoration: underline; }

.fd-pager { display: grid; justify-items: center; gap: 10px; margin-top: 4px; }
.fd-pager-info { margin: 0; font-size: 13px; color: var(--fd-muted); }

/* zijkant */
.fd-about-top { display: flex; align-items: center; gap: 12px; }
.fd-about-top h2 { margin: 0; font-size: 16px; }
.fd-about-top p { margin: 0; font-size: 13px; color: var(--fd-muted); }
.fd-about-text { margin: 16px 0; color: var(--fd-muted); font-size: 15px; line-height: 1.55; }
.fd-contact { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 4px; }
.fd-contact a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; color: var(--fd-ink); border-radius: 12px; font-size: 15px; text-decoration: none; overflow-wrap: anywhere; transition: background .2s; }
.fd-contact a:hover { background: var(--fd-soft); }
.fd-contact i { flex: none; width: 20px; text-align: center; color: var(--fd-brand); }

/* ---------- fotoweergave: vast kader, altijd gecentreerd en volledig in beeld ---------- */
body.fd-noscroll { overflow: hidden; }

.fd-view {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: rgba(8, 20, 17, .95);
    opacity: 0;
    transition: opacity .2s ease;
}
.fd-view[hidden] { display: none; }
.fd-view.is-open { opacity: 1; }

.fd-view-bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 6px 22px;
    color: #fff;
}
.fd-view-count { font-size: 15px; font-weight: 600; letter-spacing: .04em; opacity: .85; }

.fd-view-main { position: relative; flex: 1 1 auto; min-height: 0; }
.fd-view-stage {
    position: absolute;
    inset: 0 84px 24px 84px;           /* ruimte links en rechts voor de pijlen */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fd-view-stage img,
.fd-view-stage video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.fd-view-stage video { background: #000; outline: none; }
.fd-view-stage img.is-loading { opacity: .35; }

.fd-view-spin {
    position: absolute;
    left: 50%; top: 50%;
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    animation: fdViewSpin .8s linear infinite;
}
.fd-view-stage img.is-loading ~ .fd-view-spin { opacity: 1; }
@keyframes fdViewSpin { to { transform: rotate(360deg); } }

.fd-view-btn {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 0;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: background .2s ease;
}
.fd-view-btn:hover { background: rgba(255, 255, 255, .28); }
.fd-view-nav { position: absolute; top: 50%; margin-top: -23px; z-index: 3; }
.fd-view-prev { left: 18px; }
.fd-view-next { right: 18px; }
.fd-view.is-single .fd-view-nav { display: none; }

@media (max-width: 640px) {
    .fd-view-stage { inset: 0 0 12px 0; }
    .fd-view-stage img,
    .fd-view-stage video { border-radius: 0; box-shadow: none; }
    .fd-view-nav { width: 40px; height: 40px; margin-top: -20px; background: rgba(8, 20, 17, .55); }
    .fd-view-prev { left: 8px; }
    .fd-view-next { right: 8px; }
}

.fd-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 1100; translate: -50% 20px;
    padding: 12px 20px; color: #fff; background: #10302a; border-radius: 999px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3); font-size: 15px; font-weight: 600;
    opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s;
}
.fd-toast.is-on { opacity: 1; translate: -50% 0; }

/* =========================================================
   Laatste activiteit op de homepage (oudere variant)
   ========================================================= */
.fd-latest-section {
    position: relative; overflow: hidden; padding: 96px 0; color: #fff;
    background: linear-gradient(160deg, #173f35, #1f5446);
}
.fd-latest-section::before, .fd-latest-section::after {
    content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .05); pointer-events: none;
}
.fd-latest-section::before { top: -170px; left: -130px; width: 440px; height: 440px; animation: floatB 15s ease-in-out infinite alternate; }
.fd-latest-section::after  { bottom: -190px; right: -130px; width: 400px; height: 400px; animation: floatA 17s ease-in-out infinite alternate; }

.fd-latest { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr minmax(0, 600px); gap: 56px; align-items: center; }
.fd-latest .kicker { color: var(--fd-accent); }
.fd-latest h2 { margin: 12px 0 0; color: #fff; font-size: clamp(31px, 4.2vw, 46px); line-height: 1.1; }
.fd-latest-lead { margin: 18px 0 28px; max-width: 28em; font-size: 18px; opacity: .92; }
.fd-btn-accent { color: #2a1d05; background: var(--fd-accent); padding: 15px 27px; font-size: 16px; }
.fd-btn-accent:hover { background: #f3b24f; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .28); }

.fd-teaser {
    overflow: hidden; color: var(--fd-ink); background: #fff;
    border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.fd-teaser-img {
    display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden;
    background: linear-gradient(135deg, var(--fd-brand), #3f8a77); color: rgba(255,255,255,.85); font-size: 54px;
}
.fd-teaser-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.fd-teaser:hover .fd-teaser-img img { transform: scale(1.04); }
.fd-teaser-body { padding: 24px 26px 28px; }
.fd-teaser-time { margin: 0 0 8px; color: var(--fd-muted); font-size: 14px; font-weight: 500; }
.fd-teaser-time i { margin-right: 4px; color: var(--fd-brand); }
.fd-teaser-title {
    margin: 0 0 22px; color: var(--fd-ink);
    font-family: var(--font-head, Georgia, serif); font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 980px) {
    .fd-latest { grid-template-columns: 1fr; gap: 36px; }
    .fd-latest-section { padding: 80px 0; }
}
@media (max-width: 640px) { .fd-latest-section { padding: 64px 0; } }

/* minder beweging: animaties uit (hier staat ook de gele gloed, .fd-post:target) */
@media (prefers-reduced-motion: reduce) {
    .fd-post, .fd-post:target, .fd-prev.is-busy::after, .fd-view-spin, .fd-latest-section::before, .fd-latest-section::after { animation: none; }
    .fd-post:target { box-shadow: 0 0 0 3px var(--fd-accent), var(--fd-shadow); }
    .fd-imgs img, .fd-view, .fd-toast { transition: none; }
}

/* ===== Video's ===== */
.fd-imgs a video,
.fd-teaser-img video,
.fd-prev video { display: block; width: 100%; height: 100%; object-fit: cover; background: #10302a; pointer-events: none; }
.fd-imgs a video { position: absolute; inset: 0; }
.fd-n1 a video { position: static; height: auto; max-height: 640px; }

.fd-play {
    position: absolute; inset: 0; margin: auto;
    width: 54px; height: 54px;
    display: grid; place-items: center;
    padding-left: 3px;
    border-radius: 50%;
    background: rgba(16, 48, 42, .62);
    color: #fff; font-size: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    pointer-events: none;
}
.fd-prev .fd-play { width: 38px; height: 38px; font-size: 14px; }
.fd-prev .fd-size {
    position: absolute; left: 6px; bottom: 6px;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(16, 48, 42, .75); color: #fff;
    font-size: 11px; font-weight: 600;
}

/* =========================================================
   Uitloggen-knop leesbaar + knoppen naast "Nieuws & activiteiten"
   ========================================================= */
button.btn { background: transparent; }
button.btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
button.btn-primary { background: var(--accent); }

.hero-topline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-topline form { display: inline; margin: 0; }
.btn-sm { padding: 7px 16px; font-size: 14px; border-width: 1.5px; gap: 8px; }

/* =========================================================
   Homepage: sectie "Activiteiten"
   ========================================================= */
.fd-news {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    color: #fff;
    background: linear-gradient(160deg, var(--brand-deep, #173f35), #1f5446);
}
.fd-news::before,
.fd-news::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, .05);
}
.fd-news::before { width: 460px; height: 460px; top: -160px; right: -140px; }
.fd-news::after  { width: 340px; height: 340px; bottom: -140px; left: -110px; }

.fd-news-wave { position: absolute; left: 0; right: 0; line-height: 0; z-index: 1; }
.fd-news-wave svg { display: block; width: 100%; height: 48px; }
.fd-news-wave.is-top    { top: -1px; }
.fd-news-wave.is-bottom { bottom: -1px; }

.fd-news-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 56px;
    align-items: center;
}
.fd-news .kicker { color: var(--accent); }
.fd-news h2 {
    margin: 12px 0 0;
    color: #fff;
    font-size: clamp(31px, 4.2vw, 46px);
    line-height: 1.1;
}
.fd-news-lead { max-width: 30em; margin: 18px 0 30px; font-size: 18px; opacity: .92; }

.fd-news-card {
    display: block;
    overflow: hidden;
    color: var(--ink, #16231f);
    text-decoration: none;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    transition: transform .3s ease, box-shadow .3s ease;
}
.fd-news-card:hover { transform: translateY(-4px); box-shadow: 0 32px 70px rgba(0, 0, 0, .34); }

.fd-news-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #dfe8e5;
}
.fd-news-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(16, 40, 33, .35), transparent 45%);
}
.fd-news-media img,
.fd-news-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.fd-news-card:hover .fd-news-media img,
.fd-news-card:hover .fd-news-media video { transform: scale(1.04); }
.fd-news-media.is-empty {
    display: grid;
    place-items: center;
    color: var(--brand, #2F6F5F);
    font-size: 56px;
    background: linear-gradient(135deg, var(--brand-soft, #e8f3f0), #fff);
}
.fd-news-media.is-empty::after { display: none; }
.fd-news-media .fd-play { z-index: 2; }

.fd-news-date {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 3;
    min-width: 60px;
    padding: 9px 12px 8px;
    text-align: center;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    line-height: 1;
}
.fd-news-date b {
    display: block;
    color: var(--brand-deep, #173f35);
    font-family: var(--font-head, Georgia, serif);
    font-size: 26px;
    font-weight: 600;
}
.fd-news-date span {
    display: block;
    margin-top: 5px;
    color: var(--brand, #2F6F5F);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.fd-news-count {
    position: absolute;
    right: 14px; bottom: 14px;
    z-index: 3;
    padding: 6px 13px;
    color: #fff;
    background: rgba(16, 48, 42, .72);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 13px;
    font-weight: 600;
}

.fd-news-body { padding: 26px 30px 30px; }
.fd-news-meta {
    margin: 0 0 10px;
    color: var(--brand, #2F6F5F);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.fd-news-title {
    margin: 0 0 12px;
    color: var(--brand-deep, #173f35);
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
}
.fd-news-excerpt {
    margin: 0 0 22px;
    color: var(--muted, #54655f);
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fd-news-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--brand, #2F6F5F);
    font-weight: 700;
}
.fd-news-cta i { transition: transform .2s ease; }
.fd-news-card:hover .fd-news-cta i { transform: translateX(5px); }

@media (max-width: 980px) {
    .fd-news { padding: 100px 0; }
    .fd-news-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
    .fd-news { padding: 84px 0; }
    .fd-news-body { padding: 22px 22px 24px; }
    .fd-news-wave svg { height: 32px; }
}

/* =========================================================
   Zijbalk: e-mailadres past op één regel + open/gesloten bij het telefoonnummer
   ========================================================= */
.fd-contact a { font-size: 15px; }
.fd-contact a[href^="mailto:"] { font-size: 14.5px; overflow-wrap: anywhere; }

.fd-contact-phone { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; }
.fd-contact-phone > a { flex: 0 1 auto; }

.fd-open {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px; border-radius: 999px;
    font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.fd-open i { font-size: 8px; }
.fd-open.is-open   { color: #14663a; background: #e3f6ea; }
.fd-open.is-open i { color: #1f9d55; animation: fdOpenPulse 2s ease-in-out infinite; }
.fd-open.is-closed   { color: #a3261b; background: #fdecee; }
.fd-open.is-closed i { color: #d64545; }
@keyframes fdOpenPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* openingstijden onder het nummer, uitgelijnd met de tekst */
.fd-hours {
    flex-basis: 100%;
    margin: -2px 0 4px; padding-left: 42px;
    font-size: 13px; color: var(--fd-muted);
}

/* WhatsApp-regel onder de openingstijden */
.fd-contact-phone > .fd-wa { flex: 1 1 100%; margin-top: 2px; font-size: 14.5px; }
.fd-contact .fd-wa i { color: #25D366; font-size: 18px; }

@media (prefers-reduced-motion: reduce) { .fd-open.is-open i { animation: none; } }


/* =========================================================
   DONKERE MODUS – deel 2: activiteiten (feed)
   (plak dit helemaal onderaan in feed.css, ná het stuk uit dark_site.css in site.css)
   ========================================================= */

/* groen dat op donker leesbaar is, voor tekst en iconen in de feed */
:root[data-theme="dark"] .fd-scope {
    --fd-brand:  #7cc7b2;
    --fd-danger: #ff8d82;
}

/* witte vlakken worden donkergrijs */
:where([data-theme="dark"]) .fd-card,
:where([data-theme="dark"]) .fd-post,
:where([data-theme="dark"]) .fd-menu-list,
:where([data-theme="dark"]) .fd-empty,
:where([data-theme="dark"]) .fd-btn-line,
:where([data-theme="dark"]) .fd-input.fd-line,
:where([data-theme="dark"]) .fd-input:focus,
:where([data-theme="dark"]) .fd-search-input,
:where([data-theme="dark"]) .fd-imgs { background: var(--surface); }

:where([data-theme="dark"]) .fd-input::placeholder,
:where([data-theme="dark"]) .fd-search-input::placeholder { color: #8a9a95; }
:where([data-theme="dark"]) .fd-search-input:focus { box-shadow: 0 0 0 3px rgba(124, 199, 178, .22), var(--fd-shadow); }
:where([data-theme="dark"]) .fd-search-clear:hover { background: #2F6F5F; color: #fff; }
:where([data-theme="dark"]) .fd-post.is-pinned { border-color: #3d5a51; }
:where([data-theme="dark"]) .fd-pin { color: #cfe9e1; }

/* knoppen en vlakken die écht groen moeten blijven (met witte tekst) */
:where([data-theme="dark"]) .fd-btn-brand { background: #2F6F5F; color: #fff; }
:where([data-theme="dark"]) .fd-avatar { background: linear-gradient(135deg, #2F6F5F, #3f8a77); }
:where([data-theme="dark"]) .fd-mv button:hover,
:where([data-theme="dark"]) .fd-prev.is-removed .fd-x { background: #2F6F5F; }

/* meldingen */
:where([data-theme="dark"]) .fd-flash.is-ok  { color: #9be3b6; background: #17301f; border-color: #2a5a3a; }
:where([data-theme="dark"]) .fd-flash.is-err,
:where([data-theme="dark"]) .fd-error       { color: #ffb4ab; background: #3a1f22; border-color: #6b2f35; }
:where([data-theme="dark"]) .fd-flash code  { background: rgba(255, 255, 255, .08); }
:where([data-theme="dark"]) .fd-menu-list .fd-danger:hover { background: #3a1f22; }
:where([data-theme="dark"]) .fd-gone { color: #ffb4ab; background: rgba(58, 31, 34, .8); }

/* "telefonisch bereikbaar" */
:where([data-theme="dark"]) .fd-open.is-open   { color: #8be0ae; background: #14301f; }
:where([data-theme="dark"]) .fd-open.is-closed { color: #ffb4ab; background: #3a1f22; }