/* ==========================================================================
   Wealth Building Financial — /contact/
   Loaded only on the contact page (see layouts/partials/headers.html).
   ========================================================================== */

/* Contact Page Specific */
.contact-form-section,
.appointment-section {
    background: var(--color-surface);
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 40px;
    border: 1px solid var(--color-border);
}

.contact-form-section h2,
.appointment-section h2 {
    color: var(--color-text);
    margin-bottom: 20px;
    font-weight: 600;
}

.contact-form-section h2 i,
.appointment-section h2 i {
    color: var(--color-primary);
    margin-right: 10px;
}

.contact-form-section select.form-control {
    height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.appointment-options {
    margin-top: 30px;
}

.contact-mobile-actions {
    display: none;
}

.appointment-card {
    background: var(--color-surface);
    padding: 30px 25px;
    border-radius: var(--radius-lg);
    text-align: center;
    height: 100%;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.appointment-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary);
}

.appointment-icon {
    margin-bottom: 20px;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(26, 156, 140, 0.12));
    border: 1px solid rgba(26, 156, 140, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.appointment-icon i {
    font-size: 28px;
    color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.appointment-card h4 {
    color: var(--color-text);
    margin-bottom: 15px;
    font-weight: 600;
}

.appointment-card p {
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

.appointment-card ul li {
    color: var(--color-text-muted);
    padding: 5px 0;
    position: relative;
    padding-left: 20px;
}

.appointment-card ul li:before {
    content: "✓";
    color: var(--color-success);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 5px;
}

.contact-info {
    padding-left: 20px;
}

/* The rail is one short card against a column that runs three times its
   height, so it used to leave roughly 400px of empty page beside the form.
   Sticking it keeps the phone number and the office hours in view for as long
   as there is a form to fill in, which is when someone is most likely to
   decide they would rather just call. 92px clears the affixed navbar. */
@media (min-width: 992px) {
    .contact-info {
        position: sticky;
        top: 92px;
    }
}

.advisor-card {
    background: var(--color-surface);
    padding: 30px 25px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 25px;
    border: 1px solid var(--color-border);
}

.advisor-photo {
    text-align: center;
    margin-bottom: 20px;
}

.advisor-photo i {
    font-size: 5rem;
    color: var(--color-secondary);
}

.advisor-details h4 {
    color: var(--color-text);
    margin-bottom: 5px;
    font-weight: 600;
    text-align: center;
}

/* Neither contact page carries an `.advisor-title` line any more (no
   credential subhead under the firm name), so the heading would otherwise sit
   only 5px above the contact list — the gap `.advisor-title` used to provide.
   Its own rule has been dropped along with the markup; this restores the gap
   whenever there's no subtitle in between. */
.advisor-details h4:has(+ .contact-details) {
    margin-bottom: 20px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.contact-item i {
    color: var(--color-secondary);
    font-size: 18px;
    margin-right: 15px;
    margin-top: 3px;
    min-width: 20px;
}

.contact-item div {
    flex: 1;
}

.contact-item strong {
    color: var(--color-text);
    display: block;
    margin-bottom: 3px;
}

/* The phone number and email address are the page's fallback actions when the
   form is not what someone wants. As bare inline links they were 22px tall. */
.contact-item a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--color-primary);
    text-decoration: none;
}

.contact-item a:hover {
    color: var(--color-secondary);
    text-decoration: none;
}

/* Consent and sensitive-data notes under the contact form fields. */
.form-privacy-note,
.form-consent-note {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-muted-2);
}

.form-privacy-note i {
    color: var(--color-info);
    margin-right: 6px;
}

/* Form Feedback messages */
.form-feedback {
    margin-top: 20px;
    padding: 15px;
    border-radius: var(--radius-sm);
    display: none;
}

.form-feedback.show {
    display: block;
}

.form-feedback.error {
    background-color: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.form-feedback.success {
    background-color: #d1fae5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.form-feedback.pending {
    background-color: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

/* Honeypot: kept in the accessibility tree off-screen so bots fill it but
   people never see it. Not display:none, which many bots skip. */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 768px) {

    .contact-mobile-actions {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        display: block;
        margin-bottom: 24px;
        padding: 22px 20px;
    }

    .contact-mobile-actions h2 {
        font-size: 20px;
        margin: 0 0 16px;
        text-align: center;
    }

    .contact-mobile-actions .btn-block {
        margin-bottom: 12px;
    }

    .contact-mobile-actions-secondary {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Two buttons side by side in a grid, so the horizontal padding is trimmed
       to keep the labels on one line — but not the vertical, which has to hold
       the 44px touch minimum. */
    .contact-mobile-actions-secondary .btn {
        padding: 13px 12px;
        text-align: center;
    }

    .contact-info {
        padding-left: 0;
        margin-top: 40px;
    }

    .contact-form-section,
    .appointment-section {
        padding: 25px 20px;
    }

    .appointment-card {
        padding: 24px 18px;
    }

    .advisor-card {
        padding: 20px 15px;
    }
}