/*
 * Contact page (Complete Pilates) — jid-rebuild.
 *
 * Two jobs:
 *   1. Lay out the contact page itself (info cards, form card, studio grid).
 *   2. Restyle GRAVITY FORM 44 onto the sienna design system.
 *
 * On sienna routes jid-rebuild strips every stylesheet whose handle isn't ours,
 * which includes Gravity Forms' own CSS. That is deliberate — it means the form
 * arrives unstyled and we dress it, rather than fighting GF's defaults. It also
 * means EVERYTHING the form needs must exist here: if a control isn't styled
 * below, it renders as a raw browser control.
 *
 * GF's JavaScript is NOT stripped (its handles don't match the block list), so
 * validation, AJAX submit and reCAPTCHA all still work.
 *
 * Form 44 field map: 1 = Name (1.3 first / 1.6 last), 3 = Phone, 4 = Email,
 * 5 = reCAPTCHA, 6 = marketing consent (.cp-consent).
 */

/* ── Hero ─────────────────────────────────────────────────────────── */
/*
 * A studio photo sat BEHIND a white scrim. The About page hero does the
 * opposite — a near-opaque navy wash carrying white text — which is too heavy
 * for a page whose job is a form. Here the picture is texture: the left third,
 * where the H1 and breadcrumbs sit, stays close to solid white so dark text
 * keeps full contrast, and the image only really shows on the right.
 */
.jid-contact .contact-hero {
    position: relative;
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
}
.jid-contact .contact-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, .97) 0%,
            rgba(255, 255, 255, .94) 32%,
            rgba(255, 255, 255, .82) 58%,
            rgba(255, 255, 255, .70) 100%),
        linear-gradient(to bottom,
            rgba(249, 250, 251, .55) 0%,
            rgba(249, 250, 251, 0) 40%);
    pointer-events: none;
}
.jid-contact .contact-hero .container {
    position: relative;
    z-index: 2;
}
/* On phones the image is mostly behind the text, so lift the scrim to keep
   the headline readable rather than letting the photo fight it. */
@media (max-width: 780px) {
    .jid-contact .contact-hero__scrim {
        background: rgba(255, 255, 255, .93);
    }
}

/* ── Layout: form left, contact cards stacked right ───────────────── */

.jid-contact .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
    margin-bottom: var(--space-3xl);
}

/* The card carries its own max-width for the old single-column layout; inside
   the grid the column decides the width. */
.jid-contact .contact-layout .contact-form-section { margin-bottom: 0; }
.jid-contact .contact-layout .contact-form-card {
    max-width: none;
    margin: 0;
}

.jid-contact .contact-info-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: 0;
}

/* Stack below the point where two columns would squeeze the form. */
@media (max-width: 900px) {
    .jid-contact .contact-layout { grid-template-columns: 1fr; }
    .jid-contact .contact-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

/* ── Contact info cards ───────────────────────────────────────────── */

.jid-contact .contact-info-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.jid-contact .contact-info-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.jid-contact .contact-info-value {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
}
.jid-contact .contact-info-value:hover { color: var(--color-primary); }
.jid-contact .contact-info-card .small {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin: 2px 0 0;
}

/* ── The form card ────────────────────────────────────────────────── */

.jid-contact .contact-form-section { margin-bottom: var(--space-3xl); }

.jid-contact .contact-form-card {
    max-width: 680px;
    margin: 0 auto;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: 0 18px 40px -22px rgba(13, 150, 184, .22), 0 2px 8px rgba(17, 35, 55, .04);
}
.jid-contact .contact-form-card > h2 {
    margin: 0 0 var(--space-xs);
    font-size: 1.75rem;
}
.jid-contact .contact-form-intro {
    color: var(--color-gray-500);
    margin: 0 0 var(--space-xl);
    font-size: 0.9375rem;
}
.jid-contact .contact-form-fallback {
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin: 0;
}

@media (max-width: 640px) {
    .jid-contact .contact-form-card { padding: var(--space-lg); }
}

/* ── Gravity Forms → design system ────────────────────────────────── */

.jid-contact .gform_wrapper { margin: 0; }
.jid-contact .gform_wrapper form { margin: 0; }

/*
 * Gravity renders multi-input fields (Name) and checkbox groups (the opt-in)
 * as a real <fieldset>. With GF's stylesheet stripped, the BROWSER default
 * kicks in: a border box round the group with the <legend> notched into it.
 * On Name that drew a line straight through "Name (Required)".
 */
.jid-contact .gform_wrapper fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.jid-contact .gform_wrapper legend {
    padding: 0;
    width: 100%;
}

/* GF renders the field list as a <ul>/<div> grid; flatten it. */
.jid-contact .gform_fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}
.jid-contact .gfield { margin: 0; padding: 0; list-style: none; }

/* Labels */
.jid-contact .gfield_label,
.jid-contact .gform_wrapper legend.gfield_label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-700);
    margin: 0 0 var(--space-xs);
    padding: 0;
    float: none;
}

