/* ===== Contact page ===== */
/* Shares style.css's black/amber design language — page-specific rules
   only, same pattern as engines-page.css / case-studies.css. */

/* ----- Hero (quiet, dimmed — transactional page, not a showcase) ----- */

.contact-hero {
  height: auto;
  min-height: 52vh;
  overflow: visible;
  background: var(--dark-bg);
}

/* .hero-scrim's base rule (style-aqua.css) is background:none -- this
   page never actually had a darkening override despite the comment
   above, so the video showed at full brightness. Same top-to-bottom
   darkening technique as .int-hero-video .hero-scrim. */
.contact-hero .hero-scrim {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.3) 45%,
    rgba(0, 0, 0, 0.2) 70%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

/* Bottom fade, same eased technique as the other pages' hero fades --
   target color here is #ffffff, NOT var(--light-bg)/#F5F6FA like the
   other pages: confirmed .contact-form-section (the section right
   after this hero) is background:#ffffff specifically. */
.contact-hero-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 35%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0.82) 82%,
    #ffffff 100%
  );
}

.contact-hero .hero-content {
  position: relative;
  height: auto;
  min-height: 52vh;
}

.contact-hero .hero-headline-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0;
}

.contact-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--space-3);
  opacity: 0;
  animation: heroTextEntrance 0.6s ease-out forwards;
}

.contact-hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-amber);
}

/* ----- Split form section ----- */

.contact-form-section {
  background: #ffffff;
  padding: var(--space-7) var(--space-3) var(--space-6);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: var(--space-6);
  max-width: 1160px;
  margin: 0 auto;
  align-items: start;
}

/* A grid item's min-width defaults to auto, so the single 1fr column on phones could not
   shrink below its widest content and the info column and the form ran ~20-45px past a 320px screen,
   scrolling the page sideways. min-width: 0 lets the column be the width it is given. */
.contact-form-grid > * {
  min-width: 0;
}

/* Left column — supporting content */

.contact-trust-line {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7198AF;
  margin-bottom: var(--space-2);
}

.contact-reassurance-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.contact-reassurance-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.contact-reassurance-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--cream-lightest);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-reassurance-icon svg,
.contact-reassurance-icon i {
  width: 16px;
  height: 16px;
}

.contact-reassurance-text {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-primary);
  padding-top: 7px;
}

.contact-alt-contact {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  padding-top: var(--space-3);
  border-top: 0.5px solid var(--border);
}

.contact-alt-contact a {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 0.5px solid var(--border);
  transition: border-color 0.3s var(--ease);
}

.contact-alt-contact a:hover {
  border-color: var(--accent-amber);
}

.contact-social-row {
  display: flex;
  gap: 10px;
}

.contact-social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--light-bg);
  border: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.contact-social-link svg {
  width: 15px;
  height: 15px;
}

.contact-social-link:hover {
  background: var(--text-primary);
  color: #ffffff;
}

/* Right column — the form card */

.contact-form-card {
  background: var(--light-bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}

/* 64px of padding on every side left the fields 212px wide on a 390px phone and 142px at
   320px ("Zakelijk e-mailadres" in a box narrower than its own label). */
@media (max-width: 640px) {
  .contact-form-card {
    padding: var(--space-3);
  }
}

.contact-form-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.contact-form-row {
  margin-bottom: var(--space-3);
}

.contact-form-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.contact-form-required {
  color: #7198AF;
  margin-left: 2px;
}

.contact-form-input,
.contact-form-select,
.contact-form-textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius-ui);
  border: 0.5px solid var(--border);
  background: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
  color: var(--text-secondary);
}

.contact-form-input:focus,
.contact-form-select:focus,
.contact-form-textarea:focus {
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 3px rgba(170, 208, 226, 0.15);
}

.contact-form-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.55;
  font-family: 'Inter', sans-serif;
}

.contact-form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b6b76' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 38px;
  cursor: pointer;
}

.contact-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  margin-top: var(--space-2);
  border-radius: var(--radius-button-asym);
  border: none;
  background: var(--accent-amber);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.contact-form-success {
  display: none;
  text-align: center;
  padding: var(--space-6) var(--space-3);
}

.contact-form-success.is-visible {
  display: block;
}

.contact-form-success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cream-lightest);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
}

.contact-form-success-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.contact-form-success-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: var(--text-secondary);
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ----- Quick FAQ (light, quiet strip) ----- */

