/*
 * CQIP Retrofit Styles — notarypublicinwallington.co.uk
 *
 * Scoped to [data-cqip-block] and .cqip-* selectors only.
 * Does not override or conflict with the site's existing style.css.
 *
 * Load order: after style.css
 * <link rel="stylesheet" href="../cqip-retrofit.css">
 *
 * Current scope:
 *   - FAQ block (ready for when FAQ items are added)
 *   - Schema debug indicator (development only)
 *   - Credential badge styling (Compliance-equivalent)
 *
 * Does nothing visible until CQIP block markup is added to pages.
 */

/* ── CSS custom properties — aligned with site palette ───────
   The site uses CSS variables defined in style.css.
   These CQIP variables mirror them to keep retrofit blocks
   consistent without requiring style.css to be modified.
   ─────────────────────────────────────────────────────────── */
:root {
  --cqip-r-primary:   var(--navy-blue,    #1a2e4a);
  --cqip-r-accent:    var(--grey-accent,  #8a9ab0);
  --cqip-r-light:     var(--light-grey,   #f5f6f8);
  --cqip-r-text:      var(--dark-text,    #2d2d2d);
  --cqip-r-text2:     #555;
  --cqip-r-border:    var(--grey-accent,  #d0d5dd);
  --cqip-r-ok:        #1a6b31;
  --cqip-r-star:      #b8960c;
  --cqip-r-font:      inherit;          /* picks up site body font */
  --cqip-r-mono:      'JetBrains Mono', 'Courier New', monospace;
}

/* ── Block wrapper ───────────────────────────────────────────── */
[data-cqip-block] {
  margin: 32px 0;
}

/* ── FAQ block ───────────────────────────────────────────────── */
/*
 * Applied when a FAQ block is added to the page.
 * Styled to match the site's existing .content-section aesthetic —
 * navy left-border accent, clean open typography.
 */
[data-cqip-block="faq"] {
  margin: 40px 0;
}

.cqip-r-faq__heading {
  color:         var(--cqip-r-primary);
  border-left:   5px solid var(--cqip-r-accent);
  padding-left:  15px;
  margin-bottom: 24px;
  font-size:     1.4em;
}

.cqip-r-faq__list {
  list-style: none;
  padding:    0;
  margin:     0;
}

/* FAQ accordion item */
.cqip-r-faq-item {
  border-bottom: 1px solid var(--cqip-r-border);
}
.cqip-r-faq-item:first-child {
  border-top: 1px solid var(--cqip-r-border);
}

/* Question trigger */
.cqip-r-faq-item__question {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             16px;
  padding:         16px 0;
  cursor:          pointer;
  color:           var(--cqip-r-primary);
  font-size:       1em;
  font-weight:     600;
  line-height:     1.45;
  margin:          0;
  user-select:     none;
  list-style:      none;
}
.cqip-r-faq-item__question::-webkit-details-marker { display: none; }

.cqip-r-faq-item__icon {
  color:       var(--cqip-r-primary);
  font-size:   1.2em;
  font-weight: 300;
  flex-shrink: 0;
  line-height: 1.45;
  transition:  transform 0.2s ease;
}
.cqip-r-faq-item.is-open .cqip-r-faq-item__icon {
  transform: rotate(45deg);
}

/* Answer panel */
.cqip-r-faq-item__answer {
  display:     none;
  padding:     0 0 20px;
  color:       var(--cqip-r-text2);
  font-size:   0.95em;
  line-height: 1.7;
}
.cqip-r-faq-item.is-open .cqip-r-faq-item__answer {
  display: block;
}
.cqip-r-faq-item__answer p {
  margin: 0 0 12px;
}
.cqip-r-faq-item__answer p:last-child {
  margin-bottom: 0;
}

/* ── Credential / compliance badges ──────────────────────────── */
/*
 * For displaying the Faculty Office credential and other
 * qualifications in a structured way if added to the about page.
 */
.cqip-r-credential-list {
  list-style:    none;
  padding:       0;
  margin:        24px 0;
  display:       flex;
  flex-direction: column;
  gap:           12px;
}

.cqip-r-credential {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  padding:       14px 16px;
  background:    var(--cqip-r-light);
  border-left:   3px solid var(--cqip-r-primary);
  border-radius: 0 4px 4px 0;
}

.cqip-r-credential__icon {
  color:       var(--cqip-r-ok);
  font-size:   1.1em;
  line-height: 1.5;
  flex-shrink: 0;
}

.cqip-r-credential__body { flex: 1; }

.cqip-r-credential__name {
  font-weight:   600;
  color:         var(--cqip-r-primary);
  display:       block;
  margin-bottom: 2px;
  font-size:     0.95em;
}

.cqip-r-credential__issuer {
  font-size:  0.82em;
  color:      var(--cqip-r-text2);
  font-style: italic;
}

.cqip-r-credential__badge {
  font-size:    0.72em;
  font-family:  var(--cqip-r-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:      2px 7px;
  border-radius: 3px;
  background:   #dcfce7;
  color:        var(--cqip-r-ok);
  border:       1px solid #86efac;
  white-space:  nowrap;
  align-self:   flex-start;
  flex-shrink:  0;
}

/* ── Schema debug indicator (dev only) ───────────────────────── */
/*
 * Shows a small indicator in the bottom-right corner when
 * data-cqip-debug="true" is present on the <body> element.
 * Remove or leave — invisible in production since the attribute
 * is never set on live pages.
 */
[data-cqip-debug="true"]::after {
  content:        'CQIP Schema Active';
  position:       fixed;
  bottom:         12px;
  right:          12px;
  z-index:        9999;
  background:     var(--cqip-r-primary);
  color:          #fff;
  font-family:    var(--cqip-r-mono);
  font-size:      10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        4px 10px;
  border-radius:  3px;
  pointer-events: none;
  opacity:        0.85;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cqip-r-credential {
    flex-wrap: wrap;
  }
  .cqip-r-credential__badge {
    align-self: auto;
  }
}