/* ============================================================
   IDK-LEGAL.CSS — Idakera Studio Legal Pages
   Styles the legal content area. The header uses the shared
   homepage shadow and controls from idk-home.css.
   Load AFTER idk-home.css.
   ============================================================ */

/* ---- Page surface ---- */
body.idk-legal-page {
    background: var(--idk-bg);
    color: var(--idk-ink);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ---- Legal content column ---- */
.idk-legal-page .legal-content {
    max-width: 760px;
    margin: 160px auto 0;              /* top margin clears the fixed header */
    /* Keep the footer's overlapping wave entirely below the last paragraph.
       Padding prevents the final paragraph's margin from collapsing. */
    padding: 0 1.5rem calc(var(--idk-wave-overlap) + 3rem);
    font-family: var(--idk-font-sans);
    line-height: 1.8;
}

.idk-legal-page .legal-content h1 {
    font-family: var(--idk-font-serif);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1.5rem;
    color: var(--idk-ink);
}

.idk-legal-page .legal-content h2 {
    font-family: var(--idk-font-serif);
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: 600;
    margin: 2.6rem 0 0.9rem;
    color: var(--idk-ink);
}

.idk-legal-page .legal-content p,
.idk-legal-page .legal-content li {
    font-size: 1.05rem;
    color: var(--idk-ink-muted);
    margin-bottom: 1.3rem;
}

.idk-legal-page .legal-content ul {
    padding-left: 1.4rem;
    margin-bottom: 1.3rem;
}

.idk-legal-page .legal-content li {
    margin-bottom: 0.7rem;
}

.idk-legal-page .legal-content strong {
    color: var(--idk-ink);
    font-weight: 600;
}

.idk-legal-page .legal-content em {
    color: var(--idk-ink-muted);
}

.idk-legal-page .legal-content a {
    color: var(--idk-ink);
    text-decoration: underline;
    text-decoration-color: rgba(26, 26, 26, 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.3s ease;
}
.idk-legal-page .legal-content a:hover {
    text-decoration-color: var(--idk-ink);
}

/* Small screens: tighten content spacing */
@media (max-width: 768px) {
    .idk-legal-page .legal-content {
        margin-top: 120px;
        padding-inline: 1.25rem;
    }
}