/* ============================================
   enquiry.css — Multi-category enquiry page
   Uses the shared tokens from variables.css
   ============================================ */

.eq-page {
  min-height: 100vh;
  padding: calc(var(--space-24) + 40px) 0 var(--space-24);
  background: var(--gradient-section);
}

.eq-shell {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ---------- Header ---------- */

.eq-header { text-align: center; margin-bottom: var(--space-10); }

.eq-header__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.eq-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.eq-header__subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  max-width: 56ch;
  margin: 0 auto;
}

/* ---------- Step heading ---------- */

.eq-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.eq-step__num {
  flex: none;
  width: 26px; height: 26px;
  border-radius: var(--radius-full);
  background: var(--gradient-cta);
  color: #fff;
  font-size: 0.78rem;
  font-weight: var(--weight-bold);
  display: grid;
  place-items: center;
}

.eq-step__text {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* ---------- Category picker ---------- */

.eq-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

/* Icon beside the text rather than above it — four cards across an
   820px column squeezed the labels onto two lines each. */
.eq-cat {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  row-gap: 2px;
  align-items: start;
  padding: var(--space-5);
  text-align: left;
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color var(--duration-base) var(--ease-smooth),
              transform var(--duration-base) var(--ease-smooth),
              box-shadow var(--duration-base) var(--ease-smooth),
              background var(--duration-base) var(--ease-smooth);
}

.eq-cat svg {
  width: 26px; height: 26px;
  color: var(--gold);
  grid-row: 1 / span 2;
  align-self: center;
}

.eq-cat__label {
  grid-column: 2;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.eq-cat__blurb {
  grid-column: 2;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
}

.eq-cat:hover {
  border-color: rgba(201, 168, 76, 0.45);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.eq-cat.is-active {
  border-color: var(--gold);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-glow-gold), var(--shadow-md);
}

.eq-cat.is-active .eq-cat__label { color: var(--gold); }

.eq-cat:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Card ---------- */

.eq-card {
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.eq-intro {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  background: var(--gradient-card);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}

/* ---------- Questions ---------- */

#eq-questions {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duration-base) var(--ease-smooth),
              transform var(--duration-base) var(--ease-smooth);
}
#eq-questions.is-in { opacity: 1; transform: none; }

.eq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

/* Group heading — breaks a long form into readable chunks */
.eq-section {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 calc(var(--space-2) * -1);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold);
}
.eq-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,168,76,0.35), transparent);
}
.eq-section:first-child { margin-top: 0; }

.eq-field { grid-column: 1 / -1; display: flex; flex-direction: column; }
.eq-field--half { grid-column: span 1; }
.eq-field[hidden] { display: none; }

.eq-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.eq-req { color: var(--gold); margin-left: 2px; }

.eq-help {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: -2px 0 var(--space-2);
  line-height: var(--leading-normal);
}

.eq-field input,
.eq-field textarea,
.eq-field select {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  /* background-color, NOT the `background` shorthand: the shorthand resets
     background-repeat/position/size and tiles the select's chevron. */
  background-color: rgba(255, 255, 255, 0.75);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}

.eq-field textarea { resize: vertical; min-height: 90px; line-height: var(--leading-normal); }

.eq-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b95ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 14px;
  padding-right: 2.75rem;
  cursor: pointer;
}

/* Unanswered dropdowns read as placeholders, not as filled-in values */
.eq-field select.is-placeholder { color: var(--text-tertiary); }
.eq-field select option { color: var(--text-primary); }

.eq-field input::placeholder,
.eq-field textarea::placeholder { color: var(--text-tertiary); }

.eq-field input:focus,
.eq-field textarea:focus,
.eq-field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12);
}

.eq-field.has-error input,
.eq-field.has-error textarea,
.eq-field.has-error select { border-color: #c0563f; }

.eq-error {
  font-size: var(--text-xs);
  color: #c0563f;
  margin-top: var(--space-2);
  min-height: 0;
}
.eq-error:empty { display: none; }

/* ---------- Chip groups (radio / checkbox) ---------- */

.eq-group { border: 0; margin: 0; padding: 0; }
.eq-group .eq-label { display: block; }

.eq-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.eq-chip { position: relative; cursor: pointer; }

.eq-chip input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.eq-chip span {
  display: inline-block;
  padding: 0.55rem 1rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.6);
  border: var(--border-subtle);
  border-radius: var(--radius-full);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.eq-chip:hover span { border-color: rgba(201, 168, 76, 0.45); color: var(--text-primary); }

.eq-chip input:checked + span {
  background: var(--gradient-cta);
  border-color: transparent;
  color: #fff;
  font-weight: var(--weight-medium);
}

.eq-chip input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Consent ---------- */

.eq-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.eq-consent input {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--gold);
  cursor: pointer;
}

.has-error .eq-consent { outline: 1px solid #c0563f; }

/* ---------- Submit ---------- */

.eq-actions { margin-top: var(--space-8); }

#eq-submit { width: 100%; position: relative; }
#eq-submit.is-busy { opacity: 0.75; cursor: wait; }

.eq-status {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  line-height: var(--leading-normal);
}
.eq-status.is-error { color: #c0563f; }
.eq-status:empty { display: none; }

.eq-privacy {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
  line-height: var(--leading-normal);
}

/* ---------- Config warning (preview mode) ---------- */

.eq-warning {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.eq-warning strong { color: var(--text-primary); }

/* ---------- Thank you ---------- */

.eq-thanks {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-smooth),
              transform var(--duration-slow) var(--ease-smooth);
}
.eq-thanks.is-in { opacity: 1; transform: none; }

.eq-thanks__mark {
  width: 68px; height: 68px;
  margin: 0 auto var(--space-6);
  border-radius: var(--radius-full);
  background: var(--gradient-cta);
  display: grid;
  place-items: center;
  color: #fff;
  animation: eqPop 0.55s var(--ease-bounce) both;
}
.eq-thanks__mark svg { width: 32px; height: 32px; }

@keyframes eqPop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.eq-thanks__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.eq-thanks__body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 48ch;
  margin: 0 auto var(--space-6);
}

.eq-thanks__body strong { color: var(--text-primary); }

.eq-thanks__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Dark mode ---------- */

[data-theme="dark"] .eq-field input,
[data-theme="dark"] .eq-field textarea,
[data-theme="dark"] .eq-field select,
[data-theme="dark"] .eq-chip span {
  /* Must stay background-color. Using the `background` shorthand here wiped
     background-repeat on the select and tiled the chevron across the field. */
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

[data-theme="dark"] .eq-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a839a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 14px;
}

/* The dark-mode colour rule above would otherwise beat the light-mode
   placeholder rule, leaving empty dropdowns looking filled in. */
[data-theme="dark"] .eq-field select.is-placeholder { color: var(--text-tertiary); }
[data-theme="dark"] .eq-field select option { color: var(--text-primary); }

[data-theme="dark"] .eq-cat,
[data-theme="dark"] .eq-card,
[data-theme="dark"] .eq-thanks {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .eq-consent { background: rgba(255, 255, 255, 0.04); }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .eq-categories { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .eq-page { padding-top: calc(var(--space-16) + 40px); }
  .eq-card { padding: var(--space-5); }
  .eq-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .eq-field--half { grid-column: 1 / -1; }
  .eq-thanks { padding: var(--space-10) var(--space-5); }
  .eq-thanks__actions .btn { width: 100%; }
}

@media (max-width: 420px) {
  .eq-cat { padding: var(--space-4); column-gap: var(--space-3); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  #eq-questions, .eq-thanks, .eq-cat { transition: none; }
  .eq-thanks__mark { animation: none; }
}