/* =============================================================
   PAWSHTAILS — CONTACT PAGE
   Enqueued only when page-templates/page-contact.php is active.

   Layout: dark hero → cream prose-section containing three
   stacked full-width blocks (form, social, trade banner).

   The form is rendered by WPForms (shortcode in ACF). The CSS
   here overrides WPForms' defaults so the rendered output
   matches the rest of our site: Sen font, near-black labels,
   neutral-300 borders, brand-orange submit button, etc.
   ============================================================= */


/* BREADCRUMB. */
body.page-template-page-contact .breadcrumb {
  padding: var(--space-4) 0;
  background: var(--white);
  border-bottom: 1px solid var(--neutral-100);
}
body.page-template-page-contact .breadcrumb .container { max-width: 1280px; }
body.page-template-page-contact .breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Sen', sans-serif !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin: 0;
  padding: 0;
}
body.page-template-page-contact .breadcrumb-list li { margin: 0; padding: 0; }
body.page-template-page-contact .breadcrumb-list a {
  color: var(--neutral-500);
  text-decoration: none;
  transition: color var(--t-fast, 150ms);
}
body.page-template-page-contact .breadcrumb-list a:hover { color: var(--brand-orange); }
body.page-template-page-contact .breadcrumb-sep { color: var(--neutral-500); opacity: 0.5; margin: 0; }
body.page-template-page-contact .breadcrumb-current { color: var(--neutral-900); font-weight: 600; }


/* HERO base (mirrors content-pages.css since that file isn't loaded
   on this template). */
body.page-template-page-contact .account-hero {
  padding: var(--space-8) var(--section-x) var(--space-6);
  background: var(--neutral-900);
  color: var(--white);
  text-align: center;
}
body.page-template-page-contact .account-hero-inner { max-width: 1100px; margin: 0 auto; }
body.page-template-page-contact .account-hero-eyebrow {
  font-family: var(--font-accent) !important;
  font-size: var(--text-2xl);
  color: var(--brand-orange);
  transform: rotate(-2deg);
  display: inline-block;
  line-height: 1;
  margin-bottom: var(--space-2);
}
body.page-template-page-contact .account-hero-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-4xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--white);
  margin: 0;
}
body.page-template-page-contact .account-hero-subtitle {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--space-3);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
body.page-template-page-contact .account-hero-subtitle p { margin: 0; }
@media (min-width: 720px) {
  body.page-template-page-contact .account-hero { padding: var(--space-10) var(--section-x) var(--space-8); }
  body.page-template-page-contact .account-hero-eyebrow { font-size: var(--text-3xl); }
  body.page-template-page-contact .account-hero-title { font-size: var(--text-5xl); }
}

body.page-template-page-contact .prose-section {
  padding: var(--section-y) 0 var(--space-12);
  background: var(--brand-cream);
}
body.page-template-page-contact .prose-section .container { max-width: 1100px; }


/* ============================================================
   1) CONTACT FORM BLOCK — white card wrapping the WPForms output.
   ============================================================ */
.contact-page .prose-eyebrow {
  font-family: var(--font-accent) !important;
  font-size: var(--text-xl);
  color: var(--brand-orange);
  display: inline-block;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.contact-page .contact-form-block {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  padding: var(--space-5);
}
@media (min-width: 720px) {
  .contact-page .contact-form-block { padding: var(--space-8); }
}
.contact-page .contact-form-heading {
  font-family: var(--font-display) !important;
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--neutral-900);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  line-height: 1.1;
}
.contact-page .contact-form-intro {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  color: var(--neutral-700);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
}


/* ============================================================
   WPFORMS COMPATIBILITY OVERRIDES — restyle the plugin output
   to match our brand without forking the plugin. WPForms wraps
   the form in .wpforms-container > .wpforms-form. Most field
   markup is .wpforms-field-container > .wpforms-field > label +
   input/textarea/select.
   ============================================================ */
.contact-page .contact-wpforms-wrap .wpforms-container {
  margin: 0 !important;
  max-width: 100%;
}
.contact-page .contact-wpforms-wrap .wpforms-container .wpforms-form {
  background: transparent;
  padding: 0;
  border: 0;
}
.contact-page .contact-wpforms-wrap .wpforms-field {
  padding: 0 0 var(--space-3);
  margin: 0;
}
.contact-page .contact-wpforms-wrap .wpforms-field-label,
.contact-page .contact-wpforms-wrap .wpforms-field label {
  font-family: 'Sen', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--neutral-700) !important;
  margin: 0 0 6px !important;
  display: block;
}
/* Required asterisk. */
.contact-page .contact-wpforms-wrap .wpforms-required-label {
  color: var(--brand-orange) !important;
}

