/* =========================
   CCI Accordion
   Icon accordion that mirrors the CCI FAQ styling: closed items are simple
   divider rows; the open item becomes a bordered card. Each trigger carries an
   optional leading icon, a title, and a blue rounded-square +/- toggle. Panels
   stay in the DOM (visible without JS) so the content remains crawlable.

   This is just the accordion element — it has no section background, padding or
   max-width of its own. Drop it into an Elementor container and style that.
========================= */

.cci-accordion {
  --cci-acc-bg: #010f22;          /* open-card fill */
  --cci-acc-border: #00264c;      /* open-card border */
  --cci-acc-divider: #1b2b47;     /* divider under closed rows */
  --cci-acc-toggle-bg: #0d2b54;          /* +/- button square fill (closed) */
  --cci-acc-toggle-icon: #005195;        /* +/- strokes (closed) */
  --cci-acc-toggle-active-bg: #ffffff;   /* square fill when open */
  --cci-acc-toggle-active-icon: #005195; /* minus stroke when open */
  --cci-acc-icon: #2f80ed;        /* leading item icon colour */
  --cci-acc-title: #ffffff;       /* title colour */
  --cci-acc-content: #d3d3d3;     /* panel content colour */

  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

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

/* -------- List -------- */
.cci-accordion__list {
  display: flex;
  flex-direction: column;
}

/* -------- Item: closed = divider row -------- */
/* No side margin — the row spans the full accordion width and uses padding for
   its inset. Inactive/active padding are exposed as widget controls. */
.cci-accordion__item {
  padding: 32px 40px;
  margin: 0;
  border-bottom: 1px solid var(--cci-acc-divider);
  transition: background-color 0.25s ease, border-color 0.25s ease,
    padding 0.25s ease;
}

/* Drop the divider on the row directly above an open card so its own border
   isn't doubled up by the divider line. */
.cci-accordion__item:has(+ .cci-accordion__item.is-open) {
  border-bottom: 0;
}

/* -------- Item: open = bordered card -------- */
.cci-accordion__item.is-open {
  background-color: var(--cci-acc-bg);
  border: 1px solid var(--cci-acc-border);
  border-radius: 12px;
  padding: 28px;
}

/* Template: cross list defaults the open-card border to the alert red. The
   "Open Card Border" control still overrides this whenever it's set. */
.cci-accordion--cross {
  --cci-acc-border: #cd1c18;
}

/* -------- Title / trigger -------- */
.cci-accordion__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.cci-accordion__trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* Right padding reserves room for the absolutely-positioned toggle, so the
     title text can never run underneath it regardless of flex support. */
  padding: 0 64px 0 0;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--cci-acc-title);
}

/* Defensive: Elementor's global kit styles target every <button> (incl. this
   trigger), overriding its layout (display/padding) and adding a fill, colour
   and radius on hover/focus. Scope under .cci-accordion to outrank
   `.elementor-kit-NN button` and keep the reserved padding + flat look in
   every state. */
.cci-accordion .cci-accordion__trigger,
.cci-accordion .cci-accordion__trigger:hover,
.cci-accordion .cci-accordion__trigger:focus,
.cci-accordion .cci-accordion__trigger:active {
  display: flex !important;
  padding: 0 64px 0 0 !important;
  white-space: normal !important;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--cci-acc-title);
}

/* -------- Leading item icon -------- */
.cci-accordion__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: var(--cci-acc-icon);
}

.cci-accordion__icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Default icon-image size (24px). !important so a theme's `.elementor img`
   (0,1,1) reset can't win the tie and squash the custom accordion icon image.
   The widget's Size control emits its own !important rule at higher specificity
   ({{WRAPPER}} …), so a per-widget override still wins over this baseline. */
.cci-accordion__icon img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

/* When the title wraps past two lines (mainly tablet/mobile), top-align the
   leading icon so it sits with the first line instead of floating in the
   vertical centre of the block. The --multiline flag is toggled by
   cci-accordion.js, since CSS on its own can't count lines. */
