/* Wolf Auto Parts — contact page form + FAQ.
   Page-scoped: loaded only by contact_page.html. Tokens follow the site's
   1rem = 10px base; form controls use font-size: 1.6rem (16px) so iOS Safari
   does not auto-zoom on focus. */

.wolf-contact__intro {
  margin: 0 0 2rem;
  color: var(--wolf-text-muted, #51607a);
  font-size: 1.6rem;
  line-height: 1.5;
}

.wolf-contact-form {
  max-width: 64rem;
}

.wolf-contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}

@media (max-width: 600px) {
  .wolf-contact-form__row { grid-template-columns: 1fr; }
}

.wolf-contact-form__label {
  display: block;
  margin: 1.6rem 0 0.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--wolf-blue, #1b3a6b);
}

.wolf-contact-form__label span {
  color: var(--wolf-status-error, #c0392b);
}

.wolf-contact-form__input {
  box-sizing: border-box;
  width: 100%;
  padding: 1.1rem 1.3rem;
  font-size: 1.6rem; /* >=16px: prevents iOS focus zoom */
  font-family: inherit;
  color: var(--wolf-blue, #1b3a6b);
  background: var(--wolf-bg-surface, #fff);
  border: 2px solid var(--wolf-border, #c9d3e0);
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wolf-contact-form__input:focus {
  outline: none;
  border-color: var(--wolf-gold, #c8a04a);
  box-shadow: var(--wolf-shadow-focus, 0 0 0 3px rgba(200, 160, 74, 0.25));
}

.wolf-contact-form__textarea {
  resize: vertical;
  min-height: 12rem;
  line-height: 1.5;
}

/* Honeypot: keep it in the layout flow for bots but invisible/unreachable
   for humans. Not display:none, which some bots skip. */
.wolf-contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wolf-contact-form__turnstile {
  margin: 2rem 0 0;
}

.wolf-contact-form__submit {
  margin-top: 2rem;
}

.wolf-contact-form__status {
  margin-top: 1.6rem;
  padding: 1.2rem 1.4rem;
  border-radius: 6px;
  font-size: 1.5rem;
}

.wolf-contact-form__status--error {
  color: var(--wolf-status-error-dark, #922b21);
  background: var(--wolf-bg-danger-soft, #fdecea);
  border: 1px solid var(--wolf-border-danger, #f1b0a8);
}

.wolf-contact-form__success {
  padding: 2.4rem;
  border-radius: 8px;
  background: var(--wolf-bg-success, #eaf6ec);
  border: 1px solid var(--wolf-status-success, #2e7d4f);
}

.wolf-contact-form__success-title {
  margin: 0 0 0.6rem;
  font-size: 2rem;
  color: var(--wolf-status-success-dark, #1e5e3a);
}

/* ── FAQ accordion ── */
.wolf-faq {
  border-top: 1px solid var(--wolf-border-light, #e2e8f0);
  max-width: 76rem;
}

.wolf-faq__item {
  border-bottom: 1px solid var(--wolf-border-light, #e2e8f0);
}

.wolf-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 1.8rem 3.2rem 1.8rem 0;
  position: relative;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--wolf-blue, #1b3a6b);
}

.wolf-faq__q::-webkit-details-marker { display: none; }

.wolf-faq__q::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--wolf-gold, #c8a04a);
  transition: transform 0.2s;
}

.wolf-faq__item[open] .wolf-faq__q::after {
  content: "\2212"; /* minus */
}

.wolf-faq__q:focus-visible {
  outline: 3px solid var(--wolf-gold, #c8a04a);
  outline-offset: 2px;
}

.wolf-faq__a {
  padding: 0 0 2rem;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--wolf-text, #2b3648);
}

.wolf-faq__a p { margin: 0 0 1rem; }
.wolf-faq__a p:last-child { margin-bottom: 0; }