/* ------------------------------------------------------------------ *
 * php_learn.css
 * Copy buttons, "Explain it" Feynman prompts, and complete-the-code
 * exercises for the Basic PHP tutorial page. Layered on top of
 * basic-php.css (blue accents, #f0f4ff page).
 * ------------------------------------------------------------------ */

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

.php-copy {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    font: 600 0.72rem/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.02em;
    color: #eff6ff;
    background: #1d4ed8;
    border: 1px solid #60a5fa;
    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;
}
.php-code-wrap:hover .php-copy,
.php-copy:focus-visible { opacity: 1; }
.php-copy:hover { background: #2563eb; color: #fff; }
.php-copy.done { background: #059669; border-color: #059669; color: #fff; opacity: 1; }

/* ---- "How to use this page" — Feynman method intro -------------- */
.php-method {
    margin: 1.5rem 0;
    border: 1px solid #bfdbfe;
    border-left: 5px solid #2563eb;
    border-radius: 10px;
    background: #eff6ff;
    padding: 1rem 1.25rem 1.1rem;
}
.php-method h2 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    color: #1d4ed8;
}
.php-method ol { margin: 0.4rem 0 0; padding-left: 1.3rem; }
.php-method li { margin: 0.3rem 0; }

/* ---- Complete-the-code exercise --------------------------------- */
.php-ex {
    margin: 1.25rem 0 0.5rem;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.85rem 1rem 1rem;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.07);
}
.php-ex-label,
.php-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: #1d4ed8;
    margin: 0 0 0.4rem;
}
.php-ex-label::before { content: "\270E"; font-size: 0.95em; }   /* ✎ pencil */
.php-ex-task { margin: 0 0 0.55rem; font-size: 0.95rem; }
.php-ex-task strong { color: #1d4ed8; }

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

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

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

/* ---- Feynman "explain it simply" prompt ------------------------- */
.php-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;
}
.php-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;
}
.php-fey-label::before { content: "\1F4A1"; }                    /* 💡 */
.php-feynman p { margin: 0.35rem 0; }
.php-fey-q { font-weight: 600; color: #4c1d95; }

details.php-feynman-a { margin-top: 0.5rem; }
details.php-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.php-feynman-a > summary::-webkit-details-marker { display: none; }
details.php-feynman-a > summary::before {
    content: "\25B6";
    font-size: 0.7em;
    transition: transform 0.15s;
}
details.php-feynman-a[open] > summary::before { transform: rotate(90deg); }
details.php-feynman-a > p {
    margin-top: 0.5rem;
    background: #ffffff;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    font-size: 0.93rem;
}

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

/* ---- Textbook-style lesson text under each section heading -------- */
.php-lesson { margin: 0.25rem 0 1.25rem; }
.php-lesson p { margin: 0 0 0.85rem; }
.php-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;
}
.php-terms::before {
    content: "Key terms";
    display: block;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1d4ed8;
    margin-bottom: 0.4rem;
}
.php-terms dt { font-weight: 600; color: #1f2937; margin-top: 0.35rem; }
.php-terms dd { margin: 0 0 0 1rem; color: #4b5563; }