/* =========================================================
   Pariz Management BV — juridische pagina's
   Bouwt voort op style.css (zelfde variabelen / huisstijl)
   ========================================================= */

.legal-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.legal-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 70px;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.legal-back img { height: 38px; width: auto; }
.legal-back span { transition: color 0.2s var(--ease); }
.legal-back:hover span { color: var(--navy); }

.legal-hero {
  background: linear-gradient(160deg, #0e1528 0%, var(--navy) 60%, #1a2444 100%);
  color: #fff;
  padding: 70px 0 56px;
}
.legal-hero .eyebrow { color: var(--grey-light); margin-bottom: 18px; }
.legal-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin: 0 0 22px;
}
.legal-company {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}
.legal-company strong { color: #fff; font-weight: 600; }

.legal-main { padding: 64px 0 90px; }
.legal-wrap { max-width: 820px; }

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 16px 22px;
  margin-bottom: 48px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.legal-meta strong { color: var(--navy); font-weight: 600; }

.legal-intro {
  font-size: 1.08rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--grey);
  padding-left: 20px;
  margin-bottom: 44px;
}

/* Melding boven niet-bindende (EN/DE) vertalingen */
.legal-binding-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  margin-bottom: 32px;
  background: #fdf6e9;
  border: 1px solid #e7d3a8;
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #6b5524;
}
.legal-binding-note::before {
  content: "\26A0";
  font-size: 1rem;
  line-height: 1.5;
}
.legal-binding-note strong { color: #4d3d16; }

.legal-content h2 {
  font-size: 1.4rem;
  margin: 48px 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.legal-content h2:first-of-type { border-top: none; padding-top: 0; }
.legal-content h3 {
  font-size: 1.08rem;
  color: var(--navy);
  margin: 28px 0 10px;
}
.legal-content p,
.legal-content li {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.75;
}
.legal-content ul { padding-left: 22px; margin: 0 0 1.1em; }
.legal-content li { margin-bottom: 7px; }
.legal-content a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--navy-80); }

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 28px;
  font-size: 0.92rem;
}
.legal-content th,
.legal-content td {
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--line);
  vertical-align: top;
}
.legal-content th { background: var(--bg-alt); color: var(--navy); font-weight: 600; }

.legal-contact-card {
  margin-top: 48px;
  padding: 26px 28px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.96rem;
  line-height: 1.8;
}
.legal-contact-card h3 { margin-top: 0; }

/* Taal-zichtbaarheid: standaard NL, EN verborgen tot geactiveerd */
[data-lang-content] { display: none; }
[data-lang-content].is-active { display: block; }

.legal-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #0c1222;
  color: rgba(255, 255, 255, 0.55);
  padding: 28px 0;
  font-size: 0.84rem;
}
.legal-foot-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.legal-foot a { color: rgba(255, 255, 255, 0.7); }
.legal-foot a:hover { color: #fff; }

@media (max-width: 680px) {
  .legal-back span.legal-back-text { display: none; }
  .legal-hero { padding: 54px 0 44px; }
  .legal-main { padding: 44px 0 64px; }
}