/*
 * OSC Editorial Component System
 * Renderer Version 1.2.0
 *
 * Canonical design-system adapter for Gutenberg and long-form editorial use.
 *
 * Semantic contract:
 * - osc-intro          = lead / opening emphasis
 * - osc-quote          = leadership question / quotation
 * - osc-definition-box = named concept / definition
 * - osc-evidence-box   = evidence / proof / observed outcome
 * - osc-bullet-box     = signals / criteria / elevated list
 * - osc-decision-card  = recommendation / decision / gate
 * - osc-framework      = framework / principle / model
 *
 * Gutenberg is static-first. Elementor choreography, sticky behavior,
 * rails, hover systems and page-layout geometry do not belong here.
 */

:root {
    --osc-deep-navy: #0B1D3A;
    --osc-core-blue: #102E76;
    --osc-text: #0E1111;
    --osc-signal-yellow: #E6FF3C;
    --osc-background: #F4F6F8;
    --osc-white: #FFFFFF;
    --osc-muted: #6B7280;
    --osc-border: #D1D5DB;
    --osc-dark-alt: #08162A;

    --osc-radius: 4px;
    --osc-lead-measure: 52rem;

    --osc-elevated-shadow:
        0 8px 24px rgba(11, 29, 58, 0.06);

    --osc-evidence-offset:
        4px 4px 0 var(--osc-deep-navy);
}


/* =========================================================
   Shared component safety
   ========================================================= */

.osc-intro,
.osc-quote,
.osc-bullet-box,
.osc-evidence-box,
.osc-definition-box,
.osc-framework,
.osc-framework-box,
.osc-decision-card {
    box-sizing: border-box;
}


/* =========================================================
   Lead paragraph
   Communication job: opening thesis / central tension
   Surface: Plain / Quiet
   ========================================================= */

p.osc-intro {
    max-width: var(--osc-lead-measure);
    margin: 0 0 2.25rem;
    color: var(--osc-deep-navy);
    font-size: clamp(1.22rem, 1.11rem + 0.45vw, 1.42rem);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.01em;
}

p.osc-intro strong {
    font-weight: 700;
}


/* =========================================================
   Leadership question / quotation
   Communication job: pause, challenge, quote, reframe
   Surface: Plain / Quiet
   ========================================================= */

blockquote.osc-quote {
    margin: 2.75rem 0;
    padding: 0.65rem 0 0.65rem 1.5rem;
    border: 0;
    border-left: 6px solid var(--osc-signal-yellow);
    background: transparent;
    color: var(--osc-deep-navy);
    box-shadow: none;
}

blockquote.osc-quote p {
    margin: 0;
    color: var(--osc-deep-navy);
    font-size: clamp(1.38rem, 1.22rem + 0.68vw, 1.7rem);
    line-height: 1.32;
    font-weight: 600;
    font-style: normal;
    letter-spacing: -0.015em;
}

blockquote.osc-quote cite {
    display: block;
    margin-top: 0.75rem;
    color: var(--osc-muted);
    font-size: 0.95rem;
    line-height: 1.4;
    font-style: normal;
}


/* =========================================================
   Elevated editorial surfaces
   Communication jobs:
   - Definition
   - Signal / criteria list
   - Decision
   ========================================================= */

.osc-bullet-box,
.osc-definition-box,
.osc-decision-card {
    margin: 2.25rem 0 2.75rem;
    padding: 1.75rem 2rem;

    border: 1px solid var(--osc-border);
    border-radius: var(--osc-radius);

    background: var(--osc-white);
    color: var(--osc-text);

    box-shadow: var(--osc-elevated-shadow);
}


/* Shared heading treatment for bounded light components */

.osc-bullet-box > :is(h2, h3, h4):first-child,
.osc-definition-box > :is(h2, h3, h4):first-child,
.osc-evidence-box > :is(h2, h3, h4):first-child,
.osc-decision-card > :is(h2, h3, h4):first-child {
    margin-top: 0;
    margin-bottom: 1rem;

    color: var(--osc-deep-navy);

    font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.48rem);
    line-height: 1.2;
    font-weight: 700;
}


/* =========================================================
   Definition box
   Communication job: explain what a named concept means
   Surface: quiet / elevated
   ========================================================= */

.osc-definition-box {
    border-left: 6px solid var(--osc-signal-yellow);
    background: var(--osc-background);
}

.osc-definition-box p,
.osc-definition-box li {
    color: var(--osc-text);
}


/* =========================================================
   Evidence box
   Communication job: evidence / proof / observed outcome
   Surface: Layered Evidence
   ========================================================= */

.osc-evidence-box {
    position: relative;

    margin: 2.25rem 4px 2.75rem 0;
    padding: 1.75rem 2rem;

    border: 1px solid var(--osc-border);
    border-radius: var(--osc-radius);

    background: var(--osc-white);
    color: var(--osc-text);

    /*
     * Canonical Layered Evidence:
     * restrained light surface + crisp Deep Navy offset plane.
     */
    box-shadow: var(--osc-evidence-offset);
}

.osc-evidence-box p,
.osc-evidence-box li {
    color: var(--osc-text);
}

.osc-evidence-box em {
    color: var(--osc-muted);
}


/* =========================================================
   Signal / criteria list
   Communication job: compact signals, criteria, warnings
   Surface: neutral Elevated Surface
   ========================================================= */

