/* ═══════════════════════════════════════════════════════════════════════════
   legal.css — long-form legal documents (privacy-policy.html, terms-of-use.html)
   ---------------------------------------------------------------------------
   WHY THIS IS A SEPARATE FILE AND NOT PART OF styles.css

   styles.css is 153 KB that every one of the 25 pages downloads. These rules are
   used by exactly two pages and by nothing else, and they are the only rules on
   the site that style running prose — headings inside body copy, tables, ordered
   lists with real markers, definition lists. Merging them would grow the payload
   of the 3D hero page to style a page it never renders.

   The ONE rule that does belong in styles.css, and lives there rather than here,
   is `.footer-legal` — the footer appears on every page, so the link to these
   documents has to be styled where the footer is styled.

   WHAT THIS FILE ASSUMES
     - styles.css is loaded FIRST. Everything here reads its custom properties
       (--cream, --dark, --body-text, --muted, --border, --teal, --gutter,
       --header-total, --font-body, --font-display, --radius, --t) and inherits
       its resets. Loading this file alone renders unstyled prose, not a broken
       page.
     - The page uses <header class="site-header header-solid">. script.js gives
       header-solid the `scrolled` class immediately, which is what makes the nav
       legible over a cream page that has no dark hero behind it. Without that
       class the nav links are rgba(255,255,255,0.85) on #F5F2EE — invisible.

   THE THREE-LANGUAGE MECHANISM (the reason for the [data-legal-lang] rules)

   translations.js applies a language by writing `el.textContent = dict[key]` for
   every [data-i18n] element. textContent, not innerHTML — so a translated element
   CANNOT contain a link, a <strong>, or a nested list. A privacy policy is mostly
   made of exactly those things: a mailto to the controller, a table of cookies, a
   numbered list of rights. The site's own translation mechanism cannot carry this
   content.

   So these two pages carry all three languages as three sibling blocks of full
   markup, and swap which one is displayed:

     <div class="legal-doc" data-legal-lang="bg"> …full Bulgarian document… </div>
     <div class="legal-doc" data-legal-lang="en" hidden> …full English… </div>
     <div class="legal-doc" data-legal-lang="ru" hidden> …full Russian… </div>

   Bulgarian is the one served visible because it is the site's default language
   (translations.js: DEFAULT = 'bg'), because <html lang="bg"> declares it, and
   because Bulgarian is the legally operative version for a Varna seller — a
   crawler and a visitor with JavaScript disabled both get the version that
   governs.

   THE <noscript> OVERRIDE IN EACH PAGE'S <head> IS LOAD-BEARING. With scripting
   off, nothing can un-hide the English and Russian blocks, and a reader would be
   silently denied two thirds of a document they have a right to read. The
   noscript block sets `[data-legal-lang] { display: block !important }`, which
   beats the UA's `[hidden] { display: none }`, so all three render one after
   another, each under its own language heading. Not pretty; complete, which is
   the property that matters for this content.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Page frame ──────────────────────────────────────────────────────────── */

/* The fixed header is --header-total tall (70px plus the notch inset on a phone).
   Nothing on these pages sits under it, so the top padding has to clear it
   explicitly — there is no hero to absorb the overlap the way index.html has. */
.legal-page {
  padding-top: calc(var(--header-total) + 56px);
  padding-bottom: 96px;
}

.legal-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ─── Masthead ────────────────────────────────────────────────────────────── */

.legal-masthead {
  border-bottom: 1px solid var(--border);
  padding-bottom: 40px;
  margin-bottom: 48px;
}
.legal-masthead h1 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(2rem, 5vw, 3.125rem);
  line-height: 1.1;
  color: var(--dark);
  margin: 0 0 18px;
}
.legal-masthead .legal-standfirst {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--body-text);
  max-width: 60ch;
  margin: 0 0 22px;
}

/* Issue date and version. Deliberately not muted into invisibility: which version
   of a policy applied on a given day is the first thing anyone asks in a dispute,
   so it is set as data, at body-text contrast, not as a footnote. */
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.legal-meta strong {
  font-weight: 500;
  color: var(--body-text);
}

/* ─── Two-column layout: contents rail + prose ────────────────────────────── */

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

