/* ==========================================================================
   LRG — block-editor content styles
   --------------------------------------------------------------------------
   Maps core-block output (paragraphs, headings, quote, lists) authored in
   Gutenberg to the signed-off prose look from the design's `.bb-prosecol__*`
   rules, scoped under `.bb-blockcontent` (the hook class the sidebar template
   puts on `.bb-prosecol__inner`). The `.bb-*` component styles themselves
   (itemhead, sidenav, docblock, doccard, pullquote frame) live in the design
   system base and load site-wide; this sheet only bridges block markup to them.

   Loaded on the front end (wp_enqueue_style) AND in the editor
   (add_editor_style). The design-system runtime does NOT load in the Gutenberg
   canvas, so an editor-only token fallback + an `.editor-styles-wrapper` mirror
   below give the editor a faithful preview.

   Front-end overrides use compound selectors (`.bb-prosecol__inner.bb-blockcontent`)
   so they beat the single-class DS base rules regardless of stylesheet order.
   ========================================================================== */

/* ---- front end: readable measure, full-width doc block ------------------ */

.bb-prosecol__inner.bb-blockcontent { max-width: none; }

/* prose keeps the 68ch measure; the Documents block + wide media span full */
.bb-prosecol__inner.bb-blockcontent > p,
.bb-prosecol__inner.bb-blockcontent > h2,
.bb-prosecol__inner.bb-blockcontent > h3,
.bb-prosecol__inner.bb-blockcontent > ul,
.bb-prosecol__inner.bb-blockcontent > ol,
.bb-prosecol__inner.bb-blockcontent > .wp-block-heading,
.bb-prosecol__inner.bb-blockcontent > .wp-block-list,
.bb-prosecol__inner.bb-blockcontent > .wp-block-quote,
.bb-prosecol__inner.bb-blockcontent > .wp-block-image { max-width: 68ch; }

.bb-prosecol__inner.bb-blockcontent > .bb-docblock,
.bb-prosecol__inner.bb-blockcontent > .wp-block-acf-lrg-documents { max-width: none; }

/* first block never carries a top margin (matches the design's lead-first) */
.bb-prosecol__inner.bb-blockcontent > *:first-child { margin-top: 0; }

/* ==========================================================================
   Shared block → prose mapping (front end + editor)
   `:is()` lets one rule cover both scopes. In the editor the top-level blocks
   are not direct children of `.editor-styles-wrapper`, so these use descendant
   selectors (no `>`), which is fine — our authored content has no nested prose.
   ========================================================================== */

/* body paragraphs */
:is(.bb-blockcontent, .editor-styles-wrapper) p {
    color: var(--lrg-text-72);
    font-size: var(--lrg-body-size);
    line-height: var(--lrg-body-line);
    margin: 0 0 20px;
}

/* lead paragraph — the registered "Lead" block style */
:is(.bb-blockcontent, .editor-styles-wrapper) p.is-style-lead {
    font-size: var(--ds-text-lg);
    line-height: var(--ds-line-body);
    color: var(--ds-color-text);
    margin-bottom: 28px;
}

/* headings → prosecol h2 / h3 look */
:is(.bb-blockcontent, .editor-styles-wrapper) :is(h2, .wp-block-heading.wp-block-heading) {
    font-size: 1.5rem;
    font-weight: var(--ds-weight-medium);
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--ds-color-text);
    margin: 38px 0 14px;
}
:is(.bb-blockcontent, .editor-styles-wrapper) h3 {
    font-size: 1.2rem;
    font-weight: var(--ds-weight-medium);
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ds-color-text);
    margin: 30px 0 12px;
}

/* core Quote → the signed-off pull quote (accent left rule) */
:is(.bb-blockcontent, .editor-styles-wrapper) .wp-block-quote {
    border-left: 2px solid var(--ds-color-accent);
    padding: 4px 0 4px 22px;
    margin: 32px 0;
    font-style: normal;
    quotes: none;
}
:is(.bb-blockcontent, .editor-styles-wrapper) .wp-block-quote p {
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--ds-color-text);
    margin: 0;
}
:is(.bb-blockcontent, .editor-styles-wrapper) .wp-block-quote :is(cite, .wp-block-quote__citation) {
    display: block;
    font-size: 0.92rem;
    color: var(--lrg-text-72);
    font-style: normal;
    margin-top: 10px;
}