.cci-accordion__trigger--multiline .cci-accordion__icon {
  align-self: flex-start;
}

.cci-accordion__title-text {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* -------- +/- square toggle -------- */
/* Absolutely positioned at the top-right of the trigger, inside the reserved
   padding, so it sits clear of the (wrapping) title text.
   Scoped under .cci-accordion with !important on the box-defining properties so
   an Elementor kit / theme reset on `button span` can't collapse its width
   (~3px) or strip its radius — the same defensive approach the trigger uses. */
.cci-accordion .cci-accordion__toggle {
  position: absolute !important;
  top: 16px; /* half the 32px line-height: centres on the first line */
  right: 0;
  transform: translateY(-50%);
  display: block !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background-color: var(--cci-acc-toggle-bg);
  transition: background-color 0.25s ease;
}

/* Strokes are scoped + !important too, so the same kit / theme reset can't
   collapse them to a ~3px nub or strip their radius. */
.cci-accordion .cci-accordion__toggle::before,
.cci-accordion .cci-accordion__toggle::after {
  content: "";
  position: absolute !important;
  top: 50%;
  left: 50%;
  background-color: var(--cci-acc-toggle-icon);
  border-radius: 0 !important;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.cci-accordion .cci-accordion__toggle::before {
  width: 16px !important;
  height: 3px !important;
} /* horizontal stroke */

.cci-accordion .cci-accordion__toggle::after {
  width: 3px !important;
  height: 16px !important;
} /* vertical stroke -> makes a + */

/* Open/active: swap to the active background (default: invert to white so the
   minus stroke stands out). */
.cci-accordion__item.is-open .cci-accordion__toggle {
  background-color: var(--cci-acc-toggle-active-bg);
}

/* Open: recolour the remaining minus stroke with the active icon colour. */
.cci-accordion__item.is-open .cci-accordion__toggle::before {
  background-color: var(--cci-acc-toggle-active-icon);
}

/* Open: hide the vertical stroke so it reads as a - */
.cci-accordion__item.is-open .cci-accordion__toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* -------- Content panel -------- */
/* The item now owns the horizontal padding, so the panel sits flush inside it. */
.cci-accordion__panel {
  padding: 0;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--cci-acc-content);
}

/* When JS is active the panel animates open/closed via max-height. */
.cci-accordion.js-ready .cci-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* The open card carries the 40px padding itself, so the panel sits flush,
   with a 24px gap below the title. The leading icon + gap reserve space on the
   left so the content lines up under the title text. */
.cci-accordion.js-ready .cci-accordion__item.is-open .cci-accordion__panel {
  padding: 0;
  margin-top: 24px;
}

/* No-JS / pre-hydration fallback: keep panels visible (and crawlable). */
.cci-accordion:not(.js-ready) .cci-accordion__panel {
  padding: 16px 0 0;
}

.cci-accordion__panel > :first-child {
  margin-top: 0;
}

.cci-accordion__panel > :last-child {
  margin-bottom: 0;
}

.cci-accordion__panel a {
  color: #d3a64b;
}

.cci-accordion__panel a:hover,
.cci-accordion__panel a:focus {
  color: #a47910;
}

.cci-accordion__panel strong,
.cci-accordion__panel b {
  color: #ffffff;
}

/* -------- Tablet (<=1024px) -------- */
@media screen and (max-width: 1024px) {
  .cci-accordion__trigger {
    padding-right: 52px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    gap: 12px;
  }

  .cci-accordion .cci-accordion__trigger {
    padding: 0 52px 0 0 !important;
  }

  /* Icon size is set by the widget's responsive Size control (default 24px);
     no mobile baseline override needed. */

  /* Fallback sizes; the widget's responsive padding controls override these. */
  .cci-accordion__item {
    padding: 24px 24px;
  }

  .cci-accordion__item.is-open {
    padding: 24px;
  }

  .cci-accordion .cci-accordion__toggle {
    top: 14px; /* half the 28px mobile line-height */
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  .cci-accordion__panel {
    font-size: 16px;
    line-height: 24px;
  }
}