/* ==================================================================
   OZAVION — Contact page (page-specific styles only)
   Builds on tokens (style.css) + components + sections. Everything
   here is unique to /contact.php; shared patterns are reused as-is.
   ================================================================== */

/* ------------------------------------------------------------------
   LEAD FORM LAYOUT  — form (~2fr) + info aside (~1fr); 1-col on mobile
   ------------------------------------------------------------------ */
.contact-layout {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.contact-form-col { min-width: 0; }

/* The submit field's button should hug its content, not stretch full width. */
.lead-form .field--full .btn { width: max-content; }

/* Aside stays in view on tall desktop screens. */
@media (min-width: 981px) {
    .contact-aside { position: sticky; top: calc(var(--header-h, 72px) + var(--space-5)); }
}

/* ------------------------------------------------------------------
   CONTACT INFO LIST (inside the aside panel)
   ------------------------------------------------------------------ */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.contact-info__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius-md);
    color: var(--color-accent-2);
    background: var(--color-accent-soft);
    border: 1px solid rgba(91, 121, 240, 0.25);
}
.contact-info__icon .icon { width: 20px; height: 20px; }
.contact-info__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-info__label {
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.contact-info__value {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    word-break: break-word;
}
a.contact-info__value { transition: color var(--transition-fast); }
a.contact-info__value:hover { color: var(--color-accent-2); }

/* ------------------------------------------------------------------
   BRAND ROUTING ROWS (need -> brand chip)
   ------------------------------------------------------------------ */
.routing-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), transform var(--transition);
}
.routing-row:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.routing-row__need {
    flex: 1 1 auto;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}
.routing-row__arrow { color: var(--color-accent-2); flex: none; display: inline-flex; }
.routing-row .brand-chip { flex: none; }

/* ------------------------------------------------------------------
   GLOBAL / REMOTE PANEL — keep pills readable inside the glow panel
   ------------------------------------------------------------------ */
.contact-global .pill { color: var(--color-text-soft); }

/* ------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
    .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .routing-row { flex-wrap: wrap; }
    .routing-row__need { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------
   HONEYPOT — visually removed but present in the DOM for bots.
   Not display:none, so headless bots still "see" and fill it.
   ------------------------------------------------------------------ */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}