.contact-faq-section {
  background: var(--light-bg);
  padding: var(--space-6) var(--space-3) var(--space-7);
}

.contact-faq-inner {
  max-width: 680px;
  margin: 0 auto;
}

.contact-faq-label {
  display: block;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.contact-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-faq-item {
  background: #ffffff;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-ui);
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}

.contact-faq-item.active {
  border-color: var(--accent-amber);
}

.contact-faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
}

.contact-faq-question {
  flex: 1;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.contact-faq-icon {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cream-lightest);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease), background 0.3s var(--ease);
}

.contact-faq-icon::before,
.contact-faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--text-primary);
}

.contact-faq-icon::before {
  width: 9px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.contact-faq-icon::after {
  width: 1.5px;
  height: 9px;
  transform: translate(-50%, -50%);
}

.contact-faq-item.active .contact-faq-icon {
  background: var(--accent-amber);
  transform: rotate(45deg);
}

.contact-faq-item.active .contact-faq-icon::before,
.contact-faq-item.active .contact-faq-icon::after {
  background: var(--text-primary);
}

.contact-faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 var(--space-3);
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease), padding 0.4s var(--ease);
}

.contact-faq-item.active .contact-faq-answer {
  max-height: 200px;
  opacity: 1;
  padding: 0 var(--space-3) var(--space-3);
}

.contact-faq-answer p {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-two-col {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * WordPress adaptations — NOT part of the design source.
 *
 * These were written for the v1 port and lost when this file was recopied from
 * Voxion-zain-v3 on 2026-09-23. They correct places where WordPress emits
 * different markup from the static source. Re-copying the source file again
 * will drop them again: keep this section, or re-apply from git history.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Contact Form 7 class mapping ────────────────────────────────────────────
 * §7.2 replaced the source's static <form> with a CF7 shortcode and referred to
 * "class-mapping CSS" that was never written — the plan's block was a placeholder
 * with empty rule bodies. This is it.
 *
 * The CF7 form carries the design's own classes (contact-form-input, -select,
 * -textarea, contact-submit-btn) via the shortcode's class: attribute, so the
 * field styling is inherited, not duplicated. Only CF7's EXTRA wrapper nodes are
 * corrected here — each one is an element the aqua markup does not have:
 *   .wpcf7-form-control-wrap  inline <span> around a block-styled field
 *   .wpcf7 form > p           wpautop's paragraphs (also disabled in inc/shims.php;
 *                             this is the belt to that braces, since autop can be
 *                             re-enabled per-form from the CF7 admin UI)
 */
.contact-form-shell .wpcf7-form-control-wrap { display: block; }
.contact-form-shell .wpcf7 form > p,
.contact-form-shell .contact-form-row > p    { margin: 0; }
.contact-form-shell .contact-form-row br     { display: none; }

/* ── CF7 submit button ───────────────────────────────────────────────────────
 * The source's submit is `<button>Send Message<svg/></button>` — text and arrow
 * centred as a pair with an 8px gap. CF7's [submit] can only render
 * `<input type="submit">`, which takes no children, so the arrow had nowhere to
 * live and the label centred 12px right of where the design puts it.
 *
 * The design classes therefore sit on a <span> wrapper in the form body (see
 * reference/cf7-contact-form.html) with the arrow beside the input, reproducing
 * the source's flex pair exactly. That leaves only the input to neutralise: it
 * must contribute nothing but its own text, so the wrapper's own box — amber
 * fill, radius, padding, the btn-liquid ::before — is the button the user sees.
 *
 * Do NOT reach for a background-image arrow instead: the input's width is
 * content-driven and unknown to CSS, so a background position can pin the arrow
 * to an edge but never 8px after the label.
 */
.contact-form-shell .contact-submit-btn > input.wpcf7-submit {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: inherit;
}

/* CF7's JS inserts `<span class="wpcf7-spinner">` after every `.has-spinner`
 * element at init — it is not in the served HTML, so it cannot be filtered out
 * server-side, and CF7 keeps it in flow (visibility-hidden) at all times. As a
 * flex item inside the wrapper it added 24px of width plus the 8px gap; before
 * the wrapper existed it added 28px of HEIGHT to the whole form.
 *
 * Positioned out of flow rather than display:none so the submitting affordance
 * survives: .btn-liquid already makes the wrapper `position: relative`.
 */
.contact-form-shell .contact-submit-btn > .wpcf7-spinner {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}