/* okitoki-v4 — legal documents (page-legal.php): public offer, privacy policy, SLA.
 * Brandbook tokens and facelift components only:
 *   hero band (title, facts as a kicker, pill buttons) -> body (sticky contents left, text
 *   720px right) -> blue closing band (questions go to the contact e-mail).
 * The text is .v-content (components/content.css); this file adds the legal numbering and
 * resets what .v-content does to ordered lists (its own counters), so the two do not stack.
 *
 * Numbering (.v-legal--counters): "sec" per section, "cl" per clause level. The top-level
 * lists of a section share one count (reset on the section, not on each ol), nested lists
 * restart — the same walk okitoki_legal_prepare() uses for the ids, so 5.3 is #p-5-3. */

/* ---- Hero: title left, frosted document card right ---- */
.v-legal-hero { padding-bottom: var(--v-space-3xl); }
.v-legal-hero__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--v-space-2xl);
    align-items: center;
    min-height: 380px; /* one height for every document, so the wave never reaches the text */
    padding-bottom: 0;
}
.v-legal-hero__heading { margin: 0; font-size: var(--v-font-size-2xl); line-height: 1.15; text-wrap: balance; }
.v-legal-hero__card {
    padding: var(--v-space-lg);
    border: 1px solid rgba(var(--v-color-white), .35);
    border-radius: 18px;
    background: rgba(var(--v-color-white), .14);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.v-legal-hero__facts { display: grid; gap: var(--v-space-sm); margin: 0 0 var(--v-space-lg); }
.v-legal-hero__facts > div {
    display: flex;
    justify-content: space-between;
    gap: var(--v-space);
    padding-bottom: var(--v-space-sm);
    border-bottom: 1px solid rgba(var(--v-color-white), .25);
}
.v-legal-hero__facts dt { opacity: .8; font-size: var(--v-font-size-sm); }
.v-legal-hero__facts dd { margin: 0; font-weight: var(--v-font-weight-semibold); text-align: right; }
.v-legal-hero__archive { margin-top: var(--v-space); font-size: var(--v-font-size-sm); text-align: center; }
.v-legal-hero__archive span { opacity: .8; }
.v-legal-hero__archive a { margin-left: 4px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.v-legal-hero__archive a:hover { color: rgb(var(--v-color-accent)); }
.v-legal-hero .v-legal-hero__print-only { display: none; } /* the closing band carries the contact on screen */

/* ---- Body: contents | text ---- */
.v-legal {
    display: grid;
    grid-template-columns: 260px minmax(0, var(--v-container-md));
    justify-content: center;
    gap: var(--v-space-2xl);
    align-items: start;
}
.v-legal--no-toc { grid-template-columns: minmax(0, var(--v-container-md)); }
.v-legal [id] { scroll-margin-top: calc(var(--v-header-height) + var(--v-space-lg)); }

.v-legal__toc {
    position: sticky;
    top: calc(var(--v-header-height) + var(--v-space-lg));
    max-height: calc(100vh - var(--v-header-height) - var(--v-space-2xl));
    overflow-y: auto;
}
.v-legal__toc-title {
    margin-bottom: var(--v-space-sm);
    color: rgb(var(--v-color-text-secondary));
    font-size: var(--v-font-size-sm);
    font-weight: var(--v-font-weight-semibold);
    letter-spacing: 1px;
    text-transform: uppercase;
    list-style: none;
    cursor: default;
}
.v-legal__toc-title::-webkit-details-marker { display: none; }
.v-legal__toc ol {
    margin: 0;
    padding: 0;
    border-left: 2px solid rgb(var(--v-color-border));
    list-style: none;
}
.v-legal__toc a {
    display: grid;
    grid-template-columns: 2em 1fr;
    margin-left: -2px;
    padding: var(--v-space-xs) 0 var(--v-space-xs) var(--v-space);
    border-left: 2px solid transparent;
    color: rgb(var(--v-color-text-secondary));
    font-size: var(--v-font-size-sm);
    line-height: 1.4;
    text-decoration: none;
    transition: color var(--v-duration) var(--v-timing), border-color var(--v-duration) var(--v-timing);
}
.v-legal__toc a:hover { color: rgb(var(--v-color-accent)); }
.v-legal__toc a.is-current {
    border-left-color: rgb(var(--v-color-primary));
    color: rgb(var(--v-color-primary));
    font-weight: var(--v-font-weight-bold);
}
.v-legal__toc-num { font-weight: var(--v-font-weight-bold); }

/* ---- Text ---- */
.v-legal__preamble {
    margin-bottom: var(--v-space-xl);
    padding: var(--v-space-lg);
    border-radius: var(--v-radius-lg);
    background: rgb(var(--v-color-surface-contrast));
}
.v-legal .legal-section { margin-top: var(--v-space-2xl); }
.v-legal .legal-section:first-of-type { margin-top: 0; }
.v-legal .legal-section > h2:first-child {
    margin: 0 0 var(--v-space-lg);
    padding-bottom: var(--v-space-sm);
    border-bottom: 1px solid rgb(var(--v-color-border-element));
    font-size: var(--v-font-size-lg);
}
.v-legal .legal-section li { margin-bottom: var(--v-space-sm); }
/* Body text justified like a printed contract, from tablet up: in the phone column
 * justify opens wide gaps between words. Headings stay left-aligned; overflow-wrap
 * breaks long URLs on every width. */
.v-legal__body :is(p, li),
.v-legal__preamble { overflow-wrap: break-word; }
@media (min-width: 768px) {
    .v-legal__body :is(p, li),
    .v-legal__preamble { text-align: justify; hyphens: auto; }
}

/* .v-content numbers every ol by itself; legal pages number from the walk below. */
.v-legal .v-content ol > li::before { content: none; }
.v-legal .v-content ol > li { padding-left: 0; }

.v-legal--counters .v-legal__body { counter-reset: sec; }
.v-legal--counters .legal-section { counter-increment: sec; counter-reset: cl; }
.v-legal--counters .legal-section li > ol { counter-reset: cl; }
.v-legal--counters .legal-section ol > li { counter-increment: cl; padding-left: 52px; }
.v-legal--counters .legal-section ol ol > li { padding-left: 64px; }
.v-legal--counters .legal-section ol ol ol > li { padding-left: 76px; }

.v-legal .legal-num {
    color: rgb(var(--v-color-primary));
    font-weight: var(--v-font-weight-bold);
    text-decoration: none;
}
.v-legal .legal-num:hover { color: rgb(var(--v-color-accent)); }
.v-legal--counters h2 > .legal-num::before { content: counter(sec) ". "; }
.v-legal--counters li > .legal-num { position: absolute; top: 0; left: 0; }
.v-legal--counters li > .legal-num::before { content: counter(sec) "." counters(cl, ".") "."; }

/* Numbered in the text (privacy policy): a hover anchor after the heading. */
.v-legal .legal-anchor {
    margin-left: var(--v-space-xs);
    color: rgb(var(--v-color-text-secondary));
    font-weight: var(--v-font-weight);
    opacity: 0;
    transition: opacity var(--v-duration) var(--v-timing);
}
.v-legal :is(h2, h3, h4):hover > .legal-anchor,
.v-legal .legal-anchor:focus-visible { opacity: 1; }

/* A clause opened by its own link gets a short highlight. */
.v-legal :target { animation: v-legal-target 2s var(--v-timing); }
@keyframes v-legal-target { from { background: rgba(var(--v-color-primary), .12); } to { background: transparent; } }

/* ---- Closing band ---- */
.v-legal-contact .v-section__header { padding-top: var(--v-space-3xl); }
.v-legal-contact .v-heading,
.v-legal-contact .v-section__description { color: rgb(var(--v-color-white)); }
.v-legal-contact .v-button { text-transform: none; letter-spacing: 0; }

/* ---- Tablet and phone: contents become a closed box above the text ---- */
@media (max-width: 991px) {
    .v-legal { grid-template-columns: minmax(0, 1fr); gap: var(--v-space-lg); }
    .v-legal__toc { position: static; max-height: none; overflow: visible; }
    .v-legal__toc-box {
        padding: var(--v-space-sm) var(--v-space);
        border-radius: var(--v-radius);
        background: rgb(var(--v-color-surface-contrast));
    }
    .v-legal__toc-title { display: flex; justify-content: space-between; margin: 0; padding: var(--v-space-xs) 0; cursor: pointer; }
    .v-legal__toc-title::after { content: "+"; font-size: var(--v-font-size-lg); line-height: 1; color: rgb(var(--v-color-primary)); }
    .v-legal__toc-box[open] .v-legal__toc-title { margin-bottom: var(--v-space-sm); }
    .v-legal__toc-box[open] .v-legal__toc-title::after { content: "−"; }
    .v-legal-hero__row { grid-template-columns: minmax(0, 1fr); gap: var(--v-space-lg); }
    .v-legal-hero__card { max-width: 480px; }
    .v-legal-hero__row { min-height: 0; }
    .v-legal-hero__heading { font-size: var(--v-font-size-xl); }
}
@media (max-width: 767px) {
    .v-legal-hero__card { padding: var(--v-space-md); }
    .v-legal__preamble { padding: var(--v-space); }
    .v-legal .legal-section { margin-top: var(--v-space-xl); }
    .v-legal--counters .legal-section ol > li { padding-left: 44px; }
    .v-legal--counters .legal-section ol ol > li { padding-left: 56px; }
    .v-legal--counters .legal-section ol ol ol > li { padding-left: 64px; }
}

/* ---- Print = "Download PDF" (the browser's Save as PDF) ---- */
@media print {
    @page { margin: 18mm 16mm; }
    .v-header,
    .v-footer,
    .v-to-top,
    .v-modal,
    .okt-cookies,
    [class*="chaty"],
    .v-legal__toc,
    .v-legal-contact,
    .v-hero__controls,
    .v-legal .legal-anchor { display: none !important; }
    .v-section { margin: 0; padding: 0; background: none; }
    .v-section::before,
    .v-section::after { display: none; }
    .v-legal-hero .v-hero { display: block; padding: 0; color: rgb(var(--v-color-text)); }
    .v-legal-hero .v-heading { margin-bottom: 8pt; color: rgb(var(--v-color-text)); font-size: 20pt; }
    .v-legal-hero__card { padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
    .v-legal-hero__actions { display: none; }
    .v-legal-hero__facts { display: flex; flex-wrap: wrap; gap: 4pt 16pt; margin: 0 0 14pt; font-size: 10pt; }
    .v-legal-hero__facts > div { gap: 4pt; padding: 0; border: 0; }
    .v-legal-hero .v-legal-hero__print-only { display: flex; }
    .v-legal { display: block; font-size: 11pt; line-height: 1.5; }
    .v-legal__preamble { padding: 0; background: none; }
    .v-legal .legal-section h2 { font-size: 14pt; break-after: avoid; }
    .v-legal .legal-section li { break-inside: avoid; }
    .v-legal a { color: inherit; }
    .v-legal :target { animation: none; }
}