/**
 * ARECH theme forms.css
 *
 * Verbatim port of `site/src/components/contact/ContactForm.astro`
 * inline <style> block (lines 240-584). Loaded from header.php on
 * every public page (cheap enough at ~10 KB minified to skip
 * page-attr conditional gating).
 *
 * Class names preserved from the Astro component:
 *   .form-panel / .form-eyebrow / .form-h2 / .form-lead / .form-config-notice
 *   .form-grid / .field / .field-full / .field-hint / .req
 *   .consent / .turnstile-slot (legacy, not used in Concrete forms)
 *   .submit-row / .btn-primary / .btn-spinner / .submit-hint
 *   .form-states / .form-state-message / .form-state-success / .form-state-error
 *
 * Legacy honeypot-wrap class kept for backward compatibility with any
 * non-Concrete forms that may also use these styles (Astro export, etc).
 * The Concrete honeypot uses .arech-hp instead -- defined in
 * application/blocks/arech_form_honeypot/view.css.
 *
 * Reduced-motion override added per css-architect soft 5: disable
 * hover lift + spinner animation under prefers-reduced-motion.
 */

/* Honeypot legacy class -- visually hidden, NEVER display:none */
.honeypot-wrap {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-panel {
    background: var(--paper-0, #ffffff);
    border: 1px solid var(--hairline, rgba(10, 10, 11, 0.10));
    border-radius: var(--radius-sm);
    padding: var(--space-6, 32px);
    box-shadow:
        0 1px 2px rgba(10, 10, 11, 0.04),
        0 8px 24px rgba(10, 10, 11, 0.05);
}
@media (min-width: 768px)  { .form-panel { padding: var(--space-7, 48px); } }
@media (min-width: 1024px) { .form-panel { padding: var(--space-7, 48px) var(--space-8, 64px); } }

.form-eyebrow {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--orange-link, #b84a0c);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-4, 16px);
}
.form-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--orange-dim, #c4510e);
}

.form-h2 {
    font-family: var(--font-display, 'General Sans', system-ui, sans-serif);
    font-weight: 600;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--ink-1, #0a0a0b);
    margin-bottom: var(--space-3, 12px);
}

.form-lead {
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink-3, #54545a);
    max-width: 56ch;
    margin-bottom: var(--space-7, 48px);
}

.form-config-notice {
    margin-top: var(--space-5, 24px);
    padding: var(--space-6, 32px);
    background: var(--paper-2, #edece7);
    border: 1px dashed var(--hairline-strong, rgba(10, 10, 11, 0.18));
    border-radius: var(--radius-sm);
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    color: var(--ink-2, #2a2a2d);
    font-size: 15px;
    line-height: 1.55;
}
.form-config-notice h3 {
    font-family: var(--font-display, 'General Sans', system-ui, sans-serif);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    margin-bottom: var(--space-2, 8px);
}
.form-config-notice a {
    color: var(--orange-link, #b84a0c);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5, 24px) var(--space-5, 24px);
}
@media (min-width: 768px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
    .field-full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: var(--space-2, 8px); }

.field label {
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2, #2a2a2d);
}
.field label .req { color: var(--orange-link, #b84a0c); margin-left: 2px; }

.field-hint {
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-3, #54545a);
}

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field input[type='url'],
.field input[type='number'],
.field select,
.field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--paper-0, #ffffff);
    border: 1px solid var(--hairline, rgba(10, 10, 11, 0.10));
    border-radius: var(--radius-xs);
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 15px;
    color: var(--ink-1, #0a0a0b);
    transition:
        border-color var(--motion-fast, 150ms) var(--ease-standard, ease),
        box-shadow var(--motion-fast, 150ms) var(--ease-standard, ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-4, #5f5f69); }
.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: var(--hairline-strong, rgba(10, 10, 11, 0.18));
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--orange, #e8651a);
    outline-offset: 2px;
    border-color: var(--orange, #e8651a);
    box-shadow: 0 0 0 1px rgba(232, 101, 26, 0.10);
}
.field input[aria-invalid='true'],
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
    border-color: var(--error-ink, #8c2a14);
    box-shadow: 0 0 0 1px rgba(140, 42, 20, 0.18);
}
.field textarea {
    min-height: 132px;
    padding-top: 12px;
    resize: vertical;
    line-height: 1.55;
}

.field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2354545A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    min-height: 44px;
    padding: var(--space-3, 12px) 0;
}
.consent input[type='checkbox'] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--orange, #e8651a);
    cursor: pointer;
}
.consent label {
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-3, #54545a);
    line-height: 1.55;
    cursor: pointer;
}
.consent label a {
    color: var(--orange-link, #b84a0c);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.consent label a:hover { color: var(--orange, #e8651a); }

.turnstile-slot {
    margin-top: var(--space-5, 24px);
    min-height: 78px;
    display: flex;
    align-items: center;
}

.submit-row {
    margin-top: var(--space-7, 48px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5, 24px);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px;
    background: var(--orange, #e8651a);
    color: #fff;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 0;
    border-radius: var(--radius-xs);
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--motion-normal, 250ms) var(--ease-standard, ease),
        transform var(--motion-normal, 250ms) var(--ease-standard, ease),
        box-shadow var(--motion-normal, 250ms) var(--ease-standard, ease);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--orange-bright, #ff7a2f);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(232, 101, 26, 0.30);
}
.btn-primary:focus-visible {
    outline: 2px solid var(--orange, #e8651a);
    outline-offset: 3px;
}
.btn-primary:disabled,
.btn-primary[aria-busy='true'] {
    background: var(--ink-4, #5f5f69);
    cursor: wait;
    transform: none;
    box-shadow: none;
}
.btn-primary .arrow {
    margin-left: 10px;
    transition: transform var(--motion-fast, 150ms) var(--ease-standard, ease);
}
.btn-primary:hover .arrow { transform: translateX(3px); }

.submit-hint {
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 13px;
    color: var(--ink-3, #54545a);
    max-width: 28ch;
}

.btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    margin-right: 10px;
    border: 2px solid rgba(255, 255, 255, 0.30);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btnSpin 0.8s linear infinite;
}
.btn-primary[aria-busy='true'] .btn-spinner { display: inline-block; }
.btn-primary[aria-busy='true'] .btn-label { opacity: 0.85; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Form state regions */
.form-states { display: none; }
.form-state-message {
    border-radius: var(--radius-sm);
    padding: var(--space-6, 32px);
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 15px;
    line-height: 1.55;
}
.form-state-message h3 {
    font-family: var(--font-display, 'General Sans', system-ui, sans-serif);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: var(--space-2, 8px);
}
.form-state-message a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.form-state-message .restart {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--space-4, 16px);
    padding: 8px 0;
    background: transparent;
    border: 0;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}
.form-state-success {
    background: var(--success-bg, #e6f3eb);
    border: 1px solid var(--success-border, rgba(27, 94, 44, 0.20));
    color: var(--success-ink, #1b5e2c);
}
.form-state-error {
    background: var(--error-bg, #fbeae5);
    border: 1px solid var(--error-border, rgba(140, 42, 20, 0.20));
    color: var(--error-ink, #8c2a14);
}

.form-panel[data-form-state='success'] .form-grid,
.form-panel[data-form-state='success'] .submit-row,
.form-panel[data-form-state='success'] .consent,
.form-panel[data-form-state='success'] .turnstile-slot,
.form-panel[data-form-state='success'] .honeypot-wrap { display: none; }
.form-panel[data-form-state='success'] .form-states { display: block; }
.form-panel[data-form-state='success'] .form-state-success { display: block; }
.form-panel[data-form-state='success'] .form-state-error { display: none; }
.form-panel[data-form-state='error'] .form-states { display: block; }
.form-panel[data-form-state='error'] .form-state-error { display: block; }
.form-panel[data-form-state='error'] .form-state-success { display: none; }
.form-state-success,
.form-state-error { display: none; }

/* css-architect soft 5 -- reduced-motion override */
@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .btn-primary:hover,
    .btn-primary:focus-visible,
    .btn-primary .arrow,
    .btn-primary:hover .arrow {
        transform: none;
        transition: background-color var(--motion-fast, 150ms) var(--ease-standard, ease);
    }
    .btn-spinner {
        animation: none;
    }
}

/* ============================================================================
 * S65 — Concrete express_form native markup overrides
 *
 * Concrete's express_form view renders Bootstrap-style markup:
 *   <form class="form-grid">
 *     <fieldset><legend>Inquiry</legend>
 *       <div class="mb-3">
 *         <label class="form-label">...</label>
 *         <span class="text-muted small">Required</span>   (only if required)
 *         <input class="form-control ccm-input-text">
 *       </div>
 *       ...
 *     </fieldset>
 *     <div class="form-actions">
 *       <button class="btn btn-primary">Submit</button>
 *     </div>
 *   </form>
 *
 * The hand-crafted .field / .submit-row rules above don't match, so this
 * section ports the same visual language onto Concrete's actual classes.
 * Targets are scoped to .form-grid to avoid bleeding into Concrete admin UI.
 * ============================================================================ */

/* Reset fieldset / legend chrome */
.form-grid > fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.form-grid > fieldset > legend {
    display: none;
}

/* Two-column grid on tablet+ for the field stack */
@media (min-width: 768px) {
    .form-grid > fieldset {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-5, 24px);
    }
    /* Full-width fields: textarea (message), file upload, datetime, full-width by class */
    .form-grid > fieldset > .mb-3:has(textarea),
    .form-grid > fieldset > .mb-3:has(input[type='file']),
    .form-grid > fieldset > .mb-3:has(input[type='datetime-local']) {
        grid-column: 1 / -1;
    }
}

/* Each field: stack label above input with breathing room */
.form-grid .mb-3 {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-5, 24px);
}

/* Label */
.form-grid .mb-3 .form-label {
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2, #2a2a2d);
    margin-bottom: 6px;
    display: block;
}

/* Replace "Required" inline text with a red asterisk next to the label.
 * Concrete renders <span class="text-muted small">Required</span> after the
 * label — we hide the text and inject an asterisk that sits visually next to
 * the label end. */
.form-grid .mb-3 .text-muted.small {
    font-size: 0;
    line-height: 0;
    color: transparent;
    margin: 0;
    padding: 0;
    height: 0;
    display: inline;
}
.form-grid .mb-3 .text-muted.small::before {
    content: ' *';
    font-size: 14px;
    line-height: 1;
    color: var(--orange-link, #b84a0c);
    font-weight: 600;
    margin-left: -4px;
    position: relative;
    top: -22px;
}

/* Inputs / selects / textareas — full-width modern */
.form-grid input.form-control,
.form-grid select.form-select,
.form-grid textarea.form-control,
.form-grid input[type='datetime-local'].ccm-input-text {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--paper-0, #ffffff);
    border: 1px solid var(--hairline-strong, rgba(10, 10, 11, 0.18));
    border-radius: var(--radius-sm);
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 15px;
    color: var(--ink-1, #0a0a0b);
    transition:
        border-color var(--motion-fast, 150ms) var(--ease-standard, ease),
        box-shadow var(--motion-fast, 150ms) var(--ease-standard, ease);
    box-sizing: border-box;
}
.form-grid input.form-control::placeholder,
.form-grid textarea.form-control::placeholder { color: var(--ink-4, #5f5f69); }
.form-grid input.form-control:hover,
.form-grid select.form-select:hover,
.form-grid textarea.form-control:hover {
    border-color: var(--ink-3, #54545a);
}
.form-grid input.form-control:focus-visible,
.form-grid select.form-select:focus-visible,
.form-grid textarea.form-control:focus-visible {
    outline: 2px solid var(--orange, #e8651a);
    outline-offset: 2px;
    border-color: var(--orange, #e8651a);
    box-shadow: 0 0 0 1px rgba(232, 101, 26, 0.10);
}
.form-grid textarea.form-control {
    min-height: 132px;
    padding-top: 12px;
    resize: vertical;
    line-height: 1.55;
}

/* Select dropdown — replace native chevron with brand chevron, hide "** None" placeholder via no extra rule (kept readable) */
.form-grid select.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2354545A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* File input — dashed dropzone style */
.form-grid input[type='file'].form-control,
.form-grid input[type='file'] {
    width: 100%;
    padding: 14px;
    background: var(--paper-1, #f6f5f0);
    border: 1px dashed var(--hairline-strong, rgba(10, 10, 11, 0.18));
    border-radius: var(--radius-sm);
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 14px;
    color: var(--ink-2, #2a2a2d);
    cursor: pointer;
}
.form-grid input[type='file']:hover {
    border-color: var(--orange-link, #b84a0c);
    background: var(--paper-2, #edece7);
}

/* Hide "Submitted at" auto-timestamp field (akID 49 — system field
 * that should not be user-facing per CLAUDE.md form spec) */
.form-grid .mb-3:has(input[id*='akID[49]']),
.form-grid .mb-3:has(label[for*='akID[49]']) {
    display: none !important;
}

/* Hide the small "Asia/Hong Kong" timezone hint below the datetime field
 * (visible artifact when JS-disabled or before the field is hidden by :has above) */
.form-grid .mb-3 .text-muted:not(.small) {
    display: none;
}

/* Form actions (Submit row) — give it room and full-width on mobile */
.form-grid .form-actions {
    margin-top: var(--space-6, 32px);
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
}
@media (min-width: 768px) {
    .form-grid .form-actions {
        margin-top: var(--space-7, 48px);
    }
}