/* ==========================================================
   GoeieBuurt – thema-stylesheet
   Bootstrap, FontAwesome en het lettertype Catamaran worden
   apart geladen (zie lib/setup.php).

   1. Variabelen en basis      7. Kaarten (thema, nieuws, overzicht)
   2. Knoppen                  8. Inhoud uit de editor
   3. Formulieren en zoeken    9. Footer
   4. Header                  10. Effecten
   5. Secties en paginakop    11. Responsive
   6. Homepage
   ========================================================== */

/* 1. Variabelen en basis
   ---------------------------------------------------------- */
:root {
    --gb-blue: #066ab4;
    --gb-blue-dark: #04518a;
    --gb-red: #e84420;
    --gb-red-dark: #c9361a;
    --gb-green: #00b8a8;
    --gb-green-deep: #26b5a9;   /* groen voor vlakken met witte tekst */
    --gb-ink: #1d2433;
    --gb-muted: #5f6f86;
    --gb-bg: #f7f7f5;
    --gb-tint-blue: #e8f1f9;
    --gb-line: #e6e8ec;
    --gb-radius: 16px;
    --gb-shadow: 0 6px 24px rgba(29, 36, 51, .07);
    --gb-shadow-hover: 0 12px 32px rgba(29, 36, 51, .12);
}

html { scroll-behavior: smooth; }
body {
    font-family: "Catamaran", sans-serif;
    font-size: 17px;
    line-height: 24px;
    font-weight: 400;
    color: var(--gb-ink);
    background: var(--gb-bg);
}

h1, h2, h3, h4, h5 { color: var(--gb-ink); font-weight: 700; }
h1 { font-size: 31px; margin-bottom: 30px; }
h2 { font-size: 30px; margin-bottom: 28px; }
h3 { font-size: 28px; margin-bottom: 15px; }
h4, h5 { font-size: 21px; }
p { font-size: 18px; }
p, ul { line-height: 28px; }
a { color: var(--gb-blue); text-decoration: none; }
a:hover { color: var(--gb-blue-dark); }

.mt-120 { margin-top: 120px; }
.grecaptcha-badge { display: none; }

@media screen and (min-width: 992px) {
    .container { max-width: 1600px; padding-left: 40px; padding-right: 40px; }
}

/* 2. Knoppen
   ---------------------------------------------------------- */