/* GF prints "(Required)" as its own span — keep it, quietly. */
.jid-contact .gfield_required {
    color: var(--color-gray-400);
    font-weight: 400;
    font-size: 0.75rem;
    margin-left: 4px;
}
.jid-contact .gfield_required_asterisk { color: var(--color-primary); }

/* Controls */
.jid-contact .gform_wrapper input[type="text"],
.jid-contact .gform_wrapper input[type="email"],
.jid-contact .gform_wrapper input[type="tel"],
.jid-contact .gform_wrapper input[type="number"],
.jid-contact .gform_wrapper input[type="url"],
.jid-contact .gform_wrapper select,
.jid-contact .gform_wrapper textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-dark);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    transition: border-color .18s ease, box-shadow .18s ease;
    -webkit-appearance: none;
    appearance: none;
}
.jid-contact .gform_wrapper input:focus,
.jid-contact .gform_wrapper select:focus,
.jid-contact .gform_wrapper textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(16, 181, 219, .15);
}
.jid-contact .gform_wrapper textarea { min-height: 120px; resize: vertical; }
.jid-contact .gform_wrapper ::placeholder { color: var(--color-gray-400); }

/* Name field: GF splits it into two sub-inputs with their own sub-labels. */
.jid-contact .ginput_complex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
.jid-contact .ginput_complex > span { display: block; }
.jid-contact .ginput_complex label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-top: 4px;
    font-weight: 400;
}
@media (max-width: 560px) {
    .jid-contact .ginput_complex { grid-template-columns: 1fr; }
}

/* ── Marketing opt-in ─────────────────────────────────────────────── */
/*
 * Deliberately quiet: this is a secondary choice sitting under the real
 * fields, and it is pre-ticked, so it must read as an option the visitor can
 * see and untick — not as another required field competing for attention.
 * It sits in a tinted tray so it is unmistakably part of the form and can't be
 * mistaken for small print that belongs to the page.
 */
/* fieldset.cp-consent, not .cp-consent: the fieldset reset above zeroes
 * padding at higher specificity and would flatten this tray. */
.jid-contact .gform_wrapper fieldset.cp-consent,
.jid-contact .cp-consent {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
/* The group's own label ("Marketing opt-in") is redundant next to the choice
 * text and would read as a second question. Hidden from sight but left in the
 * DOM for screen readers.
 *
 * Needs `legend.gfield_label` here, not just `.gfield_label`: the label rule
 * above carries an element selector, so a plain class rule LOSES the
 * specificity contest and the legend renders anyway. */
.jid-contact .cp-consent legend.gfield_label,
.jid-contact .cp-consent .gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.jid-contact .cp-consent .gfield_checkbox { margin: 0; }
.jid-contact .cp-consent .gchoice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}
.jid-contact .cp-consent input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.jid-contact .cp-consent label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-gray-600);
    font-weight: 400;
    margin: 0;
    cursor: pointer;
}

/* ── Checkboxes / radios elsewhere on the form ────────────────────── */

.jid-contact .gfield_checkbox,
.jid-contact .gfield_radio {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.jid-contact .gfield_checkbox .gchoice,
.jid-contact .gfield_radio .gchoice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.jid-contact .gfield_checkbox input,
.jid-contact .gfield_radio input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--color-primary);
    flex: 0 0 auto;
}
.jid-contact .gfield_checkbox label,
.jid-contact .gfield_radio label {
    font-size: 0.9375rem;
    color: var(--color-dark);
    font-weight: 400;
    line-height: 1.4;
}

/* ── reCAPTCHA ────────────────────────────────────────────────────── */

/* GF wraps the widget in .ginput_recaptcha (NOT Google's own .g-recaptcha —
 * that class is on an inner node and is absent here). */
.jid-contact .gfield--type-captcha .gfield_label,
.jid-contact .gfield_captcha .gfield_label { display: none; }
.jid-contact .ginput_recaptcha { margin-top: 2px; }
.jid-contact .ginput_recaptcha iframe { display: block; }

/* Keep the widget inside the card on narrow phones — it has a fixed 304px
 * width Google will not let us change, so scale the whole thing down. */
@media (max-width: 400px) {
    .jid-contact .ginput_recaptcha {
        transform: scale(.86);
        transform-origin: 0 0;
        height: 66px;
    }
}

/* ── Submit ───────────────────────────────────────────────────────── */

.jid-contact .gform_footer {
    margin: var(--space-lg) 0 0;
    padding: 0;
}
.jid-contact .gform_footer input[type="submit"],
.jid-contact .gform_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 28px;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--color-white);
    background: var(--color-primary);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.jid-contact .gform_footer input[type="submit"]:hover,
.jid-contact .gform_button:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

/* GF's AJAX spinner sits inline next to the button. */
.jid-contact .gform_ajax_spinner { margin-left: 10px; vertical-align: middle; }

/* ── Validation + confirmation ────────────────────────────────────── */

