/* contact.css — shared contact-form block for helixstreet.com / .io / .ai / .foundation / .xyz.
   Self-contained (falls back to its own colours when a site lacks the dark-theme tokens).
   Single source: contact-form/site/contact.css; each site folder carries an identical copy.
   Markup: <section class="hx-contact [hx-contact--light]"> … <form data-hx-contact> (see any index.html).
   Backend: contact-form Cloud Run function (contact-form/main.py). */

.hx-contact {
    padding: 4.5rem 0;
    border-top: 1px solid var(--hx-cf-border, var(--border, rgba(255,255,255,0.08)));
    color: var(--hx-cf-text, var(--text, #F1F5F9));
}
.hx-contact__inner {
    max-width: 1080px; margin: 0 auto; padding: 0 1.5rem;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 3rem; align-items: start;
}
.hx-contact__eyebrow {
    font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
    color: var(--hx-cf-accent, var(--green, #06D6A0)); margin-bottom: 0.9rem;
}
.hx-contact__title {
    font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; font-weight: 600;
    margin: 0 0 1rem; color: var(--hx-cf-text, var(--text, #F1F5F9));
}
.hx-contact__text { color: var(--hx-cf-dim, var(--text-dim, #94A3B8)); line-height: 1.7; margin: 0 0 1rem; font-size: 1rem; }
.hx-contact__meta { color: var(--hx-cf-dim, var(--text-dim, #94A3B8)); line-height: 1.6; font-size: 0.85rem; margin: 0; }
.hx-contact__meta a { color: var(--hx-cf-accent, var(--green, #06D6A0)); text-decoration: none; }
.hx-contact__meta a:hover { text-decoration: underline; }

.hx-contact__form {
    background: var(--hx-cf-surface, rgba(255,255,255,0.025));
    border: 1px solid var(--hx-cf-border, var(--border, rgba(255,255,255,0.08)));
    border-radius: 16px; padding: 2rem; position: relative;
}
.hx-contact__field { margin-bottom: 1.25rem; }
.hx-contact__field label {
    display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.5rem;
    color: var(--hx-cf-text, var(--text, #F1F5F9));
}
.hx-contact__field input,
.hx-contact__field select,
.hx-contact__field textarea {
    width: 100%; box-sizing: border-box; padding: 0.85rem 1rem;
    background: var(--hx-cf-input, rgba(0,0,0,0.3));
    border: 1px solid var(--hx-cf-border, var(--border, rgba(255,255,255,0.08)));
    border-radius: 10px; color: var(--hx-cf-text, var(--text, #F1F5F9));
    font: inherit; font-size: 0.95rem; line-height: 1.5;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.hx-contact__field input::placeholder,
.hx-contact__field textarea::placeholder { color: var(--hx-cf-faint, rgba(255,255,255,0.3)); }
.hx-contact__field input:focus,
.hx-contact__field select:focus,
.hx-contact__field textarea:focus {
    outline: none;
    border-color: var(--hx-cf-accent, var(--green, #06D6A0));
    box-shadow: 0 0 0 3px var(--hx-cf-ring, rgba(6, 214, 160, 0.18));
}
.hx-contact__field textarea { min-height: 150px; resize: vertical; }
.hx-contact__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hx-contact__btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.9rem 1.7rem; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--hx-cf-btn, linear-gradient(135deg, #8B5CF6, #06D6A0));
    color: var(--hx-cf-btn-text, #06060E); font: inherit; font-size: 0.95rem; font-weight: 600;
    transition: transform 0.25s, opacity 0.25s, box-shadow 0.25s;
}
.hx-contact__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px var(--hx-cf-ring, rgba(6, 214, 160, 0.18)); }
.hx-contact__btn[disabled] { opacity: 0.6; cursor: wait; transform: none; box-shadow: none; }
.hx-contact__btn:focus-visible { outline: 2px solid var(--hx-cf-accent, var(--green, #06D6A0)); outline-offset: 3px; }

.hx-contact__status { margin: 0.9rem 0 0; font-size: 0.85rem; line-height: 1.5; min-height: 1.4em; color: var(--hx-cf-dim, var(--text-dim, #94A3B8)); }
.hx-contact__status.is-ok { color: var(--hx-cf-accent, var(--green, #06D6A0)); }
.hx-contact__status.is-err { color: var(--hx-cf-error, #F87171); }

@media (max-width: 820px) {
    .hx-contact { padding: 3.5rem 0; }
    .hx-contact__inner { grid-template-columns: 1fr; gap: 2rem; }
    .hx-contact__form { padding: 1.4rem; }
}

/* Light theme (helixstreet.foundation) */
.hx-contact--light {
    --hx-cf-text: #0e1a24; --hx-cf-dim: #5a6672; --hx-cf-accent: #0a6b5b;
    --hx-cf-border: #e5e1d8; --hx-cf-surface: #ffffff; --hx-cf-input: #f7f6f2; --hx-cf-faint: #9aa4ad;
    --hx-cf-ring: rgba(10, 107, 91, 0.18); --hx-cf-btn: #0e1a24; --hx-cf-btn-text: #ffffff; --hx-cf-error: #b4232c;
}
.hx-contact--light .hx-contact__title { font-family: "Fraunces", "Times New Roman", serif; font-weight: 500; }
.hx-contact--light .hx-contact__form { box-shadow: 0 10px 40px rgba(14, 26, 36, 0.06); }