/**
 * 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; } }

/* AICOBR_CLUSTER_SHORTCODE_2026_08 — [aicobr_cluster] links block.
   Scoped to .acb-cluster (NOT .acb-content) because this renders on the user's
   own pillar page, which ACB did not write and must not restyle. Deliberately
   quiet: it inherits the theme's fonts and only borrows the accent colour. */
.acb-cluster { margin: 2.2rem 0; }
.acb-cluster .acb-cluster__heading { margin: 0 0 1rem; font-size: 1.25em; line-height: 1.3; }
.acb-cluster .acb-cluster__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.acb-cluster .acb-cluster__item { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--acb-line, rgba(0,0,0,0.1)); }
.acb-cluster .acb-cluster__item:first-child { border-top: 1px solid var(--acb-line, rgba(0,0,0,0.1)); }
.acb-cluster .acb-cluster__link { display: block; font-weight: 600; text-decoration: none; color: var(--acb-accent, #10ACF5); }
.acb-cluster .acb-cluster__link:hover,
.acb-cluster .acb-cluster__link:focus-visible { text-decoration: underline; }
.acb-cluster .acb-cluster__excerpt { display: block; margin-top: 5px; font-size: 0.9em; line-height: 1.55; color: var(--acb-muted, #6b7280); }
@media (min-width: 720px) { .acb-cluster .acb-cluster__list { grid-template-columns: 1fr 1fr; gap: 0 32px; } }
.acb-cluster__notice { margin: 1.5rem 0; padding: 12px 16px; border: 1px dashed var(--acb-line, rgba(0,0,0,0.18)); border-radius: 6px; font-size: 0.9em; color: var(--acb-muted, #6b7280); }

/* AICOBR_INBODY_IMAGES_2026_08 — in-body image figures.

   Scoped to .acb-fig rather than to .acb-content, for the same reason as
   .acb-cluster above: the [content_image] fallback shortcode is placed on posts
   ACB would NOT edit (page-builder pages), which by definition carry no
   .acb-content wrapper. A directly-inserted figure additionally picks up the
   .acb-content.acb-content specificity bump further down, so both routes look
   identical.

   Three layouts, each generated at the aspect ratio it is rendered at:
     band          full column width, 3:2 (1536x1024)
     inline-left   ~40% column, text wraps right, 2:3 (1024x1536)
     inline-right  ~40% column, text wraps left,  2:3 (1024x1536)
   Free tier renders every layout as a band (gpt-image-1-mini is landscape-only),
   so nothing here may assume a portrait file is present for an inline class. */
.acb-fig { margin: 1.8rem 0; }
.acb-fig img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--acb-radius-sm, 8px); }
.acb-fig figcaption {
  margin-top: 0.55rem;
  font-size: 0.86em;
  line-height: 1.5;
  opacity: 0.75;
}

.acb-fig--band { margin: 2.2rem 0; }
.acb-fig--band img { max-height: 62vh; object-fit: cover; }

/* Floats. width is on the FIGURE, not the image, so the caption wraps with it.
   max-width in ch keeps a float from eating a narrow column on a theme with a
   tight content width — the failure mode is a two-word-per-line text gutter. */
.acb-fig--inline-left,
.acb-fig--inline-right {
  width: 40%;
  max-width: 22rem;
  margin-top: 0.35rem;
  margin-bottom: 1.1rem;
}
.acb-fig--inline-left  { float: left;  margin-right: 1.6rem; }
.acb-fig--inline-right { float: right; margin-left: 1.6rem; }

/* A float must never escape its section and slide under what follows.
   Headings were doing this already; everything else that is a BLOCK rather than
   prose needs it too. An <hr> is the one that bites hardest in practice: a
   portrait figure at 40% width is roughly one and a half times as tall as it is
   wide, so in a short section it outruns the copy, and the section-divider rule
   then draws straight across the image.
   The components need it for a different reason — .acb-steps is display:grid and
   .acb-faq / .acb-tablewrap use overflow, so they sit beside a float instead of
   flowing around it, while .acb-callout and .acb-takeaways would render their
   background and border underneath it. */
.acb-content.acb-content h2,
.acb-content.acb-content h3,
.acb-content.acb-content h4,
.acb-content.acb-content hr,
.acb-content.acb-content .acb-callout,
.acb-content.acb-content .acb-steps,
.acb-content.acb-content .acb-takeaways,
.acb-content.acb-content .acb-faq,
.acb-content.acb-content .acb-tablewrap,
.acb-content.acb-content .acb-attrib { clear: both; }

/* AICOBR_INBODY_FLOAT_ANCHOR_2026_08
   Some themes set `clear` on every paragraph in the content area — usually a
   leftover from a pre-flexbox layout. That stops text wrapping a float without
   stopping the float, so the image looks aligned but stranded with a blank
   column beside it. Resetting to the CSS default is safe: ACB content contains
   no other floats, and this is scoped so nothing outside the article is
   touched. Headings are excluded — their `clear: both` above is deliberate. */
.acb-content.acb-content .acb-fig ~ p,
.acb-content.acb-content .acb-fig ~ ul,
.acb-content.acb-content .acb-fig ~ ol,
.acb-content.acb-content .acb-fig ~ blockquote { clear: none !important; }

/* AICOBR_INBODY_AFTER_HEADING_2026_08 — a figure sits directly under its
   heading, so the heading's bottom margin already provides the gap. Its own
   top margin on top of that reads as a hole between the two. */
.acb-content.acb-content h2 + .acb-fig,
.acb-content.acb-content h3 + .acb-fig { margin-top: 0; }
.acb-content.acb-content h2 + .acb-fig--inline-left,
.acb-content.acb-content h2 + .acb-fig--inline-right,
.acb-content.acb-content h3 + .acb-fig--inline-left,
.acb-content.acb-content h3 + .acb-fig--inline-right { margin-top: 0.15rem; }

/* Specificity bump for the directly-inserted case, matching every other rule in
   this file so a page builder's later stylesheet cannot flatten the layout. */
.acb-content.acb-content .acb-fig { margin: 1.8rem 0; }
.acb-content.acb-content .acb-fig--band { margin: 2.2rem 0; }
.acb-content.acb-content .acb-fig--band img { max-height: 62vh; object-fit: cover; }
.acb-content.acb-content .acb-fig--inline-left,
.acb-content.acb-content .acb-fig--inline-right { width: 40%; max-width: 22rem; }
.acb-content.acb-content .acb-fig--inline-left  { float: left;  margin: 0.35rem 1.6rem 1.1rem 0; }
.acb-content.acb-content .acb-fig--inline-right { float: right; margin: 0.35rem 0 1.1rem 1.6rem; }
.acb-content.acb-content .acb-fig img { border-radius: var(--acb-radius-sm); }

/* Below 600px a 40% float is unreadable — two or three words per line beside a
   thumbnail. Every layout becomes a full-width band. */
@media (max-width: 600px) {
  .acb-fig--inline-left,
  .acb-fig--inline-right,
  .acb-content.acb-content .acb-fig--inline-left,
  .acb-content.acb-content .acb-fig--inline-right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1.8rem 0;
  }
}

/* AICOBR_HERO_IMAGE_2026_08 — [content_featured_image] hero block.

   Sits ABOVE the .acb-content wrapper (it is not part of the article body), so
   it is styled unscoped like .acb-cluster. aspect-ratio + object-fit crops the
   generated 3:2 file to the requested shape without a second render — the image
   is generated once at 1536x1024 and the browser does the crop. */
.acb-fig--hero { margin: 0 0 2rem; width: 100%; }
.acb-fig--hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acb-fig--hero.acb-fig--r169 img { aspect-ratio: 16 / 9; }
.acb-fig--hero.acb-fig--r32  img { aspect-ratio: 3 / 2; }
.acb-fig--hero.acb-fig--r43  img { aspect-ratio: 4 / 3; }
.acb-fig--hero.acb-fig--r11  img { aspect-ratio: 1 / 1; }

/* aspect-ratio is unsupported on very old browsers, where the rules above would
   leave the image at its natural height. A padding-box fallback is not worth the
   markup, but a max-height stops it dominating the screen in that case. */
@supports not (aspect-ratio: 16 / 9) {
  .acb-fig--hero img { max-height: 52vh; }
}