/* legal.css — shared styles for terms/privacy/cookie/about/contact.
   Extracted 2026-10-02 from the inline <style> block that used to be
   copy-pasted into every legal page separately; with 15 files now (5 pages
   x 3 languages) a duplicated block is 15 places to forget an edit. */
.legal-main { padding: 48px 0 80px; }
.legal-main .container { max-width: 800px; }
.legal-title { font-size: 32px; font-weight: 700; color: #111827; margin: 0 0 8px; }
.legal-updated { font-size: 14px; color: #9ca3af; margin: 0 0 40px; }
.legal-main h2 { font-size: 20px; font-weight: 600; color: #111827; margin: 36px 0 12px; }
.legal-main h3 { font-size: 16px; font-weight: 600; color: #374151; margin: 24px 0 8px; }
.legal-main p, .legal-main li { font-size: 15px; line-height: 1.7; color: #374151; }
.legal-main ul { margin: 8px 0 16px; padding-left: 22px; }
.legal-main li { margin-bottom: 6px; }
.legal-main a { color: var(--primary); }
.legal-lead { font-size: 18px; line-height: 1.6; color: #374151; margin: 0 0 24px; }
.legal-fill { background: #fef3c7; color: #92400e; padding: 1px 6px; border-radius: 4px; font-size: 13px; font-weight: 500; }
.legal-note { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; font-size: 14px; color: #6b7280; margin: 32px 0; }
.legal-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
.legal-table th { color: #6b7280; font-weight: 600; }

/* Page-level language switcher — separate from the homepage's in-place
   .lang-switcher (which re-renders text via i18n.js). These pages are real
   per-language documents at their own URL, so a click here navigates to the
   sibling page, not swaps text client-side. Same visual classes as the
   homepage switcher for a single consistent control across the site. */
.legal-langrow { display: flex; justify-content: flex-end; margin: -8px 0 24px; }

/* Simple contact form (contact.html). Mirrors the input styling already
   established on /zakelijk — kept visually consistent rather than inventing
   a third form style. */
.contact-form { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 28px; margin-top: 8px; }
.contact-field { margin-bottom: 18px; }
.contact-field label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.contact-field input, .contact-field textarea {
  width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #d1d5db;
  border-radius: 8px; font: inherit; font-size: 15px; color: #111827; background: #fff;
}
.contact-field textarea { min-height: 110px; resize: vertical; font-family: inherit; }
.contact-field input:focus, .contact-field textarea:focus {
  outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.contact-submit {
  width: 100%; padding: 14px; border: 0; border-radius: 10px; background: #10b981; color: #fff;
  font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
}
.contact-submit:disabled { opacity: .6; cursor: not-allowed; }
.contact-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 8px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px; display: none; }
.contact-error.show { display: block; }
.contact-success { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 40px 28px; text-align: center; }
.contact-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 32px; }
.contact-info-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; }
.contact-info-card b { display: block; font-size: 13px; color: #6b7280; margin-bottom: 4px; }
.contact-info-card span, .contact-info-card a { font-size: 15px; color: #111827; font-weight: 600; }
@media (max-width: 600px) { .contact-info-grid { grid-template-columns: 1fr; } }