/* =====================================================================
   7thbreed — Contact page cleanup + uniform color system (light mode)
   Scope: body.contact-page (set by route-scoper-v1.js).
   Same card system as the homepage: white cards, one border, one radius.
   ===================================================================== */

html:not(.dark) body.contact-page {
  --home-tint: color-mix(in oklab, var(--surface) 34%, transparent);
  --home-card-border: color-mix(in oklab, var(--primary) 10%, var(--border));
  --home-card-shadow: 0 1px 2px rgba(2, 6, 23, .04), 0 20px 44px -20px rgba(23, 78, 166, .20);
  --home-card-shadow-hover: 0 2px 4px rgba(2, 6, 23, .05), 0 30px 58px -20px rgba(23, 78, 166, .30);
  --home-card-radius: 1.25rem;
}

/* ---------- 1. FAQ: white cards matching the homepage ---------- */
html:not(.dark) body.contact-page main .mt-12.space-y-3 > div {
  background: var(--card) !important;
  border: 1px solid var(--home-card-border) !important;
  border-radius: var(--home-card-radius) !important;
  box-shadow: var(--home-card-shadow);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
html:not(.dark) body.contact-page main .mt-12.space-y-3 > div:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border)) !important;
  box-shadow: var(--home-card-shadow-hover);
}
html:not(.dark) body.contact-page main .mt-12.space-y-3 button {
  padding: 1.1rem 1.4rem !important;
  font-weight: 600;
  background: transparent !important;
  transition: color .2s ease, background-color .2s ease;
}
html:not(.dark) body.contact-page main .mt-12.space-y-3 button:hover {
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 5%, transparent) !important;
}
html:not(.dark) body.contact-page main .mt-12.space-y-3 button + p {
  background: var(--card);
  padding: 1.1rem 1.4rem 1.25rem !important;
  animation: contactFaqIn .3s cubic-bezier(.2, .8, .2, 1);
}
@keyframes contactFaqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 2. Heavy teal/gray FAQ panel: same tint as elsewhere ---------- */
html:not(.dark) body.contact-page main section[class*="bg-surface"],
html:not(.dark) body.contact-page main div[class*="bg-surface/"],
html:not(.dark) body.contact-page main section[class*="bg-muted"] {
  background: var(--home-tint) !important;
}

/* ---------- 3. Sidebar + contact cards: one card style ---------- */
html:not(.dark) body.contact-page main .grid [class*="rounded-2xl"][class*="border"] {
  background: var(--card);
  border: 1px solid var(--home-card-border);
  border-radius: var(--home-card-radius);
  box-shadow: var(--home-card-shadow);
  overflow: hidden;
}
html:not(.dark) body.contact-page main iframe {
  display: block;
  width: 100%;
  border-radius: 0;
}

/* ---------- 4. Form focus rings: match the auth pages ---------- */
html:not(.dark) body.contact-page main form input,
html:not(.dark) body.contact-page main form textarea,
html:not(.dark) body.contact-page main form select {
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
html:not(.dark) body.contact-page main form input:focus,
html:not(.dark) body.contact-page main form textarea:focus,
html:not(.dark) body.contact-page main form select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 14%, transparent) !important;
  outline: none !important;
}

/* ---------- 5. "Submit a complaint" strip: same tint as the rest ----------
   The complaint block (and the contact grid section) are transparent
   sections showing the raw page background. Paint them with the tint. */
html:not(.dark) body.contact-page main section[class*="!pt-0"],
html:not(.dark) body.contact-page main section[class*="!pb-16"] {
  background: var(--home-tint) !important;
}
html:not(.dark) body.contact-page main h2 {
  letter-spacing: -.02em;
}
html:not(.dark) body.contact-page main button[class*="rounded-full"] {
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease,
              border-color .22s ease, background-color .22s ease, color .22s ease;
}

/* Complaint area: use the neutral site palette instead of surface teal. */
html:not(.dark) body.contact-page main section:has(.mx-auto.max-w-2xl) {
  background: var(--background) !important;
}
html:not(.dark) body.contact-page main section:has(.mx-auto.max-w-2xl) form {
  background: var(--card) !important;
  border-color: var(--home-card-border) !important;
  box-shadow: var(--home-card-shadow);
}
html:not(.dark) body.contact-page main section:has(.mx-auto.max-w-2xl) form input,
html:not(.dark) body.contact-page main section:has(.mx-auto.max-w-2xl) form textarea {
  background: var(--background) !important;
}

/* ---------- 6. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.dark) body.contact-page main .mt-12.space-y-3 > div:hover { transform: none; }
  html:not(.dark) body.contact-page main .mt-12.space-y-3 button + p { animation: none; }
}

/* ---------- 7. White-on-white guard: readable text on white cards ---------- */
html:not(.dark) body.contact-page main .mt-12.space-y-3 > div,
html:not(.dark) body.contact-page main .mt-12.space-y-3 button {
  color: var(--foreground);
}
html:not(.dark) body.contact-page main .mt-12.space-y-3 .text-muted-foreground {
  color: var(--muted-foreground);
}