/*
 * Contact page (page-contact.php). Hero, form card and section heads come from
 * free-trial.css; this adds the contact details, the topic and message fields,
 * and the route cards.
 */

/* Contact details */
.a4ct-details { margin: 8px 0 0; padding: 0; max-width: 560px; border-top: 1px solid var(--line-soft); }
.a4ct-details > div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.a4ct-details dt { padding-top: 3px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.a4ct-details dd { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.a4ct-details a { color: var(--purple); text-decoration: none; }
.a4ct-details a:hover { color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }

/* Topic and message fields (match the form's inputs) */
.a4ct .a4ct-select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f398f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
.a4ct .a4ct-select:invalid { color: var(--faint); }
.a4ct .a4ct-textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.a4ct-optional { font-weight: 400; color: var(--faint); }

/* Routes */
.a4ct-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.a4ct-route {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s var(--ease-standard), box-shadow 0.3s var(--ease-standard), border-color 0.3s var(--ease-standard);
}
.a4ct-route:hover { transform: translateY(-4px); border-color: rgba(95, 57, 143, 0.3); box-shadow: 0 24px 48px rgba(79, 42, 155, 0.1); }
.a4ct-route__tag { margin-bottom: 16px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--magenta); }
.a4ct-route h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.a4ct-route p { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.a4ct-route__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--purple); }
.a4ct-route__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-standard); }
.a4ct-route:hover .a4ct-route__link svg { transform: translateX(4px); }

@media (max-width: 991px) {
  .a4ct-routes { grid-template-columns: minmax(0, 1fr); }
  .a4ct-details { margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .a4ct-route,
  .a4ct-route:hover { transition: none; transform: none; }
}