/*
 * "Frequently Asked Questions" (components/site/Faq.tsx) on About Us and the home page: the questions beside their
 * picture, the first one open, one open at a time. Sizes follow the original page at every width: side by side from
 * 1025px with the heading at 3.4vw (larger text from 1441px, a 1540px box from 1561px), stacked in a 760px column on
 * tablets and a 500px one on phones.
 */
.zzfq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; padding: 65px max(0px, calc((100% - 1560px) / 2)); background: #f3f3f3; color: #151515; }
.zzfq__text, .zzfq__pic { min-width: 0; padding: 10px; }
.zzfq__eyebrow { display: flex; align-items: center; margin: 0 0 20px; color: #151515; font: 400 1.4vw/1 "Roboto", system-ui, sans-serif; }
.zzfq__eyebrow::before { content: ""; width: 30px; height: 5px; margin-right: 20px; background: #0062ae; }
.zzfq__title { margin: 0 0 40px; font: 600 3.4vw/1.29 "Roboto Condensed", "Roboto", sans-serif; color: #151515; }
.zzfq-q { margin-bottom: 18px; border: 1px solid #e3e3e3; border-radius: 20px; }
.zzfq-q:last-child { margin-bottom: 0; }
.zzfq-q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 30px; border-radius: 20px; font: 500 18px/22.5px "Roboto Condensed", "Roboto", sans-serif; color: #151515; cursor: pointer; list-style: none; }
.zzfq-q summary::-webkit-details-marker { display: none; }
.zzfq-q summary::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--zzfq-plus) center / contain no-repeat; mask: var(--zzfq-plus) center / contain no-repeat; }
.zzfq-q[open] summary { padding-bottom: 18px; color: #006db8; }
.zzfq-q[open] summary::after { -webkit-mask-image: var(--zzfq-minus); mask-image: var(--zzfq-minus); }
.zzfq-q summary:focus-visible { outline: 3px solid rgb(0 109 184 / 0.4); outline-offset: 2px; }
/* sliding (lib/behaviours/faqs.ts): the question's spacing and colour change over the answer's slide, so nothing jumps */
.zzfq-q summary { transition: padding-bottom 0.4s cubic-bezier(0.37, 0, 0.63, 1), color 0.2s ease; }
.zzfq-q.is-closing summary { padding-bottom: 30px; color: #151515; }
.zzfq-q.is-closing summary::after { -webkit-mask-image: var(--zzfq-plus); mask-image: var(--zzfq-plus); }
.zzfq-q__a { overflow: hidden; }
.zzfq-q__text { white-space: pre-line; } /* a plain-text answer keeps its line breaks */
.zzfq-q summary h3 { margin: 0; font: inherit; color: inherit; } /* a blog post's FAQ question */
@media (prefers-reduced-motion: reduce) { .zzfq-q summary { transition: none; } }
.zzfq-q__a { padding: 0 30px 30px; font: 400 16px/26.72px "Roboto", system-ui, sans-serif; }
.zzfq-q__a p { margin: 0; }
.zzfq-q__a p + p { margin-top: 12px; }
.zzfq, .zzfq__list { --zzfq-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H272V64c0-17.7-14.3-32-32-32h-32c-17.7 0-32 14.3-32 32v144H32c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32h144v144c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V304h144c17.7 0 32-14.3 32-32v-32c0-17.7-14.3-32-32-32z'/%3E%3C/svg%3E"); --zzfq-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H32c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32v-32c0-17.7-14.3-32-32-32z'/%3E%3C/svg%3E"); }
.zzfq__pic { display: flex; justify-content: flex-end; align-items: flex-start; padding-top: 60px; } /* the picture starts 50px below the eyebrow */
.zzfq__pic img { display: block; max-width: 100%; height: auto; }
.zzfq--tint { background: rgb(69 87 99 / 0.1); }

/* wide screens: larger questions and answers */
@media (min-width: 1441px) {
  .zzfq-q summary { font-size: 20px; line-height: 25px; }
  .zzfq-q__a { font-size: 18px; line-height: 30.06px; }
}
/* tablets: the questions, then the picture centred below, in a 760px column */
@media (max-width: 1024px) {
  .zzfq { display: block; }
  .zzfq__text, .zzfq__pic { max-width: 780px; margin-inline: auto; }
  .zzfq__eyebrow { font-size: 20px; line-height: 20px; }
  .zzfq__title { font-size: 42px; line-height: 54.18px; }
  .zzfq-q__a { padding: 0 15px 15px; }
  .zzfq__pic { justify-content: center; padding-top: 40px; }
}
@media (max-width: 767px) {
  .zzfq { display: block; padding: 45px 0 0; }
  .zzfq__text, .zzfq__pic { max-width: 520px; }
  .zzfq__eyebrow { justify-content: center; font-size: 18px; line-height: 18px; }
  .zzfq__title { font-size: 32px; line-height: 41.28px; text-align: center; }
  .zzfq-q summary { padding: 15px; }
  .zzfq-q[open] summary { padding-bottom: 18px; }
  .zzfq-q.is-closing summary { padding-bottom: 15px; }
  .zzfq-q__a { padding: 0 15px 15px; }
  .zzfq__pic { padding-top: 25px; }
  .zzfq__pic img { width: 100%; }
}