/* =========================================================
   FAQ — .cg-faq-v2
   Elementor widget. A scoped port of the FAQ section from the
   reference build (D:/Raghesh/Color Graphics/new — index.html
   `<section class="cg-faq">` plus the "FAQ — cg-faq" block of
   assets/css/style.css).

   Only the section-specific rules are ported. Everything the
   section leans on already ships globally with this theme, with
   the same values as the reference, so it is reused rather than
   redefined (no duplicate design system):
     - tokens.css : --n-0/25/600/700/950, --accent-100/300/500,
                    --border-subtle, --font-mono
     - style.css  : --font-display, and the .cg-container helper

   `.cg-min0` (min-width:0) is global in the theme too, but is
   inlined into the scoped rule below so the widget never depends
   on a global utility class existing.

   THE ACCORDION IS CSS. The reference opens an answer by moving a
   grid row from 0fr to 1fr over 320ms — no height measuring, no
   JavaScript animation. The script only toggles `is-open` and
   `aria-expanded`; everything visual happens here.

   Breakpoints are the reference's own: 1239px (column gap),
   1023px (the grid stacks and the aside stops sticking) and 999px
   (typography and padding). They are NOT interchangeable — 1023
   and 999 do different jobs in the original.
   ========================================================= */

/*
 * Outer padding. ONE declaration per side, resolved in order of how
 * specific the intent is: the Padding control (--cg-fq2-pad-*) first, then
 * the older Top/Bottom sliders (--cg-fq2-pad-top/-bottom), then the design's
 * own value. Nothing here competes on specificity, so with every control
 * left alone the numbers below are what render — exactly as before.
 *
 * The design has no horizontal padding of its own: the side gutter belongs
 * to .cg-container. 0 keeps that true until someone asks for otherwise.
 */
.cg-faq-v2 {
  position: relative;
  padding-top: var(--cg-fq2-pad-t, var(--cg-fq2-pad-top, 128px));
  padding-right: var(--cg-fq2-pad-r, 0px);
  padding-bottom: var(--cg-fq2-pad-b, var(--cg-fq2-pad-bottom, 112px));
  padding-left: var(--cg-fq2-pad-l, 0px);
  background: var(--cg-fq2-bg, var(--n-25));
  color: var(--n-950);
}
@media (max-width: 999px) {
  .cg-faq-v2 {
    padding-top: var(--cg-fq2-pad-t, var(--cg-fq2-pad-top, 72px));
    padding-bottom: var(--cg-fq2-pad-b, var(--cg-fq2-pad-bottom, 64px));
  }
}

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

/* Editor-only placeholder when nothing is configured. */
.cg-faq-v2__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 40px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  color: var(--n-600);
  border: 1px dashed var(--border-subtle);
}

/* ---------------------------------------------------------
   DECORATIVE RING
   The layer clips, which is what stops the oversized circle
   widening the page — the ring itself sits partly outside the
   section on purpose.
   --------------------------------------------------------- */

.cg-faq-v2__ring-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  display: block;
}

.cg-faq-v2__ring {
  position: absolute;
  left: var(--cg-fq2-ring-x, 4%);
  bottom: var(--cg-fq2-ring-y, -26%);
  width: var(--cg-fq2-ring-size, 560px);
  height: var(--cg-fq2-ring-size, 560px);
  border-radius: 50%;
  border: 1px solid var(--cg-fq2-ring-color, var(--accent-300));
  opacity: var(--cg-fq2-ring-opacity, .35);
  display: block;
}
@media (max-width: 999px) {
  .cg-faq-v2__ring {
    left: var(--cg-fq2-ring-x, -40%);
    bottom: var(--cg-fq2-ring-y, -30%);
    width: var(--cg-fq2-ring-size, 420px);
    height: var(--cg-fq2-ring-size, 420px);
  }
}

/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

/*
 * The two shapes the grid can take. Naming them lets the per-band layout
 * controls hand CSS one of the two by name instead of re-stating the track
 * list, and keeps the 38/62 split editable in one place.
 */
.cg-faq-v2 {
  --cg-fq2-split:
    minmax(0, var(--cg-fq2-col-aside, 38fr))
    minmax(0, var(--cg-fq2-col-list, 62fr));
  --cg-fq2-stack: minmax(0, 1fr);
}

.cg-faq-v2__grid {
  position: relative;
  display: grid;
  row-gap: 48px;
  align-items: start;
}

/*
 * Four NON-OVERLAPPING bands, so a setting made for one width cannot leak
 * into another. The edges are the theme's own — 1240 and 768 as the header
 * and footer use them, and 1024 where the reference's FAQ actually stacks —
 * not Elementor's generic device tabs. Each band's fallback IS the reference
 * design, so an untouched widget looks exactly like the source.
 */
