/* =========================================================================
   Gentle Wellness -- Privacy Policy and Terms of Service
   =========================================================================
   Lifted out of two near-identical inline <style> blocks, one per page. They
   had drifted: both set an 18px body against the site's 20px standard, and
   both re-declared the palette under legacy token names. These are the
   longest documents on the site and the ones a worried adult child reads
   before signing a parent up, so they get the same type as everything else.

   Consumes --gw-* tokens from site.css and declares no palette of its own.
   ========================================================================= */

.legal {
    max-width: 900px;
    margin-inline: auto;
    padding: var(--gw-space-5) var(--gw-space-3) var(--gw-space-6);
    font-size: var(--gw-text-base);
    line-height: var(--gw-leading-body);
}

/* ---- Masthead ---------------------------------------------------------- */
.legal__header {
    text-align: center;
    margin-bottom: var(--gw-space-5);
    padding-bottom: var(--gw-space-4);
    border-bottom: 3px solid var(--gw-forest);
}

.legal__header h1 {
    font-size: var(--gw-text-3xl);
    color: var(--gw-forest);
    margin-bottom: var(--gw-space-2);
}

.legal__dates {
    color: var(--gw-ink-muted);
    font-size: var(--gw-text-sm);
}

/* ---- Plain-language summary -------------------------------------------- */
.legal__plain {
    background: var(--gw-forest);
    color: #FFFFFF;
    padding: var(--gw-space-3);
    border-radius: var(--gw-radius-lg);
    margin-block: var(--gw-space-4);
}

.legal__plain h2 {
    color: #FFFFFF;
    font-size: var(--gw-text-xl);
    margin-bottom: var(--gw-space-2);
}

.legal__plain p {
    margin-bottom: 0;
    color: #F1F5F1;
}

/* ---- Contents ---------------------------------------------------------- */
.legal__toc {
    background: var(--gw-bg);
    padding: var(--gw-space-4);
    border-radius: var(--gw-radius-lg);
    margin-block: var(--gw-space-4);
    border: 2px solid var(--gw-border);
}

.legal__toc h2 {
    font-size: var(--gw-text-xl);
    margin-bottom: var(--gw-space-2);
    color: var(--gw-forest);
}

.legal__toc ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

@media (min-width: 48rem) {
    .legal__toc ul {
        column-count: 2;
        column-gap: var(--gw-space-4);
    }
}

.legal__toc li {
    margin-bottom: 0.25rem;
    break-inside: avoid;
}

.legal__toc a {
    display: flex;
    align-items: baseline;
    gap: var(--gw-space-1);
    min-height: var(--gw-touch);
    padding: var(--gw-space-1);
    border-radius: var(--gw-radius);
    font-weight: 600;
    color: var(--gw-link);
}

.legal__toc a:hover {
    background: var(--gw-surface);
}

.legal__toc-num {
    color: var(--gw-ink-muted);
    font-weight: 700;
    min-width: 1.75rem;
    flex-shrink: 0;
}

/* ---- Sections ----------------------------------------------------------
   Native <details>. They previously relied on Bootstrap's collapse
   JavaScript, which the public layout does not load. */
.legal__section {
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius);
    background: var(--gw-surface);
    margin-bottom: var(--gw-space-2);
    overflow: hidden;
}

.legal__section > summary {
    display: flex;
    align-items: center;
    gap: var(--gw-space-2);
    min-height: var(--gw-touch);
    padding: var(--gw-space-3);
    font-family: var(--gw-font-display);
    font-size: var(--gw-text-xl);
    font-weight: 700;
    color: var(--gw-forest);
    background: var(--gw-bg);
    cursor: pointer;
    list-style: none;
}

.legal__section > summary::-webkit-details-marker { display: none; }

.legal__section > summary::after {
    content: "+";
    margin-left: auto;
    padding-left: var(--gw-space-2);
    font-size: var(--gw-text-2xl);
    line-height: 1;
    color: var(--gw-link);
    flex-shrink: 0;
}

.legal__section[open] > summary {
    background: var(--gw-forest);
    color: #FFFFFF;
}

.legal__section[open] > summary::after {
    content: "\2212";
    color: #FFFFFF;
}

.legal__section > summary:hover { background: var(--gw-surface-mist); }

.legal__section[open] > summary:hover { background: var(--gw-forest-soft); }

.legal__section > summary:focus-visible {
    outline: 4px solid var(--gw-link);
    outline-offset: -4px;
}

/* A section jumped to from the contents list, so it is obvious which one
   answered you when several are open at once. */
.legal__section:target {
    border-color: var(--gw-link);
    box-shadow: 0 0 0 3px rgba(31, 90, 70, 0.18);
}

.legal__body {
    padding: var(--gw-space-4);
}

.legal__body > :last-child { margin-bottom: 0; }

.legal__body h3 {
    font-size: var(--gw-text-xl);
    margin-top: var(--gw-space-3);
}

