/**
 * LumorowLMS — LMS Content (Themed) Block — Stylesheet
 *
 * Everything scoped to `.llmsb-content-block` so it doesn't leak to
 * unrelated content. Both the frontend (PHP render wrapper) and the
 * editor (useBlockProps className) carry this class, so the preview
 * and the live page render identically.
 *
 * CSS variables come from shared.css :root (`--llmsb-primary`, etc.).
 * If shared.css ever changes those colors the content block follows
 * automatically — no hardcoded hex anywhere.
 */

/* ───────────── Outer container ───────────── */
.llmsb-content-block {
    color: var(--llmsb-dark, #1c1c1c);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 2rem;
    padding: 26px 28px;
    background: #fff;
    border: 1px solid var(--llmsb-border, #e5e7eb);
    border-left: 4px solid var(--llmsb-primary, #f77205);
    border-radius: var(--llmsb-radius, 8px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* First / last child margins so the container hugs its content. */
.llmsb-content-block > :first-child { margin-top: 0; }
.llmsb-content-block > :last-child  { margin-bottom: 0; }

/* ───────────── Headings ───────────── */
.llmsb-content-block h1,
.llmsb-content-block h2 {
    color: var(--llmsb-primary, #f77205);
    font-weight: 800;
    line-height: 1.25;
    margin: 1.6rem 0 .65rem;
}
.llmsb-content-block h1 { font-size: 1.7rem; }
.llmsb-content-block h2 { font-size: 1.35rem; }

.llmsb-content-block h3,
.llmsb-content-block h4,
.llmsb-content-block h5,
.llmsb-content-block h6 {
    color: var(--llmsb-dark, #1c1c1c);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.3rem 0 .5rem;
}
.llmsb-content-block h3 { font-size: 1.15rem; }
.llmsb-content-block h4 { font-size: 1.03rem; }
.llmsb-content-block h5 { font-size: .95rem; text-transform: uppercase; letter-spacing: .4px; }
.llmsb-content-block h6 { font-size: .9rem; color: var(--llmsb-muted, #6b7280); }

/* ───────────── Paragraphs & inline ───────────── */
.llmsb-content-block p {
    margin: 0 0 1rem;
}
.llmsb-content-block strong,
.llmsb-content-block b {
    color: var(--llmsb-dark, #1c1c1c);
    font-weight: 700;
}
.llmsb-content-block em,
.llmsb-content-block i {
    font-style: italic;
}
.llmsb-content-block small {
    font-size: .85em;
    color: var(--llmsb-muted, #6b7280);
}

/* ───────────── Links ───────────── */
.llmsb-content-block a {
    color: var(--llmsb-primary, #f77205);
    text-decoration: underline;
    text-decoration-color: var(--llmsb-primary, #f77205);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: filter .15s;
}
.llmsb-content-block a:hover {
    filter: brightness(.85);
}

/* ───────────── Lists ───────────── */
.llmsb-content-block ul,
.llmsb-content-block ol {
    margin: 0 0 1rem 1.5rem;
    padding: 0;
}
.llmsb-content-block li {
    margin: .35rem 0;
}
.llmsb-content-block ul > li::marker,
.llmsb-content-block ol > li::marker {
    color: var(--llmsb-primary, #f77205);
    font-weight: 700;
}
.llmsb-content-block li > ul,
.llmsb-content-block li > ol {
    margin-top: .35rem;
    margin-bottom: 0;
}

/* ───────────── Tables ───────────── */
.llmsb-content-block .wp-block-table { margin: 1.25rem 0; }
.llmsb-content-block table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--llmsb-border, #e5e7eb);
    border-radius: var(--llmsb-radius, 8px);
    overflow: hidden;
    font-size: .95rem;
}
.llmsb-content-block thead {
    background: var(--llmsb-primary, #f77205);
    color: #fff;
}
.llmsb-content-block thead th {
    font-weight: 700;
    letter-spacing: .2px;
}
.llmsb-content-block th,
.llmsb-content-block td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--llmsb-border, #e5e7eb);
}
.llmsb-content-block th + th,
.llmsb-content-block td + td {
    border-left: 1px solid var(--llmsb-border, #e5e7eb);
}
.llmsb-content-block tbody tr:nth-child(even) {
    background: var(--llmsb-primary-pale, #fef6ea);
}
.llmsb-content-block tbody tr:last-child th,
.llmsb-content-block tbody tr:last-child td {
    border-bottom: 0;
}
.llmsb-content-block .wp-block-table figcaption {
    text-align: center;
    color: var(--llmsb-muted, #6b7280);
    font-size: .85rem;
    font-style: italic;
    margin-top: .5rem;
}

/* ───────────── Blockquote / pullquote ───────────── */
.llmsb-content-block blockquote,
.llmsb-content-block .wp-block-quote {
    border-left: 4px solid var(--llmsb-primary, #f77205);
    background: var(--llmsb-primary-pale, #fef6ea);
    margin: 1.25rem 0;
    padding: .75rem 1rem .75rem 1.25rem;
    color: var(--llmsb-mid, #444);
    font-style: italic;
    border-radius: 0 var(--llmsb-radius, 8px) var(--llmsb-radius, 8px) 0;
}
.llmsb-content-block blockquote cite,
.llmsb-content-block .wp-block-quote cite {
    display: block;
    margin-top: .5rem;
    font-size: .85rem;
    font-style: normal;
    color: var(--llmsb-muted, #6b7280);
}
.llmsb-content-block .wp-block-pullquote {
    border-top: 3px solid var(--llmsb-primary, #f77205);
    border-bottom: 3px solid var(--llmsb-primary, #f77205);
    padding: 1.25rem 1rem;
    text-align: center;
    margin: 1.5rem 0;
}

/* ───────────── Code ───────────── */
.llmsb-content-block code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .9em;
    padding: 2px 6px;
    background: var(--llmsb-primary-pale, #fef6ea);
    color: var(--llmsb-primary-dk, #c45e04);
    border-radius: 4px;
}
.llmsb-content-block pre,
.llmsb-content-block .wp-block-code,
.llmsb-content-block .wp-block-preformatted {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
    padding: 14px 18px;
    background: #f9fafb;
    border: 1px solid var(--llmsb-border, #e5e7eb);
    border-radius: var(--llmsb-radius, 8px);
    overflow-x: auto;
    margin: 1rem 0;
}
.llmsb-content-block pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* ───────────── Separator ───────────── */
.llmsb-content-block hr,
.llmsb-content-block .wp-block-separator {
    border: 0;
    height: 2px;
    background: var(--llmsb-primary-pale, #fef6ea);
    margin: 1.75rem 0;
}
.llmsb-content-block .wp-block-separator.is-style-wide {
    height: 2px;
}
.llmsb-content-block .wp-block-separator.is-style-dots {
    background: transparent;
    color: var(--llmsb-primary, #f77205);
    text-align: center;
    line-height: 1;
}

/* ───────────── Images ───────────── */
.llmsb-content-block img {
    max-width: 100%;
    height: auto;
    border-radius: var(--llmsb-radius, 8px);
}
.llmsb-content-block .wp-block-image {
    margin: 1rem 0;
}
.llmsb-content-block .wp-block-image figcaption {
    text-align: center;
    color: var(--llmsb-muted, #6b7280);
    font-size: .85rem;
    font-style: italic;
    margin-top: .4rem;
}

/* ───────────── Buttons (when pasted) ───────────── */
.llmsb-content-block .wp-block-button__link {
    background: var(--llmsb-primary, #f77205);
    color: #fff;
    border-radius: var(--llmsb-radius, 8px);
    padding: 10px 26px;
    font-weight: 700;
    text-decoration: none;
}
.llmsb-content-block .wp-block-button__link:hover {
    filter: brightness(.9);
}

/* ───────────── Editor-only tweaks ─────────────
   The editor wrapper adds .llmsb-content-editor. Keep the editor
   preview tight against the canvas (Gutenberg already pads its
   block area) and let the InnerBlocks placeholder pick up the
   muted color so the hint text reads as a hint. */
.llmsb-content-editor .block-editor-inner-blocks {
    margin: 0;
}
.llmsb-content-editor .wp-block[data-empty="true"] p.is-empty {
    color: var(--llmsb-muted, #6b7280);
}

/* ───────────── Mobile ───────────── */
@media (max-width: 640px) {
    .llmsb-content-block {
        padding: 18px 16px;
    }
    .llmsb-content-block h1 { font-size: 1.45rem; }
    .llmsb-content-block h2 { font-size: 1.2rem; }
    .llmsb-content-block table { font-size: .88rem; }
    .llmsb-content-block th,
    .llmsb-content-block td { padding: 8px 10px; }
}