/* ============================================================
   KMS — overrides for WordPress block-layout auto-margins.

   WordPress injects (via the theme.json layout system):

     :root :where(.is-layout-flow) > * { margin-block-start: 24px }
     :root :where(.is-layout-constrained) > * { margin-block-start: 24px }

   In normal text-stacking groups (eyebrow → headline → paragraph)
   that 24px is actually a reasonable default we keep.

   But every flex/grid container in this theme already uses CSS gap
   for spacing, and the auto-margin then shifts items off the cross
   axis — nav links, hero CTAs, service cards, footer columns end up
   at different vertical positions. We zero the margin only on
   children of the known flex/grid containers, plus between sections.

   Selector specificity (0,2,1) beats WP's :where() rule (0,0,0,0).
   ============================================================ */

/* Section-level: <main> children are the screen sections; they have
   their own padding/border and need no auto-margin. */
.kms main.wp-block-group > *,
.kms main.wp-block-template-part > * { margin-block-start: 0; margin-block-end: 0; }

/* Header / footer parts */
.kms .nav-inner > *,
.kms .nav-mobile > *,
.kms .nav-links > *,
.kms .nav-dropdown > *,
.kms .nav-dropdown-menu > *,
.kms .nav-cta-row > *,
.kms .foot-grid > *,
.kms .foot-grid > div > *,
.kms .foot-bottom > *,
.kms .foot-socials > * { margin-block-start: 0; margin-block-end: 0; }

/* Hero */
.kms .hero-grid > *,
.kms .hero-ctas > *,
.kms .hero-trust > *,
.kms .meta-row > * { margin-block-start: 0; margin-block-end: 0; }

/* Repeating-row layouts */
.kms .sec-head > *,
.kms .services > *,
.kms .approach-grid > *,
.kms .stats-grid > *,
.kms .compare > *,
.kms .compare-col > *,
.kms .col-head > *,
.kms .pricing > *,
.kms .pricing-card > *,
.kms .testi-grid > *,
.kms .testi > *,
.kms .testi-meta > *,
.kms .faq-wrap > *,
.kms .faq-list > *,
.kms .guarantee > *,
.kms .guarantee-meta > *,
.kms .closer > *,
.kms .marquee > *,
.kms .marquee-track > * { margin-block-start: 0; margin-block-end: 0; }

/* Individual cards/stats — content inside is intentionally tight */
.kms .step > *,
.kms .stat > *,
.kms .gm-card > * { margin-block-start: 0; margin-block-end: 0; }

/* Service-page specific */
.kms .svc-hero-grid > *,
.kms .svc-hero-meta > *,
.kms .svc-hero-meta .row > *,
.kms .ladder > *,
.kms .ladder-item > *,
.kms .ad-mock > *,
.kms .ad-mock-stats > *,
.kms .ad-mock-stat > * { margin-block-start: 0; margin-block-end: 0; }

/* ============================================================
   Replacements for inline style="…" attributes that were stripped
   from patterns to satisfy Gutenberg's block validator. Each rule
   here restores the original design intent via class-based styling
   instead of inline declarations.
   ============================================================ */

/* Section-head h2: gap below the eyebrow */
.kms .sec-head h2 { margin-top: 16px; }

/* Closer h2: gap below the eyebrow */
.kms .closer h2 { margin-top: 20px; }

/* FAQ left column: large heading + muted description */
.kms .faq-wrap > div:first-child > h2 {
  font-size: 56px;
  line-height: 1;
  margin: 16px 0;
  max-width: 12ch;
}
.kms .faq-wrap > div:first-child > p:not(.eyebrow):not(:has(.btn)) {
  color: var(--fg-soft);
  max-width: 32ch;
  font-size: 15px;
}
.kms .faq-wrap > div:first-child > p:has(.btn) { margin-top: 24px; }

/* CTA paragraph wrappers: small margin above the button row */
.kms .pricing-card > p:has(.btn) { margin-top: 28px; }