.legal__body h4 {
    font-size: var(--gw-text-lg);
    margin-top: var(--gw-space-3);
    margin-bottom: var(--gw-space-1);
    color: var(--gw-forest);
}

/* ---- Callouts ---------------------------------------------------------- */
.legal__note {
    background: var(--gw-bg);
    border-left: 6px solid var(--gw-link);
    padding: var(--gw-space-3);
    margin-block: var(--gw-space-3);
    border-radius: 0 var(--gw-radius) var(--gw-radius) 0;
}

.legal__note > :last-child { margin-bottom: 0; }

.legal__note--warn {
    border-left-color: #8A6A1F;
    background: #FBF7EE;
}

.legal__note--good {
    border-left-color: var(--gw-forest);
    background: #F4F7F4;
}

.legal__note--urgent {
    border-left-color: var(--gw-error-ink);
    background: var(--gw-error-bg);
}

.legal__note--urgent h3,
.legal__note--urgent h4 { color: var(--gw-error-ink); }

/* ---- Marked lists ------------------------------------------------------ */
.legal__yes,
.legal__no {
    list-style: none;
    padding-left: 0;
}

.legal__yes li,
.legal__no li {
    padding-left: var(--gw-space-4);
    position: relative;
    margin-bottom: var(--gw-space-1);
}

.legal__yes li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--gw-forest);
    font-weight: 700;
    font-size: var(--gw-text-lg);
}

.legal__no li::before {
    content: "\2717";
    position: absolute;
    left: 0;
    color: var(--gw-error-ink);
    font-weight: 700;
    font-size: var(--gw-text-lg);
}

/* ---- Retention table ---------------------------------------------------
   POPIA section 14 asks for a period per category rather than a sentence,
   so this is a table on purpose. */
.legal__table-wrap {
    overflow-x: auto;
    margin-block: var(--gw-space-3);
}

.legal__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--gw-text-base);
}

.legal__table th,
.legal__table td {
    text-align: left;
    vertical-align: top;
    padding: var(--gw-space-2);
    border-bottom: 1px solid var(--gw-border);
}

.legal__table th {
    font-size: var(--gw-text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gw-ink-muted);
    border-bottom: 2px solid var(--gw-border-strong);
}

/* ---- Contact ----------------------------------------------------------- */
.legal__contact {
    background: var(--gw-surface-sand);
    padding: var(--gw-space-4);
    border-radius: var(--gw-radius-lg);
    margin-block: var(--gw-space-4);
    text-align: center;
}

.legal__contact h2,
.legal__contact h3 {
    color: var(--gw-forest);
    margin-bottom: var(--gw-space-2);
}

.legal__contact > :last-child { margin-bottom: 0; }

/* ---- Summary ----------------------------------------------------------- */
.legal__summary {
    background: var(--gw-forest);
    color: #FFFFFF;
    padding: var(--gw-space-5) var(--gw-space-4);
    border-radius: var(--gw-radius-lg);
    margin-block: var(--gw-space-5);
    text-align: center;
}

.legal__summary h2 {
    color: #FFFFFF;
    font-size: var(--gw-text-2xl);
    margin-bottom: var(--gw-space-4);
}

.legal__summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gw-space-3);
    max-width: 620px;
    margin-inline: auto;
    text-align: left;
}

@media (min-width: 48rem) {
    .legal__summary-grid { grid-template-columns: 1fr 1fr; }
}

.legal__summary-item {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: var(--gw-space-3);
    border-radius: var(--gw-radius);
}

.legal__summary-item strong {
    display: block;
    margin-bottom: var(--gw-space-1);
    color: #FFFFFF;
}

.legal__summary a { color: #FFFFFF; }

/* ---- Footer ------------------------------------------------------------ */
.legal__footer {
    text-align: center;
    margin-top: var(--gw-space-5);
    padding-top: var(--gw-space-4);
    border-top: 2px solid var(--gw-border);
    color: var(--gw-ink-muted);
    font-size: var(--gw-text-sm);
}

/* ---- Unset configuration marker ----------------------------------------
   Renders where a company detail the document promises has not been supplied.
   Deliberately loud: a blank reads as an oversight nobody notices, and these
   are the values that make the document's own promises reachable. */
.legal__unset {
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: var(--gw-radius);
    background: var(--gw-error-bg);
    border: 2px dashed var(--gw-error-ink);
    color: var(--gw-error-ink);
    font-size: 0.9em;
    font-weight: 700;
}

/* ---- Print -------------------------------------------------------------
   These are documents people are entitled to keep a copy of, so everything
   prints flat and open. CSS alone cannot reveal a closed <details> -- the
   content is hidden by the element itself, not by a rule we can override --
   so legal.js opens them all on beforeprint. This only handles the styling. */
@media print {
    .legal__toc { display: none; }

    .legal__section {
        border-color: #999999;
        break-inside: avoid;
    }

    .legal__section > summary,
    .legal__section[open] > summary {
        background: transparent;
        color: #000000;
    }

    .legal__section > summary::after { display: none; }
}