.legal-toc {
  position: sticky;
  /* Clears the fixed header, plus a little air so the first entry is not welded
     to the glass edge. */
  top: calc(var(--header-total) + 24px);
  max-height: calc(100vh - var(--header-total) - 48px);
  overflow-y: auto;
  /* A tall contents list scrolls inside itself; without this the rail is taller
     than the viewport and `sticky` silently stops sticking. */
  overscroll-behavior: contain;
}
.legal-toc h2 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 16px;
}
.legal-toc ol {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
}
.legal-toc li {
  counter-increment: toc;
  margin-bottom: 9px;
}
.legal-toc a {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  transition: color var(--t);
}
.legal-toc a::before {
  content: counter(toc) ".";
  display: inline-block;
  min-width: 1.7em;
  color: var(--border);
  font-variant-numeric: tabular-nums;
}
.legal-toc a:hover { color: var(--dark); }
.legal-toc a.is-current { color: var(--teal-deep); }
.legal-toc a.is-current::before { color: var(--teal); }

/* ─── Prose ───────────────────────────────────────────────────────────────── */

.legal-body {
  max-width: 68ch;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--body-text);
}

/* Every heading is a link target from the contents rail and from the documents'
   cross-references. scroll-margin-top is what stops the fixed header from
   swallowing the heading you just jumped to — without it the browser scrolls the
   heading to y=0, which is underneath the glass. */
.legal-body section { scroll-margin-top: calc(var(--header-total) + 24px); }

.legal-body h2 {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--dark);
  margin: 56px 0 18px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.legal-body section:first-of-type h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* Section number, drawn from the section's own numbering rather than typed into
   the heading text, so inserting a section renumbers the document instead of
   renumbering it wrongly. */
.legal-body { counter-reset: legalsection; }
.legal-body section { counter-increment: legalsection; }
.legal-body h2::before {
  content: counter(legalsection) ".";
  color: var(--teal);
  font-weight: 500;
  margin-right: 0.55em;
  font-variant-numeric: tabular-nums;
}

.legal-body h3 {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--dark);
  margin: 32px 0 10px;
}

.legal-body p { margin: 0 0 18px; }
.legal-body p:last-child { margin-bottom: 0; }

.legal-body strong { font-weight: 600; color: var(--dark); }

/* styles.css sets a site-wide `ul { list-style: none }` for the nav and the
   footer columns. Prose lists need their markers back — a list of your rights
   under the GDPR read as an undifferentiated block of text is a readability
   failure, not a style choice. */
.legal-body ul,
.legal-body ol {
  margin: 0 0 18px;
  padding-left: 1.5em;
}
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li { margin-bottom: 8px; }
.legal-body li::marker { color: var(--teal); }
.legal-body li > ul,
.legal-body li > ol { margin: 8px 0 0; }

.legal-body a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(63, 118, 168, 0.4);
  transition: text-decoration-color var(--t), color var(--t);
  /* A long email address or url inside a narrow column must break rather than
     push the page into a horizontal scroll. */
  overflow-wrap: anywhere;
}
.legal-body a:hover {
  color: var(--dark);
  text-decoration-color: currentColor;
}

/* ─── Identity block (who the controller is) ──────────────────────────────── */

.legal-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin: 0 0 22px;
}
.legal-card dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 22px;
  margin: 0;
  font-size: 0.875rem;
}
.legal-card dt {
  color: var(--muted);
  letter-spacing: 0.02em;
}
.legal-card dd {
  margin: 0;
  color: var(--body-text);
}

/* ─── Tables (cookies, recipients, retention) ─────────────────────────────── */

/* The wrapper, not the table, is what scrolls. A table wide enough to need
   scrolling would otherwise widen the page itself and put every other element on
   a horizontal scrollbar. */
.legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
.legal-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.legal-table thead th {
  font-weight: 600;
  color: var(--dark);
  background: var(--cream-dark);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-table tbody th {
  font-weight: 500;
  color: var(--dark);
  white-space: nowrap;
}
.legal-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--teal-deep);
}

/* ─── Callout ─────────────────────────────────────────────────────────────── */

