/*
 * Contact page
 * Extracted from cw-theme.css (Phase 1 Stage A split, 2026-07-02).
 * Loads on top of cw-theme.css (dependency: cw-theme-style).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Contact page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero section ── */

.cw-contact-page__hero {
  background: var(--cw-white);
}

.cw-contact-page__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  color: var(--cw-quiet);
  font-size: 12px;
  line-height: 1.5;
}

.cw-contact-page__breadcrumb a {
  color: var(--cw-teal);
}

.cw-contact-page__breadcrumb span[aria-current="page"] {
  color: var(--cw-ink);
}

.cw-contact-page__hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.cw-contact-page__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-teal);
  margin: 0 0 14px;
}

.cw-contact-page__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.06;
  color: var(--cw-ink);
  margin: 0 0 20px;
}

.cw-contact-page__title em {
  font-style: italic;
  color: var(--cw-clay);
}

.cw-contact-page__lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--cw-quiet);
  margin: 0 0 36px;
  max-width: 460px;
}

/* ── Info cards ── */

.cw-contact-page__info-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cw-contact-page__info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--cw-fog);
  border-radius: var(--cw-radius-card);
}

.cw-contact-page__info-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cw-teal-tint);
  color: var(--cw-teal);
  border-radius: 10px;
}

.cw-contact-page__info-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cw-contact-page__info-body strong {
  font-size: 11px;
  font-weight: 700;
  color: var(--cw-ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cw-contact-page__info-body a,
.cw-contact-page__info-body span {
  font-size: 15px;
  color: var(--cw-ink-light);
  line-height: 1.5;
  word-break: break-word;
}

.cw-contact-page__info-body a:hover {
  color: var(--cw-teal);
  text-decoration: underline;
}

/* ── Form card ── */

.cw-contact-page__form-card {
  background: var(--cw-white);
  border-radius: var(--cw-radius-card);
  box-shadow: var(--cw-shadow-card);
  padding: 36px 40px;
  border: 1px solid var(--cw-border);
}

.cw-contact-page__form-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--cw-ink);
  margin: 0 0 24px;
}

.cw-contact-page__form-fallback {
  font-size: 15px;
  color: var(--cw-quiet);
}

.cw-contact-page__form-fallback a {
  color: var(--cw-teal);
  text-decoration: underline;
}

/* ── FluentForms design-system overrides ── */

/* Labels */
.cw-contact-page__form-card .ff-el-input--label label,
.cw-contact-page__form-card .ff-el-form-check-label {
  font-family: "Jost", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cw-ink) !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 6px !important;
}

/* Inputs, select, textarea */
.cw-contact-page__form-card .ff-el-form-control {
  font-family: "Jost", system-ui, sans-serif !important;
  font-size: 15px !important;
  color: var(--cw-ink) !important;
  background: var(--cw-mist) !important;
  border: 1.5px solid var(--cw-border) !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  line-height: 1.5 !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
  box-shadow: none !important;
  width: 100% !important;
}

.cw-contact-page__form-card .ff-el-form-control::placeholder {
  color: var(--cw-quiet) !important;
  opacity: 1 !important;
}

.cw-contact-page__form-card .ff-el-form-control:focus {
  outline: none !important;
  border-color: var(--cw-teal) !important;
  box-shadow: 0 0 0 3px var(--cw-teal-tint) !important;
  background: var(--cw-white) !important;
}

/* Textarea */
.cw-contact-page__form-card textarea.ff-el-form-control {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Select arrow */
.cw-contact-page__form-card select.ff-el-form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236f7979' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
}

/* Error messages */
.cw-contact-page__form-card .error.text-danger,
.cw-contact-page__form-card .ff-el-is-error .error {
  font-size: 12px !important;
  color: #c0392b !important;
  margin-top: 4px !important;
  font-family: "Jost", system-ui, sans-serif !important;
}

.cw-contact-page__form-card .ff-el-is-error .ff-el-form-control {
  border-color: #c0392b !important;
}

/* Field group spacing */
.cw-contact-page__form-card .ff-el-group {
  margin-bottom: 18px !important;
}

.cw-contact-page__form-card .ff-el-group:last-of-type {
  margin-bottom: 0 !important;
}

/* Success message */
.cw-contact-page__form-card .ff-message-success {
  font-family: "Jost", system-ui, sans-serif !important;
  background: rgba(74, 148, 148, 0.08) !important;
  border: 1.5px solid var(--cw-teal) !important;
  border-radius: 10px !important;
  color: var(--cw-teal-dark) !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
}

/* Submit button — pill-shaped, clay colour */
.cw-contact-page__form-card .ff-btn-submit,
.cw-contact-page__form-card .ff-btn-submit:link,
.cw-contact-page__form-card .ff-btn-submit:visited {
  background: var(--cw-clay) !important;
  color: var(--cw-white) !important;
  border-radius: 9999px !important;
  border: none !important;
  padding: 13px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: "Jost", system-ui, sans-serif !important;
  cursor: pointer !important;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
  box-shadow: none !important;
  letter-spacing: 0.02em !important;
}

.cw-contact-page__form-card .ff-btn-submit:hover,
.cw-contact-page__form-card .ff-btn-submit:focus-visible {
  background: var(--cw-clay-dark) !important;
  box-shadow: 0 6px 20px rgba(198, 117, 96, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* ── FAQ / What to expect section ── */

.cw-contact-page__faq-inner {
  max-width: 860px;
  margin: 0 auto;
}

.cw-contact-page__faq-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 500;
  color: var(--cw-ink);
  margin: 0 0 36px;
}

.cw-contact-page__faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.cw-contact-page__faq-item {
  padding: 28px 32px;
  background: var(--cw-white);
  border-radius: var(--cw-radius-card);
  box-shadow: var(--cw-shadow-card);
}

.cw-contact-page__faq-item strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--cw-ink);
  margin-bottom: 10px;
}

.cw-contact-page__faq-item p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--cw-quiet);
  margin: 0;
}

/* ── Responsive ── */

@media (max-width: 960px) {
  .cw-contact-page__hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cw-contact-page__lead {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .cw-contact-page__form-card {
    padding: 28px 24px;
  }

  .cw-contact-page__faq-grid {
    grid-template-columns: 1fr;
  }
}