/* AI Visibility Schema — Front-end Styles */

.lsai-ai-summary {
    background: #f8f9fa;
    border-left: 3px solid #4a6fa5;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}
.lsai-ai-summary p { margin: 0; }

.lsai-faqs {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e0e0e0;
}
.lsai-faqs h2 {
    font-size: 24px;
    margin-bottom: 20px;
}
.lsai-faq-pair {
    margin-bottom: 20px;
}
.lsai-faq-pair h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #1a1a1a;
}
.lsai-faq-pair p {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    margin: 0;
}

/* Video Transcript */
.lsai-transcript {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e0e0e0;
}
.lsai-transcript h2 {
    font-size: 22px;
    margin-bottom: 16px;
}
.lsai-transcript-text {
    background: #f8f9fa;
    padding: 20px 24px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    max-height: 400px;
    overflow-y: auto;
}

/* Reviews */
.lsai-reviews {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e0e0e0;
}
.lsai-reviews h2 {
    font-size: 24px;
    margin-bottom: 16px;
}
.lsai-aggregate-rating {
    font-size: 18px;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: #fefce8;
    border-radius: 6px;
    display: inline-block;
}
.lsai-rating-value {
    font-weight: 700;
    font-size: 28px;
    margin-right: 4px;
}
.lsai-rating-stars {
    color: #f59e0b;
    font-size: 20px;
}
.lsai-rating-count {
    color: #888;
    font-size: 14px;
}
.lsai-review {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}
.lsai-review:last-child {
    border-bottom: none;
}
.lsai-review-header {
    margin-bottom: 6px;
}
.lsai-review-stars {
    color: #f59e0b;
    margin-right: 6px;
}
.lsai-review-author {
    font-size: 15px;
}
.lsai-review-date {
    color: #999;
    font-size: 13px;
    margin-left: 8px;
}
.lsai-review-body {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    margin: 4px 0 0 0;
}

/* Attorney Profile Shortcodes */
.lsai-attorney-field {
    margin: 16px 0;
}
.lsai-field-heading {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #1a1a1a;
}
.lsai-field-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lsai-field-list li {
    padding: 4px 0;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
}
.lsai-field-list li::before {
    content: "–";
    margin-right: 8px;
    color: #999;
}
.lsai-inline-list {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
.lsai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lsai-tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #1a365d;
    background: #ebf4ff;
    border-radius: 4px;
}
a.lsai-tag-link {
    text-decoration: none;
    color: #1a365d;
    transition: background-color 0.15s ease, color 0.15s ease;
}
a.lsai-tag-link:hover {
    background: #d0e3ff;
    color: #0d2240;
}

/* ---------------------------------------------------------------------------
   FAQ accordion (native <details>, no JS — answer text stays in the DOM so AI
   crawlers can still extract it while collapsed).
   --------------------------------------------------------------------------- */
