/* ==========================================================================
   AIO Vend – Contact Page (Premium)
   Visual strategy: calm contrast, soft glass, precise spacing, motion w/ restraint
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Core brand hooks (fallbacks provided if site vars are absent) */
  --c-bg:             var(--page-bg, #0f172a);              /* slate-900 */
  --c-bg-elev:        color-mix(in oklab, var(--c-bg) 82%, #fff);
  --c-text:           var(--page-text, #e5e7eb);            /* zinc-200 */
  --c-text-dim:       color-mix(in oklab, var(--c-text) 65%, #000);
  --c-text-mute:      color-mix(in oklab, var(--c-text) 50%, #000);
  --c-line:           color-mix(in oklab, var(--c-bg) 65%, #fff 10%);

  --c-primary:        var(--ui-primary, #2563eb);
  --c-primary-2:      color-mix(in oklab, var(--c-primary) 75%, #22c55e 25%);
  --c-accent:         var(--ui-accent,  #22c55e);
  --c-danger:         var(--ui-danger,  #ef4444);

  --radius-lg:        20px;
  --radius-md:        14px;
  --radius-sm:        10px;

  --shadow-1:         0 6px 18px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.18);
  --shadow-2:         0 10px 30px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.22);
  --ring:             0 0 0 2px color-mix(in oklab, var(--c-primary) 28%, #fff 0%), 0 0 0 6px color-mix(in oklab, var(--c-primary) 14%, transparent);
  --glass:            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --blur:             saturate(140%) blur(10px);

  --space-1:          clamp(.6rem, .9vw, .85rem);
  --space-2:          clamp(.9rem, 1.2vw, 1.05rem);
  --space-3:          clamp(1.2rem, 2vw, 1.6rem);
  --space-4:          clamp(1.8rem, 3vw, 2.2rem);

  --speed-fast:       140ms;
  --speed-med:        220ms;
  --speed-slow:       420ms;

  --font-sys:         "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- Page canvas -------------------------------------------------------- */
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sys);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.contact-hero {
  position: relative;
  padding: clamp(2.25rem, 5.5vw, 5.5rem) 0 clamp(1.25rem, 3vw, 2rem);
  /* Dynamic spotlight (JS updates --mx/--my) */
  background:
    radial-gradient(1200px 600px at var(--mx, 50%) var(--my, 38%),
      color-mix(in oklab, var(--c-primary) 16%, transparent) 0%,
      transparent 60%)
    ,linear-gradient(180deg,
      color-mix(in oklab, var(--c-bg) 96%, #000) 0%,
      color-mix(in oklab, var(--c-bg) 86%, #000) 100%);
  overflow: clip;
}

.contact-hero__inner {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}

@media (max-width: 1020px) {
  .contact-hero__inner { grid-template-columns: 1fr; }
}

/* Copy */
.contact-hero .kicker {
  display: inline-flex; gap: .55rem; align-items: center;
  font-weight: 600; letter-spacing: .02em;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--c-primary) 70%, #fff 0%),
    color-mix(in oklab, var(--c-accent) 60%, #fff 0%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .95;
}
.contact-hero h1 {
  margin: .4rem 0 0;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.contact-hero .lede {
  margin: .75rem 0 1.2rem;
  max-width: 58ch;
  color: var(--c-text-dim);
}

/* Chips */
.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-chips .chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: #fff;
  font-weight: 600; font-size: .86rem;
  backdrop-filter: var(--blur);
}

/* Shortcuts (service quick-links) */
.contact-shortcuts { display: grid; gap: .75rem; }
.shortcut-card {
  display: flex; gap: .8rem; align-items: center;
  padding: .9rem 1rem;
  border-radius: var(--radius-md);
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: var(--blur);
  color: var(--c-text);
  box-shadow: var(--shadow-1);
  transition: transform var(--speed-med) ease, border-color var(--speed-med) ease, box-shadow var(--speed-med) ease, background var(--speed-med) ease;
}
.shortcut-card i { font-size: 1.1rem; color: color-mix(in oklab, var(--c-primary) 85%, #fff 0%); }
.shortcut-card strong { display: block; font-weight: 700; line-height: 1.1; }
.shortcut-card span { display: block; font-size: .9rem; color: var(--c-text-mute); margin-top: .05rem; }
.shortcut-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); box-shadow: var(--shadow-2); }

/* ==========================================================================
   GRID: Form + Programs
   ========================================================================== */
.contact-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 2rem);
  grid-template-columns: 1.1fr .9fr;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
@media (max-width: 1060px) { .contact-grid { grid-template-columns: 1fr; } }

/* Card base (optically consistent with the site) */
.card {
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow-1);
}
.contact-card { padding: clamp(1rem, 2vw, 1.25rem); }

.contact-card__head { margin-bottom: .75rem; }
.contact-card h2 { margin: 0 0 .2rem 0; font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
.micro { font-size: .92rem; }
.muted { color: var(--c-text-mute); }

/* Form layout */
.lead-form {
  display: grid;
  gap: .75rem;
}
.form-row { display: block; }
.form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 640px) { .form-row--split { grid-template-columns: 1fr; } }

/* Inputs */
.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  appearance: none;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  color: var(--c-text);
  padding: .8rem .9rem;
  line-height: 1.35;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color var(--speed-fast) ease, box-shadow var(--speed-fast) ease, background var(--speed-fast) ease, transform var(--speed-fast) ease;
}
.lead-form textarea { min-height: 140px; resize: vertical; }

/* Focus ring */
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--c-primary) 50%, #fff 0%);
  box-shadow: var(--ring);
  transform: translateY(-1px);
}

/* Placeholder clarity */
.lead-form ::placeholder { color: color-mix(in oklab, var(--c-text) 55%, #000); }

/* Honeypot should never be visible */
.hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; }

/* Actions */
.form-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

/* Buttons */
.btn {
  --btn-bg: color-mix(in oklab, var(--c-primary) 92%, #fff 0%);
  --btn-fg: #fff;
  --btn-bg-h: color-mix(in oklab, var(--c-primary-2) 92%, #fff 0%);

  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--c-primary) 40%, #000);
  background: radial-gradient(120% 180% at 50% 0%, rgba(255,255,255,.12), transparent 60%), linear-gradient(180deg, var(--btn-bg), color-mix(in oklab, var(--btn-bg) 86%, #000));
  color: var(--btn-fg);
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 8px 20px color-mix(in oklab, var(--c-primary) 26%, transparent);
  transition: transform var(--speed-med) cubic-bezier(.22,.61,.36,1), box-shadow var(--speed-med) ease, background var(--speed-med) ease;
}
.btn:hover { transform: translateY(-2px); background: linear-gradient(180deg, var(--btn-bg-h), color-mix(in oklab, var(--btn-bg-h) 86%, #000)); }
.btn:active { transform: translateY(0); }

/* Secondary button variant (inherits .btn) */
.btn.btn--secondary {
  --btn-bg: color-mix(in oklab, var(--c-bg) 40%, #fff 0%);
  --btn-fg: var(--c-text);
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
}
.btn.btn--secondary:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
}

/* Inline link accent */
.tx-link { color: color-mix(in oklab, var(--c-primary) 90%, #fff 0%); text-decoration: underline; text-underline-offset: 2px; }

/* Submit spinner */
.btn__spinner {
  width: 1em; height: 1em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  display: none;
  animation: spin .7s linear infinite;
}
.btn.is-loading .btn__label { opacity: .8 }
.btn.is-loading .btn__spinner { display: inline-block }
@keyframes spin { to { transform: rotate(360deg); } }

/* Status */
.form-status { min-height: 1.25rem; margin-top: .25rem; font-size: .95rem; }
.form-status.ok  { color: var(--c-accent); }
.form-status.err { color: var(--c-danger); }

/* ==========================================================================
   PROGRAM CARDS
   ========================================================================== */
.contact-programs { display: grid; gap: 1rem; }
.contact-programs .card { padding: 1rem; }

.card-head { display: flex; gap: .75rem; align-items: flex-start; }
.card-head i { font-size: 1.15rem; margin-top: .15rem; color: color-mix(in oklab, var(--c-primary) 90%, #fff 0%); }

.card-title h3 { margin: 0; font-size: 1.05rem; }
.card-title .hook { margin: .15rem 0 0; color: var(--c-text-mute); }

.list-checks { margin: .55rem 0 .75rem; padding-left: 1.25rem; }
.list-checks li { margin: .25rem 0; position: relative; }
.list-checks li::marker { color: color-mix(in oklab, var(--c-accent) 70%, #fff 0%); }

/* CTA row in cards */
.cta-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ==========================================================================
   TRUST / BADGES
   ========================================================================== */
.contact-trust { margin-top: var(--space-3); }
.contact-trust .trust-wrap {
  display: flex; flex-wrap: wrap; gap: .6rem;
  padding: .9rem 1rem;
}
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .65rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: var(--c-text);
  font-weight: 600; font-size: .9rem;
  backdrop-filter: blur(6px);
}

/* ==========================================================================
   SITE ALERT (top)
   ========================================================================== */
.site-alert {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: .75rem;
  margin: 0; padding: .65rem .9rem;
  color: color-mix(in oklab, var(--c-text) 92%, #fff 0%);
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--c-primary) 22%, transparent) 0%,
      color-mix(in oklab, var(--c-accent) 12%, transparent) 100%)
    ,linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
}
.site-alert a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.site-alert__close {
  appearance: none; border: 0; background: transparent;
  color: #fff; font-size: 1.2rem; line-height: 1;
  opacity: .9; cursor: pointer;
  border-radius: 8px; padding: .1rem .35rem;
  transition: background var(--speed-fast) ease, opacity var(--speed-fast) ease;
}
.site-alert__close:hover { opacity: 1; background: rgba(255,255,255,.08); }

/* ==========================================================================
   ACCESSIBILITY: Focus styles for key interactive elements
   ========================================================================== */
.shortcut-card:focus,
.btn:focus,
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus,
.contact-programs a:focus {
  outline: none;
  box-shadow: var(--ring);
}

/* ==========================================================================
   FINER POLISH
   ========================================================================== */

/* Subtle card hover lift */
.card:hover { transform: translateY(-1px); transition: transform var(--speed-med) ease; }

/* Reduce layout shift on load by reserving min-heights */
.contact-hero .hero-chips { min-height: 2.2rem; }

/* Smooth transforms */
.shortcut-card,
.card,
.btn,
.lead-form input,
.lead-form select,
.lead-form textarea { will-change: transform, box-shadow, background; }

/* Utility */
.nowrap { white-space: nowrap; }

/* ==========================================================================
   LIGHT THEME GUARD (if your site toggles data-theme)
   ========================================================================== */
html[data-theme="light"] {
  --c-bg: #f8fafc;             /* slate-50 */
  --c-bg-elev: #ffffff;
  --c-text: #0f172a;           /* slate-900 */
  --c-text-dim: color-mix(in oklab, var(--c-text) 72%, #000);
  --c-text-mute: color-mix(in oklab, var(--c-text) 56%, #000);
  --c-line: color-mix(in oklab, var(--c-bg) 40%, #000 12%);
}
html[data-theme="light"] .contact-hero {
  background:
    radial-gradient(1200px 600px at var(--mx, 50%) var(--my, 38%),
      color-mix(in oklab, var(--c-primary) 18%, transparent) 0%,
      transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
html[data-theme="light"] .card,
html[data-theme="light"] .shortcut-card,
html[data-theme="light"] .chip,
html[data-theme="light"] .lead-form input,
html[data-theme="light"] .lead-form select,
html[data-theme="light"] .lead-form textarea {
  border-color: rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.01));
  color: var(--c-text);
  backdrop-filter: blur(6px);
}
html[data-theme="light"] .site-alert {
  color: var(--c-text);
  border-bottom-color: rgba(15,23,42,.08);
}

/* ==========================================================================
   SMALL SCREENS
   ========================================================================== */
@media (max-width: 520px) {
  .btn { width: 100%; justify-content: center; }
  .cta-row .btn { flex: 1 1 auto; }
  .contact-programs .card { padding: .9rem; }
}

/* ==========================================================================
   PRINT (just in case)
   ========================================================================== */
@media print {
  .site-alert, .contact-shortcuts, .contact-trust, .nav, .footer { display: none !important; }
  .contact-card, .card { box-shadow: none !important; border: 1px solid #ddd !important; }
  body { color: #000; background: #fff; }
}