/* ==========================================================================
   Ontslagjuristen.nl — single shared stylesheet
   Calm legal look: white background, dark blue primary, grey neutrals,
   one blue-violet accent used ONLY for primary CTAs. Mobile-first.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --blue: #0B2E4F;          /* primary brand colour */
  --blue-dark: #082238;     /* hover state for blue elements */
  --blue-tint: #EDF2F7;     /* very light blue-grey for section backgrounds */
  --accent: #5c6ebb;        /* accent — primary CTAs only; ≥4.5:1 with white text (WCAG AA) */
  /* CTA hover. Must be *darker* than --accent: the previous #6f98c7 was
     lighter, which dropped white button text to 3.00:1 — below AA — and made
     the primary CTA fade on hover instead of responding. 6.7:1 with white. */
  --accent-dark: #4A5896;
  --text: #1F2937;          /* body text */
  --text-muted: #5B6672;    /* secondary text */
  --border: #D9DFE5;        /* hairlines, input borders */
  --white: #FFFFFF;
  --ok: #1B7A43;            /* success messages */
  --error: #B3261E;         /* error messages */
  --radius: 10px;
  --shadow: 0 2px 12px rgba(11, 46, 79, 0.08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Smooth anchor scrolling — but not for people who asked the OS to
   reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  /* Room for the sticky mobile bar (hidden on desktop, see media query) */
  padding-bottom: 64px;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  color: var(--blue);
  line-height: 1.25;
  margin: 0 0 0.5em;
}

/* Dutch compound words ("vaststellingsovereenkomst") are long: hyphenate
   on narrow screens rather than overflow. Desktop has room, so no hyphens
   there (see the 700px media query below). */
@media (max-width: 699px) {
  h1, h2, h3 {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

/* Visible focus for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

section { padding: 48px 0; }

.section-alt { background: var(--blue-tint); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--radius);
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Primary CTA — the only place the accent is used */
.btn-primary {
  background: var(--accent);
  color: var(--white);
}
.btn-primary:hover { background: var(--accent-dark); color: var(--white); }

/* Secondary: quiet dark-blue outline */
.btn-secondary {
  background: var(--white);
  color: var(--blue);
  border: 2px solid var(--blue);
}
.btn-secondary:hover { background: var(--blue-tint); }

/* Disabled state. Not `opacity: .6`: that composites the accent against the
   white page to #9DA8D6, leaving white label text at 2.33:1 — and because
   both submit buttons ship disabled until main.js enables them, that is the
   state every visitor sees at first paint. An explicit grey keeps the label
   readable (4.8:1) and still reads as inactive. */
.btn[disabled] {
  background: #6B7280;
  color: var(--white);
  cursor: wait;
}

/* Set by the failsafe in index.html when main.js never took over: the button
   is not busy, it is broken, and the cursor should not promise otherwise. */
.btn.is-unavailable { cursor: not-allowed; }

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.logo {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--accent); }

.header-nav {
  display: none; /* hidden on small screens; anchor links shown from 700px */
  gap: 24px;
  margin: 0 auto;
}
.header-nav a {
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
}
.header-nav a:hover { color: var(--blue); }

.header-phone {
  margin-left: auto;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* Trust line beside the phone number in the header (homepage only). It had
   no rule at all, so it rendered as unstyled body text competing with the
   logo. Hidden below 700px, where the width belongs to the phone number. */
.header-tag {
  display: none;
  font-size: 0.9rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- Hero ---------- */
.hero { padding: 56px 0 48px; }
.hero h1 { font-size: 2.1rem; max-width: 640px; }
.hero .hero-sub {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 620px;
  margin-bottom: 28px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.hero-call { font-weight: 600; }

/* ---------- Trust bar ---------- */
.trust-bar {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--blue-tint);
}
.trust-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-items li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--blue);
}
.trust-items svg { flex: none; }

/* Round photo placeholder used in trust bar and over-ons */
.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  text-align: center;
  flex: none;
}
.avatar-lg { width: 140px; height: 140px; font-size: 0.85rem; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  max-width: 640px;
}

.form-field { margin-bottom: 18px; }

.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--text);
}

.form-field input[type="file"] { font-size: 0.95rem; }

.form-field textarea { min-height: 110px; resize: vertical; }

.form-hint { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }

/* Standalone AVG notice above a submit button (call-back form), rather than
   a hint hanging under a single field. */
.form-privacy { margin: 18px 0; max-width: 52ch; }

