/**
 * AI Content Bridge — front-end content styles
 *
 * Scoped to `.acb-content`. The doubled class (`.acb-content.acb-content`) is a
 * deliberate specificity bump so our rules win against page builders (Elementor,
 * etc.) whose CSS loads after ours — without resorting to blanket !important.
 * A few contested typographic properties (heading font, body rhythm) use
 * !important so the editorial signature reliably shows; colours are NOT forced,
 * so it stays safe on light or dark themes.
 *
 * The accent is driven by `--acb-accent` (defined on :root so a brand-colour
 * setting injected at :root can override it; descendants inherit it).
 */

/* Fraunces — self-hosted variable font (wght 400–500, opsz 9–144).
   Licence: SIL Open Font License 1.1 — see fonts/OFL.txt in this plugin.
   Upstream: https://github.com/undercasetype/Fraunces */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-var.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root { --acb-accent: #10ACF5; }

.acb-content.acb-content {
  --acb-radius: 14px;
  --acb-radius-sm: 10px;
  --acb-ink: #16243a;
  --acb-body: #2f3e52;
  --acb-muted: #6b7a8d;
  --acb-line: #e6ecf3;
  --acb-card: #ffffff;
  --acb-tip: #0fa37f;
  --acb-warn: #c47714;

  font-size: 17px !important;
  line-height: 1.7 !important;
}

/* Rhythm — forced so the spacing reads through builder defaults */
.acb-content.acb-content p { margin: 0 0 1.15rem !important; }
.acb-content.acb-content h2 { font-size: 1.55em !important; line-height: 1.2 !important; font-weight: 600 !important; margin: 2.6rem 0 0.9rem !important; }
.acb-content.acb-content h3 { font-size: 1.2em !important; line-height: 1.25 !important; font-weight: 600 !important; margin: 1.8rem 0 0.6rem !important; }
.acb-content.acb-content ul, .acb-content.acb-content ol { margin: 1.15rem 0 !important; padding-left: 1.35rem !important; }
.acb-content.acb-content li { margin: 0.5rem 0; }
.acb-content.acb-content li::marker { color: var(--acb-accent); }
.acb-content.acb-content img { border-radius: var(--acb-radius-sm); height: auto; max-width: 100%; }

/* Serif is reserved for the page TITLE only (per the design draft). The theme
   renders the title outside our content wrapper, so we target the common title
   selectors directly. Body headings stay in the theme's sans — cleaner, not OTT.
   These rules load only on ACB-generated posts. */
.elementor-page-title .elementor-heading-title,
.elementor-widget-theme-post-title .elementor-heading-title,
.wp-block-post-title,
h1.entry-title, .entry-title {
  font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
  letter-spacing: -0.01em;
}

/* Eyebrow label */
.acb-content.acb-content .acb-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--acb-accent); margin: 0 0 12px; font-family: inherit;
}
.acb-content.acb-content .acb-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--acb-accent); }

