/* FAQ block — colors ALWAYS come from the site theme.
   We do not set plugin color tokens. Only typography tokens are set inline. */

.di-faq-block{
  /* Theme-driven tokens with safe fallbacks */
  --_text:         var(--di-theme-text,       var(--theme-text,       var(--wp--preset--color--foreground, #1f2937)));
  --_bg:           var(--di-theme-bg,         var(--theme-bg,         var(--wp--preset--color--background, transparent)));
  --_title-color:  var(--di-theme-heading,    var(--theme-heading,    var(--wp--preset--color--foreground, #111)));
  --_q-color:      var(--di-theme-heading,    var(--theme-heading,    var(--wp--preset--color--foreground, #111)));
  --_border-color: var(--di-theme-border,     var(--theme-border,     rgba(0,0,0,.12)));
  --_accent:       var(--di-theme-accent,     var(--theme-accent,     #2563eb));

  /* Typography defaults (may be overridden inline by PHP) */
  --_title-size: var(--di-faq-title-size, 1.25rem);
  --_q-size:     var(--di-faq-q-size, 1.05rem);
  --_a-size:     var(--di-faq-a-size, 1rem);
  --_title-w:    var(--di-faq-title-w, 700);
  --_q-w:        var(--di-faq-q-w, 700);
  --_a-w:        var(--di-faq-a-w, 400);

  color: var(--_text);
  background: var(--_bg);
  padding: 1.25rem;
  border-radius: 12px;
  margin: 1.5rem 0;
}

/* Let your theme’s dark switch override via common selectors */
html[data-theme="dark"] .di-faq-block,
body[data-theme="dark"] .di-faq-block,
.theme-dark .di-faq-block,
.dark .di-faq-block,
.dark-mode .di-faq-block,
.is-dark-theme .di-faq-block,
.has-dark-theme .di-faq-block,
.color-scheme-dark .di-faq-block{
  --_text:         var(--di-theme-text-dark,     var(--theme-text-dark,     var(--_text)));
  --_bg:           var(--di-theme-bg-dark,       var(--theme-bg-dark,       var(--_bg)));
  --_title-color:  var(--di-theme-heading-dark,  var(--theme-heading-dark,  var(--_title-color)));
  --_q-color:      var(--di-theme-heading-dark,  var(--theme-heading-dark,  var(--_q-color)));
  --_border-color: var(--di-theme-border-dark,   var(--theme-border-dark,   var(--_border-color)));
  --_accent:       var(--di-theme-accent-dark,   var(--theme-accent-dark,   var(--_accent)));
  color: var(--_text);
  background: var(--_bg);
}

/* Title / items / styles */
.di-faq-title{ margin:0 0 .8rem 0; font-size:var(--_title-size); font-weight:var(--_title-w); color:var(--_title-color); }
.di-faq-item{ padding:.4rem 0; }
.di-faq-item + .di-faq-item{ margin-top:.9rem; }

/* Q & A text (non-accordion) */
.di-faq-q{ font-size:var(--_q-size); font-weight:var(--_q-w); color:var(--_q-color); display:flex; align-items:center; gap:.5rem; }
.di-faq-a{ margin-top:.35rem; font-size:var(--_a-size); font-weight:var(--_a-w); line-height:1.55; }

/* Accordion behaviour via <details>/<summary> */
.di-faq-items[data-accordion="1"] details{ border-radius:10px; }
.di-faq-items[data-accordion="1"] .di-faq-q{ cursor:pointer; list-style:none; }
.di-faq-items[data-accordion="1"] summary::-webkit-details-marker{ display:none; }
.di-faq-items[data-accordion="1"] summary::after{ content:"+"; margin-left:auto; font-weight:700; }
.di-faq-items[data-accordion="1"] details[open] summary::after{ content:"–"; }
.di-faq-items[data-accordion="1"] .di-faq-a{ padding:.3rem 0 .2rem; }

/* Styles (kept simple; no color-mix) */
.di-faq-style-minimal{ border:0; background:var(--_bg); }
.di-faq-style-lined .di-faq-item + .di-faq-item{ border-top:1px dashed var(--_border-color); padding-top:.9rem; }
.di-faq-style-card{ background: var(--_bg); border:1px solid var(--_border-color); }
.di-faq-style-card .di-faq-item + .di-faq-item{ border-top:1px solid var(--_border-color); padding-top:.9rem; }
.di-faq-style-soft{ background: var(--_bg); border:1px solid var(--_border-color); }
.di-faq-style-shadow{ background: var(--_bg); box-shadow:0 6px 20px rgba(0,0,0,.08); border:1px solid var(--_border-color); }
.di-faq-style-accent .di-faq-item{ border-left:4px solid var(--_accent); padding-left:.75rem; }
.di-faq-style-accent .di-faq-item + .di-faq-item{ margin-top:1rem; }

.di-faq-q strong, .di-faq-a strong{ font-weight:var(--_q-w); margin-right:.2rem; }