/* ============================================================
   ZIRYVO — legal pages
   ÁSZF, adatkezelés, impresszum. Same tokens and type scale as the
   rest of the site; the layout is a sticky table of contents beside
   a numbered document. Long-form reading, so the measure is tight
   and the type a little larger than body copy elsewhere.
   ============================================================ */

.is-legal { background: var(--bg); }

.legal {
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(72px, 9vw, 130px);
}

/* ---------------- Intro ---------------- */
.legal__intro {
  padding-bottom: clamp(40px, 5vw, 68px);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: clamp(40px, 5vw, 68px);
}

.legal__back {
  display: inline-flex;
  align-items: center;
  font-size: 0.845rem;
  color: var(--fg-dim);
  transition: color 0.4s var(--ease-soft);
  margin-bottom: clamp(26px, 3.2vw, 40px);
}
.legal__back:hover { color: var(--lime); }

.legal__eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
  font-weight: 500;
  margin-bottom: 18px;
}

.legal__title {
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 600;
}

.legal__lede {
  margin-top: 14px;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--fg-dim);
  max-width: 46ch;
}

/* Sits under the lede; used for the language notice. */
.legal__note {
  margin-top: clamp(22px, 2.6vw, 30px);
  padding: 14px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.014);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 62ch;
}
.legal__note:empty { display: none; }

/* ---------------- Layout ---------------- */
.legal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 940px) {
  .legal__grid { grid-template-columns: 250px 1fr; gap: clamp(48px, 6vw, 88px); }
}

/* ---------------- Table of contents ---------------- */
.toc { position: static; }
@media (min-width: 940px) {
  .toc {
    position: sticky;
    top: calc(var(--nav-h) + 34px);
    max-height: calc(100vh - var(--nav-h) - 68px);
    overflow-y: auto;
    /* The scrollbar would otherwise sit on the hairline rule. */
    padding-right: 6px;
  }
}

.toc__label {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 500;
  margin-bottom: 16px;
}

.toc__list { counter-reset: none; }
.toc__list li + li { margin-top: 2px; }

.toc__list a {
  display: flex;
  /* German section titles are long compounds; without this the flex row
     refuses to shrink and widens the whole grid column. */
  min-width: 0;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--fg-soft);
  transition: color 0.35s var(--ease-soft);
}
.toc__list a:hover { color: var(--fg); }

.toc__n {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--lime-dim);
}

/* The same for the title itself, and for the body: a single long word
   must wrap rather than push the page sideways. */
.toc__t { min-width: 0; overflow-wrap: anywhere; }
.toc, .doc { min-width: 0; }

/* ---------------- Document ---------------- */
.doc { max-width: 78ch; overflow-wrap: break-word; }

.doc__section { padding-block: clamp(30px, 3.6vw, 44px); }
.doc__section:first-child { padding-top: 0; }

.doc__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.doc__n {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--lime-dim);
}
.doc__rule {
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.doc__title {
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.doc__body { font-size: 0.97rem; line-height: 1.75; color: var(--fg-soft); }
.doc__body p + p,
.doc__body p + ul,
.doc__body ul + p { margin-top: 1em; }
.doc__body strong { color: var(--fg); font-weight: 500; }

.doc__body h3 {
  margin-top: clamp(26px, 3vw, 36px);
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--fg);
}

.doc__body ul { margin-left: 0; }
.doc__body li {
  position: relative;
  padding-left: 20px;
  margin-top: 0.5em;
}
.doc__body li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--lime-dim);
}

.doc__body a {
  color: var(--fg-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: color 0.35s var(--ease-soft), text-decoration-color 0.35s var(--ease-soft);
}
.doc__body a:hover { color: var(--lime); text-decoration-color: var(--lime); }

/* Tables carry the company/registry details. They must stay scrollable on a
   phone rather than forcing the page wide. */
.doc__tablewrap { overflow-x: auto; margin-top: 4px; }
.doc__tablewrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.doc__tablewrap thead { display: none; }   /* the source ships empty headers */
.doc__tablewrap td {
  padding: 11px 16px 11px 0;
  border-top: 1px solid var(--line-soft);
  vertical-align: top;
}
.doc__tablewrap tr:first-child td { border-top: 0; }
.doc__tablewrap td:first-child {
  width: 38%;
  min-width: 170px;
  color: var(--fg-dim);
}

.doc__closing,
.doc__sign {
  margin-top: clamp(30px, 3.6vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.88rem;
  color: var(--fg-faint);
}

/* The slim footer used on these pages. */
.footer--slim { border-top: 1px solid var(--line-soft); }

/* ============================================================
   404
   Same cinematic atmosphere as the hero, condensed into a single
   centred screen. The oversized numeral sits behind the copy as a
   graphic, not a headline — it reads before it's read.
   ============================================================ */
.notfound {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.notfound__in {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--nav-h) + clamp(40px, 6vh, 72px)) clamp(80px, 10vh, 120px);
}

.notfound__num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(16rem, 52vw, 40rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.045);
  filter: blur(0.5px);
  z-index: -1;
  user-select: none;
  white-space: nowrap;
}

.notfound__badge { margin-bottom: clamp(26px, 3.4vw, 40px); }
.notfound__title { max-width: 18ch; margin-inline: auto; }
.notfound__sub {
  margin: clamp(22px, 3vw, 30px) auto 0;
  max-width: 42ch;
}
.notfound__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 48px);
}

/* The legal pages carry one more control than the main navigation — the
   language switch — and on a phone that plus the button is wider than the
   screen. The button goes: it is a legal document, the way on is the
   footer, and the switch is the only thing the reader needs up here. */
@media (max-width: 640px) {
  .is-legal .nav__right .btn { display: none; }
}