.lsai-faqs-accordion .lsai-faq-pair {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
}
.lsai-faqs-accordion summary {
    cursor: pointer;
    padding: 14px 18px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.lsai-faqs-accordion summary::-webkit-details-marker { display: none; }
.lsai-faqs-accordion summary::after {
    content: "+";
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    color: #6b7280;
    transition: transform .2s ease;
}
.lsai-faqs-accordion details[open] > summary::after {
    content: "\2212";
}
.lsai-faqs-accordion summary h3 {
    margin: 0;
    font-size: 1rem;
    display: inline;
}
.lsai-faqs-accordion summary:focus-visible {
    outline: 2px solid #4260F8;
    outline-offset: 2px;
}
.lsai-faqs-accordion .lsai-faq-answer {
    padding: 0 18px 16px;
}

/* ---------------------------------------------------------------------------
   Single-post design preset — "Article (adaptive hero)"

   One layout, two hero states. Everything is scoped under .lsai-post and driven
   by custom properties, so a theme can retint the whole article by redeclaring
   a handful of variables instead of fighting individual selectors.
   --------------------------------------------------------------------------- */
.lsai-post {
    /* Brand colour and typography are inherited from whatever builder or theme
       is running the site, so the design adopts the site's identity instead of
       imposing its own. Each var() chain walks Breakdance → Elementor →
       theme.json → our own fallback, so an unstyled install still looks right.
       Structural neutrals (borders, panel tints) stay ours on purpose — those
       are layout, not brand. */
    /* Read the palette the site is actually painted with, not the builder's
       untouched defaults. Breakdance generates an --hcl-brand-* scale from the
       brand colour you pick in Theme Settings and paints links, headings and
       buttons from it, while leaving --bde-brand-primary-color at its factory
       value. Reading the factory value first is why our panels came out in a
       blue the rest of the site never uses.
         step 12 = the high-contrast tone the theme uses for headings/links
         step 9  = the solid tone it uses for filled buttons */
    --lsai-brand: var(--hcl-brand-12,
                  var(--bde-brand-primary-color,
                  var(--e-global-color-primary,
                  var(--wp--preset--color--primary, #1d5ca8))));
    --lsai-brand-solid: var(--hcl-brand-9, var(--lsai-brand));
    --lsai-brand-hover: var(--hcl-brand-10,
                        var(--bde-brand-primary-color-hover,
                        var(--e-global-color-secondary, #16467e)));

    --lsai-accent: var(--lsai-brand);
    --lsai-share-bg: var(--lsai-brand-solid);
    --lsai-share-bg-hover: var(--lsai-brand-hover);

    --lsai-hero-bg: #54595f;
    --lsai-hero-ink: #ffffff;
    --lsai-toc-bg: #1b3b6f;
    --lsai-panel-bg: #f4f8ff;
    --lsai-ink: var(--bde-headings-color, #16202b);
    --lsai-body: var(--bde-body-text-color, #3d4852);
    --lsai-muted: #6b7280;
    --lsai-line: #e2e8f0;
    --lsai-surface: #f8fafc;
    --lsai-radius: 14px;
    /* Match the builder's container so our content lines up with the header and
       footer it renders around us. Breakdance publishes its container width as
       --bde-section-width (Settings → Layout); Elementor and block themes get
       their own equivalents. The literal is only the no-builder fallback. */
    --lsai-shell: var(--bde-section-width,
                  var(--e-global-container-width,
                  var(--wp--style--global--wide-size, 1400px)));
    --lsai-gutter: var(--bde-section-horizontal-padding, 40px);
    --lsai-toc-w: 300px;

    /* Tie the dark panels to the site's brand. Declared after the flat values
       above so a browser without color-mix() keeps the plain fallback. */
    --lsai-toc-bg: color-mix(in srgb, var(--lsai-brand) 26%, #101828);
    --lsai-hero-bg: color-mix(in srgb, var(--lsai-brand) 10%, #34383f);

    color: var(--lsai-body);
    font-family: var(--bde-body-font-family, inherit);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
/* Headings follow the site's heading face, not the body face. */
.lsai-post h1,
.lsai-post h2,
.lsai-post h3,
.lsai-post h4,
.lsai-post h5,
.lsai-post h6 {
    font-family: var(--bde-heading-font-family, inherit);
}
.lsai-post *,
.lsai-post *::before,
.lsai-post *::after { box-sizing: border-box; }

/* The hero is a full-bleed band, so it has to escape whatever container the
   theme wrapped the_content in. overflow-x: clip on the body absorbs the
   scrollbar-width overhang that 100vw causes — clip rather than hidden,
   because hidden would break position: sticky on the table of contents. */
body:has(.lsai-post-hero) { overflow-x: clip; }

.lsai-post-hero {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    padding: 64px 0 92px;
    background-color: var(--lsai-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--lsai-hero-ink);
}
/* The featured image is set inline as a background. Without this scrim the
   title is unreadable over a light or busy photo, and no editor is going to
   curate every image for contrast. With no image it just deepens the flat
   colour, so both presets still look intentional. */
.lsai-post-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 24, 28, .70) 0%, rgba(20, 24, 28, .84) 100%);
    pointer-events: none;
}
.lsai-post-hero > .lsai-hero-inner { position: relative; z-index: 1; }
.lsai-hero-inner,
.lsai-post-body {
    max-width: var(--lsai-shell);
    margin: 0 auto;
    padding: 0 var(--lsai-gutter);
}
.lsai-post-title {
    margin: 0 0 18px;
    font-size: clamp(30px, 4.4vw, 60px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--lsai-hero-ink);
}

/* ── Breadcrumbs ── */
.lsai-breadcrumbs { margin: 0 0 22px; font-size: 16px; }
.lsai-crumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}
.lsai-crumb { margin: 0; }
.lsai-crumb + .lsai-crumb::before {
    content: "»";
    margin: 0 8px;
    opacity: .75;
}
.lsai-crumb a {
    color: var(--lsai-hero-ink);
    font-weight: 650;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.lsai-crumb a:hover,
.lsai-crumb a:focus-visible { border-bottom-color: currentColor; }
.lsai-crumb [aria-current="page"] { opacity: .85; }

/* Hero meta row: byline + category chip on one line. */
.lsai-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}
.lsai-post-category {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    color: var(--lsai-hero-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.lsai-post-category:hover,
.lsai-post-category:focus-visible {
    background: rgba(255, 255, 255, .16);
    border-color: #fff;
    color: var(--lsai-hero-ink);
}

/* ── Byline ── */
.lsai-post-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 17px;
    font-style: italic;
    color: var(--lsai-hero-ink);
}
.lsai-byline-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}
.lsai-byline-text { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.lsai-byline-name { font-weight: 600; }
.lsai-byline-updated {
    font-size: .85em;
    font-style: normal;
    opacity: .8;
}
.lsai-byline-updated::before { content: "·"; margin-right: 6px; }

/* ── Hero: video state ──
   The only structural difference between the two states. Below this block the
   layout is shared, which is why the video and non-video posts stay identical
   from the table of contents down. */
.lsai-hero-split .lsai-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: center;
}
.lsai-hero-split .lsai-post-title { font-size: clamp(28px, 3.2vw, 44px); }
.lsai-hero-split .lsai-hero-media { min-width: 0; }

.lsai-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--lsai-radius);
    overflow: hidden;
    background: #000;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .3);
}
.lsai-video-frame iframe,
.lsai-video-frame > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lsai-video-fallback { margin: 0; }
.lsai-video-fallback a { color: var(--lsai-hero-ink); }

/* ── Body grid: TOC | article | share ──
   Three columns rather than absolute positioning, so the share rail can never
   overlap the text and the whole thing reflows in one place on mobile. The gap
   is applied as a margin on the aside instead of grid-gap, because the share
   rail is meant to sit flush against the panel. Order is share | body | TOC. */
.lsai-post-body { padding-top: 48px; padding-bottom: 64px; }
.lsai-post-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) var(--lsai-toc-w);
    gap: 0;
    align-items: start;
}
.lsai-post-layout.lsai-no-toc { grid-template-columns: auto minmax(0, 1fr); }
.lsai-post-aside { margin-left: 44px; }
/* FAQ and CTA live outside the grid so they span the full width. */
.lsai-post-footer { margin-top: 8px; }

/* ── Table of contents ── */
.lsai-toc-sticky {
    position: sticky;
    top: 32px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
.lsai-toc-sticky::-webkit-scrollbar { width: 6px; }
.lsai-toc-sticky::-webkit-scrollbar-track { background: transparent; }
.lsai-toc-sticky::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .28);
    border-radius: 999px;
}
.lsai-toc {
    background: var(--lsai-toc-bg);
    border-radius: 14px;
    padding: 22px 22px 24px;
    color: #fff;
}
/* A label, not a headline. It sits above the article's own headings, so giving
   it heading-scale type made it shout over the content it indexes. */
.lsai-toc-title {
    margin: 0 0 14px;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.3;
    color: rgba(255, 255, 255, .72);
}
.lsai-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lsai-toc-list li { margin: 0; }
.lsai-toc-list a {
    display: block;
    padding: 7px 0 7px 14px;
    border-left: 2px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    text-decoration: none;
    opacity: .82;
    transition: opacity .15s ease, border-color .15s ease;
}
.lsai-toc-list a:hover,
.lsai-toc-list a:focus-visible { opacity: 1; border-left-color: rgba(255, 255, 255, .6); }
/* Set by post-ui.js as you scroll; falls back to plain links without JS. */
.lsai-toc-list a.is-current { opacity: 1; border-left-color: #fff; font-weight: 700; }
.lsai-toc-list li.lsai-toc-l3 a { padding-left: 28px; font-size: 14px; font-weight: 500; }

/* ── Article panel ── */
.lsai-post-main {
    min-width: 0;
    background: var(--lsai-panel-bg);
    padding: 34px 40px;
    font-size: 17px;
}
.lsai-post-main > :first-child { margin-top: 0; }
.lsai-post-main > :last-child { margin-bottom: 0; }
.lsai-post-main p { margin: 0 0 1.4em; }
.lsai-post-main h2,
.lsai-post-main h3,
.lsai-post-main h4 {
    color: var(--lsai-ink);
    line-height: 1.25;
    letter-spacing: -0.01em;
    /* Anchor links from the TOC must not land under a sticky theme header. */
    scroll-margin-top: 96px;
}
.lsai-post-main h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 750; margin: 1.9em 0 .6em; }
.lsai-post-main h3 { font-size: clamp(19px, 2vw, 24px); font-weight: 700; margin: 1.7em 0 .5em; }
.lsai-post-main h4 { font-size: 18px; font-weight: 700; margin: 1.5em 0 .5em; }
.lsai-post-main a { color: var(--lsai-accent); text-underline-offset: 2px; }
.lsai-post-main ul,
.lsai-post-main ol { margin: 0 0 1.4em; padding-left: 1.35em; }
.lsai-post-main li { margin-bottom: .55em; }
.lsai-post-main li:last-child { margin-bottom: 0; }
.lsai-post-main img { max-width: 100%; height: auto; border-radius: 10px; }
.lsai-post-main figure { margin: 1.9em 0; }
.lsai-post-main figcaption { font-size: 13px; color: var(--lsai-muted); margin-top: 8px; }
.lsai-post-main blockquote {
    margin: 1.9em 0;
    padding: 2px 0 2px 22px;
    border-left: 3px solid var(--lsai-accent);
    color: var(--lsai-ink);
    font-size: 1.05em;
}
.lsai-post-main blockquote p:last-child { margin-bottom: 0; }
.lsai-post-main hr { border: 0; border-top: 1px solid var(--lsai-line); margin: 2.4em 0; }
.lsai-post-main table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: 15px; }
.lsai-post-main th,
.lsai-post-main td { border: 1px solid var(--lsai-line); padding: 10px 14px; text-align: left; }
.lsai-post-main th { background: #fff; color: var(--lsai-ink); font-weight: 650; }

/* ── Share rail ── */
.lsai-post-share { position: sticky; top: 32px; }
.lsai-share {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Quiet by default, brand-filled on hover. A solid column of saturated blocks
   competed with the article for attention; these read as tools, not as a
   second navigation. */
.lsai-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--lsai-line);
    border-radius: 50%;
    background: #fff;
    color: var(--lsai-brand);
    text-decoration: none;
    transition: background .15s ease, color .15s ease,
                border-color .15s ease, transform .15s ease;
}
.lsai-share-btn:hover,
.lsai-share-btn:focus {
    background: var(--lsai-brand);
    border-color: var(--lsai-brand);
    color: #fff;
    transform: translateY(-2px);
}
.lsai-share-btn:focus-visible { outline: 2px solid var(--lsai-brand); outline-offset: 2px; }
.lsai-share-btn svg { display: block; width: 18px; height: 18px; }
.lsai-share .screen-reader-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Footer: FAQ + CTA ── */
.lsai-post .lsai-faqs {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--lsai-line);
}
.lsai-post .lsai-faqs > h2 {
    margin: 0 0 22px;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--lsai-ink);
}
.lsai-post .lsai-faq-pair { margin-bottom: 12px; }
.lsai-post .lsai-faqs-list .lsai-faq-pair {
    padding: 20px 24px;
    border: 1px solid var(--lsai-line);
    border-radius: 10px;
    background: #fff;
}
.lsai-post .lsai-faqs-list .lsai-faq-pair h3 { margin: 0 0 8px; font-size: 18px; font-weight: 650; }
.lsai-post .lsai-faqs-list .lsai-faq-pair p { margin: 0; font-size: 16px; }
.lsai-post .lsai-faqs-accordion .lsai-faq-pair { border-radius: 10px; margin-bottom: 12px; }
.lsai-post .lsai-faqs-accordion summary { padding: 16px 22px; }
.lsai-post .lsai-faqs-accordion summary h3 { font-size: 18px; font-weight: 650; color: var(--lsai-ink); }
.lsai-post .lsai-faqs-accordion .lsai-faq-answer { padding: 0 22px 18px; font-size: 16px; }

/* ── Call to action ─────────────────────────────────────────────────────────
   One design for every post type. Post_Parts::render_cta() emits this markup
   for posts, attorneys, services and locations alike, so the styling has to be
   self-contained: it previously read --lsai-toc-bg, a variable declared only on
   .lsai-post, which meant that on a service or location page the background
   resolved to nothing and left white text on a white page.

   Colours come from the site's configured palette, so the block matches the
   header and footer the builder renders around it. */
.lsai-cta {
    --lsai-cta-brand: var(--hcl-brand-12,
                      var(--bde-brand-primary-color,
                      var(--e-global-color-primary,
                      var(--wp--preset--color--primary, #1d5ca8))));
    --lsai-cta-ink: #ffffff;
    --lsai-cta-muted: rgba(255, 255, 255, .82);

    width: 100%;
    margin-top: 48px;
    padding: 44px 40px;
    border-radius: 14px;
    background: var(--lsai-cta-brand);
    color: var(--lsai-cta-ink);
    text-align: center;
}
.lsai-cta-heading {
    margin: 0 0 12px;
    font-size: clamp(22px, 2.3vw, 30px);
    font-weight: 750;
    line-height: 1.25;
    color: var(--lsai-cta-ink);
}
.lsai-cta-text {
    margin: 0 auto 26px;
    max-width: 58ch;
    font-size: 16px;
    line-height: 1.7;
    color: var(--lsai-cta-muted);
}
.lsai-cta-action {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 0;
}

/* Doubled class and the `a` element take these past the builder's
   `.breakdance a { color: <brand> }`, which would otherwise repaint the button
   label in the panel's own background colour and make it unreadable. */
.lsai-cta.lsai-cta :is(h1, h2, h3, h4, h5, h6) { color: var(--lsai-cta-ink); }

.lsai-cta a.lsai-cta-button {
    display: inline-block;
    padding: 14px 32px;
    border: 2px solid var(--lsai-cta-ink);
    border-radius: 8px;
    background: var(--lsai-cta-ink);
    color: var(--lsai-cta-brand);
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.lsai-cta a.lsai-cta-button:hover,
.lsai-cta a.lsai-cta-button:focus {
    background: transparent;
    color: var(--lsai-cta-ink);
    transform: translateY(-1px);
}
/* Secondary action: the same shape, outlined instead of filled. */
.lsai-cta a.lsai-cta-button-alt {
    background: transparent;
    color: var(--lsai-cta-ink);
}
.lsai-cta a.lsai-cta-button-alt:hover,
.lsai-cta a.lsai-cta-button-alt:focus {
    background: var(--lsai-cta-ink);
    color: var(--lsai-cta-brand);
}
.lsai-cta a.lsai-cta-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Dark panels: our ink wins ──────────────────────────────────────────────
   Page builders colour headings and links with selectors like `.breakdance h1`
   and `.breakdance a`. Those are (0,1,1) and out-specify a single class of
   ours, so on the dark hero, TOC and CTA the builder's dark navy was landing on
   a dark navy background and the title read as a shadow.

   Re-stating the colour from the block root makes these (0,2,1) and puts our
   ink back. Scoped to the dark panels only: everywhere else the builder's
   colours are exactly what we want to inherit, which is the whole point of
   matching the site's palette. */
.lsai-post .lsai-post-hero :is(h1, h2, h3, h4, h5, h6),
.lsai-post .lsai-toc :is(h1, h2, h3, h4, h5, h6) {
    color: var(--lsai-hero-ink);
}
.lsai-post .lsai-post-hero a,
.lsai-post .lsai-toc a {
    color: var(--lsai-hero-ink);
}
/* Breadcrumb trail and byline sit one step back from the title. */
.lsai-post .lsai-post-hero .lsai-breadcrumbs a { opacity: .85; }
.lsai-post .lsai-post-hero .lsai-breadcrumbs a:hover { opacity: 1; }


/* ── Responsive ── */
@media (max-width: 1200px) {
    .lsai-post { --lsai-toc-w: 260px; }
    .lsai-post-aside { margin-left: 32px; }
    .lsai-post-main { padding: 30px 32px; }
}
@media (max-width: 1024px) {
    .lsai-hero-inner,
    .lsai-post-body { padding: 0 24px; }
    .lsai-post-hero { padding: 48px 0 64px; }
    .lsai-hero-split .lsai-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
    .lsai-post-body { padding-top: 32px; padding-bottom: 48px; }
    /* One column: TOC first (it is a summary of what follows), then the
       article, then the share rail turned on its side. */
    .lsai-post-layout,
    .lsai-post-layout.lsai-no-toc { grid-template-columns: minmax(0, 1fr); }
    /* TOC ahead of the body on narrow screens, where a sidebar has nowhere to
       sit; capped so a long one cannot bury the article. */
    .lsai-post-aside { order: -1; margin-left: 0; margin-bottom: 24px; }
    .lsai-toc-sticky { position: static; max-height: 45vh; }
    .lsai-post-main { padding: 26px 22px; font-size: 16px; }
    .lsai-post-share { position: static; margin-top: 18px; }
    .lsai-share { flex-direction: row; }
    .lsai-byline-avatar img { width: 46px; height: 46px; }
    .lsai-cta { padding: 32px 24px; }
}

@media print {
    .lsai-post-share,
    .lsai-post-aside { display: none; }
    .lsai-post-hero { background: none; color: #000; padding: 0 0 20px; margin: 0; }
    .lsai-post-title,
    .lsai-post-byline,
    .lsai-crumb a { color: #000; }
    .lsai-post-main { background: none; padding: 0; }
    .lsai-post-layout { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .lsai-cta a.lsai-cta-button,
    .lsai-share-btn,
    .lsai-toc-list a { transition: none; }
    .lsai-cta a.lsai-cta-button:hover { transform: none; }
}

/* ── Heading scale: ours, not the builder's ─────────────────────────────────
   Builders style headings globally — Breakdance ships
   `.breakdance h2 { font-size: var(--bde-h2-font-size) }` — and that (0,1,1)
   selector out-specifies any single class of ours. Our UI headings are not
   article headings: "On this page" is a label, a CTA heading is a banner. Left
   alone they were rendered at the site's h2 scale (~39px here), which is why
   the table of contents title filled its own panel.

   Each selector is written twice so the rule lands at (0,2,0) and wins on
   specificity rather than on load order. Colour, family and weight still come
   from the site — only the sizes that belong to our layouts are restated. */
.lsai-toc-title.lsai-toc-title {
    font-size: 12px;
    line-height: 1.3;
}
.lsai-cta-heading.lsai-cta-heading {
    font-size: clamp(22px, 2.3vw, 30px);
    line-height: 1.25;
}
.lsai-details-title.lsai-details-title {
    font-size: 22px;
    line-height: 1.3;
}
.lsai-side-title.lsai-side-title {
    font-size: 17px;
    line-height: 1.35;
}
.lsai-post-title.lsai-post-title {
    font-size: clamp(30px, 4.4vw, 60px);
    line-height: 1.12;
}
.lsai-hero-split .lsai-post-title.lsai-post-title {
    font-size: clamp(28px, 3.2vw, 44px);
}
.lsai-svc-title.lsai-svc-title {
    font-size: clamp(30px, 4.2vw, 54px);
    line-height: 1.12;
}
.lsai-post .lsai-faqs > h2,
.lsai-svc .lsai-faqs > h2 {
    font-size: 28px;
    line-height: 1.25;
}

/* ── AI summary inside a preset ─────────────────────────────────────────────
   The legacy grey bar was styled for shortcode use in an unknown theme. Inside
   our layouts it reads as a standfirst, so it gets the brand rule and the
   article's own typography instead. */
.lsai-post-main .lsai-ai-summary,
.lsai-svc-main .lsai-ai-summary {
    margin: 0 0 30px;
    padding: 18px 22px;
    border: 0;
    border-left: 4px solid var(--lsai-brand, #1d5ca8);
    border-radius: 0 10px 10px 0;
    background: var(--lsai-panel-bg, #f4f8ff);
    color: var(--lsai-ink, #16202b);
    font-size: 17px;
    line-height: 1.65;
}
.lsai-post-main .lsai-ai-summary p,
.lsai-svc-main .lsai-ai-summary p { margin: 0; }