/* =====================================================================
   Contact
   Form + info column + map placeholder. No working-hours/address
   block — those values don't exist yet and weren't invented.
   ===================================================================== */

.contact__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 1024px) {
    .contact__inner {
        grid-template-columns: 0.9fr 1.1fr;
        gap: var(--space-2xl);
        align-items: start;
    }
}

/* ---- Info column ---------------------------------------------------------
   Same card treatment as .contact__form below (padding scale, white bg,
   border, radius) — the two columns read as a matched pair instead of
   a dense bordered form next to loose, uncontained text. */

.contact__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-2xl);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

@media (min-width: 640px) {
    .contact__info {
        padding: var(--space-3xl);
    }
}

.contact__info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact__info-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.contact__info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-light);
    color: var(--color-accent);
}

.contact__info-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.contact__info-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.contact__info-label {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-text-grey);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact__info-value {
    font-size: var(--fs-body-lg);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

.contact__map {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-light);
    color: var(--color-text-grey);
    font-size: var(--fs-small);
    text-align: center;
    padding: var(--space-lg);
}

/* ---- Form --------------------------------------------------------------- */

.contact__form {
    padding: var(--space-2xl);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

@media (min-width: 640px) {
    .contact__form {
        padding: var(--space-3xl);
    }
}

/* ---- Honeypot (process_contact_submission() in functions.php) -----------
   Off-screen rather than display:none/visibility:hidden — some spam
   bots skip fields hidden that way but still fill ones that are just
   positioned off-canvas. */
.contact__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Flash messages ------------------------------------------------------- */

.contact__flash {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-lg);
    font-size: var(--fs-small);
}

.contact__flash--success {
    background-color: #DCFCE7;
    color: #166534;
}

.contact__flash--error {
    background-color: #FEE2E2;
    color: #991B1B;
}

.contact__flash--error ul {
    margin: 0;
    padding-left: 1.1rem;
}