/* ============================================================================
 * content-layout.css
 * Unified content reading lane + flat sections for the "about this tool"
 * content that follows each tool. Loaded LAST so it overrides the bundled
 * .educational-content / .edu-* / .content-section rules in app.min.css.
 *
 * Design (owner decisions 2026-06): ~880px reading measure, flat sections
 * separated by hairline dividers (no card boxes around prose).
 *
 * Scope/safety: targets ONLY .educational-content (generated from
 * config/educational-content.json on ~89 tool pages, was 1000px centered) and
 * the .content-section blocks (4 tool pages). The homepage (index-ip.php) uses
 * none of these classes, so it is untouched. Functional callouts (examples,
 * result-good/warning/critical) and the use-case card grid keep their styling.
 * Reversible: delete this file + its <link>.
 * ========================================================================== */

:root { --content-measure: 880px; }

/* ---- 1. Reading lane: tighten the educational content from 1000px to 880px - */
.educational-content { max-width: var(--content-measure); }

/* ---- 2. Flatten the .edu-* section cards into flat blocks + hairline rule --- */
.educational-content .edu-tool-purpose,
.educational-content .edu-how-to-use,
.educational-content .edu-understanding-results,
.educational-content .edu-use-cases,
.educational-content .edu-technical-details,
.educational-content .edu-integration-examples,
.educational-content .edu-best-practices,
.educational-content .edu-resources {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 2.25rem 0 0;
    margin-bottom: 2.25rem;
    border-top: 1px solid var(--surface-border, #e5e7eb);
}
/* The first block sits directly under the section <h2> — no divider above it. */
.educational-content > .edu-tool-purpose:first-of-type {
    border-top: 0;
    padding-top: 0;
}

/* ---- 2b. Shared feature-card grid (reusable across educational content) -----
 * A generic 2-up card grid + card, so pages with "feature card" blocks (SSL
 * Analyzer, the health reports, etc.) migrate onto ONE shared component instead
 * of each defining its own .x-explainer__grid / __card. Sits inside the reading
 * lane; collapses to one column on mobile. */
.educational-content .edu-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin: 1.25rem 0;
}
@media (min-width: 768px) {
    .educational-content .edu-cards { grid-template-columns: 1fr 1fr; }
}
.educational-content .edu-card {
    padding: 1rem 1.5rem;
    border: 1px solid var(--surface-border, #e9ecef);
    border-radius: 12px;
    background: var(--surface-card, #fff);
}
.educational-content .edu-card h3 { margin-top: 0; }

/* ---- 3. .content-section outliers (4 tool pages): same lane + flat --------- */
main .content-section {
    max-width: var(--content-measure);
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 2.25rem 0 0;
    margin-bottom: 2.25rem;
    border-top: 1px solid var(--surface-border, #e5e7eb);
}
main .content-section:first-of-type { border-top: 0; padding-top: 0; }

/* ---- 4. Wide content (tables) breaks out of the measure instead of squishing */
.educational-content table,
main .content-section table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

/* ---- 4b. Bespoke per-page explainer sections into the same reading lane ----
 * Several tool pages render their "about this tool" content in a hand-built
 * wrapper (e.g. .ssl-explainer, .shc-explainer, .dhr-explainer, .monitoring-
 * explainer) that was full-width and inconsistent with the rest of the site.
 * The [class$="-explainer"] selector matches those wrapper sections only — it
 * ends with "-explainer", so the "__card"/"__grid" children and
 * "data-explainer-table" are naturally excluded and keep their own layout. */
main [class$="-explainer"] {
    max-width: var(--content-measure);
    margin-left: auto;
    margin-right: auto;
}

/* ---- 5. Dark mode: keep the hairline dividers subtle ----------------------- */
html[data-theme="dark"] .educational-content .edu-tool-purpose,
html[data-theme="dark"] .educational-content .edu-how-to-use,
html[data-theme="dark"] .educational-content .edu-understanding-results,
html[data-theme="dark"] .educational-content .edu-use-cases,
html[data-theme="dark"] .educational-content .edu-technical-details,
html[data-theme="dark"] .educational-content .edu-integration-examples,
html[data-theme="dark"] .educational-content .edu-best-practices,
html[data-theme="dark"] .educational-content .edu-resources,
html[data-theme="dark"] main .content-section {
    border-top-color: rgba(255, 255, 255, 0.10);
}