/* Version stamp at the foot of the legal documents. */
.doc-version {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
}
.form-check input { margin-top: 4px; flex: none; width: 18px; height: 18px; }

/* Honeypot: visually removed but still in the DOM for bots.
   Do NOT use display:none — some bots skip hidden fields. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Validation / status messages */
.form-error { color: var(--error); font-weight: 600; font-size: 0.95rem; margin-top: 6px; }
.form-status { margin-top: 14px; font-weight: 600; }
.form-status.is-error { color: var(--error); }

.form-success {
  background: #EAF5EE;
  border: 1px solid var(--ok);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--ok);
  font-size: 1.1rem;
  font-weight: 600;
}

/* Inline spinner shown inside the submit button while sending */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Card grids (checks, reviews) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.card h3 svg { flex: none; color: var(--blue); }
/* A linked card title stays a heading visually; the underline appears on hover
   so it still reads as clickable. */
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--blue); text-decoration: underline; }
.card p { margin: 0; color: var(--text-muted); font-size: 0.97rem; }

/* ---------- Steps ---------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding-left: 64px;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps h3 { margin-bottom: 4px; }
.steps p { margin: 0; color: var(--text-muted); }

/* ---------- Reviews ----------
   Unused for now on purpose: the reviews section on index.html is commented
   out until there are real client quotes to put in it (see the note there).
   Kept so restoring that block needs no CSS work. */
.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.review-card blockquote {
  margin: 0 0 10px;
  font-style: italic;
  color: var(--text);
}
.review-card cite {
  font-style: normal;
  font-weight: 700;
  color: var(--blue);
}
.review-note {
  margin-top: 20px;
  font-weight: 700;
  color: var(--blue);
}

/* ---------- Pricing block ---------- */
.pricing-block {
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 720px;
}
.pricing-block h2 { color: var(--white); }
.pricing-block p { color: #D7E2EC; }
.pricing-block strong { color: var(--white); }

/* ---------- Calculator ---------- */
.calc-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  max-width: 560px;
}
.calc-result {
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--blue-tint);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue);
}
.calc-disclaimer { font-size: 0.9rem; color: var(--text-muted); margin-top: 12px; }

/* CTA card below the calculator */
.cta-card {
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 560px;
  margin-top: 32px;
}
.cta-card h2 { color: var(--white); font-size: 1.3rem; }
.cta-card p { color: #D7E2EC; }

/* ---------- Prose pages (privacy, voorwaarden, uitleg) ---------- */
.prose { max-width: 720px; }
.prose h2 { margin-top: 1.6em; }
.prose ul { padding-left: 22px; }
.prose ol { padding-left: 22px; }
.prose ol > li { margin-bottom: 14px; }

/* Summary box used on problem-page template */
.summary-box {
  background: var(--blue-tint);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin-bottom: 32px;
}
.summary-box ul { margin: 0; padding-left: 20px; }

/* FAQ */
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 10px;
}
.faq summary { font-weight: 700; cursor: pointer; color: var(--blue); }
.faq details p { margin: 10px 0 0; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 32px;
  background: var(--blue);
  color: #C9D6E2;
  padding: 36px 0;
  font-size: 0.95rem;
}
.site-footer a { color: var(--white); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  justify-content: space-between;
}
.footer-inner p { margin: 0 0 6px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 6px; }

/* ---------- Sticky mobile bar ---------- */
.mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(11, 46, 79, 0.12);
}
.mobile-bar a {
  flex: 1;
  padding: 12px 4px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--blue);
}
.mobile-bar a + a { border-left: 1px solid var(--border); }
.mobile-bar .bar-upload {
  background: var(--accent);
  color: var(--white);
}

/* ---------- Larger screens ---------- */
@media (min-width: 700px) {
  body { padding-bottom: 0; }        /* no sticky bar on desktop */
  .mobile-bar { display: none; }

  h1 { font-size: 2.4rem; }
  .hero h1 { font-size: 2.6rem; }
  h2 { font-size: 1.75rem; }
  section { padding: 64px 0; }

  .header-nav { display: flex; }

  /* Tag and phone travel together at the right: the tag takes the free
     space, the phone drops its own auto margin so the 16px flex gap is all
     that separates them. */
  .header-tag { display: inline; margin-left: auto; }
  .header-tag + .header-phone { margin-left: 0; }

  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { padding-left: 0; padding-top: 60px; }
  .steps li::before { left: 0; top: 0; }
}

@media (min-width: 980px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  .card-grid-reviews { grid-template-columns: repeat(3, 1fr); }
}