/* ============================================================
   EduJA — shared styles for the public legal pages
   (cookie-policy.html, privacy-policy.html). Reuses css/style.css
   for the page background/top-bar/footer; this file only styles
   the document body itself.
   ============================================================ */

.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 4px 16px 30px;
}

.legal-top-bar { display: flex; justify-content: center; padding: 10px 0 18px; }

.legal-content {
    background: #ffffff;
    color: #1a1a2e;
    border-radius: 16px;
    border: 2px solid #FDB827;
    padding: 26px 24px 30px;
}

.legal-content h1 { color: #006633; font-size: 1.5rem; margin-bottom: 4px; }
.legal-updated { font-size: 0.78rem; color: #666; margin-bottom: 20px; }

.legal-content h2 {
    color: #006633;
    font-size: 1.08rem;
    margin: 26px 0 8px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}
.legal-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 10px; }

.legal-content p, .legal-content li { font-size: 0.88rem; line-height: 1.6; margin-bottom: 10px; }
.legal-content ul, .legal-content ol { padding-left: 22px; margin-bottom: 12px; }
.legal-content a { color: #006633; font-weight: 600; }
.legal-content strong { color: #1a1a2e; }

.legal-table-wrap { overflow-x: auto; margin: 10px 0 16px; }
.legal-table { border-collapse: collapse; width: 100%; font-size: 0.78rem; }
.legal-table th, .legal-table td {
    border: 1px solid #e5e5e0;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.legal-table th { background: #f0f0e8; color: #1a1a2e; }
.legal-table code { background: #f0f0e8; padding: 1px 5px; border-radius: 4px; font-size: 0.74rem; }

.legal-cookie-settings-btn {
    display: inline-block;
    background: #FDB827;
    color: #000;
    font-weight: 700;
    text-decoration: none;
    border: none;
    border-radius: 30px;
    padding: 9px 18px;
    font-size: 0.82rem;
    cursor: pointer;
    margin: 4px 0 14px;
}
.legal-cookie-settings-btn:hover { background: #ffcf5c; }

.legal-cross-links { margin-top: 22px; padding-top: 14px; border-top: 1px solid #eee; font-size: 0.82rem; }

/* ---- Shared light-theme form (contact.html, delete-account.html) ---- */
.legal-form { display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin: 14px 0 6px; }
.legal-form-row { display: flex; flex-direction: column; gap: 4px; }
.legal-form-row label { font-size: 0.8rem; font-weight: 600; color: #1a1a2e; }
.legal-form input, .legal-form select, .legal-form textarea {
    border: 1.5px solid #d8d8cc;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.88rem;
    color: #1a1a2e;
    background: #fbfbf7;
    font-family: inherit;
}
.legal-form input:focus, .legal-form select:focus, .legal-form textarea:focus {
    outline: none;
    border-color: #006633;
}
.legal-form textarea { resize: vertical; min-height: 100px; }
.legal-form-hint { font-size: 0.74rem; color: #666; }
.legal-form-submit {
    align-self: flex-start;
    background: #006633;
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    padding: 11px 24px;
    font-size: 0.88rem;
    cursor: pointer;
    min-height: 42px;
}
.legal-form-submit:hover { background: #00854a; }
.legal-form-submit:disabled { opacity: 0.6; cursor: default; }
.legal-form-status { font-size: 0.82rem; min-height: 1.2em; margin-top: 2px; }
.legal-form-status.success { color: #006633; font-weight: 600; }
.legal-form-status.error { color: #b91c1c; font-weight: 600; }
/* Honeypot field: visually and structurally hidden from real users
   and screen readers alike, but still present in the DOM/tab order
   spec so a scripted bot filling every input still trips it. */
.legal-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
    .legal-content { padding: 20px 16px 24px; }
    .legal-content h1 { font-size: 1.25rem; }
}