.osc-bullet-box {
    background: var(--osc-white);
}


/* =========================================================
   Decision card
   Communication job: decision / recommendation / gate
   Surface: Decision Light / Elevated Surface
   Signal Yellow is semantic: progression / decision
   ========================================================= */

.osc-decision-card {
    border-top: 4px solid var(--osc-signal-yellow);
    background: var(--osc-white);
}


/* =========================================================
   Framework / principle
   Communication job: conceptual model / reasoning structure
   Surface: Strategic Dark
   ========================================================= */

/*
 * osc-framework-box is retained as a temporary compatibility alias.
 * New editorial content should use osc-framework.
 */
.osc-framework,
.osc-framework-box {
    margin: 2.5rem 0 3rem;
    padding: 2.25rem;

    border: 1px solid var(--osc-deep-navy);
    border-radius: var(--osc-radius);

    background: var(--osc-deep-navy);
    color: var(--osc-white);

    box-shadow: none;
}

.osc-framework > :is(h2, h3, h4):first-child,
.osc-framework-box > :is(h2, h3, h4):first-child {
    margin-top: 0;
    margin-bottom: 1.35rem;

    color: var(--osc-signal-yellow);

    font-size: clamp(1.35rem, 1.22rem + 0.5vw, 1.65rem);
    line-height: 1.18;
    font-weight: 700;
}

.osc-framework :is(p, li, strong, em),
.osc-framework-box :is(p, li, strong, em) {
    color: var(--osc-white);
}

.osc-framework a,
.osc-framework-box a {
    color: var(--osc-signal-yellow);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.osc-framework a:focus-visible,
.osc-framework-box a:focus-visible {
    outline: 2px solid var(--osc-signal-yellow);
    outline-offset: 3px;
}


/* =========================================================
   Lists inside bounded components
   ========================================================= */

:is(
    .osc-bullet-box,
    .osc-evidence-box,
    .osc-definition-box,
    .osc-decision-card
) :is(ul, ol) {
    margin: 1rem 0 0;
    padding-left: 1.4rem;
}

:is(
    .osc-bullet-box,
    .osc-evidence-box,
    .osc-definition-box,
    .osc-decision-card
) li {
    margin-bottom: 0.7rem;
    line-height: 1.55;
}

:is(
    .osc-bullet-box,
    .osc-evidence-box,
    .osc-definition-box,
    .osc-decision-card
) li:last-child {
    margin-bottom: 0;
}


/* Decision markers receive the semantic progression accent. */

.osc-decision-card li::marker {
    color: var(--osc-deep-navy);
    font-weight: 700;
}


/* Framework lists */

.osc-framework :is(ul, ol),
.osc-framework-box :is(ul, ol) {
    margin: 1rem 0 0;
    padding-left: 1.45rem;
}

.osc-framework li,
.osc-framework-box li {
    margin-bottom: 0.85rem;
    padding-left: 0.2rem;
    line-height: 1.55;
}

.osc-framework li:last-child,
.osc-framework-box li:last-child {
    margin-bottom: 0;
}

.osc-framework li::marker,
.osc-framework-box li::marker {
    color: var(--osc-signal-yellow);
    font-weight: 700;
}


/* =========================================================
   Last-child rhythm
   Prevent Gutenberg's default margins from creating excess
   space at the bottom of bounded components.
   ========================================================= */

:is(
    .osc-bullet-box,
    .osc-definition-box,
    .osc-evidence-box,
    .osc-decision-card,
    .osc-framework,
    .osc-framework-box
) > *:last-child {
    margin-bottom: 0;
}


/* =========================================================
   Gutenberg editor resilience
   The semantic classes above are intentionally renderer-
   agnostic. These rules only neutralize editor-only geometry
   that can obscure the true article treatment.
   ========================================================= */

.editor-styles-wrapper .osc-bullet-box,
.editor-styles-wrapper .osc-definition-box,
.editor-styles-wrapper .osc-evidence-box,
.editor-styles-wrapper .osc-decision-card,
.editor-styles-wrapper .osc-framework,
.editor-styles-wrapper .osc-framework-box {
    max-width: none;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

    p.osc-intro {
        margin-bottom: 1.75rem;
    }

    blockquote.osc-quote {
        margin: 2rem 0;
        padding-left: 1rem;
        border-left-width: 5px;
    }

    .osc-bullet-box,
    .osc-definition-box,
    .osc-decision-card,
    .osc-evidence-box,
    .osc-framework,
    .osc-framework-box {
        margin: 1.75rem 0 2.25rem;
        padding: 1.35rem;
    }

    .osc-definition-box {
        border-left-width: 5px;
    }

    .osc-evidence-box {
        margin-right: 3px;
        box-shadow: 3px 3px 0 var(--osc-deep-navy);
    }

    .osc-decision-card {
        border-top-width: 4px;
    }
}


/* =========================================================
   Print / static resilience
   ========================================================= */

@media print {

    .osc-bullet-box,
    .osc-definition-box,
    .osc-evidence-box,
    .osc-decision-card,
    .osc-framework,
    .osc-framework-box {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .osc-evidence-box {
        box-shadow: 3px 3px 0 var(--osc-deep-navy);
    }

    .osc-framework,
    .osc-framework-box {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}