/* ==========================================================================
   Faunabit.eu — extensions on top of the compiled Tailwind stylesheet (faunabit.css)
   faunabit.css is purged, so new components get hand-written classes here (prefix fb-).
   Colours reuse the tokens from faunabit.css: --pigment-green, --blue-lagoon, --dim-gray.
   ========================================================================== */

/* ---------- Header: contact button ---------- */
.fb-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-right: 1.5rem;
  padding: .55rem 1.25rem;
  border-radius: 1rem 0 1rem 0;
  background-color: rgb(var(--pigment-green));
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .3s ease, transform .3s ease;
}
.fb-nav-cta:hover { background-color: rgb(var(--blue-lagoon)); color: #fff; transform: translateY(-1px); }
.fb-nav-cta--mobile { display: inline-flex; margin: 1.5rem 0 0; }

/* ---------- Contact strip (bottom of every page) ---------- */
.fb-strip { padding: 4rem 0; background-color: rgb(240 253 244); }
.fb-strip__box {
  display: grid;
  gap: 2rem;
  padding: 2.5rem 2rem;
  border-radius: 1.5rem 0 1.5rem 0;
  background-color: #fff;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .08);
}
@media (min-width: 1024px) {
  .fb-strip__box { grid-template-columns: auto 1fr auto; align-items: center; padding: 3rem; }
}
.fb-strip__person { display: flex; align-items: center; gap: 1rem; }
.fb-strip__initials {
  width: 5rem; height: 5rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px; font-family: Roboto, sans-serif; font-weight: 700; font-size: 1.5rem;
  color: #fff; background-image: linear-gradient(to top right, rgb(var(--pigment-green)), rgb(var(--blue-lagoon)));
}
.fb-strip__name { font-family: Roboto, sans-serif; font-weight: 700; }
.fb-strip__role { font-size: .875rem; color: rgb(var(--dim-gray)); }
.fb-strip__heading { font-family: Roboto, sans-serif; font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.fb-strip__text { margin-top: .5rem; color: rgb(var(--dim-gray)); }
.fb-strip__channels { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1rem; }
.fb-strip__channels a { display: inline-flex; align-items: center; gap: .5rem; color: rgb(var(--pigment-green)); font-weight: 700; }
.fb-strip__channels a:hover { text-decoration: underline; }
.fb-strip__channels span { color: rgb(var(--dim-gray)); font-weight: 400; }
.fb-strip__actions { display: flex; flex-direction: column; gap: 1rem; }

/* ---------- Generic page text (Over ons): headings and lists in Markdown content ---------- */
.wysiwyg .editor h2 { margin-top: 2.5rem; margin-bottom: .75rem; font-size: 1.5rem; line-height: 2rem; }
.wysiwyg .editor h2:first-child { margin-top: 0; }
.wysiwyg .editor h3 { margin-top: 2rem; margin-bottom: .5rem; }
.wysiwyg .editor p + p, .wysiwyg .editor ul, .wysiwyg .editor ol { margin-top: 1rem; }
.wysiwyg .editor li + li { margin-top: .5rem; }

/* ---------- CTA blocks: primary button plus optional Calendly button ---------- */
.fb-cta-buttons { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
@media (min-width: 768px) { .fb-cta-buttons { align-items: flex-end; } }

/* ---------- News: share buttons ---------- */
.fb-share { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
.fb-share__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem; border-radius: 1rem 0 1rem 0; font-weight: 700;
  color: #fff; background-color: #0a66c2; border: 2px solid #0a66c2; transition: background-color .3s ease, color .3s ease;
}
.fb-share__btn:hover { background-color: #004182; border-color: #004182; }
.fb-share__btn--outline { color: #0a66c2; background-color: #fff; }
.fb-share__btn--outline:hover { color: #fff; background-color: #0a66c2; }

.fb-card-img { width: 100%; height: 12rem; object-fit: cover; }
.fb-card-placeholder { display: flex; align-items: center; justify-content: center; height: 12rem; font-size: 3.5rem; color: rgb(255 255 255 / .85); }

.fb-h1-section { font-size: 1.875rem; line-height: 2.25rem; }
@media (min-width: 768px) { .fb-h1-section { font-size: 2.25rem; line-height: 2.5rem; } }
.fb-focus:focus-visible { outline: 3px solid rgb(var(--pigment-green)); outline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 3px solid rgb(var(--pigment-green)); outline-offset: 2px; }

/* ---------- FAQ ---------- */
.fb-faq { max-width: 52rem; margin: 0 auto; }
.fb-faq h2 { margin-bottom: 1.5rem; }
.fb-faq--inline { margin-top: 3rem; }
.fb-faq--inline h2 { font-size: 1.5rem; line-height: 2rem; }
.fb-faq__item { border-bottom: 1px solid rgb(220 252 231); }
.fb-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; font-weight: 700; list-style: none; }
.fb-faq__item summary::-webkit-details-marker { display: none; }
.fb-faq__item summary i { color: rgb(var(--pigment-green)); transition: transform .3s ease; }
.fb-faq__item[open] summary i { transform: rotate(180deg); }
.fb-faq__answer { padding: 0 0 1.25rem; color: rgb(var(--dim-gray)); }
.fb-faq__answer p + p { margin-top: .75rem; }

/* ---------- Footer contact line ---------- */
.fb-footer-contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .25); }
.fb-footer-contact a:hover { text-decoration: underline; }

/* ---------- Homepage: target groups ---------- */
.fb-audiences { display: grid; gap: 2rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px)  { .fb-audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fb-audiences { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fb-audience {
  display: flex; flex-direction: column;
  padding: 2rem;
  border-radius: 1.5rem 0 1.5rem 0;
  background-color: #fff;
  border: 2px solid rgb(220 252 231);
  transition: border-color .3s ease, transform .3s ease;
}
.fb-audience:hover { border-color: rgb(var(--pigment-green)); transform: translateY(-2px); }
.fb-audience__icon {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 9999px;
  color: #fff; font-size: 1.25rem;
  background-image: linear-gradient(to top right, rgb(var(--pigment-green)), rgb(var(--blue-lagoon)));
}
.fb-audience h3 { margin-top: 1.25rem; }
.fb-audience p { margin-top: .75rem; color: rgb(var(--dim-gray)); flex: 1; }
.fb-audience a { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-weight: 700; color: rgb(var(--pigment-green)); }
.fb-audience a:hover { text-decoration: underline; }
.fb-section-intro { max-width: 42rem; margin: -2rem auto 3rem; text-align: center; color: rgb(var(--dim-gray)); }
.fb-cta-text { margin-top: .75rem; color: rgb(var(--dim-gray)); }

/* ---------- Product page: specifications ---------- */
.fb-specs { padding: 2.5rem 2rem; border-radius: 1.5rem 0 1.5rem 0; background-color: rgb(240 253 244); }
.fb-specs__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.fb-specs__toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.25rem; border-radius: 1rem 0 1rem 0;
  background-color: #fff; color: rgb(var(--pigment-green)); font-weight: 700;
  border: 2px solid rgb(220 252 231); cursor: pointer; transition: border-color .3s ease;
}
.fb-specs__toggle:hover { border-color: rgb(var(--pigment-green)); }
.fb-specs__intro { margin-top: 1rem; color: rgb(var(--dim-gray)); }
.fb-specs table { width: 100%; margin-top: 1.5rem; border-collapse: collapse; background-color: #fff; border-radius: 1rem 0 1rem 0; overflow: hidden; }
.fb-specs th, .fb-specs td { padding: .85rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(220 252 231); }
.fb-specs th { width: 32%; font-weight: 700; color: rgb(var(--pigment-green)); }
.fb-specs tr:last-child th, .fb-specs tr:last-child td { border-bottom: 0; }
.fb-specs__request { display: grid; gap: 1.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgb(220 252 231); }
@media (min-width: 768px) { .fb-specs__request { grid-template-columns: 1fr auto; align-items: center; } }
.fb-specs__request h3 { font-family: Roboto, sans-serif; font-weight: 700; font-size: 1.25rem; }
.fb-specs__request p { margin-top: .5rem; color: rgb(var(--dim-gray)); }
.fb-specs__request-actions { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.fb-specs__download { color: rgb(var(--pigment-green)); font-weight: 700; }
.fb-specs__download:hover { text-decoration: underline; }

/* ---------- Contact page: steps and organisation select ---------- */
.fb-steps { display: grid; gap: 1.5rem; margin: 0 auto 4rem; }
@media (min-width: 768px) { .fb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fb-step { display: flex; gap: 1rem; align-items: flex-start; }
.fb-step__num {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; background-color: rgb(var(--pigment-green));
}
.fb-step p { color: rgb(var(--dim-gray)); }
.fb-steps__heading { text-align: center; margin-bottom: 1.5rem; font-family: Roboto, sans-serif; font-weight: 700; font-size: 1.25rem; }
select.form-input { appearance: auto; }

/* ---------- Publications ---------- */
.fb-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
.fb-filter button {
  padding: .4rem .9rem; border-radius: 9999px; font-size: .875rem; font-weight: 700; cursor: pointer;
  border: 2px solid rgb(220 252 231); background-color: #fff; color: rgb(var(--pigment-green));
  transition: background-color .3s ease, border-color .3s ease;
}
.fb-filter button:hover { border-color: rgb(var(--pigment-green)); }
.fb-filter button.is-active { background-color: rgb(var(--pigment-green)); border-color: rgb(var(--pigment-green)); color: #fff; }
.fb-pubs { display: flex; flex-direction: column; border-top: 1px solid rgb(220 252 231); }
.fb-pub { display: grid; gap: .25rem 1.5rem; padding: 1rem .75rem; border-bottom: 1px solid rgb(220 252 231); }
@media (min-width: 768px) { .fb-pub { grid-template-columns: 9.5rem 1fr; } }
.fb-pub--featured { background-color: rgb(240 253 244); }
.fb-pub__side { display: flex; align-items: center; gap: .75rem; }
@media (min-width: 768px) { .fb-pub__side { flex-direction: column; align-items: flex-start; gap: .35rem; } }
.fb-pub__year { font-family: Roboto, sans-serif; font-weight: 700; font-size: 1.125rem; line-height: 1.5rem; color: rgb(var(--pigment-green)); }
.fb-badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 9999px; white-space: nowrap;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  color: rgb(var(--blue-lagoon)); background-color: rgb(0 80 132 / .08);
}
.fb-pub__main { min-width: 0; }
.fb-pub__title { font-family: Roboto, sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1.5rem; }
.fb-pub__title a:hover { color: rgb(var(--pigment-green)); }
.fb-pub__meta { margin-top: .15rem; font-size: .875rem; line-height: 1.25rem; color: rgb(var(--dim-gray)); }
button.fb-pub__more {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .35rem; padding: 0;
  border: 0; background: none; cursor: pointer; font-size: .8rem; font-weight: 700; color: rgb(var(--pigment-green));
}
button.fb-pub__more:hover { text-decoration: underline; }
.fb-pub__details { margin-top: .5rem; max-width: 60rem; font-size: .95rem; }
.fb-pub__details p + p { margin-top: .5rem; }
.fb-pub__role { padding-left: .75rem; border-left: 3px solid rgb(var(--pigment-green)); color: rgb(var(--dim-gray)); }
.fb-pub__role strong { color: rgb(var(--pigment-green)); }
.fb-pub__link { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; font-weight: 700; color: rgb(var(--pigment-green)); }
.fb-pub__link:hover { text-decoration: underline; }

/* ==========================================================================
   Right-to-left (Arabic site). The Tailwind build uses physical margins/paddings,
   so the most visible ones are mirrored here under [dir="rtl"].
   ========================================================================== */
[dir="rtl"] body { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] p, [dir="rtl"] .fb-strip__heading, [dir="rtl"] .fb-pub__title { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; }
[dir="rtl"] .wysiwyg, [dir="rtl"] .fb-audience, [dir="rtl"] .fb-strip__box, [dir="rtl"] .fb-specs, [dir="rtl"] .fb-steps, [dir="rtl"] .fb-pub, [dir="rtl"] form, [dir="rtl"] .grid-items .item .body, [dir="rtl"] .text-dim-gray:not(.text-center) { text-align: right; }
[dir="rtl"] .text-center { text-align: center; }
[dir="rtl"] .wysiwyg ul, [dir="rtl"] .wysiwyg ol { padding-left: 0; padding-right: 1rem; }
@media (min-width: 1024px) { [dir="rtl"] .wysiwyg ul, [dir="rtl"] .wysiwyg ol { padding-right: 2rem; } }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: .5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: .75rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: .5rem; }
[dir="rtl"] .-ml-6 { margin-left: 0; margin-right: -1.5rem; }
[dir="rtl"] .left-4 { left: auto; right: 1rem; }
@media (min-width: 640px) { [dir="rtl"] .sm\:left-8 { left: auto; right: 2rem; } }
@media (min-width: 1280px) { [dir="rtl"] .xl\:left-16 { left: auto; right: 4rem; } }
[dir="rtl"] .right-0 { right: auto; left: 0; }
[dir="rtl"] .origin-top-right { transform-origin: top left; }
[dir="rtl"] .space-x-10 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }
[dir="rtl"] .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }
[dir="rtl"] .lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }
[dir="rtl"] .fb-nav-cta { margin-right: 0; margin-left: 1.5rem; }
[dir="rtl"] .items-end { align-items: flex-start; }
[dir="rtl"] .fb-cta-buttons { align-items: stretch; }
@media (min-width: 768px) { [dir="rtl"] .fb-cta-buttons { align-items: flex-start; } }
[dir="rtl"] .fb-specs th, [dir="rtl"] .fb-specs td { text-align: right; }
[dir="rtl"] .fb-pub__role { padding-left: 0; padding-right: .75rem; border-left: 0; border-right: 3px solid rgb(var(--pigment-green)); }
[dir="rtl"] .border-l-4 { border-left-width: 0; border-right-width: 4px; }
[dir="rtl"] .fb-footer-contact, [dir="rtl"] .fb-strip__channels, [dir="rtl"] .fb-filter { direction: rtl; }
[dir="rtl"] .left-3\/4 { left: auto; right: 75%; }
[dir="rtl"] .rounded-tr-3xl { border-top-right-radius: 0; border-top-left-radius: 1.5rem; }
[dir="rtl"] .rounded-bl-3xl { border-bottom-left-radius: 0; border-bottom-right-radius: 1.5rem; }
[dir="rtl"] .rounded-leaf, [dir="rtl"] .btn, [dir="rtl"] .grid-items .item { border-top-right-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; }
[dir="rtl"] .fa-arrow-right, [dir="rtl"] .fa-arrow-up-right-from-square, [dir="rtl"] .fa-chevron-right { transform: scaleX(-1); display: inline-block; }

/* Blog: note on non-Dutch sites that posts are in Dutch */
.fb-notice{max-width:48rem;margin:0 auto 3rem;padding:1.25rem 1.5rem;border-left:4px solid #058a38;background:#f3faf5;border-radius:.5rem}
.fb-notice p{margin:0 0 1rem}
[dir="rtl"] .fb-notice{border-left:0;border-right:4px solid #058a38}

/* Homepage: "About Faunabit" section (moved from the About page) */
.fb-home-about__body h2{font-size:1.5rem;line-height:2rem;margin-top:2.5rem}
.fb-home-about__body h2:first-child{margin-top:0}
.fb-home-about__body ul{margin-bottom:2rem}
.fb-home-about__body li{margin-bottom:.75rem}
.fb-home-about__more{text-align:center;margin-top:1rem}
.fb-home-about__more a{color:rgb(var(--pigment-green));font-weight:700}
.fb-home-about__more a:hover{text-decoration:underline}

/* Homepage hero: second line smaller than the headline */
.fb-hero-sub{font-size:1.25rem;line-height:1.75rem;font-weight:400;margin-top:.75rem;font-family:"Noto Sans",sans-serif}
@media (min-width:640px){.fb-hero-sub{font-size:1.5rem;line-height:2rem}}

/* Lists get the same space below them as paragraphs, so a heading after a list does not stick to it */
.wysiwyg ul, .wysiwyg ol, .fb-faq__answer ul, .fb-faq__answer ol { margin-bottom: 2rem; }
.wysiwyg li > ul, .wysiwyg li > ol { margin-bottom: 0; }