/* Inputs / textareas / selects. */
.contact-page .contact-wpforms-wrap input[type="text"],
.contact-page .contact-wpforms-wrap input[type="email"],
.contact-page .contact-wpforms-wrap input[type="tel"],
.contact-page .contact-wpforms-wrap input[type="url"],
.contact-page .contact-wpforms-wrap input[type="number"],
.contact-page .contact-wpforms-wrap input[type="date"],
.contact-page .contact-wpforms-wrap textarea,
.contact-page .contact-wpforms-wrap select {
  width: 100% !important;
  padding: var(--space-3) !important;
  border: 1px solid var(--neutral-300) !important;
  background: var(--white) !important;
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-base) !important;
  color: var(--neutral-900) !important;
  transition: border-color var(--t-fast, 150ms);
  box-sizing: border-box !important;
  border-radius: 0 !important;
  max-width: 100% !important;
  box-shadow: none !important;
  line-height: 1.5;
}
.contact-page .contact-wpforms-wrap input[type="text"],
.contact-page .contact-wpforms-wrap input[type="email"],
.contact-page .contact-wpforms-wrap input[type="tel"],
.contact-page .contact-wpforms-wrap input[type="url"],
.contact-page .contact-wpforms-wrap input[type="number"],
.contact-page .contact-wpforms-wrap input[type="date"],
.contact-page .contact-wpforms-wrap select {
  height: 48px !important;
  padding: 0 var(--space-3) !important;
}
.contact-page .contact-wpforms-wrap textarea {
  min-height: 160px !important;
  resize: vertical !important;
  height: auto !important;
  padding: var(--space-3) !important;
}
.contact-page .contact-wpforms-wrap input:focus,
.contact-page .contact-wpforms-wrap textarea:focus,
.contact-page .contact-wpforms-wrap select:focus {
  outline: 0 !important;
  border-color: var(--neutral-900) !important;
  box-shadow: none !important;
}

/* Submit button. */
.contact-page .contact-wpforms-wrap .wpforms-submit-container { padding: 0; margin-top: var(--space-3); }
.contact-page .contact-wpforms-wrap button.wpforms-submit,
.contact-page .contact-wpforms-wrap input[type="submit"] {
  background: var(--brand-orange) !important;
  color: var(--white) !important;
  font-family: 'Sen', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  padding: var(--space-3) var(--space-5) !important;
  min-height: 48px !important;
  cursor: pointer;
  transition: background var(--t-fast, 150ms);
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
}
.contact-page .contact-wpforms-wrap button.wpforms-submit:hover,
.contact-page .contact-wpforms-wrap input[type="submit"]:hover {
  background: var(--brand-orange-dark) !important;
}

/* Inline validation messages from WPForms. */
.contact-page .contact-wpforms-wrap .wpforms-error {
  font-family: 'Sen', sans-serif !important;
  color: var(--brand-orange) !important;
  font-size: var(--text-xs) !important;
  margin-top: 4px !important;
}
.contact-page .contact-wpforms-wrap input.wpforms-error,
.contact-page .contact-wpforms-wrap textarea.wpforms-error,
.contact-page .contact-wpforms-wrap select.wpforms-error {
  border-color: var(--brand-orange) !important;
}

/* WPForms confirmation message (shown after submit). */
.contact-page .contact-wpforms-wrap .wpforms-confirmation-container,
.contact-page .contact-wpforms-wrap .wpforms-confirmation-container-full {
  background: var(--brand-cream) !important;
  border: 0 !important;
  padding: var(--space-4) var(--space-5) !important;
  margin: 0 !important;
  font-family: 'Sen', sans-serif !important;
  color: var(--neutral-900) !important;
}
.contact-page .contact-wpforms-wrap .wpforms-confirmation-container p { margin: 0; }


/* ============================================================
   2) SOCIAL BLOCK — full-width Caveat tagline + row of orange
   icon squares. Sits between the form and the trade banner.
   ============================================================ */
.contact-page .contact-social-block {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  padding: var(--space-5);
  margin-top: var(--space-5);
  text-align: center;
}
@media (min-width: 720px) {
  .contact-page .contact-social-block { padding: var(--space-6) var(--space-8); }
}
.contact-page .contact-social-tagline {
  font-family: var(--font-accent) !important;
  font-size: var(--text-2xl);
  color: var(--brand-orange);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.contact-page .contact-social-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
}
.contact-page .contact-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--brand-orange);
  color: var(--white);
  border: 0;
  text-decoration: none;
  transition: background var(--t-fast, 150ms), transform var(--t-fast, 150ms);
}
.contact-page .contact-social-link:hover {
  background: var(--brand-orange-dark);
  color: var(--white);
  transform: translateY(-1px);
}
.contact-page .contact-social-link svg {
  width: 20px;
  height: 20px;
}


/* ============================================================
   3) TRADE-ENQUIRY BANNER — full-width orange strip at the
   bottom. Same visual as the .ask-us-banner pattern on the
   content pages.
   ============================================================ */
.contact-page .contact-trade-banner {
  background: var(--brand-orange);
  color: var(--white);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}
@media (min-width: 720px) {
  .contact-page .contact-trade-banner { padding: var(--space-6); gap: var(--space-5); }
}
.contact-page .contact-trade-banner-icon {
  width: 56px; height: 56px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-page .contact-trade-banner-icon svg { width: 28px; height: 28px; }
.contact-page .contact-trade-banner-content { flex: 1; min-width: 200px; }
.contact-page .contact-trade-banner-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  color: var(--white);
}
.contact-page .contact-trade-banner-sub {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}
.contact-page .contact-trade-banner-cta {
  background: var(--white);
  color: var(--brand-orange);
  font-family: 'Sen', sans-serif !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  border: 0;
  transition: background var(--t-fast, 150ms);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.contact-page .contact-trade-banner-cta:hover { background: var(--neutral-100); color: var(--brand-orange); }