.jid-contact .gform_wrapper .validation_error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin: 0 0 var(--space-lg);
    font-size: 0.875rem;
    font-weight: 500;
}
.jid-contact .gfield_error input,
.jid-contact .gfield_error select,
.jid-contact .gfield_error textarea { border-color: var(--color-error); }
.jid-contact .gfield_validation_message,
.jid-contact .validation_message {
    color: #991b1b;
    font-size: 0.8125rem;
    margin-top: 6px;
}
.jid-contact .gform_confirmation_message {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    font-size: 0.9375rem;
    font-weight: 500;
}

/* GF hides fields with conditional logic via this class — respect it. */
.jid-contact .gform_hidden,
.jid-contact .gfield_visibility_hidden { display: none !important; }

/* ── Overwatch Forms ──────────────────────────────────────────────── */
/*
 * The same visual contract as the Gravity rules above, against Overwatch's own
 * markup, so the engine swap is invisible on this page. Kept as a separate
 * block rather than merged selectors: while both engines are live the two must
 * be independently adjustable, and a shared selector list would make it
 * impossible to fix one without touching the other.
 *
 * Overwatch's own forms.css IS loaded here (handle `ow-forms` contains "ow-",
 * not stripped by the sienna allowlist which keeps `jid-`... — verify before
 * relying on it), so these rules override rather than build from nothing.
 */

.jid-contact .ow-form { margin: 0; }

.jid-contact .ow-form .ow-field { margin-bottom: var(--space-md); }

.jid-contact .ow-form .ow-field > label,
.jid-contact .ow-form .ow-field > legend {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-700);
    margin: 0 0 var(--space-xs);
    padding: 0;
}

.jid-contact .ow-form .ow-required {
    color: var(--color-gray-400);
    font-weight: 400;
    font-size: 0.75rem;
    margin-left: 4px;
}

.jid-contact .ow-form input[type="text"],
.jid-contact .ow-form input[type="email"],
.jid-contact .ow-form input[type="tel"],
.jid-contact .ow-form input[type="number"],
.jid-contact .ow-form input[type="date"],
.jid-contact .ow-form select,
.jid-contact .ow-form textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-dark);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    transition: border-color .18s ease, box-shadow .18s ease;
    -webkit-appearance: none;
    appearance: none;
}
.jid-contact .ow-form input:focus,
.jid-contact .ow-form select:focus,
.jid-contact .ow-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(16, 181, 219, .15);
}
.jid-contact .ow-form textarea { min-height: 120px; resize: vertical; }
.jid-contact .ow-form ::placeholder { color: var(--color-gray-400); }

/* Name splits into two inputs, same two-up grid as the Gravity version. */
.jid-contact .ow-form .ow-name-fields,
.jid-contact .ow-form .ow-address-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
.jid-contact .ow-form .ow-address-fields { display: grid; gap: var(--space-md); }
@media (max-width: 560px) {
    .jid-contact .ow-form .ow-name-fields,
    .jid-contact .ow-form .ow-address-row { grid-template-columns: 1fr; }
}

/* Choices */
.jid-contact .ow-form .ow-choices { display: flex; flex-direction: column; gap: 8px; }
.jid-contact .ow-form .ow-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--color-dark);
    line-height: 1.4;
    cursor: pointer;
}
.jid-contact .ow-form .ow-choice input {
    width: 16px; height: 16px; margin: 2px 0 0;
    accent-color: var(--color-primary); flex: 0 0 auto;
}

/*
 * Marketing opt-in. The migration carried Gravity's cssClass across, so the
 * Overwatch field wrapper still has `.cp-consent` — the same hook the Gravity
 * rules use. Target that, not the field id: an id is per-form and would break
 * the moment the same consent box appears on another form.
 */
.jid-contact .ow-form .cp-consent {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.jid-contact .ow-form .cp-consent > label,
.jid-contact .ow-form .cp-consent > legend { display: none; }
.jid-contact .ow-form .cp-consent .ow-choice {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    line-height: 1.5;
}

/* Submit */
.jid-contact .ow-form .ow-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-lg);
    padding: 14px 28px;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-primary);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.jid-contact .ow-form .ow-submit:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

/* Messages */
.jid-contact .ow-form .ow-form-message {
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 0.875rem;
    margin-bottom: var(--space-md);
}
.jid-contact .ow-form .ow-form-message--error {
    background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
}
.jid-contact .ow-form .ow-form-message--success {
    background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
}
.jid-contact .ow-form .ow-field-error {
    color: #991b1b; font-size: 0.8125rem; margin-top: 6px;
}

/* ── Studios ──────────────────────────────────────────────────────── */

.jid-contact .contact-section-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--space-xl);
}
.jid-contact .contact-section-head h2 { margin: 0 0 var(--space-xs); }
.jid-contact .contact-section-head p { color: var(--color-gray-500); margin: 0; }

.jid-contact .location-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-gray-600);
}