/* Key takeaways / TL;DR */
.acb-content.acb-content .acb-takeaways {
  background: #f1faff;
  background: color-mix(in srgb, var(--acb-accent) 7%, #fff);
  border: 1px solid #cfeafb;
  border: 1px solid color-mix(in srgb, var(--acb-accent) 22%, #fff);
  border-radius: var(--acb-radius); padding: 22px 24px; margin: 1.8rem 0 2.2rem;
}
.acb-content.acb-content .acb-takeaways ul { margin: 0 !important; padding: 0 !important; list-style: none; }
.acb-content.acb-content .acb-takeaways li { position: relative; margin: 0; padding: 6px 0 6px 30px; color: var(--acb-ink); }
.acb-content.acb-content .acb-takeaways li::before { content: "\2713"; position: absolute; left: 0; top: 6px; color: var(--acb-accent); font-weight: 700; }

/* Callouts */
.acb-content.acb-content .acb-callout {
  margin: 1.7rem 0; padding: 16px 18px; border-radius: var(--acb-radius-sm);
  border: 1px solid var(--acb-line); border-left: 4px solid var(--acb-accent);
  background: #f4fbff; background: color-mix(in srgb, var(--acb-accent) 5%, #fff);
  color: var(--acb-body);
}
.acb-content.acb-content .acb-callout .acb-ct { display: block; margin-bottom: 2px; font-weight: 700; font-size: 0.92em; color: var(--acb-ink); }
.acb-content.acb-content .acb-callout p { margin: 0 !important; }
.acb-content.acb-content .acb-callout.tip { border-left-color: var(--acb-tip); background: #ecfaf4; background: color-mix(in srgb, var(--acb-tip) 6%, #fff); }
.acb-content.acb-content .acb-callout.tip .acb-ct { color: var(--acb-tip); }
.acb-content.acb-content .acb-callout.warn { border-left-color: var(--acb-warn); background: #fdf6ea; background: color-mix(in srgb, var(--acb-warn) 9%, #fff); }
.acb-content.acb-content .acb-callout.warn .acb-ct { color: var(--acb-warn); }

/* Step / process cards */
.acb-content.acb-content .acb-steps { margin: 1.8rem 0; display: grid; gap: 14px; }
.acb-content.acb-content .acb-step { position: relative; padding: 18px 20px 18px 64px; background: var(--acb-card); border: 1px solid var(--acb-line); border-radius: var(--acb-radius); color: var(--acb-body); }
.acb-content.acb-content .acb-step .acb-num { position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--acb-accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: inherit; }
.acb-content.acb-content .acb-step h3 { margin: 0 0 0.35rem !important; color: var(--acb-ink); font-family: inherit !important; }
.acb-content.acb-content .acb-step p { margin: 0 0 0.6rem !important; }
.acb-content.acb-content .acb-step > :last-child { margin-bottom: 0 !important; }

/* Tables */
.acb-content.acb-content .acb-tablewrap { margin: 1.8rem 0; overflow-x: auto; border: 1px solid var(--acb-line); border-radius: var(--acb-radius); }
.acb-content.acb-content .acb-tablewrap table { margin: 0; border: 0; }
.acb-content.acb-content table { width: 100%; border-collapse: collapse; }
.acb-content.acb-content thead th {
  text-align: left; font-weight: 700; padding: 13px 18px; color: var(--acb-ink);
  background: #e8f5fe; background: color-mix(in srgb, var(--acb-accent) 10%, #fff);
  border-bottom: 1px solid #cfeafb; border-bottom: 1px solid color-mix(in srgb, var(--acb-accent) 22%, #fff);
}
.acb-content.acb-content tbody td { padding: 12px 18px; border-bottom: 1px solid var(--acb-line); color: var(--acb-body); }
.acb-content.acb-content tbody tr:last-child td { border-bottom: none; }
.acb-content.acb-content tbody tr:nth-child(even) { background: #fafcfe; }
.acb-content.acb-content tbody td:first-child { font-weight: 600; color: var(--acb-ink); }

/* Pull quote (Markdown blockquote) */
.acb-content.acb-content blockquote {
  margin: 2.2rem 0 !important; padding: 6px 0 6px 24px !important; border-left: 4px solid var(--acb-accent);
  font-family: "Fraunces", Georgia, serif !important; font-style: italic; font-size: 1.3em; line-height: 1.45;
}
.acb-content.acb-content blockquote p { margin: 0 0 0.4rem !important; }
.acb-content.acb-content blockquote cite { font-family: inherit; font-style: normal; font-size: 0.62em; font-weight: 600; color: var(--acb-muted); }

/* FAQ accordions — native <details>, no JS */
.acb-content.acb-content .acb-faq { margin: 1.4rem 0; border: 1px solid var(--acb-line); border-radius: var(--acb-radius); overflow: hidden; background: var(--acb-card); }
.acb-content.acb-content .acb-faq details { border-bottom: 1px solid var(--acb-line); }
.acb-content.acb-content .acb-faq details:last-child { border-bottom: none; }
.acb-content.acb-content .acb-faq summary { list-style: none; cursor: pointer; padding: 17px 20px; font-weight: 600; color: var(--acb-ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.acb-content.acb-content .acb-faq summary::-webkit-details-marker { display: none; }
.acb-content.acb-content .acb-faq summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--acb-accent); border-bottom: 2px solid var(--acb-accent); transform: rotate(45deg); transition: transform 0.2s ease; }
.acb-content.acb-content .acb-faq details[open] summary { color: var(--acb-accent); }
.acb-content.acb-content .acb-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
.acb-content.acb-content .acb-faq .acb-faq-body { padding: 0 20px 18px; color: var(--acb-body); }
.acb-content.acb-content .acb-faq .acb-faq-body p { margin: 0 0 0.8rem !important; }
.acb-content.acb-content .acb-faq .acb-faq-body p:last-child { margin-bottom: 0 !important; }

/* Attribution (free tier only) */
.acb-content.acb-content .acb-attrib { margin: 2.4rem 0 0; }
.acb-content.acb-content .acb-attrib span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8em; color: var(--acb-muted); }
.acb-content.acb-content .acb-attrib b { color: var(--acb-accent); font-weight: 700; }

@media (max-width: 560px) { .acb-content.acb-content { font-size: 16px !important; } }