/* ============================================================
   Category archive intro + FAQ
   File: mcakey-functions/assets/css/category-content.css
   Shortcodes: [mca_category_content] (.mca-cat-content)
               [mca_category_faq]     (.mca-cat-faq)

   Brand vars (Elementor globals):
     --e-global-color-primary:   #1E90FF
     --e-global-color-secondary: #0D3B2E
     --e-global-color-text:      #1A1A1A
     --e-global-color-accent:    #7FD820

   Reuses the same type scale/greys as product-desc.css's .mpd-* pattern
   (34px/700 section headings, #dde0e5 hairlines, #4a5260 secondary text)
   so this reads as the same design language, not a bolted-on block.
   ============================================================ */

.mca-cat-content,
.mca-cat-content * ,
.mca-cat-faq,
.mca-cat-faq * {
  box-sizing: border-box;
}

/* ── INTRO (H1 + paragraph) ──────────────────────────────────
   Left-aligned like a normal page title, not centered marketing
   copy — this sits right below the category grid, above the
   product listing + sidebar. */
.mca-cat-content {
  padding: 32px 0 8px;
}

.mca-cat-content__h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--e-global-color-text, #1A1A1A);
  margin: 0;
}

/* Interactive (toggle) variant — only applied when there's an intro to
   expand; a category with no intro text renders a plain, non-interactive
   H1 instead (see render_intro_shortcode()). */
.mca-cat-content__h1[role="button"] {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.mca-cat-content__h1[role="button"]:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #1E90FF);
  outline-offset: 4px;
}

.mca-cat-content__h1-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.mca-cat-content__h1-icon::before,
.mca-cat-content__h1-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--e-global-color-primary, #1E90FF);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.mca-cat-content__h1-icon::before {
  width: 16px;
  height: 2px;
}

.mca-cat-content__h1-icon::after {
  width: 2px;
  height: 16px;
}

.mca-cat-content__h1[aria-expanded="true"] .mca-cat-content__h1-icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

.mca-cat-content__intro {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: #4a5260;
}

.mca-cat-content__intro p {
  margin: 0 0 10px;
}

.mca-cat-content__intro p:last-child {
  margin-bottom: 0;
}

/* ── FAQ (collapsed by default) ──────────────────────────────
   Placed as the last section on the page, after the sidebar +
   product grid — a single toggle rather than an accordion per
   question, so it stays out of the way until someone wants it. */
.mca-cat-faq {
  max-width: 820px;
  margin: 40px auto 0;
  padding: 32px 0 0;
  border-top: 1px solid #dde0e5;
}

.mca-cat-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 24px;
  background: #ffffff;
  border: 1px solid #dde0e5;
  border-radius: 10px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--e-global-color-text, #1A1A1A);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.mca-cat-faq__toggle:hover,
.mca-cat-faq__toggle:focus-visible {
  background: #f4f6f8;
}

.mca-cat-faq__toggle-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: 16px;
}

.mca-cat-faq__toggle-icon::before,
.mca-cat-faq__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--e-global-color-primary, #1E90FF);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.mca-cat-faq__toggle-icon::before {
  width: 14px;
  height: 2px;
}

.mca-cat-faq__toggle-icon::after {
  width: 2px;
  height: 14px;
}

.mca-cat-faq__toggle[aria-expanded="true"] .mca-cat-faq__toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

.mca-cat-faq__panel {
  padding: 8px 4px 0;
}

.mca-cat-faq__item {
  padding: 24px 0;
  border-bottom: 1px solid #dde0e5;
}

.mca-cat-faq__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mca-cat-faq__q {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--e-global-color-text, #1A1A1A);
  margin: 0 0 8px;
}

.mca-cat-faq__a {
  font-size: 15px;
  line-height: 1.6;
  color: #4a5260;
  margin: 0;
}

@media (max-width: 767px) {
  .mca-cat-content__h1 {
    font-size: 26px;
  }

  .mca-cat-faq__toggle {
    font-size: 16px;
    padding: 14px 18px;
  }
}