/*
 * Contact block + the shared form panel.
 *
 * Everything under .ijnsecurityservices-formpanel is shared with the pre-footer
 * band, which is chrome and therefore renders on nearly every page. That is why
 * inc/enqueue.php loads this stylesheet globally rather than relying on block
 * auto-enqueue — the band would otherwise be unstyled everywhere except the
 * contact page.
 *
 * It also styles Contact Form 7's bare markup, scoped under the panel — CF7's
 * own styles are out-ranked by specificity + source order, so no !important is
 * needed and no separate CF7 stylesheet exists.
 */

.ijnsecurityservices-contact__grid {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
}

.ijnsecurityservices-contact__intro { text-align: center; }
.ijnsecurityservices-contact__intro h2 { margin-bottom: .4em; }
.ijnsecurityservices-contact__logo { margin: 0 auto 20px; max-width: 320px; }

.ijnsecurityservices-contact__details { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; justify-items: center; }
.ijnsecurityservices-contact__details a { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; }
.ijnsecurityservices-contact__details a:hover { color: var(--ijnsecurityservices-brand); }
.ijnsecurityservices-contact__details svg { color: var(--ijnsecurityservices-brand); flex: none; }
.ijnsecurityservices-contact__details address { font-style: normal; color: var(--ijnsecurityservices-text-muted); }

.ijnsecurityservices-contact__notice { padding: 12px 16px; border-radius: var(--ijnsecurityservices-radius); font-size: .95rem; }
.ijnsecurityservices-contact__notice.is-ok  { background: #e8f5ec; color: #1c5c33; }
.ijnsecurityservices-contact__notice.is-bad { background: #fdecec; color: #8a1f1f; }

/* Honeypot — off-screen, never focusable. */
.ijnsecurityservices-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   The form panel — shared by the block and the pre-footer band.
   -------------------------------------------------------------------------- */

.ijnsecurityservices-formpanel p { margin: 0 0 18px; }
.ijnsecurityservices-formpanel p:last-child { margin-bottom: 0; }

.ijnsecurityservices-formpanel label,
.ijnsecurityservices-formpanel .wpcf7-form label {
  display: block;
  margin-bottom: 6px;
  font-size: .95rem;
  font-weight: 400;
}
.ijnsecurityservices-formpanel label > span { display: block; margin-bottom: 6px; }

.ijnsecurityservices-formpanel input[type="text"],
.ijnsecurityservices-formpanel input[type="email"],
.ijnsecurityservices-formpanel input[type="tel"],
.ijnsecurityservices-formpanel textarea,
.ijnsecurityservices-formpanel select {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: .95rem;
  color: var(--ijnsecurityservices-text);
  background: var(--ijnsecurityservices-bg);
  border: 1px solid var(--ijnsecurityservices-border);
  border-radius: var(--ijnsecurityservices-radius);
  transition: border-color .2s var(--ijnsecurityservices-ease), box-shadow .2s var(--ijnsecurityservices-ease);
}

.ijnsecurityservices-formpanel :is(input, textarea, select):focus {
  outline: none;
  border-color: var(--ijnsecurityservices-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ijnsecurityservices-brand) 25%, transparent);
}

.ijnsecurityservices-formpanel textarea { resize: vertical; min-height: 118px; }

/* Submit — the built-in button already carries .ijnsecurityservices-btn; this
   is for CF7's, which renders a bare <input type="submit">. */
.ijnsecurityservices-formpanel .wpcf7-form input[type="submit"],
.ijnsecurityservices-formpanel .wpcf7-form button[type="submit"] {
  display: block;
  width: 100%;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--ijnsecurityservices-radius);
  background: var(--ijnsecurityservices-brand);
  color: var(--ijnsecurityservices-text-invert);
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background .25s var(--ijnsecurityservices-ease);
}
.ijnsecurityservices-formpanel .wpcf7-form input[type="submit"]:hover,
.ijnsecurityservices-formpanel .wpcf7-form button[type="submit"]:hover { background: var(--ijnsecurityservices-brand-dark); }

.ijnsecurityservices-formpanel .wpcf7-not-valid-tip { color: #ffb4b4; font-size: .85rem; font-weight: 500; }
.ijnsecurityservices-formpanel .wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: var(--ijnsecurityservices-radius);
  font-size: .95rem;
}
.ijnsecurityservices-formpanel .wpcf7-spinner { margin: 8px auto 0; display: block; }

/* On the navy pre-footer panel the labels sit on dark, the inputs stay light
   with a transparent fill — this is what the Elementor form looked like. */
.ijnsecurityservices-prefooter__form label,
.ijnsecurityservices-prefooter__form .wpcf7-form label { color: var(--ijnsecurityservices-text-invert); }
.ijnsecurityservices-prefooter__form :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: var(--ijnsecurityservices-text-invert);
}
.ijnsecurityservices-prefooter__form ::placeholder { color: rgba(255, 255, 255, .6); }
.ijnsecurityservices-prefooter__form select option { color: var(--ijnsecurityservices-text); }
.ijnsecurityservices-prefooter__form :is(input, textarea, select):focus {
  border-color: var(--ijnsecurityservices-brand);
  box-shadow: 0 0 0 3px rgba(42, 140, 204, .35);
}
.ijnsecurityservices-prefooter__form .ijnsecurityservices-btn { width: 100%; justify-content: center; }

/* The contact page's own form panel is the same navy card. */
.ijnsecurityservices-contact__form { padding: 0; }

@media (max-width: 860px) {
  .ijnsecurityservices-contact__grid { grid-template-columns: 1fr; }
}

/* Cloudflare Turnstile widget. Rendered by Contact Form 7's own integration
   (Contact > Integration > Turnstile) — the theme no longer ships one — but the
   markup is still `.cf-turnstile`, so it still needs spacing inside the panel. */
.ijnsecurityservices-formpanel .cf-turnstile { margin-bottom: 18px; }