/* tarieven disclaimer paragraph */
.kms .pricing + p.mono {
  margin-top: 24px;
  color: var(--fg-soft);
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* Hero stat: small grey caption */
.kms .hero-stat span { color: var(--fg-soft); }

/* Pricing card CTA: full-width centered button */
.kms .pricing-card .btn { width: 100%; justify-content: center; }

/* Footer Contact: muted address line */
.kms .foot-grid .foot-address { color: var(--fg-soft); }

/* Cases archive: whole card is clickable via stretched-link on the title */
.kms .case-card { position: relative; }
.kms .case-card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Featured image fills the photo containers edge-to-edge, cropping as needed.
   The card expects 4/3 (or 16/10 if featured) and the detail hero expects 4/5
   - the same source image rarely matches both naturally. */
.kms .case-photo img,
.kms .case-detail-hero .hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Contact Form 7 styling — match the theme's form-row aesthetic.
   CF7 generates a <p><label>label<br>...input...</label></p>
   structure that we restyle without touching the plugin.
   ============================================================ */
.kms .contact-form .wpcf7-form > p { margin: 0 0 18px; }
.kms .contact-form .wpcf7-form > p:last-of-type { margin-bottom: 0; }

.kms .contact-form .wpcf7-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.kms .contact-form .wpcf7-form label br { display: none; }

.kms .contact-form .wpcf7-form-control-wrap { display: block; }

.kms .contact-form .wpcf7-form input[type="text"],
.kms .contact-form .wpcf7-form input[type="email"],
.kms .contact-form .wpcf7-form input[type="tel"],
.kms .contact-form .wpcf7-form input[type="url"],
.kms .contact-form .wpcf7-form input[type="number"],
.kms .contact-form .wpcf7-form textarea,
.kms .contact-form .wpcf7-form select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 14px 16px;
  color: var(--fg);
  font-family: var(--body-font);
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.kms .contact-form .wpcf7-form input:focus,
.kms .contact-form .wpcf7-form textarea:focus,
.kms .contact-form .wpcf7-form select:focus { border-color: var(--accent); }

.kms .contact-form .wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--body-font);
}

.kms .contact-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  border-radius: var(--r-xs);
  padding: 14px 24px;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.kms .contact-form .wpcf7-submit:hover {
  background: var(--accent-deep, var(--accent));
  transform: translateY(-1px);
}

/* Inline + bottom response messages */
.kms .contact-form .wpcf7-response-output {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-xs);
  font-size: 14px;
  border: 1px solid var(--line);
  font-family: var(--body-font);
  text-transform: none;
  letter-spacing: 0;
}
.kms .contact-form form.invalid .wpcf7-response-output,
.kms .contact-form form.failed .wpcf7-response-output {
  border-color: #ef4444;
  color: #b91c1c;
  background: #fef2f2;
}
.kms .contact-form form.sent .wpcf7-response-output {
  border-color: #22c55e;
  color: #15803d;
  background: #f0fdf4;
}
.kms .contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #b91c1c;
  font-family: var(--body-font);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

/* CF7's hidden helper fieldset shouldn't contribute spacing */
.kms .contact-form .hidden-fields-container { border: 0; padding: 0; margin: 0; }
.kms .contact-form .hidden-fields-container br { display: none; }

/* ============================================================
   Marquee seamless loop fix.

   The track uses width:max-content + translateX(-50%) to loop after
   theme.js duplicates the inner HTML. With flex gap, the gap only
   exists BETWEEN children — never trailing the last one — so the
   total width is items*N + gap*(N-1). Half of that doesn't land on
   the start of item N/2+1, so the loop has a ~half-gap mismatch and
   visibly jumps.

   Move the spacing into a per-item margin-right. Now every item
   contributes (item_width + 56), so half the total width lands
   exactly on the start of item N/2+1 and the loop is seamless.
   ============================================================ */
.kms .marquee-track { gap: 0; }
.kms .marquee-item { margin-right: 56px; }