/* ------------------------------------------------------------------
   Elementor Accordion -> the delivered FAQ look.

   README s5 says use the Accordion widget for FAQs; README s7 notes the
   original used native <details>/<summary>, which Elementor does not.
   This shim makes the widget match the rest of the page so 60 FAQ blocks
   do not read as a different component, and restores the keyboard focus
   ring the original had.
   ------------------------------------------------------------------ */
.cmva-faq .elementor-accordion { border: 0; }

.cmva-faq .elementor-accordion-item {
  border: 1px solid var(--border, #E4E7EC);
  border-radius: 14px;
  background: #fff;
  margin-bottom: .75rem;
  overflow: hidden;
}

.cmva-faq .elementor-tab-title {
  font-family: var(--font-head, "Quicksand", sans-serif);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--brand-navy, #1B2438);
  padding: 1.125rem 1.25rem;
  border: 0;
  background: none;
}

.cmva-faq .elementor-tab-title:hover { background: var(--bg-grey, #F7F8FA); }

.cmva-faq .elementor-tab-title a { color: inherit; text-decoration: none; }

.cmva-faq .elementor-tab-title:focus-visible,
.cmva-faq .elementor-tab-title a:focus-visible {
  outline: 3px solid var(--brand-orange, #F26522);
  outline-offset: -3px;
}

.cmva-faq .elementor-tab-content {
  border: 0;
  padding: 0 1.25rem 1.25rem;
  font-family: var(--font-body, var(--font-base, "Poppins", sans-serif));
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--text-body, #4A5262);
}

.cmva-faq .elementor-tab-content p { margin: 0 0 .75rem; }
.cmva-faq .elementor-tab-content p:last-child { margin-bottom: 0; }

.cmva-faq .elementor-accordion-icon { color: var(--brand-orange, #F26522); }

/* ------------------------------------------------------------------
   Elementor container reset.

   Every rebuilt section is an Elementor container carrying its original
   cmva-* class. Elementor drives container padding, margin, gap and width
   through custom properties on .e-con; zeroing those here hands spacing
   back to claimmva.css, which is the stylesheet that was designed for this
   markup. Only custom properties are touched, so nothing in claimmva.css is
   competed with — display, grid and flex rules there still apply normally.
   ------------------------------------------------------------------ */
.e-con[class*="cmva-"],
.e-con[class*="cmva-"] > .e-con-inner {
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --margin-inline-start: 0px;
  --margin-inline-end: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --content-width: 100%;
  --width: 100%;
  --max-width: none;
  --min-height: 0;
}

/* Widgets inside a rebuilt section must not add margins of their own —
   the delivered stylesheet already spaces these elements. */
.e-con[class*="cmva-"] > .elementor-widget,
.e-con[class*="cmva-"] > .e-con-inner > .elementor-widget {
  margin-block-end: 0;
  width: 100%;
}

/* ------------------------------------------------------------------
   Widget inner elements.

   claimmva.css was written for bare elements: `.cmva-h1` styles an <h1>,
   `.cmva-lede` styles a <p>. After the rebuild those classes sit on the
   Elementor wrapper and the real element is inside .elementor-widget-container.
   Inherited properties (size, colour, weight, tracking) reach it on their own;
   these two rules handle the ones that do not, because Elementor sets them
   itself: line-height 1 and margins on headings, and browser default margins
   on a lone paragraph.
   ------------------------------------------------------------------ */
/* Elementor 4 drops .elementor-widget-container when optimized markup is on,
   so both shapes are matched. */
.elementor-element[class*="cmva-"] > .elementor-widget-container > .elementor-heading-title,
.elementor-element[class*="cmva-"] > .elementor-heading-title {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  -webkit-text-stroke: inherit;
  paint-order: inherit;
  margin: 0;
  padding: 0;
}

/* A single paragraph in a text widget is the element the class was written
   for, so it should not add margins of its own. Multi-paragraph blocks such
   as .cmva-prose style their own <p> spacing and are left alone. */
.elementor-element[class*="cmva-"] > .elementor-widget-container > p:only-child,
.elementor-element[class*="cmva-"] > p:only-child {
  margin: 0;
}


/* ------------------------------------------------------------------
   Open state.

   Elementor's own accordion stylesheet is enqueued AFTER this file
   (it loads per-widget, late), so the open title needs specificity
   rather than source order to win. Its default paints the active
   title with the global Accent colour — which README s2 defines as
   the "without an attorney" red. Right for a ✗ mark, wrong for an
   open question, where it reads as an error.
   ------------------------------------------------------------------ */
.elementor-widget-accordion.cmva-faq .elementor-tab-title.elementor-active .elementor-accordion-title,
.elementor-widget-accordion.cmva-faq .elementor-tab-title.elementor-active a,
.elementor-widget-accordion.cmva-faq .elementor-tab-title.elementor-active {
  color: var(--brand-navy, #1B2438);
}

.elementor-widget-accordion.cmva-faq .elementor-tab-title.elementor-active {
  background: var(--bg-grey, #F7F8FA);
}

/* The delivered <details> markup had a +/- indicator. The Accordion
   widget is generated without an icon, so the affordance is drawn
   here instead — no icon library, and it rotates on open. */
.cmva-faq .elementor-tab-title { position: relative; padding-right: 3rem; }

.cmva-faq .elementor-tab-title::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid var(--brand-orange, #F26522);
  border-bottom: 2px solid var(--brand-orange, #F26522);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}

.cmva-faq .elementor-tab-title.elementor-active::after {
  transform: translateY(-30%) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .cmva-faq .elementor-tab-title::after { transition: none; }
}