.btn,
.wp-block-button__link,
.comment-form input[type="submit"],
.search-form .search-submit {
    padding: 12px 26px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-transform: none;
    border-radius: 999px;
    transition: background .2s, color .2s;
}
.btn,
.comment-form input[type="submit"],
.search-form .search-submit {
    margin-top: 15px;
    line-height: 22px;
    border: 0;
    cursor: pointer;
}
.btn, .wp-block-button__link { transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.btn:hover { background: #00bcae; }
.btn:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(29, 36, 51, .15); }

.btn-primary, .wp-block-button__link, .search-submit { background: var(--gb-blue); color: #fff; }
.btn-primary:hover, .wp-block-button__link:hover { background: var(--gb-blue-dark); color: #fff; }
.btn-go { background: var(--gb-red); color: #fff; }
.btn-go:hover { background: var(--gb-red-dark); }
.btn-go a { color: #fff !important; }
.btn-white { background: #fff; color: var(--gb-blue) !important; }
.btn-white:hover { background: var(--gb-bg); }

.wp-block-buttons .wp-block-button { margin: 0; padding: 0; }

/* 3. Formulieren en zoeken
   ---------------------------------------------------------- */
.comment-form input[type="email"],
.comment-form input[type="text"],
.comment-form input[type="url"],
.comment-form textarea,
.form-control,
.search-form .search-field {
    background: #fff;
    border: 0;
    padding: 15px 15px 10px;
    font-family: Roboto, sans-serif;
    color: #000;
}
.comment-form p, .form-group, .search-form label { margin-bottom: 8px; }
.comment-list ol { list-style: none; }

.wpcf7 { padding: 30px; background: #fff; border-radius: var(--gb-radius); box-shadow: var(--gb-shadow); }
.wpcf7 .form-control, .wpcf7 input:not([type="submit"]), .wpcf7 textarea { border: 1px solid var(--gb-line); border-radius: 10px; }
.wpcf7-list-item { display: block !important; }
.wpcf7-textarea { height: 150px; }
.wpcf7-submit { background: var(--gb-blue); color: #fff; }
.wpcf7-submit::after { content: "\f067"; font-family: FontAwesome; float: right; margin-top: -2px; }

.search-form { background: #efefef; border-radius: 30px; padding: 0 15px 8px; margin-bottom: 30px; }
.search-form label { width: 88%; font-weight: 400; }
.search-field { border-radius: 30px; width: 100%; }
.search-submit { margin-left: 15px; }
.search article { border-bottom: 1px solid #efefef; margin-bottom: 30px; }
.search article h2 { margin-bottom: 15px; text-transform: none; }
.search article a { color: #000; }
.nav-links a { color: var(--gb-blue); text-decoration: underline; }

/* 4. Header: blauwe topbalk + witte hoofdbalk
   ---------------------------------------------------------- */
.banner {
    position: sticky;
    top: 0;
    z-index: 10000;
    width: 100%;
    background: #fff;
    color: var(--gb-blue);
    box-shadow: 0 1px 0 var(--gb-line);
    transition: box-shadow .3s;
}
.is-scrolled .banner { box-shadow: 0 6px 24px rgba(29, 36, 51, .10); }
.admin-bar .banner { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .banner { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar .banner { top: 0; } }
.banner .container { position: relative; }

/* Topbalk met klein menu en taalkeuze */
.topbar { background: var(--gb-blue); color: #fff; }
.banner .topbar-inner { display: flex; align-items: center; justify-content: flex-end; gap: 28px; height: 40px; }
.banner .topbar-nav { flex-wrap: nowrap; align-items: center; gap: 24px; }
.banner .topbar-nav > li { position: relative; display: block; padding: 10px 0; }
.banner .topbar-nav > li > a {
    padding: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.banner .topbar-nav > li > a:hover, .banner .topbar-nav > .current-menu-item > a { color: #fff; }
.banner .topbar-nav .fa-home, .banner .topbar-nav .fa-magnifying-glass { font-size: 14px; color: #fff; }
.banner .topbar-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: -18px;
    min-width: 200px;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--gb-shadow);
}
.banner .topbar-nav .dropdown-menu a { display: block; padding: 7px 18px; color: var(--gb-ink); font-size: 15px; font-weight: 600; }
.banner .topbar-nav .dropdown-menu a:hover { color: var(--gb-blue); background: var(--gb-tint-blue); }

.gtranslate_wrapper a { color: #000; }
a.glink img { border-radius: 30px; }
.banner .topbar-lang .gtranslate_wrapper { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .3); }
.banner .topbar-lang a { color: #fff !important; font-size: 13px; font-weight: 600; }

/* Hoofdbalk met logo en hoofdmenu */
.banner .mainbar { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.banner .navbar-brand { margin: 0; padding: 0; }
.banner .navbar-brand img { display: block; width: 118px; }
.banner .navbar { padding: 0; }

.banner .nav-main { flex-direction: row; align-items: center; gap: 34px; }
.banner .nav-main > li { position: relative; display: block; }
.banner .nav-main > li > a { position: relative; display: inline-block; padding: 0; font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--gb-ink); }
.banner .nav-main > li > a:hover,
.banner .nav-main > .current-menu-item > a,
.banner .nav-main > .current-page-ancestor > a { color: var(--gb-blue); }
.banner .nav-main > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 3px;
    border-radius: 3px;
    background: var(--gb-blue);
    border: 0;
    margin: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.banner .nav-main > li > a:hover::after,
.banner .nav-main > .current-menu-item > a::after,
.banner .nav-main > .current-page-ancestor > a::after { transform: scaleX(1); }

/* Submenu onder een hoofdmenu-item (bijv. Buren voor Buren > Koffiekar op straat) */
.banner .nav-main .dropdown-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: -18px;
    min-width: 220px;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--gb-shadow-hover);
}
/* Onzichtbare brug, zodat het submenu open blijft als je er met de muis naartoe gaat */
.banner .nav-main .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.banner .nav-main .dropdown-menu li { display: block; }
.banner .nav-main .dropdown-menu a { display: block; padding: 8px 18px; color: var(--gb-ink); font-size: 16px; font-weight: 600; }
.banner .nav-main .dropdown-menu a:hover,
.banner .nav-main .dropdown-menu .current-menu-item > a { color: var(--gb-blue); background: var(--gb-tint-blue); }

/* Klein menu in het mobiele uitklapmenu */
.banner .nav-small > li { position: relative; }
.banner .nav-small a { color: var(--gb-muted); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.banner .nav-small a:hover, .banner .nav-small .current-menu-item > a { color: var(--gb-blue); }

.banner .navbar-toggler { padding: 4px; color: var(--gb-blue); background: none; border: 0; cursor: pointer; }
.banner .navbar-toggler .fa { font-size: 28px; }

@media screen and (min-width: 1021px) {
    .banner .navbar-collapse { display: block !important; }
    .banner .nav-small, .banner .navbar-toggler { display: none; }
}
@media screen and (min-width: 1021px) and (max-width: 1250px) {
    .banner .nav-main { gap: 22px; }
    .banner .nav-main > li > a { font-size: 15px; }
}
@media screen and (max-width: 1020px) {
    .banner .topbar-inner { height: 34px; }
    .banner .topbar-nav { display: none; }
    .banner .topbar-lang .gtranslate_wrapper { padding: 0; border: 0; }
    .banner .mainbar { height: 68px; }
    .banner .navbar-brand img { width: 88px; }
    .banner .navbar { position: static; }
    .banner .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 12px 24px 24px;
        background: #fff;
        box-shadow: 0 16px 24px rgba(29, 36, 51, .12);
    }
    .banner .nav-main, .banner .nav-small { flex-direction: column; align-items: flex-start; gap: 0; }
    .banner .nav-main > li, .banner .nav-small > li { width: 100%; }
    .banner .nav-main > li > a { display: block; padding: 12px 0; font-size: 20px; }
    .banner .nav-main > li > a::after { display: none; }
    .banner .nav-small { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gb-line); }
    .banner .nav-small > li > a { display: block; padding: 9px 0; }
    .banner .nav-small .dropdown-menu { position: static; padding: 0 0 0 16px; border: 0; box-shadow: none; }
    .banner .nav-main .dropdown-menu { display: block; position: static; min-width: 0; padding: 0 0 8px 16px; box-shadow: none; }
    .banner .nav-main .dropdown-menu::before { display: none; }
    .banner .nav-main .dropdown-menu a { padding: 8px 0; font-size: 17px; font-weight: 500; }
}

/* 5. Secties en paginakop
   ---------------------------------------------------------- */
.block { padding-top: 72px; padding-bottom: 72px; }
/* Sectiekoppen op de homepage steviger, zoals het logo (niet de tussenkoppen in teksten) */
.block > .container > h2, .section-head h2 { text-transform: uppercase; font-weight: 800; letter-spacing: .01em; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.section-head h2 { margin: 0; }

.block-action { color: #fff; background: var(--gb-blue); }
.block-action h1 { margin-top: 30px; color: #fff; }
.block-action h3 { color: #fff; }
.block-action img { width: 80%; }

/* Grote foto bovenaan subpagina's met witte titelkaart eroverheen */
.page-head {
    height: 42vh;
    min-height: 300px;
    color: #fff;
    background-color: var(--gb-blue);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}
.block-top {
    margin: -90px 0 48px;
    padding: 32px 36px;
    background: #fff;
    border-radius: var(--gb-radius);
    box-shadow: var(--gb-shadow);
}
.block-top h1 { margin: 0; color: var(--gb-blue); font-size: 34px; line-height: 1.2; }
#breadcrumbs { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--gb-muted); }
#breadcrumbs a { color: var(--gb-muted); }
#breadcrumbs .breadcrumb_last { color: var(--gb-ink); }

/* Tekst van een gewone pagina lijnt uit met de titel in de kaart erboven */
.page-body { padding: 0 36px; }

/* Strook met de afgeronde staafjes uit het logo */
.gb-stripe {
    position: relative;
    z-index: 3;
    height: 20px;
    margin: -40px 0 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='20'%3E%3Crect x='0' y='0' width='84' height='20' rx='10' fill='%23066ab4'/%3E%3Crect x='96' y='0' width='40' height='20' rx='10' fill='%23e84420'/%3E%3Crect x='148' y='0' width='100' height='20' rx='10' fill='%2300b8a8'/%3E%3Crect x='260' y='0' width='28' height='20' rx='10' fill='%23e84420'/%3E%3C/svg%3E") repeat-x left center;
    animation: gb-stripe 40s linear infinite;
}
/* Variant in de blauwe footer: zonder blauw, zodat alle staafjes zichtbaar blijven */
.gb-stripe-footer {
    margin: 0 0 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='20'%3E%3Crect x='0' y='0' width='84' height='20' rx='10' fill='%2300b8a8'/%3E%3Crect x='96' y='0' width='40' height='20' rx='10' fill='%23e84420'/%3E%3Crect x='148' y='0' width='100' height='20' rx='10' fill='%23e8f1f9'/%3E%3Crect x='260' y='0' width='28' height='20' rx='10' fill='%23e84420'/%3E%3C/svg%3E");
}

/* 6. Homepage
   ---------------------------------------------------------- */
.hero-tiles { padding: 32px 0 48px; background: #fff; }
.hero-grid { display: grid; grid-template-columns: 4fr 8fr; grid-template-rows: auto auto; gap: 16px; }

.tile { position: relative; overflow: hidden; padding: 32px; color: #fff; border-radius: var(--gb-radius); }
.tile-blue { background: var(--gb-blue); }
.tile-green { background: var(--gb-green-deep); }
.tile-red { background: var(--gb-red); }

.hero-intro { grid-row: 1; display: flex; flex-direction: column; justify-content: center; padding: 28px 30px; }
.hero-intro h1 { margin-bottom: 12px; color: #fff; font-size: 30px; line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; }
.hero-intro p { margin-bottom: 8px; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .95); }
.hero-intro .btn-go { align-self: flex-start; margin-top: 6px; padding: 9px 20px; font-size: 15px; }

.hero-photo { grid-column: 2; grid-row: 1; min-height: 360px; }
.hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-image) center / cover;
    animation: gb-kenburns 18s ease-out both;
}

/* Vier actietegels over de volle breedte onder het blauwe kader en de foto */
.hero-actions { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hero-action { display: flex; align-items: center; gap: 16px; padding: 18px 24px; color: #fff; transition: filter .2s; }
.hero-action:hover { color: #fff; filter: brightness(.92); }
.hero-action > i { flex: 0 0 auto; font-size: 30px; }
.hero-action-text { display: flex; flex-direction: column; gap: 2px; }
.tile-title { font-size: 18px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.tile-text { font-size: 15px; line-height: 1.3; opacity: .95; }
.tile-arrow { display: inline-block; margin-left: auto; font-size: 24px; line-height: 1; transition: transform .25s ease; }
.hero-action:hover .tile-arrow { transform: translateX(6px); }

.block-theme { background: var(--gb-tint-blue); }
.theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

/* Activiteiten in de wijk: foto met (optioneel) datumlabel, tekst ernaast */
.block-agenda { background: #fff; }
.agenda-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.agenda-item {
    display: flex;
    overflow: hidden;
    background: var(--gb-bg);
    color: var(--gb-ink);
    border-radius: var(--gb-radius);
    transition: transform .3s ease, box-shadow .3s ease;
}
.agenda-image { position: relative; flex: 0 0 42%; overflow: hidden; }
.agenda-image img { display: block; width: 100%; height: 100%; min-height: 170px; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.agenda-date {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 10px;
    color: #fff;
    background: var(--gb-red);
    border-radius: 12px;
    line-height: 1;
}
.agenda-day { font-size: 24px; font-weight: 800; }
.agenda-month { margin-top: 3px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.agenda-body { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px 22px; }
.agenda-title, .agenda-text { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.agenda-title { font-size: 18px; font-weight: 700; line-height: 1.3; -webkit-line-clamp: 3; }
.agenda-text { font-size: 15px; line-height: 1.5; color: var(--gb-muted); -webkit-line-clamp: 3; }
.agenda-item:hover { transform: translateY(-4px); box-shadow: var(--gb-shadow-hover); color: var(--gb-ink); }
.agenda-item:hover img { transform: scale(1.07); }
.agenda-item:hover .agenda-title { color: var(--gb-blue); }

.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: var(--gb-radius); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.block-news { background: var(--gb-green-deep); }
.block-news .section-head h2 { color: #fff; }
.block-news .section-head .btn-white { margin: 0; }
.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* 7. Kaarten
   ---------------------------------------------------------- */

/* Thema's: foto met een effen kleurvlak eronder */
.theme-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    color: var(--gb-ink);
    border-radius: var(--gb-radius);
    transition: transform .3s ease, box-shadow .3s ease;
}
.theme-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.theme-card-title {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 76px;
    padding: 18px 20px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
.theme-card-title::after { content: "\2192"; display: inline-block; transition: transform .25s ease; }
.theme-card-blue .theme-card-title { background: var(--gb-blue); }
.theme-card-green .theme-card-title { background: var(--gb-green-deep); }
.theme-card-red .theme-card-title { background: var(--gb-red); }

.theme-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(29, 36, 51, .15); color: var(--gb-blue); }
.theme-card:hover img { transform: scale(1.07); }
.theme-card:hover .theme-card-title::after { transform: translateX(6px); }

/* Nieuws op de homepage */
.news-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    color: var(--gb-ink);
    border-radius: var(--gb-radius);
    transition: transform .3s ease, box-shadow .3s ease;
}
.news-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.news-card-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.news-card time { font-size: 13px; color: var(--gb-muted); }
.news-card-title, .news-card-text { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-title { font-size: 18px; font-weight: 700; line-height: 1.3; -webkit-line-clamp: 2; }
.news-card-text { font-size: 15px; line-height: 1.5; color: var(--gb-muted); -webkit-line-clamp: 3; }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--gb-shadow-hover); color: var(--gb-ink); }
.news-card:hover img { transform: scale(1.07); }
.news-card:hover .news-card-title { color: var(--gb-blue); }

/* Overzichtspagina's (archief, activiteiten): kaarten in een rij even hoog */
.block-top > .row { margin-top: 32px; }
/* Ruimte tussen de rijen kaarten, in elk overzichtssjabloon */
.row:has(> .col-sm-3 > .item) { row-gap: 24px; }
.row > .col-sm-3:has(> .item) { display: flex; }
.item {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: var(--gb-radius);
    box-shadow: var(--gb-shadow);
    transition: transform .2s ease;
}
.item:hover { transform: translateY(-4px); }
.item a { color: var(--gb-ink); }
.item img { display: block; width: 100%; height: 230px; object-fit: cover; }
.item .item-content { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; }
.item :is(h4, h5) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: calc(3 * 1.3em);
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
}
.item time { font-size: 13px; color: var(--gb-muted); }
.item p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    min-height: calc(4 * 1.5em);
    overflow: hidden;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--gb-muted);
}
.item:hover :is(h4, h5) { color: var(--gb-blue); }

/* Deelknoppen onder berichten */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--gb-line); }
.share-label { font-weight: 700; color: var(--gb-ink); }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #fff;
    background: var(--gb-blue);
    border: 0;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: transform .2s, background .2s;
}
.share-btn:hover, .share-btn:focus-visible { color: #fff; transform: translateY(-3px); }
.share-facebook:hover { background: #1877f2; }
.share-whatsapp:hover { background: #128c3e; }
.share-linkedin:hover { background: #0a66c2; }
.share-email:hover, .share-copy:hover, .share-native:hover { background: var(--gb-blue-dark); }
.share-copy.is-done { background: var(--gb-green-deep); }
.share-copy.is-done i::before { content: "\f00c"; }
.share-feedback { font-size: 14px; color: var(--gb-muted); }

/* 8. Inhoud uit de editor
   ---------------------------------------------------------- */

/* Thema-pagina's volgen de huisstijl in plaats van eigen kleuren */
:is(.groen-en-straat, .buren-voor-buren, .kunst-cultuur, .de-huiskamer, .wijkinfo) .content :is(h1, h3) { color: var(--gb-ink); }
:is(.groen-en-straat, .buren-voor-buren, .kunst-cultuur, .de-huiskamer, .wijkinfo) .content a { color: var(--gb-blue); }
:is(.groen-en-straat, .buren-voor-buren, .kunst-cultuur, .de-huiskamer, .wijkinfo) .wp-block-button__link:not(.has-background) { background: var(--gb-blue); }
:is(.groen-en-straat, .buren-voor-buren, .kunst-cultuur, .de-huiskamer, .wijkinfo) .wp-block-button__link:not(.has-text-color) { color: #fff; }

/* Blokken met witte tekst op een gekleurde achtergrond */
.content .has-white-color.has-background a:not(.wp-element-button, .wp-block-button__link) { color: #fff; text-decoration: underline; }
.content .has-white-color.has-background :is(h1, h2, h3, h4) { color: #fff; }
.content .wp-block-group.has-background + .wp-block-group.has-background { margin-top: 0; margin-block-start: 0; }

/* Paginatitel in de titelkaart altijd in het blauw, ook op thema-pagina's */
.content .block-top h1 { color: var(--gb-blue); }
.content .wp-block-button__link.has-white-background-color { color: var(--gb-blue) !important; }

/* Kleurvlakken uit de editor omzetten naar (tinten van) de logokleuren */
/* (zowel #hex als rgb(), omdat de browser het style-attribuut herschrijft zodra effects.js er iets aan toevoegt) */
.entry .has-background:is([style*="background-color:#8a5ea4"], [style*="background-color: rgb(138, 94, 164)"],
                          [style*="background-color:#0666af"], [style*="background-color: rgb(6, 102, 175)"]) { background-color: var(--gb-blue) !important; }
.entry .has-pale-pink-background-color { background-color: #fdeae5 !important; }
.entry .has-light-green-cyan-background-color { background-color: #e2f5f3 !important; }
.entry .has-luminous-vivid-amber-background-color { background-color: var(--gb-tint-blue) !important; }
.page-body .wp-block-group.has-background { padding: 28px 32px; border-radius: var(--gb-radius); }

/* Gekleurde kaarten naast elkaar in kolommen (bijv. Wijkinfo, De Huiskamer): even hoog, knop onderaan */
.entry .wp-block-columns:has(> .wp-block-column > .wp-block-group.has-background) { align-items: stretch !important; gap: 24px; }
.entry .wp-block-columns:has(> .wp-block-column > .wp-block-group.has-background) > .wp-block-column { align-self: stretch !important; display: flex; }
.entry .wp-block-column > .wp-block-group.has-background {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px 32px;
    border-radius: var(--gb-radius);
}
.entry .wp-block-column > .wp-block-group.has-background > .wp-block-group__inner-container { flex: 1; display: flex; flex-direction: column; }
.entry .wp-block-column > .wp-block-group.has-background :is(h2, h3, p) { margin-top: 0; }
.entry .wp-block-column > .wp-block-group.has-background :is(h2, h3) { margin-bottom: 12px; font-size: 24px; }
.entry .wp-block-column > .wp-block-group.has-background .wp-block-buttons { margin-top: auto; padding-top: 8px; margin-bottom: 0; }

/* Losse cursieve tussenkopjes uit de editor rechttrekken */
.wp-block-heading[style*="italic"] { font-style: normal !important; font-weight: 600 !important; color: var(--gb-blue) !important; font-size: 26px !important; }

/* Inhoud uit de editor op alle pagina's (.entry): rustige, goed leesbare opmaak */
.entry > :is(p, h1, h2, h3, h4, h5, ul, ol, blockquote, .wp-block-buttons) { max-width: 780px; }
.entry > :is(h2, h3, h4) { margin-top: 40px; }
.entry > :first-child { margin-top: 0; }
/* Brede pagina's: losse tekst gecentreerd in de leesbreedte */
.block > .entry > :is(p, h1, h2, h3, h4, h5, ul, ol, blockquote, .wp-block-buttons) { margin-inline: auto; padding-inline: 24px; }
.block-top .entry { margin-top: 24px; }
.entry .wp-block-group__inner-container > :is(p, h2, h3, h4, ul, ol) { max-width: 780px; }

.entry a:not(.wp-element-button, .wp-block-button__link) { color: var(--gb-blue) !important; text-decoration: underline; text-underline-offset: 3px; }
.entry a:not(.wp-element-button, .wp-block-button__link) [style*="color"] { color: inherit !important; }
.entry .wp-block-heading.has-text-color:not(.has-white-color) { color: var(--gb-ink) !important; }
/* In gekleurde vlakken met witte tekst blijven koppen, links en onderschriften wit */
.entry .has-background.has-white-color .wp-block-heading,
.entry .has-background.has-white-color a:not(.wp-element-button, .wp-block-button__link) { color: #fff !important; }
.entry .has-background.has-white-color figcaption { color: rgba(255, 255, 255, .8); }

.entry .wp-block-columns { gap: 32px; align-items: flex-start !important; margin: 32px 0; }
.entry .wp-block-column { align-self: flex-start !important; }
/* Tekst naast een foto of video (zigzag): tekst verticaal in het midden, met meer lucht */
.entry .wp-block-columns:has(:is(.wp-block-image, .wp-block-embed)):has(p) { align-items: center !important; gap: 48px; margin: 48px 0; }
.entry .wp-block-columns:has(:is(.wp-block-image, .wp-block-embed)):has(p) > .wp-block-column { align-self: center !important; }
.entry .wp-block-columns:has(:is(.wp-block-image, .wp-block-embed)):has(p) :is(.wp-block-image, .wp-block-embed) { margin-bottom: 0; }
.entry .wp-block-column > p:last-child { margin-bottom: 0; }

.entry .wp-block-image { margin: 0 0 24px; }
.entry .wp-block-image:not(.is-style-rounded) img { border-radius: var(--gb-radius); }
.entry .wp-block-column .wp-block-image { float: none; margin: 0 0 24px; }
/* Foto's met onderschrift vullen hun kolom en zijn even groot, zodat rijen netjes uitlijnen */
.entry .wp-block-column .wp-block-image:not(.is-style-rounded):has(figcaption) img { width: 100% !important; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.entry .wp-block-image figcaption { margin: 8px 0 0; font-size: 14px; font-style: normal; color: var(--gb-muted); text-align: left; }
.entry .wp-block-embed__wrapper { overflow: hidden; border-radius: var(--gb-radius); }
/* Niets breder dan het scherm: vaste breedtes uit de editor en lange links */
.entry { overflow-wrap: break-word; }
.entry :is(img, figure, iframe, video) { max-width: 100%; }
.entry img { height: auto; }
/* Oude WordPress-afbeeldingsopmaak (figure als tabel, onderschrift als tabelonderschrift) omzetten naar gewone blokken */
.entry .wp-block-image > figure { display: block; }
.entry .wp-block-image > figure > figcaption { display: block; }
.entry .wp-block-image > figure > a { display: block; }
.entry .wp-block-column .wp-block-image > figure { float: none; margin: 0; }

.top-fast { margin-bottom: 30px; padding: 10px; background: #fff; border-radius: var(--gb-radius); box-shadow: var(--gb-shadow); }
.top-fast :where(.wp-block-columns) { margin: 0; }
.top-fast .wp-block-button__link { background: var(--gb-blue); font-weight: 700; }
.top-fast p { margin: 15px 0 0 15px; font-weight: 700; }

/* 9. Footer
   ---------------------------------------------------------- */
.footer { padding: 28px 0; background: var(--gb-blue); color: #fff; font-size: 16px; }
.footer a { color: #fff; }
.footer h3 { margin-bottom: 16px; color: #fff; font-size: 20px; }
.footer p { font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, .85); }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer ul li { margin-bottom: 6px; }
.footer ul a { color: rgba(255, 255, 255, .85); }
.footer ul a:hover { color: #fff; text-decoration: underline; }
.footer .btn-white { margin-top: 4px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }

.footer-social { display: flex; gap: 10px; }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    transition: background .2s, color .2s, transform .2s;
}
.footer-social a:hover { background: #fff; color: var(--gb-blue); transform: translateY(-3px); }

.copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: 14px;
}
.copyright, .copyright a { color: rgba(255, 255, 255, .75); }
.copyright span { display: inline-block; }

/* Naar-boven-knop: verschijnt pas na scrollen */
.scroll-top {
    position: fixed;
    right: 2rem;
    bottom: 3rem;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: #fff;
    background: var(--gb-blue);
    border-radius: 100%;
    box-shadow: var(--gb-shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .3s, transform .3s, background .2s;
}
.show-scroll-top .scroll-top { opacity: 1; pointer-events: auto; transform: none; }
.scroll-top:hover { background: var(--gb-blue-dark); }
.scroll-top__link { color: #fff; }

/* 10. Effecten
   ---------------------------------------------------------- */

/* Elementen schuiven zacht in beeld (klasse wordt gezet door effects.js) */
.reveal {
    opacity: 0;
    translate: 0 28px;
    transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; translate: 0 0; }

@keyframes gb-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes gb-stripe { from { background-position: 0 center; } to { background-position: 300px center; } }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; translate: none; transition: none; }
    .hero-photo::before, .gb-stripe { animation: none; }
}

/* 11. Responsive
   ---------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .theme-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-actions { grid-template-columns: 1fr 1fr; }
    .agenda-grid { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 991px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-intro, .hero-photo, .hero-actions { grid-column: 1; grid-row: auto; }
    .hero-photo { min-height: 260px; }
}
@media screen and (max-width: 720px) {
    h1 { margin-top: 0; font-size: 30px; line-height: 1.2; }
    h2 { font-size: 26px; }
    h3 { font-size: 23px; }
    p { font-size: 15px; }

    /* Grote lettergroottes uit de editor schalen mee op mobiel */
    .content .has-large-font-size { font-size: 26px !important; line-height: 1.25; }
    .content .has-x-large-font-size { font-size: 30px !important; line-height: 1.2; }

    .block { padding: 48px 0; }
    .page-head { height: 30vh; min-height: 200px; }
    .block-top { margin: -60px 0 32px; padding: 22px; }
    .block-top h1 { font-size: 28px; }
    .page-body { padding: 0 22px; }
    .entry .wp-block-column > .wp-block-group.has-background, .page-body .wp-block-group.has-background { padding: 22px; }

    .hero-tiles { padding: 16px 0 8px; }
    .tile { padding: 24px; }
    .hero-intro h1 { font-size: 28px; }
    .hero-actions { grid-template-columns: 1fr; gap: 12px; }
    .hero-action { padding: 16px 20px; }
    .tile-title { font-size: 17px; }
    .section-head { flex-wrap: wrap; }

    .theme-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .theme-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }  /* losse laatste tegel over de volle breedte */
    .theme-grid > :last-child:nth-child(odd) img { aspect-ratio: 2 / 1; }

    /* Op mobiel staan de thema's direct onder een korte intro */
    .hero-intro > p ~ p, .hero-intro > p ~ :is(div, figure), .hero-photo { display: none; }
    .hero-intro > p { margin-bottom: 0; }
    .block-theme { padding-top: 32px; }
    .block-theme h2 { margin-bottom: 18px; }
    .theme-card-title { min-height: 64px; padding: 12px 14px; font-size: 15px; }
    .video-grid, .news-grid { grid-template-columns: 1fr; }
    .agenda-image { flex-basis: 38%; }
    .agenda-image img { min-height: 140px; }
    .agenda-body { padding: 14px 16px; }
    .agenda-title { font-size: 16px; }
    .agenda-text { -webkit-line-clamp: 2; }
    .item img { height: 180px; }

    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .scroll-top { right: 1rem; bottom: 1.5rem; }
}