/* BJO Projecten – small additions on top of the theme's own project styles (site.css). */
a.filter-btn { display: inline-flex; align-items: center; text-decoration: none; }
.filter-btn[aria-current="true"] { background: var(--text, #12151C); border-color: var(--text, #12151C); color: #fff; }
[data-bjo-projects][aria-busy="true"] .card-row { opacity: .55; transition: opacity .2s; }
.bjo-more { display: flex; justify-content: center; margin-top: 32px; }
.bjo-more[hidden] { display: none; }
.bjo-project-details h3 { font-size: 1.05rem; margin: 1.2em 0 .3em; }
.bjo-project-details p { color: var(--text-2, #3E4554); }
.gallery__item[data-full] { padding: 0; }

/* Menu text a little smaller, in proportion with the rest of the site */
.nav__link { font-size: .84rem; }
.nav__list { gap: clamp(12px, 1.4vw, 22px); }
.header-cta.btn--sm { font-size: .82rem; min-height: 40px; padding: 8px 16px; }
.mobile-menu__link { font-size: clamp(1.05rem, 4.6vw, 1.25rem); padding: 11px 0; }

/* Icons next to contact details (footer + mobile menu) */
.bjo-ci { display: inline-flex; align-items: flex-start; gap: 10px; }
.footer-col .bjo-ci { display: flex; }
.bjo-ci__i { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft, #FFF1EA); color: var(--accent, #C8401A); margin-top: -3px; }
.bjo-ci__i svg { width: 15px; height: 15px; }
.bjo-ci__i--wa { background: #E7F7EE; color: #1F8F4E; }
.bjo-ci__i--li { background: #E8F1FB; color: #0A66C2; }
.bjo-ci:hover .bjo-ci__i { filter: brightness(.95); }
.mobile-menu__foot .bjo-ci { align-items: center; }

/* Floating buttons: labels visible for a moment on the first page view */
.bjo-fab--intro .bjo-fab__tip { opacity: 1; transform: translate(0, -50%); }

/* Developer credit: own line under the copyright row, same small muted text */
.footer-credit { flex-basis: 100%; }
.footer-credit a { white-space: nowrap; color: var(--text-2, #3E4554); font-weight: 600; text-decoration-color: rgba(18, 21, 28, .25); transition: color .2s, text-decoration-color .2s; }
.footer-credit a:hover { color: var(--accent, #C8401A); text-decoration-color: currentColor; }

/* LinkedIn on the contact page */
.contact-item--linkedin .contact-item__icon { background: #E8F1FB; color: #0A66C2; }
.contact-item--linkedin .contact-item__icon svg { width: 20px; height: 20px; }