/* Contact page. The Anna Nagar office card (.office) lives in pages/location.css, loaded first. */

.contact { padding-top: clamp(1rem, 0.5rem + 2vw, 3rem); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start; }
@media (max-width: 1023px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }

.contact__main { display: grid; gap: 1.25rem; justify-items: start; }
.contact__main .office { width: 100%; }
.contact__more { min-height: 44px; }

/* ---------- Form + channels ---------- */
.contact__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 0.9rem; }
@media (max-width: 1023px) { .contact__aside { position: static; } }
.contact-form .choice label { justify-content: center; min-height: 72px; font-size: 1.02rem; }
.contact-form .choice label .icon { display: none; }

.channels { display: grid; gap: 0.6rem; }
.channel {
  --tone: var(--accent);
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 0.95rem;
  min-height: 72px; padding: 0.85rem 1.15rem 0.85rem 0.85rem;
  border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--ink-2);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
/* A soft wash of the channel colour slides in on hover/focus. */
.channel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--wash, rgb(245 197 24 / 0.14)), transparent 70%); opacity: 0; transition: opacity 0.35s; }
.channel:hover, .channel:focus-visible { border-color: var(--tone); box-shadow: 0 18px 40px -26px var(--tone); }
.channel:hover::before, .channel:focus-visible::before { opacity: 1; }
.channel__icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--chip, var(--brand)); color: var(--chip-ink, var(--brand-ink)); transition: transform 0.45s var(--ease-out); }
.channel__icon .icon { width: 26px; height: 26px; }
.channel__text { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.channel__label { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.channel__detail { font-size: 0.88rem; color: var(--text-2); overflow-wrap: anywhere; }
.channel__arrow { color: var(--text-2); transition: transform 0.4s var(--ease-out), color 0.3s; }
.channel:hover .channel__arrow, .channel:focus-visible .channel__arrow { color: var(--text); }

.channel--whatsapp { --tone: #25d366; --wash: rgb(37 211 102 / 0.14); --chip: #25d366; --chip-ink: #0b2a17; }
.channel--instagram { --tone: #dd2a7b; --wash: rgb(221 42 123 / 0.13); --chip: linear-gradient(45deg, #f58529 0%, #dd2a7b 50%, #8134af 80%, #515bd4 100%); --chip-ink: #ffffff; }
.channel--email { --tone: var(--brand); }
:root[data-theme-effective="light"] .channel--email { --tone: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .channel:hover, .channel:focus-visible { transform: translateY(-2px); }
  .channel:hover .channel__icon, .channel:focus-visible .channel__icon { transform: rotate(-6deg) scale(1.06); }
  .channel:hover .channel__arrow, .channel:focus-visible .channel__arrow { transform: translate(3px, -3px); }
}