/* Special styling for diagrams and illustrations from RAP */

.diagram-container {
    background-color: var(--aged-paper);
    border: 2px solid var(--ink-black);
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.diagram-title {
    font-family: 'Arial Black', sans-serif;
    font-size: 1.2em;
    text-transform: uppercase;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--ink-black);
    padding-bottom: 5px;
}

/* Body Politic Diagram */
.body-politic-diagram {
    background-color: #f0f0f0;
    border: 3px solid var(--ink-black);
    padding: 15px;
}

.diagram-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.diagram-note {
    font-size: 0.85em;
    font-style: italic;
    margin-top: 10px;
    color: #666;
}

/* Illustration boxes */
.illustration-box {
    border: 3px solid var(--ink-black);
    background-color: #e0e0e0;
    padding: 20px;
    margin: 15px 0;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.illustration-caption {
    font-weight: bold;
    margin-top: 10px;
    font-size: 0.9em;
}

/* Comic/cartoon style boxes */
.comic-panel {
    border: 4px solid var(--ink-black);
    background-color: white;
    padding: 15px;
    margin: 15px 0;
}

.speech-bubble {
    background-color: white;
    border: 2px solid var(--ink-black);
    border-radius: 10px;
    padding: 10px 15px;
    position: relative;
    display: inline-block;
    margin: 10px;
}

.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 20px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--ink-black);
}

/* Flowchart elements */
.flowchart-node {
    border: 2px solid var(--ink-black);
    border-radius: 50%;
    padding: 15px;
    background-color: white;
    display: inline-block;
    min-width: 100px;
    text-align: center;
    margin: 10px;
    font-size: 0.85em;
}

.flowchart-arrow {
    display: inline-block;
    margin: 0 10px;
}

.flowchart-arrow::before {
    content: "→";
    font-size: 2em;
    font-weight: bold;
}

/* Hand-drawn style elements */
.handdrawn-box {
    border: 3px solid var(--ink-black);
    border-radius: 5px;
    padding: 15px;
    background-color: var(--aged-paper);
    /* Simulate hand-drawn border */
    box-shadow:
        1px 1px 0 var(--ink-black),
        -1px -1px 0 var(--ink-black);
}

/* Protest/activism imagery */
.raised-fist-symbol {
    font-size: 3em;
    display: block;
    text-align: center;
    margin: 20px 0;
}

.raised-fist-symbol::before {
    content: "✊";
}

/* Guerrilla graphics style */
.stencil-text {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 2em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    background-color: var(--ink-black);
    color: var(--paper-white);
    padding: 20px;
    margin: 20px 0;
    /* Rough edges effect */
    clip-path: polygon(
        0% 2%, 2% 0%, 98% 0%, 100% 2%,
        100% 98%, 98% 100%, 2% 100%, 0% 98%
    );
}