.legal-note {
  border-left: 2px solid var(--teal);
  background: var(--teal-faint);
  padding: 18px 22px;
  margin: 0 0 22px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.875rem;
  line-height: 1.75;
}
.legal-note p:last-child { margin-bottom: 0; }

/* ─── Cookie-settings re-open button ──────────────────────────────────────── */

/* consent.js exposes window.AdiviaConsent.open() and also listens for the
   #cookie-settings hash on any page, which is why this is a plain link and not a
   button wired to a handler: it works before consent.js has finished booting, it
   works if the inline script fails, and it is shareable. */
.legal-consent-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 26px;
  border: 1.5px solid var(--dark);
  border-radius: var(--radius);
  color: var(--dark);
  text-decoration: none;
  transition: background var(--t), color var(--t);
}
.legal-consent-link:hover {
  background: var(--dark);
  color: var(--cream);
  text-decoration: none;
}

/* ─── Unfinished-field markers ────────────────────────────────────────────── */

/* Both of these are scaffolding and both are meant to be deleted, not restyled.
   They are loud on purpose: a privacy policy that goes live still saying
   "company number" where the company number should be is worse than no policy
   at all, because it is a published statement that the operator did not check.
   Yellow-on-black at 100% is what makes that impossible to miss in a screenshot,
   in a print preview, and on a phone held at arm's length. */

.legal-draft {
  display: block;
  background: #FFF3C4;
  border: 1px solid #E0C244;
  border-left: 4px solid #E0C244;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 40px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #4A3C00;
}
.legal-draft strong { color: #2E2400; }
.legal-draft code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 2px;
}

.legal-fill {
  background: #FFE680;
  color: #4A3C00;
  padding: 1px 7px;
  border-radius: 2px;
  font-style: italic;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ─── Language blocks ─────────────────────────────────────────────────────── */

/* The heading that names the language. Invisible when scripting is on, because
   the language switcher in the nav already says which language you are reading
   and only one block is on the page. Visible in the noscript case below, where
   three documents run one after another and the reader needs to know where each
   one starts. */
.legal-lang-heading {
  display: none;

  /* Styled even though it is hidden by default, because the one situation that
     reveals it — scripting off — is exactly the situation where nothing else can
     be relied on to run. Three documents then follow one another down the page
     and this is the only thing telling the reader where each one starts. */
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 24px;
  padding: 10px 0;
  border-top: 2px solid var(--dark);
  border-bottom: 1px solid var(--border);
}
[data-legal-lang]:first-of-type .legal-lang-heading { border-top: none; }

/* ─── Print ───────────────────────────────────────────────────────────────── */

/* People print these. The contents rail is a navigation aid with no meaning on
   paper, and the fixed header would otherwise be stamped across the first page. */
@media print {
  .site-header,
  .site-footer,
  .legal-toc,
  .legal-consent-link,
  [data-adivia-consent] { display: none !important; }

  .legal-page { padding: 0; }
  .legal-layout { display: block; }
  .legal-body {
    max-width: none;
    font-size: 10.5pt;
    line-height: 1.5;
  }
  .legal-body section { break-inside: auto; }
  .legal-body h2, .legal-body h3 { break-after: avoid; }
  .legal-table-wrap { overflow: visible; break-inside: avoid; }
  .legal-body a { color: inherit; text-decoration: underline; }
  /* A printed page has no hover and no address bar, so a bare link label is a
     dead end on paper. */
  .legal-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* Below this width the rail and a 68ch column no longer both fit, so the
     contents list becomes a plain block above the document rather than being
     squeezed to an unreadable width. */
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .legal-toc {
    position: static;
    max-height: none;
    overflow: visible;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
  }
  .legal-toc ol {
    columns: 2;
    column-gap: 32px;
  }
  .legal-toc li { break-inside: avoid; }
}

@media (max-width: 768px) {
  .legal-page { padding-top: calc(var(--header-total) + 32px); padding-bottom: 64px; }
  .legal-toc ol { columns: 1; }
  .legal-body { font-size: 0.9375rem; max-width: none; }
  .legal-card { padding: 20px 18px; }
  .legal-card dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .legal-card dt { margin-top: 10px; }
  .legal-card dt:first-of-type { margin-top: 0; }
}