/* unordered lists → the dot-bullet look.
   Front end: any <ul> in prose (block OR classic/migrated markup).
   Editor: block lists only (keeps editor UI lists untouched). */
.bb-blockcontent ul,
.editor-styles-wrapper ul.wp-block-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 20px;
}
.bb-blockcontent ul > li,
.editor-styles-wrapper ul.wp-block-list > li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    color: var(--lrg-text-72);
    margin: 0 0 7px;
}
.bb-blockcontent ul > li::before,
.editor-styles-wrapper ul.wp-block-list > li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ds-color-accent);
    flex: 0 0 auto;
    position: relative;
    top: 9px;
}

/* ordered lists keep numbers, tuned to the palette */
.bb-blockcontent ol,
.editor-styles-wrapper ol.wp-block-list {
    padding-left: 1.3em;
    margin: 0 0 20px;
    color: var(--lrg-text-72);
}
.bb-blockcontent ol > li,
.editor-styles-wrapper ol.wp-block-list > li { margin-bottom: 7px; }

/* inline emphasis + links inside prose */
:is(.bb-blockcontent, .editor-styles-wrapper) strong {
    color: var(--ds-color-text);
    font-weight: var(--ds-weight-semibold);
}
:is(.bb-blockcontent, .editor-styles-wrapper) p a,
:is(.bb-blockcontent, .editor-styles-wrapper) li a {
    color: var(--ds-color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
:is(.bb-blockcontent, .editor-styles-wrapper) p a:hover,
:is(.bb-blockcontent, .editor-styles-wrapper) li a:hover { color: var(--ds-color-accent-deep); }

/* ==========================================================================
   Editor-only: token fallback + component mirror
   The DS base (tokens + `.bb-*`) is absent in the Gutenberg canvas, so define
   the tokens this sheet references and mirror the Documents block frame so a
   preview-mode ACF block looks right while editing.
   ========================================================================== */

.editor-styles-wrapper {
    --ds-color-ground: #FFFFFF;
    --ds-color-panel: #F5F4EF;
    --ds-color-text: #1F1F1A;
    --ds-color-accent: #1F3D20;
    --ds-color-accent-deep: #14291A;
    --ds-color-text-12: rgba(31, 31, 26, 0.14);
    --ds-text-lg: 1.15rem;
    --ds-text-sm: 0.875rem;
    --ds-line-body: 1.6;
    --ds-weight-medium: 500;
    --ds-weight-semibold: 600;
    --lrg-text-72: rgba(31, 31, 26, 0.72);
    --lrg-hairline: rgba(31, 31, 26, 0.09);
    --lrg-radius: 2px;
    --lrg-body-size: 1.0625rem;
    --lrg-body-line: 1.65;
    color: var(--ds-color-text);
}

/* Documents block frame — front-end copy lives in the DS base; this mirror is
   scoped to the editor so a preview-mode block reads correctly while editing. */
.editor-styles-wrapper .bb-docblock { margin-top: clamp(44px, 5vw, 64px); }
.editor-styles-wrapper .bb-docblock__title {
    font-size: 1.5rem;
    font-weight: var(--ds-weight-medium);
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 0 0 22px;
    color: var(--ds-color-text);
}
.editor-styles-wrapper .bb-docgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.editor-styles-wrapper .bb-doccard {
    border: 1px solid var(--lrg-hairline);
    border-radius: var(--lrg-radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--ds-color-ground);
    text-decoration: none;
}
.editor-styles-wrapper .bb-doccard__icon { width: 22px; height: 22px; stroke: var(--ds-color-accent); }
.editor-styles-wrapper .bb-doccard__title {
    font-size: 1.05rem;
    font-weight: var(--ds-weight-medium);
    color: var(--ds-color-text);
    line-height: 1.35;
}
.editor-styles-wrapper .bb-doccard__meta { font-size: var(--ds-text-sm); color: var(--lrg-text-72); margin-top: auto; }

@media (max-width: 1080px) {
    .editor-styles-wrapper .bb-docgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .editor-styles-wrapper .bb-docgrid { grid-template-columns: 1fr; }
}