@media (min-width: 1240px) {
  .cg-faq-v2__grid {
    grid-template-columns: var(--cg-fq2-cols, var(--cg-fq2-split));
    column-gap: var(--cg-fq2-gap, 88px);
  }
}
@media (min-width: 1024px) and (max-width: 1239px) {
  .cg-faq-v2__grid {
    grid-template-columns: var(--cg-fq2-cols-tl, var(--cg-fq2-split));
    column-gap: var(--cg-fq2-gap-tl, 48px);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cg-faq-v2__grid {
    grid-template-columns: var(--cg-fq2-cols-tp, var(--cg-fq2-stack));
    column-gap: var(--cg-fq2-gap-tp, 48px);
  }
}
@media (max-width: 767px) {
  .cg-faq-v2__grid {
    grid-template-columns: var(--cg-fq2-cols-mob, var(--cg-fq2-stack));
    column-gap: var(--cg-fq2-gap-mob, 48px);
  }
}

/* With only one of the two columns present the remaining one takes the
   full measure instead of sitting in a 38fr/62fr track. This wins over every
   band above, so a section with no intro is never left with an empty track. */
.cg-faq-v2 .cg-faq-v2__grid--single { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------
   ASIDE
   --------------------------------------------------------- */

.cg-faq-v2__aside {
  position: sticky;
  top: var(--cg-fq2-sticky-top, 112px);
  min-width: 0;
}
@media (max-width: 1023px) {
  .cg-faq-v2__aside { position: static; }
}
/* A stacked grid has nothing to scroll past, so pinning is dropped there
   too — whatever width the stack was chosen at. */
.cg-faq-v2__grid--single .cg-faq-v2__aside { position: static; }

.cg-faq-v2__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cg-fq2-kicker-color, var(--accent-500));
}

.cg-faq-v2__kicker-rule {
  display: block;
  width: var(--cg-fq2-rule-w, 34px);
  height: var(--cg-fq2-rule-h, 3px);
  margin-top: var(--cg-fq2-rule-gap, 14px);
  background: var(--cg-fq2-rule-color, var(--accent-500));
}

.cg-faq-v2__title {
  margin: 34px 0 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 3.8vw, 62px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.04em;
  color: var(--n-950);
}
@media (max-width: 999px) {
  .cg-faq-v2__title { margin-top: 26px; font-size: clamp(34px, 9vw, 44px); }
}
/* One authored line per block, exactly as the reference's three spans. */
.cg-faq-v2__title span { display: block; }
.cg-faq-v2__accent { font-style: normal; color: var(--cg-fq2-accent, var(--accent-500)); }
/* With no eyebrow above it the heading's top margin reads as stray space. */
.cg-faq-v2__title--flush { margin-top: 0; }

.cg-faq-v2__lede {
  margin: 28px 0 0;
  max-width: var(--cg-fq2-lede-max, 38ch);
  font-size: 16px;
  line-height: 1.75;
  color: var(--n-600);
  text-wrap: pretty;
}
@media (max-width: 999px) {
  .cg-faq-v2__lede { margin-top: 22px; font-size: 15px; }
}

/* ---------------------------------------------------------
   CONTACT CARD
   --------------------------------------------------------- */

.cg-faq-v2__contact-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: var(--cg-fq2-contact-gap, 40px);
  max-width: var(--cg-fq2-contact-max, 380px);
  padding: var(--cg-fq2-contact-pad, 20px 22px);
  background: var(--cg-fq2-contact-bg, var(--n-0));
  border: var(--cg-fq2-contact-border-w, 1px) solid var(--cg-fq2-contact-border, var(--border-subtle));
  border-radius: var(--cg-fq2-contact-radius, 14px);
  box-shadow: 0 1px 2px rgba(11, 12, 15, .04);
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
@media (max-width: 999px) {
  .cg-faq-v2__contact-card { margin-top: var(--cg-fq2-contact-gap, 28px); }
}

/* Only the linked variant is interactive; a card with no URL is plain
   content and must not present itself as a link. */
a.cg-faq-v2__contact-card:hover,
a.cg-faq-v2__contact-card:focus-visible {
  border-color: var(--cg-fq2-contact-border-hover, var(--accent-300));
  box-shadow: 0 12px 32px rgba(11, 12, 15, .07);
}
a.cg-faq-v2__contact-card:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.cg-faq-v2__contact-icon {
  flex: 0 0 auto;
  width: var(--cg-fq2-contact-icon-box, 56px);
  height: var(--cg-fq2-contact-icon-box, 56px);
  border-radius: 50%;
  background: var(--cg-fq2-contact-icon-bg, var(--accent-100));
  color: var(--cg-fq2-contact-icon-color, var(--accent-500));
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-faq-v2__contact-icon svg { display: block; width: var(--cg-fq2-contact-icon-size, 22px); height: var(--cg-fq2-contact-icon-size, 22px); }
.cg-faq-v2__contact-icon i { font-size: var(--cg-fq2-contact-icon-size, 22px); line-height: 1; font-style: normal; }

/* min-width:0 so a long unbroken word cannot widen the card. */
.cg-faq-v2__contact-body { min-width: 0; }
.cg-faq-v2__contact-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--n-950);
  overflow-wrap: anywhere;
}
.cg-faq-v2__contact-sub {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--n-600);
  overflow-wrap: anywhere;
}
.cg-faq-v2__contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cg-fq2-contact-cta-color, var(--accent-500));
}
.cg-faq-v2__contact-cta svg { flex: 0 0 auto; }

