/* --------------------------------------------------------------------------
   FAQ
   One question and its answer. The question is the control: clicking it opens
   the answer, which slides down from nothing to its own height while the
   orange plus turns into a minus. A hairline rule closes the row off, so a
   stack of these reads as one list.
   -------------------------------------------------------------------------- */

/* Webflow sets display: contents on <code-island> as an inline style, which
   beats anything declared here — so all layout lives on .faq, not :host. */
:host {
  display: block;
}

.faq {
  --faq-oxford-blue: #07274b;
  --faq-polynesian-blue: #0e4c92;
  --faq-syracuse-orange: #d34e24;
  --faq-paynes-gray: #4c5870;

  --faq-font-title: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --faq-font-body: "Aptos", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Set --faq-question-size / --faq-answer-size on any ancestor in Webflow to
     drive these from the site's own type variables — a custom property set
     outside the component still inherits through the shadow boundary. */
  --faq-q-size: var(--faq-question-size, clamp(1.0625rem, 0.89rem + 0.56vw, 1.5rem));
  --faq-a-size: var(--faq-answer-size, clamp(1rem, 0.94rem + 0.3vw, 1.1875rem));

  /* Space above and below the question, and below the answer. The question's
     own bottom padding is also the gap to the answer when it is open, so one
     measure sets the whole rhythm. Tied to the question's size — the mock's
     rows run a little under twice the type. */
  --faq-pad: calc(var(--faq-q-size) * 1.75);
  --faq-rule: rgba(76, 88, 112, 0.35);

  box-sizing: border-box;
  width: 100%;
  color: var(--faq-oxford-blue);
}

.faq *,
.faq *::before,
.faq *::after {
  box-sizing: border-box;
}

.faq[data-divider="true"] {
  border-bottom: 1px solid var(--faq-rule);
}

/* The heading wraps a real button — the standard disclosure pattern. The
   heading keeps its place in the document outline; the button is what
   keyboard and screen-reader users operate. */
.faq-q {
  margin: 0;
  font: inherit;
}

.faq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  width: 100%;
  margin: 0;
  padding: var(--faq-pad) 0;
  border: 0;
  background: none;
  font-family: var(--faq-font-title);
  font-weight: 700;
  font-size: var(--faq-q-size);
  line-height: 1.3;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}

.faq-head:hover {
  color: var(--faq-syracuse-orange);
}

.faq-head:focus-visible {
  outline: 3px solid var(--faq-syracuse-orange);
  outline-offset: 4px;
  border-radius: 4px;
}

.faq-text {
  overflow-wrap: anywhere;
}

/* Plus and minus are the same two bars: the upright one folds away into the
   crossbar. Sized in em, so it tracks the question type. */
.faq-icon {
  position: relative;
  flex: none;
  width: 0.86em;
  height: 0.86em;
  /* Nothing to see on a plus sign, but it carries the fold around with it. */
  transform: rotate(0deg);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 1px;
  background: var(--faq-syracuse-orange);
}

/* Crossbar. */
.faq-icon::before {
  width: 100%;
  height: 0.14em;
  transform: translate(-50%, -50%);
}

/* Upright. */
.faq-icon::after {
  width: 0.14em;
  height: 100%;
  transform: translate(-50%, -50%) scaleY(1);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.faq[data-open="true"] .faq-icon {
  transform: rotate(180deg);
}

.faq[data-open="true"] .faq-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* Clips the answer while it slides. Its height is set from JS — the measured
   height of .faq-answer when open, zero when closed. */
.faq-panel {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}

.faq[data-open="true"] .faq-panel {
  opacity: 1;
}

/* flow-root so the answer's own top and bottom margins are contained here
   instead of collapsing out of it — collapsed margins are left out of
   offsetHeight, which would measure the panel short and clip the last line. */
.faq-answer {
  display: flow-root;
  padding-bottom: var(--faq-pad);
  font-family: var(--faq-font-body);
  font-weight: 400;
  font-size: var(--faq-a-size);
  line-height: 1.7;
}

/* Webflow delivers RichText as slotted light-DOM content, which ordinary
   descendant selectors cannot reach.

   Scoped to the answer. Unscoped, ::slotted(*) matches the assigned node of
   EVERY slot in this shadow root, and the question became a slot of its own
   when it was turned into a Text Node — so the body type below was landing on
   the question and overriding the heading type it inherits from .faq-head. */
.faq-answer ::slotted(*) {
  margin: 0;
  font-family: var(--faq-font-body);
  font-weight: 400;
  font-size: var(--faq-a-size);
  line-height: 1.7;
  color: inherit;
}

/* The question. It is the H3's text, so it takes the heading type set on
   .faq-head, exactly as the plain string did before. Stated rather than left
   to inheritance alone: a slotted node is light-DOM content, and this is the
   only rule in the shadow tree that is allowed to reach it. */
.faq-text ::slotted(*) {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.faq-answer p {
  margin: 0 0 0.8em;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer a {
  color: var(--faq-polynesian-blue);
}

/* Nothing moves until the component has measured itself and painted once —
   otherwise an item set to start open would animate open on every page load. */
.faq:not([data-ready]) .faq-panel,
.faq:not([data-ready]) .faq-icon,
.faq:not([data-ready]) .faq-icon::after {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .faq-panel,
  .faq-icon,
  .faq-icon::after,
  .faq-head {
    transition: none;
  }
}