/*
 * SEOBetter - front-end styles for generated articles.
 *
 * Relocated verbatim from Content_Formatter's per-article style blocks
 * (wp.org review 2026-07: "Use wp_enqueue commands"). Generated markup now
 * carries class hooks only; this file holds the matching declarations.
 * Registered + enqueued by includes/Frontend_Assets.php (handle:
 * "seobetter-article") on singular front-end views whose post_content
 * contains one of the marker classes, and on SEOBetter admin screens
 * (the generator's result-panel preview uses the classic-article section).
 *
 * Every section is scoped under the wrapper class its markup already had,
 * so it cannot leak into theme or other-plugin markup.
 */

/* == section: rtl-overrides (scope .sb-rtl-article) ==
 * Flips the common physical-CSS patterns used by the inline-styled article
 * blocks (border-left callouts, padding-left lists, text-align:left) to
 * their RTL equivalents inside the dir="rtl" article wrapper. */
.sb-rtl-article { text-align: right; direction: rtl; }
.sb-rtl-article blockquote,
.sb-rtl-article [style*="border-left:4px solid"],
.sb-rtl-article [style*="border-left: 4px solid"],
.sb-rtl-article [style*="border-left:5px solid"],
.sb-rtl-article [style*="border-left: 5px solid"] {
    border-left: 0 !important;
    border-right-width: 4px !important;
    border-right-style: solid !important;
}
.sb-rtl-article blockquote[style*="border-left:5px solid"],
.sb-rtl-article [style*="border-left:5px solid"] {
    border-right-width: 5px !important;
}
.sb-rtl-article [style*="padding-left"] { padding-left: 0 !important; padding-right: 1.5em !important; }
.sb-rtl-article [style*="margin-left"]  { margin-left: 0 !important; }
.sb-rtl-article [style*="text-align:left"],
.sb-rtl-article [style*="text-align: left"] { text-align: right !important; }
.sb-rtl-article ul, .sb-rtl-article ol { padding-right: 1.5em; padding-left: 0; }
.sb-rtl-article figure.sb-op-pullquote > span:first-child {
    left: auto !important;
    right: -0.05em !important;
}
.sb-rtl-article table { direction: rtl; }
.sb-rtl-article table th, .sb-rtl-article table td { text-align: right !important; }
.sb-rtl-article .seobetter-author-bio { text-align: right; }

/* == section: essay-style (scope .seobetter-essay) ==
 * personal_essay literary-academic typography (v62.174): Roman-numeral H2
 * counters, university first-paragraph indent, MLA hanging-indent block
 * quotes and Works Cited, burnt-sienna accent. */