/* ---------------------------------------------------------
   LIST
   --------------------------------------------------------- */

.cg-faq-v2__list {
  display: flex;
  flex-direction: column;
  gap: var(--cg-fq2-item-gap, 14px);
  min-width: 0;
}
@media (max-width: 999px) {
  .cg-faq-v2__list { gap: var(--cg-fq2-item-gap, 12px); }
}

.cg-faq-v2__item {
  background: var(--cg-fq2-item-bg, var(--n-0));
  border: var(--cg-fq2-item-border-w, 1px) solid var(--cg-fq2-item-border, var(--border-subtle));
  border-radius: var(--cg-fq2-item-radius, 14px);
  box-shadow: none;
  transition: border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}
.cg-faq-v2__item.is-open {
  background: var(--cg-fq2-item-bg-open, var(--cg-fq2-item-bg, var(--n-0)));
  border-color: var(--cg-fq2-item-border-open, var(--accent-300));
  box-shadow: 0 12px 32px rgba(11, 12, 15, .06);
}

.cg-faq-v2__item-btn {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: var(--cg-fq2-row-min-h, 64px);
  padding: var(--cg-fq2-q-pad, 18px 26px);
  background: transparent;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
@media (max-width: 999px) {
  .cg-faq-v2__item-btn { gap: 14px; padding: var(--cg-fq2-q-pad, 16px 18px); }
}
.cg-faq-v2__item-btn:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
}

.cg-faq-v2__item-n {
  flex: 0 0 auto;
  width: var(--cg-fq2-n-size, 38px);
  height: var(--cg-fq2-n-size, 38px);
  border-radius: 50%;
  background: var(--cg-fq2-n-bg, var(--accent-100));
  color: var(--cg-fq2-n-color, var(--accent-500));
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cg-faq-v2__item-q {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.4;
  color: var(--cg-fq2-q-color, var(--n-950));
  overflow-wrap: anywhere;
  transition: color 240ms ease;
}
@media (max-width: 999px) {
  .cg-faq-v2__item-q { font-size: 15px; }
}
.cg-faq-v2__item.is-open .cg-faq-v2__item-q { color: var(--cg-fq2-q-color-open, var(--cg-fq2-q-color, var(--n-950))); }

/* --- plus becomes minus: the vertical bar collapses --- */
.cg-faq-v2__item-icon {
  flex: 0 0 auto;
  position: relative;
  width: var(--cg-fq2-icon-size, 18px);
  height: var(--cg-fq2-icon-size, 18px);
  color: var(--cg-fq2-icon-color, var(--n-700));
  transition: color 240ms ease;
}
.cg-faq-v2__item.is-open .cg-faq-v2__item-icon { color: var(--cg-fq2-icon-color-open, var(--accent-500)); }

.cg-faq-v2__item-icon-h {
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  width: 100%;
  height: 2px;
  background: currentColor;
}
.cg-faq-v2__item-icon-v {
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  width: 2px;
  height: 100%;
  background: currentColor;
  transform: scaleY(1);
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
}
.cg-faq-v2__item.is-open .cg-faq-v2__item-icon-v { transform: scaleY(0); }

/* --- the answer: a grid row from 0fr to 1fr, no height measuring --- */
.cg-faq-v2__item-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--cg-fq2-anim, 320ms) cubic-bezier(.16, 1, .3, 1);
}
.cg-faq-v2__item.is-open .cg-faq-v2__item-body { grid-template-rows: 1fr; }
.cg-faq-v2__item-body-inner { overflow: hidden; }

.cg-faq-v2__item-answer {
  padding: var(--cg-fq2-a-pad, 18px 0 24px);
  border-top: 1px solid var(--cg-fq2-a-rule, var(--accent-100));
  margin: 0 26px 0 84px;
}
@media (max-width: 999px) {
  .cg-faq-v2__item-answer { padding: var(--cg-fq2-a-pad, 16px 0 20px); margin: 0 18px; }
}

.cg-faq-v2__item-answer p {
  margin: 0;
  max-width: var(--cg-fq2-a-max, 60ch);
  font-size: 15px;
  line-height: 1.75;
  color: var(--cg-fq2-a-color, var(--n-600));
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
@media (max-width: 999px) {
  .cg-faq-v2__item-answer p { font-size: 14px; }
}
.cg-faq-v2__item-answer p + p { margin-top: 12px; }

/* ---------------------------------------------------------
   MOTION PREFERENCES
   The accordion still opens and closes — only the easing goes.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cg-faq-v2__item,
  .cg-faq-v2__item-body,
  .cg-faq-v2__item-icon-v,
  .cg-faq-v2__item-icon,
  .cg-faq-v2__item-q,
  .cg-faq-v2__contact-card {
    transition-duration: 1ms;
  }
}