/* ==========================================================
   HORIZON BEE AFRICA — LEGAL PAGES (Privacy Policy)
   Uses site.css for the header, hero, footer and colours.
   Layout: contents list on the left (sticky on desktops),
   the policy text on the right, set for comfortable reading.
   ========================================================== */

.legal-hero {
    min-height: 220px;
}

.legal-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 56px;
}


/* ----------------------------------------------------------
   Contents
   ---------------------------------------------------------- */

.legal-toc {
    position: sticky;
    top: calc(var(--header-height) + 24px);

    padding: 22px 22px 18px;

    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
}

.legal-toc-title {
    margin: 0 0 12px;

    color: var(--brown-dark);

    font-size: 0.95rem;
    font-weight: 700;
}

.legal .legal-toc ol {
    margin: 0;
    padding: 0;

    list-style: none;
    counter-reset: toc;
}

.legal-toc li {
    counter-increment: toc;
}

.legal-toc a {
    display: flex;
    gap: 8px;

    padding: 6px 0;

    color: var(--text-soft);

    font-size: 0.9rem;
    line-height: 1.35;
    text-decoration: none;
}

.legal-toc a::before {
    content: counter(toc) ".";

    flex: 0 0 24px;

    color: var(--text-muted);
}

.legal-toc a:hover,
.legal-toc a.is-current {
    color: var(--brown);
}

.legal-toc a.is-current {
    font-weight: 600;
}


/* ----------------------------------------------------------
   Text
   ---------------------------------------------------------- */

.legal-body {
    max-width: 760px;

    color: var(--text);

    font-size: 1rem;
    line-height: 1.75;
}

.legal-updated {
    margin: 0 0 18px;

    color: var(--text-muted);

    font-size: 0.9rem;
}

.legal-intro {
    margin: 0 0 12px;
    padding: 20px 22px;

    background: var(--white);
    border-left: 3px solid var(--brown);

    color: var(--text);

    font-size: 1.05rem;
}

.legal-body h2 {
    margin: 44px 0 14px;
    padding-top: 8px;

    color: var(--brown-dark);

    font-size: 1.45rem;
    line-height: 1.3;

    scroll-margin-top: calc(var(--header-height) + 20px);
}

.legal-body h3 {
    margin: 26px 0 10px;

    color: var(--brown);

    font-size: 1.08rem;
}

.legal-body p {
    margin: 0 0 14px;

    color: var(--text-soft);
}

.legal-body a {
    color: var(--brown);
    font-weight: 600;
}

.legal-body a:hover {
    color: var(--gold-dark);
}

.legal-body strong {
    color: var(--text);
}

/* Label + explanation pairs */
.legal-list {
    margin: 0 0 16px;

    border-top: 1px solid var(--line);
}

.legal-list dt {
    padding-top: 14px;

    color: var(--brown-dark);

    font-weight: 700;
}

.legal-list dd {
    margin: 2px 0 0;
    padding-bottom: 14px;

    border-bottom: 1px solid var(--line);

    color: var(--text-soft);
}

.legal-points {
    margin: 0 0 16px;
    padding: 0;

    list-style: none;
}

.legal-points li {
    position: relative;

    padding: 6px 0 6px 22px;

    color: var(--text-soft);
}

.legal-points li::before {
    content: "";

    position: absolute;
    top: 17px;
    left: 2px;

    width: 7px;
    height: 7px;

    background: var(--gold);
}

.legal-contact {
    padding: 22px 24px;

    background: var(--white);
    border: 1px solid var(--line);
}

.legal-contact p {
    margin: 0 0 4px;
}


/* ----------------------------------------------------------
   Tablets and phones: contents above the text
   ---------------------------------------------------------- */

@media (max-width: 960px) {

    .legal-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .legal-toc {
        position: static;
    }

    .legal .legal-toc ol {
        columns: 2;
        column-gap: 24px;
    }

    .legal-toc li {
        break-inside: avoid;
    }
}

@media (max-width: 560px) {

    .legal .legal-toc ol {
        columns: 1;
    }

    .legal-body {
        font-size: 0.97rem;
    }

    .legal-body h2 {
        margin-top: 36px;

        font-size: 1.25rem;
    }

    .legal-intro {
        padding: 16px 18px;
    }
}