.seobetter-essay { max-width: 720px; margin: 0 auto; line-height: 1.8; counter-reset: essay-section; }
.seobetter-essay p { margin: 0 0 1.35em; }
.seobetter-essay h2 { counter-increment: essay-section; text-align: center; margin: 2.6em auto 1em; padding-bottom: 0.6em; border-bottom: 1px solid #c66b3d33; letter-spacing: 0.04em; text-transform: none; font-style: normal; }
.seobetter-essay h2::before { content: counter(essay-section, upper-roman) ". "; color: #c66b3d; font-style: italic; font-weight: 500; margin-right: 0.2em; }
.seobetter-essay h3 { font-style: italic; margin: 1.8em 0 0.5em; }
.seobetter-essay .sb-essay-first-p { text-indent: 1.5em; }
.seobetter-essay .sb-essay-first-p::first-line { font-variant: small-caps; letter-spacing: 0.08em; }
.seobetter-essay p + p { text-indent: 1.5em; }
.seobetter-essay .sb-essay-first-p + p { text-indent: 1.5em; }
.seobetter-essay blockquote { border: 0; margin: 1.8em 0 1.8em 0; padding: 0.2em 0 0.2em 2em; text-indent: -2em; font-style: normal; text-align: left; max-width: 100%; }
.seobetter-essay blockquote p { margin: 0 0 0.5em; }
.seobetter-essay blockquote cite, .seobetter-essay blockquote .sb-essay-attribution { display: block; text-align: center; font-style: italic; color: #c66b3d; margin-top: 0.6em; }
.seobetter-essay blockquote cite::before, .seobetter-essay blockquote .sb-essay-attribution::before { content: "\2014 "; }
.seobetter-essay sup.sb-essay-footnote-ref { color: #c66b3d; font-weight: 600; cursor: pointer; padding-left: 0.1em; }
.seobetter-essay sup.sb-essay-footnote-ref a { color: inherit; text-decoration: none; }
.seobetter-essay .sb-essay-reflective { font-style: italic; border-left: 2px solid #c66b3d; padding: 0.2em 1.4em; margin: 1.6em 0; }
.seobetter-essay .sb-essay-reflective h2 { font-style: italic; text-align: left; margin-top: 0.2em; }
.seobetter-essay .sb-essay-reflective p { text-indent: 0; }
.seobetter-essay .sb-essay-notes { font-size: 0.94em; line-height: 1.6; margin: 2.4em 0; padding: 1.4em 1.6em; border-top: 1px solid #c66b3d44; border-bottom: 1px solid #c66b3d44; }
.seobetter-essay .sb-essay-notes ol { padding-left: 1.8em; margin: 0; }
.seobetter-essay .sb-essay-notes li { margin-bottom: 0.5em; }
.seobetter-essay .sb-essay-works-cited { font-size: 0.96em; line-height: 1.7; margin: 2.4em 0; padding: 0; }
.seobetter-essay .sb-essay-works-cited ol, .seobetter-essay .sb-essay-works-cited ul { list-style: none; padding-left: 0; margin: 0; }
.seobetter-essay .sb-essay-works-cited li { padding-left: 2em; text-indent: -2em; margin-bottom: 0.8em; }
.seobetter-essay hr.sb-essay-divider { border: 0; text-align: center; margin: 2.4em 0; }
.seobetter-essay hr.sb-essay-divider::before { content: "* * *"; font-size: 1.1em; color: #c66b3d; letter-spacing: 0.6em; opacity: 0.7; }
/* v62.179 - bleed guard. The whole essay body is wrapped in
   .seobetter-essay, so the running-indent / hanging-indent typography
   above cascades into nested plugin-styled wp:html blocks (References
   card, Key Takeaways, callouts) that carry their own inline styles,
   e.g. the References card's display:flex list items with an
   inline-styled number badge. The negative text-indent dragged the badge
   over the link text (user-reported on post 1043). Reset typography
   inside any nested inline-styled block + any flex element so plugin
   blocks render exactly as their own inline CSS intends. */
.seobetter-essay [style*="flex"] { text-indent: 0; }
.seobetter-essay div[style] p, .seobetter-essay div[style] li { text-indent: 0; }
.seobetter-essay .sb-essay-works-cited li[style] { padding-left: 0; text-indent: 0; }

/* == section: faq-accordion (scope .sb-faq-item) ==
 * faq_page Layer 5: green expandable Q&A tiles (details/summary markup
 * emitted by Content_Formatter::wrap_faq_accordion). */
.sb-faq-item{border:1px solid #16a34a;border-radius:8px;background:#f0fdf4;margin:0 0 12px 0;padding:0;overflow:hidden}
.sb-faq-item summary{cursor:pointer;padding:14px 18px;font-weight:600;color:#166534;font-size:1.05em;list-style:none;outline:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.sb-faq-item summary::-webkit-details-marker{display:none}
.sb-faq-item summary::after{content:"+";font-size:1.4em;font-weight:400;color:#16a34a;transition:transform 0.15s ease}
.sb-faq-item[open] summary::after{content:"−"}
.sb-faq-item summary:hover{background:#dcfce7}
.sb-faq-answer{padding:0 18px 16px 18px;color:#15803d;line-height:1.65}
.sb-faq-answer>p:first-child{margin-top:6px}
.sb-faq-answer>p:last-child{margin-bottom:0}
.sb-faq-answer ul,.sb-faq-answer ol{margin:8px 0 8px 20px}

/* == section: scholarly-refs (scope .sb-scholarly-refs) ==
 * scholarly_article References hanging indent (v62.221). */
.sb-scholarly-refs ol{padding-left:0;margin-left:0}
.sb-scholarly-refs li{padding-left:2.4em;text-indent:-2.4em;margin-bottom:0.6em;list-style-position:inside}
.sb-scholarly-refs a{word-break:break-word}

/* == section: classic-article (scope .sb-article-classic) ==
 * Classic-mode scoped typography for the plain prose elements around the
 * self-contained inline-styled wp:html blocks (used by the generator's
 * result-panel preview). The per-article accent color arrives as CSS
 * custom properties set inline on the wrapper div by
 * Content_Formatter::format_classic():
 *   --sb-accent       accent color        (default #764ba2)
 *   --sb-accent-soft  accent at ~13% alpha (default #764ba222)
 * Declarations otherwise preserved verbatim from the former builder. */
.sb-article-classic{font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#1f2937 !important;line-height:1.7;background:#fff !important;padding:2em;border-radius:12px;max-width:100%}
.sb-article-classic h1,.sb-article-classic h2,.sb-article-classic h3,.sb-article-classic h4{font-family:ui-serif,Georgia,'Times New Roman',serif;text-wrap:balance}
.sb-article-classic h1{font-size:clamp(1.8em,4vw,2.4em);font-weight:800;line-height:1.2;margin:0 0 0.5em;color:#111827 !important;text-transform:capitalize}
.sb-article-classic h2{font-size:clamp(1.3em,3vw,1.6em);font-weight:700;line-height:1.3;margin:2em 0 0.75em;padding-bottom:0.4em;border-bottom:2px solid var(--sb-accent-soft,#764ba222);color:var(--sb-accent,#764ba2) !important}
.sb-article-classic h3{font-size:1.15em;font-weight:600;line-height:1.4;margin:1.5em 0 0.5em;color:#374151 !important}
.sb-article-classic p{line-height:1.75;margin:0 0 1.25em;font-size:1.05em;color:#374151 !important;text-wrap:pretty;max-width:65ch}
.sb-article-classic ul,.sb-article-classic ol{line-height:1.8;padding:0.75em 1em 0.75em 2em;margin:1em 0;color:#374151 !important;background:#f8fafc;border-left:3px solid var(--sb-accent,#764ba2);border-radius:0 8px 8px 0}
.sb-article-classic li{margin-bottom:0.5em;padding-left:0.3em;color:#374151 !important}
.sb-article-classic ul li::marker{color:var(--sb-accent,#764ba2) !important;font-weight:700;font-size:1.1em}
.sb-article-classic ol li::marker{color:var(--sb-accent,#764ba2) !important;font-weight:700}
.sb-article-classic a{color:var(--sb-accent,#764ba2) !important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.sb-article-classic a:hover{text-decoration-thickness:2px}
.sb-article-classic hr{border:none;border-top:2px solid #e5e7eb;margin:2.5em 0}
.sb-article-classic img,.sb-article-classic figure img{max-width:100%;height:auto;border-radius:8px;margin:1.5em auto;display:block}
.sb-article-classic code{background:#1e293b;color:#e2e8f0 !important;padding:2px 6px;border-radius:4px;font-size:0.88em;font-family:'Fira Code',Consolas,'Courier New',monospace}