/* ============================================================
   Shared styles for Privacy Policy / Terms & Conditions pages.
   Reuses styles.css tokens (--red/--black/--text-secondary/etc,
   .container, .reveal, .hero__eyebrow*) — no new visual language.
   ============================================================ */

/* .container is left:0/right:auto site-wide, so it sits flush against the
   viewport's left edge up to --container-w rather than being centered —
   fine for a full-width section, but this page narrows the container to
   900px, which then needs its own centering to land on the page's true
   centre instead of just the left portion of it. */
.legal-main .container{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.legal-hero{
  padding-top: 56px;
  padding-bottom: 24px;
}
.legal-h1{
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--black);
}
.legal-updated{
  margin-top: 12px;
  font-family: var(--font-text);
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.legal-lede{
  margin-top: 14px;
  max-width: 640px;
  font-family: var(--font-text);
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.legal-body{
  padding-bottom: 100px;
}
.legal-layout{
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 40px;
}
.legal-intro{
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.legal-content h2{
  margin-top: 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--black);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.legal-content h3{
  margin-top: 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--black);
}
.legal-content p{
  margin-top: 14px;
  font-family: var(--font-text);
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.legal-content ul,
.legal-content ol{
  margin-top: 14px;
  padding-left: 20px;
  list-style: disc;
}
.legal-content ul li,
.legal-content ol li{
  margin-top: 8px;
  font-family: var(--font-text);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.legal-content a{
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-content a:hover{ color: var(--red); }
.legal-content strong{ color: var(--black); }
.legal-disclaimer{
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 0.82rem !important;
  color: var(--text-secondary);
}

/* ---------- Pale callout box (e.g. "Your consumer rights") — a flat
   tint + thin left rule, deliberately not a heavy shadowed card. ---------- */
.legal-callout{
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--red-tint);
  border-left: 3px solid var(--red);
  border-radius: 4px;
}
.legal-callout h2,
.legal-callout p:first-child{ margin-top: 0; }
.legal-callout h2{
  font-size: 1rem;
  margin-bottom: 4px;
}
.legal-callout p{ color: var(--black); }

/* ---------- Section table (lawful-basis / cookie audit tables) —
   wrapped so it scrolls horizontally on narrow screens instead of
   breaking the page layout. ---------- */
.legal-table-wrap{
  margin-top: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* No fixed min-width on desktop/tablet: the content column beside the
   "on this page" nav is only ~508px wide, so the old min-width:560px
   made every table overflow its wrapper and show its own scrollbar.
   Cells wrap instead; long cookie names (<code>) and URLs break safely
   rather than widening the table. */
.legal-table{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-family: var(--font-text);
  font-size: 0.88rem;
}
.legal-table th,
.legal-table td{
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--grey-soft);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: break-word;
}
.legal-table code,
.legal-table a{ overflow-wrap: anywhere; word-break: break-word; }
.legal-table th{
  font-weight: 700;
  color: var(--black);
  border-bottom: 2px solid var(--black);
}
.legal-table td{ color: var(--text-secondary); }
.legal-table td strong{ color: var(--black); }

/* ---------- Two-column layout: sticky "on this page" nav + content.
   The nav is a native <details> so mobile collapse needs no JS — on
   desktop its content is simply forced visible regardless of [open]. ---------- */
.legal-layout{
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}
.legal-toc{
  position: sticky;
  top: calc(var(--header-h) + 28px);
}
.legal-toc__summary{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: default;
  list-style: none;
}
.legal-toc__summary::-webkit-details-marker{ display: none; }
.legal-toc__list{
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.legal-toc__list a{
  display: block;
  padding: 7px 0;
  font-family: var(--font-text);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -13px;
}
.legal-toc__list a:hover{ color: var(--black); }
.legal-toc__list a.is-current{
  color: var(--black);
  font-weight: 600;
  border-left-color: var(--red);
}
.legal-content{
  max-width: 800px;
  min-width: 0;
}
.legal-content > .legal-intro:first-child{ margin-top: 0; }

@media (max-width: 900px){
  .legal-layout{ grid-template-columns: 1fr; }
  .legal-toc{
    position: static;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--grey-soft);
  }
  .legal-toc__summary{
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .legal-toc__summary::before{
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.6px solid var(--text-secondary);
    border-bottom: 1.6px solid var(--text-secondary);
    transform: rotate(-45deg);
    transition: transform 0.2s var(--ease);
  }
  .legal-toc[open] .legal-toc__summary::before{ transform: rotate(45deg); }
  .legal-toc__list{ margin-top: 14px; }
  .legal-content{ max-width: none; }
}
@media (min-width: 901px){
  /* Desktop: the "on this page" list is always visible, independent
     of the <details> [open] state (which only matters below 900px). */
  .legal-toc:not([open]) .legal-toc__list{ display: flex; }
}

@media (max-width: 600px){
  .legal-hero{ padding-top: 40px; }
  .legal-body{ padding-bottom: 64px; }
  /* Phones: adapt first — tighter side padding and dictionary
     hyphenation for long words (e.g. Ukrainian "онлайн-ідентифікатори").
     .legal-table-wrap's own overflow-x:auto stays only as the last
     resort for the narrowest screens, scrolling that one table and
     never the page. */
  .legal-table th,
  .legal-table td{
    padding-inline: 8px;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  .legal-table th:first-child,
  .legal-table td:first-child{ padding-left: 0; }
}

/* ---------- 404 brand visual ---------- */
.legal-404__visual{
  margin: 48px auto 0;
  max-width: 820px;
}
.legal-404__visual img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
}