/* Nova Contact — NovaFolio Premium (token-driven, scoped)
   Uses token.css + tokens-css.php output (Customizer) */

.nvf-contact {
  width: 100%;
  max-width: var(--nvf-layout-max-width, 1440px);
  margin-inline: auto;
  background: transparent;
}

/* Wrapper — no vertical padding by default; spacing is controlled
   by the parent (Nova Section / Nova Column).  Users who need inner
   padding can set it via the Column padding controls. */
.nvf-contact__inner {
  max-width: var(--nvf-contact-max-width, 980px);
  margin: 0 auto;
  padding: 0;
  position: relative;
}

/* When nested inside a column, align left instead of centering */
.wp-block-column .nvf-contact__inner {
  margin-left: 0;
  margin-right: auto;
}

/* Soft decorative background (subtle, can be removed if needed) */
.nvf-contact__inner::before,
.nvf-contact__inner::after {
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}
.nvf-contact__inner::before {
  background:
    radial-gradient(520px 260px at 15% 20%, color-mix(in srgb, var(--nvf-color-accent, #4F46E5) 18%, transparent) 0%, transparent 65%),
    radial-gradient(520px 280px at 85% 35%, color-mix(in srgb, var(--nvf-color-accent, #4F46E5) 12%, transparent) 0%, transparent 70%);
  filter: blur(2px);
}
.nvf-contact__inner::after {
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--nvf-color-accent, #4F46E5) 6%, transparent) 100%);
  opacity: 0.18;
}

.nvf-contact__title,
.nvf-contact__subtitle,
.nvf-contact__form {
  position: relative;
  z-index: 1;
}

/* Header */
/* Spécificité (0,2,1) — bat le sélecteur thème global p ou body p
   !important sur font-family/size pour contrer tout éventuel override */
.nvf-contact p.nvf-contact__subtitle {
  margin: 0 0 10px;
  text-align: left;
  font-family: var(--contact-subtitle-font, inherit) !important;
  font-size: var(--contact-subtitle-size, 13px) !important;
  font-weight: var(--contact-subtitle-weight, 700) !important;
  letter-spacing: var(--contact-subtitle-ls, 0.12em);
  text-transform: var(--contact-subtitle-transform, none);
  color: var(--contact-subtitle-color, var(--nvf-color-accent, #4F46E5));
}

/* Spécificité (0,2,1) — identique au sélecteur thème h2:not(x):not(y)
   contact.css se chargeant après main.css, la règle contact l'emporte en cas d'égalité */
.nvf-contact h2.nvf-contact__title {
  margin: 0 0 30px;
  text-align: left;
  font-family: var(--contact-title-font, var(--nvf-headings-font-family, var(--nvf-body-font-family, system-ui))) !important;
  font-size: var(--contact-title-size, clamp(30px, 4.6vw, 54px)) !important;
  font-weight: var(--contact-title-weight, 800) !important;
  letter-spacing: var(--contact-title-ls, -0.03em);
  text-transform: var(--contact-title-transform, none);
  color: var(--contact-title-color, var(--nvf-color-headings, var(--nvf-text, #111827)));
  line-height: var(--contact-title-lh, 1.05);
}

/* Card */
.nvf-contact__form {
  display: grid;
  gap: 22px;

  padding: clamp(22px, 4vw, 56px);
  border: 1px solid var(--contact-form-border, var(--nvf-border-soft, var(--nvf-border, #E5E7EB)));
  border-radius: var(--contact-form-radius, var(--nvf-radius-card, 26px));
  background: var(--contact-form-bg, var(--nvf-surface-1, #fff));
  box-shadow: var(--nvf-shadow-card, 0 14px 36px rgba(15, 23, 42, 0.05));
}

.nvf-contact__form:focus-within {
  border-color: var(--nvf-border-focus, color-mix(in srgb, #0F172A 45%, transparent));
  box-shadow:
  var(--nvf-shadow-card, 0 14px 36px rgba(15, 23, 42, 0.05)),
  0 0 0 5px color-mix(in srgb, var(--nvf-color-accent, #4F46E5) 12%, transparent);
}

/* Rows */
.nvf-contact__row {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .nvf-contact__row {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
}

/* Labels */
.nvf-contact__label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.nvf-contact__label span {
  display: block;
  font-size: var(--contact-label-size, 12px);
  font-weight: var(--contact-label-weight, 800);
  letter-spacing: var(--contact-label-ls, 0.08em);
  text-transform: var(--contact-label-transform, none);
  color: var(--contact-label-color, var(--nvf-color-text, #4B5563));
}

.nvf-contact__label strong {
  color: var(--nvf-color-accent, #4F46E5);
  font-weight: 800;
}

/* Fields — use Customizer output when present, fallback to form tokens */
.nvf-contact__input,
.nvf-contact__textarea {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;

  /* Block-level vars take priority over Customizer tokens */
  padding: var(--contact-input-pad, var(--nvf-form-input-padding, 14px 18px)) !important;
  border: 1px solid var(--contact-input-border, var(--nvf-color-field-border, var(--nvf-border, #E5E7EB)));
  border-radius: var(--contact-input-radius, var(--nvf-radius-input, 12px));

  /* Background + text */
  background: var(--contact-input-bg, var(--nvf-color-field-bg, var(--nvf-surface-2, #F3F4F6)));
  color: var(--contact-input-color, var(--nvf-color-field-text, var(--nvf-text, #111827)));

  font-family: var(--nvf-body-font-family, system-ui);
  font-size: var(--contact-input-size, 15px);
  line-height: 1.6;

  outline: none;
  transition: border-color var(--nvf-transition, 180ms ease), box-shadow var(--nvf-transition, 180ms ease), transform var(--nvf-transition, 180ms ease), background var(--nvf-transition, 180ms ease);
  -webkit-appearance: none;
  appearance: none;
}

.nvf-contact__textarea {
  resize: vertical;
  min-height: 170px;
}

.nvf-contact__input::placeholder,
.nvf-contact__textarea::placeholder {
  color: var(--nvf-form-placeholder-color, color-mix(in srgb, var(--nvf-color-text, #4B5563) 35%, transparent));
  opacity: 0.9;
}

.nvf-contact__input:hover,
.nvf-contact__textarea:hover {
  border-color: color-mix(in srgb, var(--nvf-color-accent, #4F46E5) 26%, var(--nvf-border, #E5E7EB));
}

.nvf-contact__input:focus,
.nvf-contact__textarea:focus {
  /* If Customizer emits a full border for focus, use it */
  border: var(--nvf-form-input-focus-border, 2px solid var(--nvf-color-field-focus, var(--nvf-color-accent, #4F46E5)));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nvf-color-accent, #4F46E5) 16%, transparent);
}

/* Invalid state (added by JS validation) */
.nvf-contact__input.is-invalid,
.nvf-contact__textarea.is-invalid {
  border-color: var(--nvf-form-error-color, #dc2626);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nvf-form-error-color, #dc2626) 14%, transparent);
}

/* Actions */
.nvf-contact__actions {
  display: grid;
  gap: 14px;
  margin-top: 6px;
  justify-items: start;
}

/* Button — align with NovaFolio buttons */
/* Button — le thème déclare button { font-* !important } à spécificité (0,0,1).
   Avec .nvf-contact .nvf-contact__submit à (0,2,0) + !important on l'emporte. */
.nvf-contact .nvf-contact__submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--contact-submit-pad, var(--nvf-btn-pad-y, 0.78rem) var(--nvf-btn-pad-x, 1.35rem));
  min-height: var(--nvf-btn-min-h, 44px);

  border: 1px solid transparent;
  border-radius: var(--contact-submit-radius, var(--nvf-btn-radius, var(--nvf-radius-pill, 999px))) !important;

  background: var(--contact-submit-bg, var(--nvf-color-accent, #4F46E5)) !important;
  color: var(--contact-submit-color, var(--nvf-color-on-accent, #fff)) !important;

  font-size: var(--contact-submit-size, var(--nvf-btn-font-size, 0.95rem)) !important;
  font-weight: var(--contact-submit-weight, 800) !important;
  letter-spacing: var(--contact-submit-ls, 0.08em);
  text-transform: var(--contact-submit-transform, uppercase);
  font-family: var(--contact-submit-font, var(--nvf-body-font-family, system-ui)) !important;

  cursor: pointer;
  transition: transform var(--nvf-transition, 180ms ease), box-shadow var(--nvf-transition, 180ms ease), filter var(--nvf-transition, 180ms ease), border-color var(--nvf-transition, 180ms ease);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--nvf-color-accent, #4F46E5) 30%, transparent);
}

.nvf-contact .nvf-contact__submit:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--contact-submit-hover-bg, var(--contact-submit-bg, var(--nvf-color-accent, #4F46E5))) !important;
  color: var(--contact-submit-hover-color, var(--contact-submit-color, var(--nvf-color-on-accent, #fff))) !important;
  filter: brightness(1.02);
  border-color: transparent;
  box-shadow: 0 18px 36px color-mix(in srgb, var(--nvf-color-accent, #4F46E5) 36%, transparent);
}

.nvf-contact__submit:disabled {
  opacity: 1;
  cursor: not-allowed;
}

/* Loading state */
.nvf-contact__submit.is-loading {
  pointer-events: none;
  opacity: 0.78;
}
.nvf-contact__submit.is-loading::after {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: nvf-contact-spin 0.65s linear infinite;
  margin-left: 9px;
  vertical-align: middle;
  flex-shrink: 0;
}
@keyframes nvf-contact-spin {
  to { transform: rotate(360deg); }
}

/* Full-width submit variant */
.nvf-contact--submit-full .nvf-contact__actions {
  justify-items: stretch;
}
.nvf-contact--submit-full .nvf-contact__submit {
  width: 100%;
  justify-content: center;
}

/* Status */
.nvf-contact__status {
  margin: 0;
  width: min(680px, 100%);
  padding: 12px 14px;
  border-radius: var(--nvf-radius-input, 8px);
  font-size: var(--nvf-form-status-fs, 14px);
  line-height: 1.55;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  background: transparent;
}
.nvf-contact__status:empty { display: none; }

.nvf-contact__status.is-success {
  color: var(--nvf-form-success-color, #10B981);
  background: var(--nvf-form-success-bg, #ECFDF5);
  border-color: color-mix(in srgb, var(--nvf-form-success-color, #10B981) 26%, transparent);
}
.nvf-contact__status.is-success::before {
  content: "✓";
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
}

.nvf-contact__status.is-error {
  color: var(--nvf-form-error-color, #dc2626);
  background: var(--nvf-form-error-bg, #FEE2E2);
  border-color: color-mix(in srgb, var(--nvf-form-error-color, #dc2626) 22%, transparent);
}
.nvf-contact__status.is-error::before {
  content: "✕";
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
}

/* Character counter */
.nvf-contact__char-count {
  font-size: var(--nvf-form-charcount-fs, 11px);
  line-height: 1;
  text-align: right;
  opacity: 0.48;
  margin: -4px 0 0;
  transition: color .15s ease, opacity .15s ease;
}
.nvf-contact__char-count.is-warning { color: var(--nvf-color-warning, #f59e0b); opacity: 1; }
.nvf-contact__char-count.is-error   { color: var(--nvf-form-error-color, #ef4444); opacity: 1; font-weight: 600; }

/* Honeypot */
.nvf-contact__label--hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* ── Minimal (stacked) layout ── */
.nvf-contact--minimal .nvf-contact__inner::before,
.nvf-contact--minimal .nvf-contact__inner::after {
  display: none;
}

.nvf-contact--minimal .nvf-contact__form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 0;
  border-radius: 0;
}

.nvf-contact--minimal .nvf-contact__form:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.nvf-contact--minimal .nvf-contact__label {
  gap: 0;
  margin-bottom: 0;
}

.nvf-contact--minimal .nvf-contact__label span {
  font-size: var(--contact-label-size, 11px);
  font-weight: var(--contact-label-weight, 600);
  letter-spacing: var(--contact-label-ls, 0.18em);
  text-transform: var(--contact-label-transform, uppercase);
  color: var(--contact-label-color, var(--nvf-color-text, #9CA3AF));
  padding: 18px 0 6px;
}

.nvf-contact--minimal .nvf-contact__input,
.nvf-contact--minimal .nvf-contact__textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--contact-input-border, var(--nvf-border-soft, rgba(255,255,255,0.18))) !important;
  border-radius: 0 !important;
  padding: var(--contact-input-pad, 10px 0) !important;
  font-size: var(--contact-input-size, 15px);
  color: var(--contact-input-color, var(--nvf-color-text, inherit));
  transition: border-color var(--nvf-transition, 180ms ease);
}

.nvf-contact--minimal .nvf-contact__input:focus,
.nvf-contact--minimal .nvf-contact__textarea:focus {
  border: none !important;
  border-bottom: 2px solid var(--nvf-color-accent, #4F46E5) !important;
  box-shadow: none !important;
  outline: none;
}

.nvf-contact--minimal .nvf-contact__textarea {
  min-height: 100px;
  resize: vertical;
}

.nvf-contact--minimal .nvf-contact__actions {
  margin-top: 28px;
  justify-items: center;
}

.nvf-contact--minimal .nvf-contact__submit {
  background: transparent !important;
  color: var(--contact-submit-color, var(--nvf-color-text, inherit)) !important;
  border: 1px solid var(--contact-submit-color, var(--nvf-color-text, currentColor));
  box-shadow: none;
  font-size: var(--contact-submit-size, 12px) !important;
  font-weight: var(--contact-submit-weight, 600) !important;
  letter-spacing: var(--contact-submit-ls, 0.18em);
  text-transform: var(--contact-submit-transform, uppercase);
  padding: var(--contact-submit-pad, 12px 36px);
  border-radius: 0 !important;
}

.nvf-contact--minimal .nvf-contact__submit:hover:not(:disabled) {
  background: var(--contact-submit-hover-bg, var(--nvf-color-accent, #4F46E5)) !important;
  color: var(--contact-submit-hover-color, #fff) !important;
  border-color: var(--contact-submit-hover-bg, var(--nvf-color-accent, #4F46E5));
  transform: none;
  box-shadow: none;
  filter: none;
}

/* Mobile */
@media (max-width: 768px) {
  .nvf-contact__inner {
    padding: 0;
  }
  
  /* Form more compact on mobile */
  .nvf-contact__form {
    padding: clamp(16px, 3vw, 56px);
    gap: 16px;
  }
  
  /* Tighter row spacing */
  .nvf-contact__row {
    gap: 14px;
  }
  
  /* Input font size 16px to prevent iOS zoom */
  .nvf-contact__input,
  .nvf-contact__textarea {
    font-size: 16px;
  }
  
  /* Full width submit button */
  .nvf-contact__actions {
    justify-items: stretch;
  }
  .nvf-contact__submit {
    width: 100%;
    padding: 12px 16px;
  }
  
  /* Reduced title/subtitle on mobile */
  .nvf-contact__title {
    font-size: var(--contact-title-size, clamp(24px, 5vw, 54px));
    margin-bottom: 16px;
  }
  
  .nvf-contact__subtitle {
    font-size: var(--contact-subtitle-size, 14px);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nvf-contact__form,
  .nvf-contact__input,
  .nvf-contact__textarea,
  .nvf-contact__submit {
    transition: none !important;
  }
}

/* ============================================
   GDPR consent checkbox
   ============================================ */
.nvf-contact__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875em;
  line-height: 1.4;
}

.nvf-contact__checkbox {
  flex-shrink: 0;
  width: 1.125em;
  height: 1.125em;
  margin-top: 0.15em;
  accent-color: var(--nvf-contact-accent, var(--nvf-color-accent, #2563eb));
  cursor: pointer;
}

.nvf-contact__consent a {
  color: var(--nvf-contact-accent, var(--nvf-color-accent, #2563eb));
  text-decoration: underline;
}

/* ============================================
   When Contact is nested in Section Nova
   Remove padding at ALL breakpoints
   ============================================ */
.nvf-section__inner > .nvf-contact .nvf-contact__inner {
  padding: 0 !important;
}

/* -----------------------------------------
   WordPress blockGap reset
   is-layout-flow / is-layout-constrained inject margin-block-start
   on children. Contact manages its own spacing.
----------------------------------------- */
:where(.is-layout-flow) > .wp-block-novafolio-contact,
:where(.is-layout-constrained) > .wp-block-novafolio-contact {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* -----------------------------------------
   Defensive horizontal padding
   When placed directly in post content (not inside a Section),
   provide horizontal safety margin on narrow viewports.
----------------------------------------- */
:is(.entry-content, .nvf-prose) > .wp-block-novafolio-contact {
  box-sizing: border-box;
}