/* Capitol Content Studio — FAQ accordion styling for blog posts.
 * Replicates the market-page FAQ element styling (dividers, item padding, and
 * the open/animation come from the theme's .brxe-block.capo-faq* rules; this
 * file adds the per-element typography + circled icon that the market template
 * sets in Bricks). Selectors are nested under .brxe-text-basic (the post body)
 * so they out-specify the general post-heading rule in the theme. */

.brxe-text-basic .cocs-faq {
  margin: var(--space-l) 0;
}

/* ── Stacked layout: full-width headline block, accordion below ────────── */
.brxe-text-basic .cocs-faq--split {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.brxe-text-basic .cocs-faq-aside {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  width: 100%;
}
.brxe-text-basic .cocs-faq-list { width: 100%; }

/* Red "FAQS" eyebrow */
.brxe-text-basic .cocs-faq-eyebrow {
  color: var(--red);
  font-family: "VC Nudge Condensed", sans-serif;
  font-weight: 600;
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-2xs);
}

/* Left-rail heading — larger, market maroon */
.brxe-text-basic .cocs-faq .cocs-faq-heading {
  font-family: "VC Nudge Condensed", sans-serif;
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--red-d-4, #431515);
  margin: 0 0 var(--space-m);
}

/* Contact button — brand red with the offset shadow */
.brxe-text-basic .cocs-faq-cta {
  display: inline-block;
  background: var(--red);
  color: var(--tertiary, #fff);
  font-family: "VC Nudge Condensed", sans-serif;
  font-weight: 600;
  font-size: var(--text-m);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 0.55em 1.5em;
  border-radius: var(--radius-s, 6px);
  box-shadow: 4px 4px 0 var(--secondary, #111);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.brxe-text-basic .cocs-faq-cta:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--secondary, #111);
  color: var(--tertiary, #fff);
}

@media (max-width: 860px) {
  .brxe-text-basic .cocs-faq--split { grid-template-columns: 1fr; gap: var(--space-m); }
  .brxe-text-basic .cocs-faq-aside { position: static; }
  .brxe-text-basic .cocs-faq .cocs-faq-heading { font-size: var(--text-xl); }
}

/* Question rows: VC Nudge Condensed medium, uppercase, --text-m (from mk0029) */
.brxe-text-basic .cocs-faq .capo-faq-q h3,
.brxe-text-basic .cocs-faq .capo-faq-q .brxe-heading {
  font-family: "VC Nudge Condensed", sans-serif;
  font-weight: 500;
  font-size: var(--text-m);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--secondary, #1a1a1a);
}

/* Circled +/× icon (from mk0030: 1.5px solid #1a1a1a, radius 999, 7px padding) */
.brxe-text-basic .cocs-faq .capo-faq-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #1a1a1a;
  border-radius: 50%;
  color: #1a1a1a;
  box-sizing: border-box;
}
.brxe-text-basic .cocs-faq .capo-faq-icon svg { display: block; width: 14px; height: 14px; }

/* Answer text tone matches the market (mk0032: secondary-80) */
.brxe-text-basic .cocs-faq .capo-faq-a,
.brxe-text-basic .cocs-faq .capo-faq-a p {
  color: var(--secondary-80);
}