/* ------------------------------------------------------------------ *
 * c_learn.css
 * Copy buttons, "Explain it" Feynman prompts, and complete-the-code
 * exercises for the Basic C tutorial page. Layered on top of
 * basic-c.css (green accents, #f0fdf4 page).
 * ------------------------------------------------------------------ */

/* ---- Copy button on every code block ---------------------------- */
.c-code-wrap { position: relative; }

.c-copy {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    font: 600 0.72rem/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.02em;
    color: #f0fdf4;
    background: #15803d;
    border: 1px solid #4ade80;
    border-radius: 6px;
    padding: 0.34rem 0.62rem;
    cursor: pointer;
    opacity: 0.82;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    z-index: 2;
}
.c-code-wrap:hover .c-copy,
.c-copy:focus-visible { opacity: 1; }
.c-copy:hover { background: #16a34a; color: #fff; }
.c-copy.done { background: #059669; border-color: #059669; color: #fff; opacity: 1; }

/* ---- "How to use this page" — Feynman method intro -------------- */
.c-method {
    margin: 1.5rem 0;
    border: 1px solid #bbf7d0;
    border-left: 5px solid #16a34a;
    border-radius: 10px;
    background: #f0fdf4;
    padding: 1rem 1.25rem 1.1rem;
}
.c-method h2 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    color: #15803d;
}
.c-method ol { margin: 0.4rem 0 0; padding-left: 1.3rem; }
.c-method li { margin: 0.3rem 0; }

/* ---- Complete-the-code exercise --------------------------------- */
.c-ex {
    margin: 1.25rem 0 0.5rem;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.85rem 1rem 1rem;
    box-shadow: 0 2px 10px rgba(22, 163, 74, 0.07);
}
.c-ex-label,
.c-out-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font: 700 0.72rem/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #15803d;
    margin: 0 0 0.4rem;
}
.c-ex-label::before { content: "\270E"; font-size: 0.95em; }   /* ✎ pencil */
.c-ex-task { margin: 0 0 0.55rem; font-size: 0.95rem; }
.c-ex-task strong { color: #15803d; }

.c-out-label { color: #047857; margin-top: 0.85rem; }
.c-out-label::before { content: "\2192"; }                     /* → */

pre.c-output {
    background: #0b1120;
    color: #d1fae5;
    border-left: 3px solid #10b981;
    white-space: pre-wrap;
    margin: 0;
}

/* ---- Reveal-the-solution disclosure ----------------------------- */
details.c-solution {
    margin-top: 0.85rem;
    border-top: 1px dashed #cbd5e1;
    padding-top: 0.7rem;
}
details.c-solution > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: 700 0.8rem/1 Inter, system-ui, sans-serif;
    color: #15803d;
    list-style: none;
    user-select: none;
    padding: 0.3rem 0;
}
details.c-solution > summary::-webkit-details-marker { display: none; }
details.c-solution > summary::before {
    content: "\25B6";                                           /* ▶ */
    font-size: 0.7em;
    transition: transform 0.15s;
}
details.c-solution[open] > summary::before { transform: rotate(90deg); }
details.c-solution > summary:hover { color: #16a34a; }

/* ---- Feynman "explain it simply" prompt ------------------------- */
.c-feynman {
    margin: 1.1rem 0 0.5rem;
    border: 1px solid #ddd6fe;
    border-left: 5px solid #7c3aed;
    border-radius: 10px;
    background: #f5f3ff;
    padding: 0.85rem 1rem 0.9rem;
}
.c-fey-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font: 700 0.72rem/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6d28d9;
    margin: 0 0 0.4rem;
}
.c-fey-label::before { content: "\1F4A1"; }                    /* 💡 */
.c-feynman p { margin: 0.35rem 0; }
.c-fey-q { font-weight: 600; color: #4c1d95; }

details.c-feynman-a { margin-top: 0.5rem; }
details.c-feynman-a > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: 700 0.78rem/1 Inter, system-ui, sans-serif;
    color: #6d28d9;
    list-style: none;
    user-select: none;
    padding: 0.25rem 0;
}
details.c-feynman-a > summary::-webkit-details-marker { display: none; }
details.c-feynman-a > summary::before {
    content: "\25B6";
    font-size: 0.7em;
    transition: transform 0.15s;
}
details.c-feynman-a[open] > summary::before { transform: rotate(90deg); }
details.c-feynman-a > p {
    margin-top: 0.5rem;
    background: #ffffff;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    font-size: 0.93rem;
}

/* Keep basic-c's top margin off the exercise's own <pre> */
.c-ex .c-code-wrap pre,
.c-ex > pre { margin-top: 0.15rem; }

/* ---- Textbook-style lesson text under each section heading -------- */
.c-lesson { margin: 0.25rem 0 1.25rem; }
.c-lesson p { margin: 0 0 0.85rem; }
.c-terms {
    margin: 0.4rem 0 0;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.55;
}
.c-terms::before {
    content: "Key terms";
    display: block;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #15803d;
    margin-bottom: 0.4rem;
}
.c-terms dt { font-weight: 600; color: #1f2937; margin-top: 0.35rem; }
.c-terms dd { margin: 0 0 0 1rem; color: #4b5563; }