/*!
 * Contact FAQs — 1:2844 - 1:2910, the accordion.
 *
 * Figma 1:2769 in the Monal-Pages file AlYDxKHhVoiNp5UI47BElc.
 *
 * Split from design/contact.css, which stays the source of truth. Mobile first;
 * desktop values are the frame's, as --monal-u units (1u == 1 Figma px / 10).
 */



/* ==========================================================================
   4. FAQS  1:2844 - 1:2910
   ========================================================================== */
.monal-contact-faq { position: relative; padding: var(--monal-page-gap) 0; text-align: center; }

.monal-contact-faq .monal-contact-faq__title { color: var(--monal-c-ink); }

.monal-faq { margin: calc(var(--monal-u) * 3.2) auto 0; padding: 0; list-style: none; max-width: calc(var(--monal-u) * 109.6); text-align: left; display: grid; gap: calc(var(--monal-u) * 1.2); }

/* 1:2850 — #F2F2F2, radius 20; the open one is #FFF2EB (1:2901). */
.monal-faq__h { margin: 0; font: inherit; }

.monal-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--monal-u) * 1.6);
  width: 100%; min-height: calc(var(--monal-u) * 6.4);
  padding: calc(var(--monal-u) * 1.4) calc(var(--monal-u) * 1.4) calc(var(--monal-u) * 1.4) calc(var(--monal-u) * 2);
  border: 0; border-radius: calc(var(--monal-u) * 1.6);
  background: #f2f2f2; cursor: pointer; text-align: left;
  font: inherit; font-size: max(calc(var(--monal-u) * 1.6), 16px); line-height: 1.35;
  color: rgba(0, 0, 0, .7);
  transition: background-color .3s;
}

/* The theme reset turns a hovered or focused button #C36 with white text;
   restate each state one class deeper so the panel keeps its own colours
   (and a clicked question does not stay pink while it holds focus). */
.monal-faq .monal-faq__q,
.monal-faq .monal-faq__q:focus { background-color: #f2f2f2; color: rgba(0, 0, 0, .7); }

.monal-faq .monal-faq__q:hover { background-color: #ececec; color: rgba(0, 0, 0, .7); }

.monal-faq .monal-faq__q[aria-expanded="true"] { background-color: #fff2eb; color: rgba(0, 0, 0, .7); }

.monal-faq__q:focus-visible { outline: 2px solid var(--monal-c-orange); outline-offset: 2px; }

/* 1:2851 — a 50 circle with the arrow; down when closed (rotate 90), up when
   open (-90). The rotation is on the inner art, never on a tweened box. */
.monal-faq__icon { flex: none; width: calc(var(--monal-u) * 3.6); height: calc(var(--monal-u) * 3.6); }

.monal-faq__icon i {
  display: block; width: 100%; height: 100%;
  background: url(../../assets/monal/img/pages/contact-faq-arrow.svg) center / contain no-repeat;
  transform: rotate(90deg); transition: transform .35s var(--monal-ease-out);
}

.monal-faq__q[aria-expanded="true"] .monal-faq__icon i { transform: rotate(-90deg); }

/* 1:2910 — 24/36 at 70%, 52.78 in, 40 under its question. */
.monal-faq__a { overflow: hidden; }

.monal-faq__a[hidden] { display: none; }

/* Closed answers stay readable without JS; with it they are hidden from the
   first paint, before the widget script swaps the flag for `hidden`. */
.monal-js .monal-faq__a[data-monal-faq-closed] { display: none; }

.monal-faq__a p { padding: calc(var(--monal-u) * 1.6) calc(var(--monal-u) * 2) calc(var(--monal-u) * .4); color: var(--monal-c-muted); }

@media (min-width: 1200px) {
  
  
    /* --- faqs ------------------------------------------------------------ */
    /* 1:2846 at y2482.89 — 180 under the map (1577.42 + 725.468). Items from
       y2614.89 (60 under the heading), 100 tall on a 120 pitch, 1096 wide. */
    .monal-contact-faq { padding: calc(var(--monal-u) * 18) 0 calc(var(--monal-u) * 15.6); }
  
    .monal-contact-faq .monal-contact-faq__title {
      font-size: calc(var(--monal-u) * 6.6); line-height: calc(var(--monal-u) * 7.2);
      letter-spacing: calc(var(--monal-u) * -.264);
    }
  
    .monal-faq { margin-top: calc(var(--monal-u) * 6); max-width: none; width: calc(var(--monal-u) * 109.6); gap: calc(var(--monal-u) * 2); }
  
    .monal-faq__q {
      min-height: calc(var(--monal-u) * 10); padding: 0 calc(var(--monal-u) * 3.8) 0 calc(var(--monal-u) * 5.278);
      border-radius: calc(var(--monal-u) * 2);
      font-size: calc(var(--monal-u) * 2.6); line-height: calc(var(--monal-u) * 3.4);
    }
  
    .monal-faq__icon { width: calc(var(--monal-u) * 5); height: calc(var(--monal-u) * 5); }
  
    /* 1:2910 at y2754.89: 40 under its question, then 50 to the next one
       (the list gap supplies 20 of it). */
    .monal-faq__a p {
      width: calc(var(--monal-u) * 93.12);
      padding: calc(var(--monal-u) * 4) 0 calc(var(--monal-u) * 3) calc(var(--monal-u) * 5.278);
      font-size: calc(var(--monal-u) * 2.4); line-height: calc(var(--monal-u) * 3.6);
    }
  
    /* The FAQ section starts at y2302.89 (the map's end). */
    .monal-contact-faq::before { top: calc(var(--monal-u) * 16.132); }
  
    .monal-contact-faq::after { top: calc(var(--monal-u) * 91.611); transform: rotate(-15.23deg); }
}