/* =========================================================================
   Seedates – legal documents (Terms, Privacy, Refund, Cookies, Legal Notice)
   -------------------------------------------------------------------------
   Shared by /terms.html, /privacy.html, /refund-policy.html, /cookies.html
   and /legal-notice.html so all five read as one set. Surface and radius match
   the dashboard's `.card` family; the accents are the site's own greens
   (#3EAC76 accent, #1f6b45 headings, #276644 sub-headings).

   TYPOGRAPHY: these five documents are the only place on the site NOT set in
   MS-Gothic. A legal text is read as a DOCUMENT, so it gets a formal serif —
   `--font-legal` is a plain system stack (Georgia / Times) that needs no font
   file and no CDN request (a legal page should not phone home). The site's
   sans is kept for the header, the footer and the "back" link, which are UI
   chrome rather than part of the document.
   ========================================================================= */

:root {
    --font-legal: Georgia, 'Times New Roman', Times, 'Liberation Serif',
                  'DejaVu Serif', serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
}

/* The document itself is the serif part; `code` (cookie names) keeps mono. */
.legal-card,
.legal-card * {
    font-family: var(--font-legal);
}

.legal-card code {
    font-family: var(--font-mono);
}

body {
    min-height: 100vh;
    color: #3a5145;
    display: flex;
    flex-direction: column;
}

.legal-main {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 1.6rem auto 2rem;
    padding: 0 1.2rem;
}

/* "Back to log in" — UI chrome, so it stays in the site's sans and sits above
   the document. The arrow is drawn in CSS and flips with the page direction:
   an `←` baked into the copy would point the wrong way in Arabic. */
.legal-back {
    margin-bottom: 0.6rem;
}

.legal-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f6b45;
    text-decoration: none;
}

.legal-back a::before {
    content: "\2190";
    font-size: 1rem;
    line-height: 1;
}

[dir="rtl"] .legal-back a::before {
    content: "\2192";
}

.legal-back a:hover,
.legal-back a:focus-visible {
    color: #3EAC76;
    text-decoration: underline;
}

.legal-card {
    background: #fff;
    border: 1px solid rgba(62, 172, 118, 0.18);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(46, 128, 83, 0.08);
    padding: 2rem 2.2rem 2.4rem;
    /* These documents are English-only and pinned with dir="ltr" in the
       markup. `text-align: left` has to be stated EXPLICITLY: button-theme.css
       sets `[dir="rtl"] body { text-align: right }`, and an inherited
       text-align is NOT reset by a `dir` attribute further down the tree —
       without this line the English prose renders right-aligned (ragged left)
       for any visitor whose UI language is Arabic. */
    text-align: left;
}

/* Formal title block: a centred title, a centred "Last updated" line, and a
   rule under that which divides the title from the text — the same faded rule
   shape as the section dividers below. */
.legal-card h1 {
    color: #1f6b45;
    font-size: 1.85rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-align: center;
    margin-bottom: 0.4rem;
}

/* Section heading + the rule that divides one section from the next. The
   gradient fades out on the far side, so the line reads as a neat underline
   across the text column instead of a hard box edge. `border-image` is legal
   here because the rule has no border-radius (it ignores radius). */
.legal-card h2 {
    color: #1f6b45;
    font-size: 1.15rem;
    line-height: 1.35;
    letter-spacing: 0.005em;
    margin: 2rem 0 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
        rgba(31, 107, 69, 0.85) 0%,
        rgba(62, 172, 118, 0.35) 40%,
        rgba(62, 172, 118, 0) 100%) 1;
}

.legal-card h3 {
    color: #276644;
    font-size: 1rem;
    margin: 1.3rem 0 0.4rem;
}

.legal-card p {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 0.75rem;
}

.legal-card ul,
.legal-card ol {
    margin: 0.3rem 0 0.8rem 1.3rem;
}

[dir="rtl"] .legal-card ul,
[dir="rtl"] .legal-card ol {
    margin: 0.3rem 1.3rem 0.8rem 0;
}

.legal-card li {
    line-height: 1.7;
    margin-bottom: 0.35rem;
}

/* A document rather than a web page: justify the prose once there is a
   comfortable measure. `hyphens: auto` needs a language, and the card carries
   lang="en". Left alone below 760px, where justification would open rivers in
   a narrow column.
   `:not(.legal-meta)` is required: the meta line is a `<p>` too, and
   `.legal-card p` (0,1,1) would otherwise beat `.legal-meta`'s own
   `text-align: center` (0,1,0) and justify the centred title line. */
@media (min-width: 760px) {
    .legal-card p:not(.legal-meta),
    .legal-card li {
        text-align: justify;
        hyphens: auto;
    }
}

.legal-card a {
    color: #007509;
    font-weight: 600;
}

.legal-card a:hover,
.legal-card a:focus-visible {
    color: #3EAC76;
}

/* Small print: the "Last updated" line under the title, closed by the title
   rule described above. */
.legal-meta {
    color: #718096;
    font-size: 0.85rem;
    text-align: center;
    padding-bottom: 0.9rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
        rgba(31, 107, 69, 0) 0%,
        rgba(31, 107, 69, 0.55) 50%,
        rgba(31, 107, 69, 0) 100%) 1;
}

/* The English-only notice, and any other highlighted aside. */
.legal-note {
    background: #f2fbf6;
    border-inline-start: 3px solid #3EAC76;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    color: #2f6b4f;
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 1.4rem;
}

/* Data tables (cookie lists). */
.legal-table-wrap {
    overflow-x: auto;
    margin: 0.4rem 0 1rem;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.legal-table th,
.legal-table td {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid #e4e9e6;
    vertical-align: top;
}

.legal-table th {
    color: #1f6b45;
    font-weight: 700;
    background: #f7fbf9;
}

.legal-table code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86em;
    background: #f2f7f4;
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}

@media (max-width: 640px) {
    .legal-main {
        margin-top: 1.1rem;
        padding: 0 0.8rem;
    }
    .legal-card {
        padding: 1.4rem 1.2rem 1.8rem;
    }
    .legal-card h1 {
        font-size: 1.55rem;
    }
}