/* ==========================================================================
   Contact Page Styles
   ========================================================================== */

/* ==========================================================================
   Section 1: Contact Form — Hero-level prominence
   ========================================================================== */

/* Offset scroll target so the section clears the fixed navbar */
#contact-form-section {
    scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}

.contact-form-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.contact-form-section__title {
    font-family: var(--font-heading);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-sm);
}

.contact-form-section__subtitle {
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
}

.contact-form-section__image {
    display: none; /* Hidden on mobile — form takes priority */
}

.contact-form-section__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
}

@media (min-width: 1024px) {
    .contact-form-section__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4xl);
    }

    .contact-form-section__title {
        font-size: 6rem;
        line-height: 7.2rem;
    }

    .contact-form-section__image {
        display: block;
        min-height: 73.4rem;
    }
}

/* ==========================================================================
   Section 2: Map + Address (contact page exclusive)
   ========================================================================== */
.contact-map__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
}

.contact-map__embed {
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--color-background-light);
}

.contact-map__embed iframe {
    display: block;
    width: 100%;
    height: 40rem;
    border: 0;
}

.contact-map__title {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-md);
}

.contact-map__address {
    font-style: normal;
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-dark);
    margin-bottom: var(--space-md);
}

.contact-map__phone {
    margin-bottom: var(--space-lg);
}

.contact-map__phone a {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text-dark);
    text-decoration: underline;
}

.contact-map__phone a:hover {
    color: var(--color-sage);
}

.contact-map__directions {
    display: inline-block;
}

@media (min-width: 1024px) {
    .contact-map__grid {
        grid-template-columns: 2fr 1fr;
        gap: var(--space-4xl);
        align-items: start;
    }

    .contact-map__embed iframe {
        height: 50rem;
    }
}

/* ==========================================================================
   Contact Form — field-level overrides (phone input, dropdown)
   ========================================================================== */

/* intl-tel-input overrides to fit the theme */
.contact-form .iti {
    width: 100%;
}

.contact-form .iti__selected-dial-code {
    font-size: var(--fs-sm);
}

/* Service dropdown styled like other inputs */
.contact-form select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23090908' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.6rem center;
    background-size: 1.2rem;
    padding-right: 4rem;
    cursor: pointer;
}

/* reCAPTCHA container */
.contact-form__recaptcha {
    margin-bottom: var(--space-lg);
}

/* Two-column row for first/last name */
.contact-form .form-row--half {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 640px) {
    .contact-form .form-row--half {
        grid-template-columns: 1fr 1fr;
    }

    .contact-form .form-row--half .form-group {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Contact Form 7 — Theme integration overrides
   Maps CF7's generated markup to the existing TreeOfLife form design.
   ========================================================================== */

/* Remove CF7 default border/padding on the form wrapper */
.contact-form .wpcf7-form {
    margin: 0;
    padding: 0;
}

/* CF7 wraps each field in a <span>; make it block-level and full width */
.contact-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Apply .form-control styles to all CF7 text/email/tel/url inputs and textareas */
.contact-form .wpcf7-form-control-wrap input[type="text"],
.contact-form .wpcf7-form-control-wrap input[type="email"],
.contact-form .wpcf7-form-control-wrap input[type="tel"],
.contact-form .wpcf7-form-control-wrap input[type="url"],
.contact-form .wpcf7-form-control-wrap textarea {
    display: block;
    width: 100%;
    padding: 1.2rem var(--space-md);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--color-text-dark);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form .wpcf7-form-control-wrap input:focus,
.contact-form .wpcf7-form-control-wrap textarea:focus {
    outline: none;
    border-color: var(--color-sage);
    box-shadow: 0 0 0 3px rgba(154, 161, 123, 0.15);
}

.contact-form .wpcf7-form-control-wrap input::placeholder,
.contact-form .wpcf7-form-control-wrap textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.contact-form .wpcf7-form-control-wrap textarea {
    resize: vertical;
    min-height: 12rem;
}

/* CF7 select dropdown — match theme styling + custom chevron */
.contact-form .wpcf7-form-control-wrap select {
    display: block;
    width: 100%;
    padding: 1.2rem var(--space-md);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--color-text-dark);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23090908' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.6rem center;
    background-size: 1.2rem;
    padding-right: 4rem;
    cursor: pointer;
}

.contact-form .wpcf7-form-control-wrap select:focus {
    outline: none;
    border-color: var(--color-sage);
    box-shadow: 0 0 0 3px rgba(154, 161, 123, 0.15);
}

/* CF7 acceptance (terms) checkbox — match .form-check layout */
.contact-form .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.contact-form .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 0.2rem;
    accent-color: var(--color-sage);
    cursor: pointer;
}

.contact-form .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: var(--lh-normal);
    cursor: pointer;
}

.contact-form .form-check .wpcf7-form-control-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.contact-form .form-check a {
    color: var(--color-sage);
    text-decoration: underline;
}

/* CF7 submit button — match .btn.btn--primary styling */
.contact-form .wpcf7-submit {
    display: inline-block;
    padding: 1.4rem var(--space-xl);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-white);
    background-color: var(--color-sage);
    border: 2px solid var(--color-sage);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.contact-form .wpcf7-submit:hover,
.contact-form .wpcf7-submit:focus-visible {
    background-color: var(--color-sage-hover);
    border-color: var(--color-sage-hover);
    color: var(--color-white);
}

/* CF7 loading spinner */
.contact-form .wpcf7-spinner {
    margin-left: var(--space-sm);
}

/* CF7 response output — match .form-alert design */
.contact-form .wpcf7-response-output {
    padding: var(--space-md);
    border-radius: var(--border-radius);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    margin: var(--space-lg) 0 0;
    border: none;
}

.contact-form .wpcf7-form.sent .wpcf7-response-output {
    background-color: rgba(39, 174, 96, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

.contact-form .wpcf7-form.failed .wpcf7-response-output,
.contact-form .wpcf7-form.aborted .wpcf7-response-output,
.contact-form .wpcf7-form.invalid .wpcf7-response-output,
.contact-form .wpcf7-form.unaccepted .wpcf7-response-output,
.contact-form .wpcf7-form.spam .wpcf7-response-output {
    background-color: rgba(192, 57, 43, 0.1);
    color: var(--color-error);
    border: 1px solid rgba(192, 57, 43, 0.2);
}

/* CF7 inline validation error tips */
.contact-form .wpcf7-not-valid-tip {
    font-size: var(--fs-xs);
    color: var(--color-error);
    margin-top: var(--space-xs);
}

.contact-form .wpcf7-not-valid {
    border-color: var(--color-error);
}

.contact-form .wpcf7-not-valid:focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

/* ==========================================================================
   LeadConnector (HighLevel) Embedded Form
   Wrapper styles only — iframe content is cross-origin and cannot be themed.
   The .contact-form parent keeps the existing grid/spacing intact.
   ========================================================================== */
.contact-form .leadconnector-form {
    width: 100%;
    /* Match theme rounded corners; clip iframe so its inner edges follow. */
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--color-white);
}

.contact-form .leadconnector-form iframe {
    display: block;
    width: 100%;
    /* form_embed.js will dynamically set the height; min-height prevents
       layout shift before the script runs (CLS / Core Web Vitals). */
    height: 100%;
    min-height: 90rem;
    border: 0;
    border-radius: var(--border-radius);
}