/*
 * Contact page: the shop's details on the left, the form on the right.
 *
 * The layout used Bootstrap's `row g-5` inside `.container-xl`, whose negative
 * gutter margin pulled 12px past the container on both sides at every width
 * below 1200px, and `border-end` / `border-start` stayed on when the columns
 * stacked, leaving two rules with nothing to divide. This grid replaces both.
 */

.hebd-contact {
    padding-block: var(--hebd-section-space, 44px);
    font-family: var(--hebd-font-body);
}

.hebd-contact .contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.hebd-contact .form-container {
    padding-left: 48px;
    border-left: 1px solid var(--hebd-line, #E9E1D5);
}

.hebd-contact .section-title {
    font-family: var(--hebd-font-heading);
}

.hebd-contact .horizental {
    width: 56px;
    margin: 10px 0 18px;
    border: 0;
    border-top: 2px solid var(--hebd-primary, #2E7046);
    opacity: 1;
}

/* ---- Details list ---- */

.hebd-contact .about-us {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hebd-contact .info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/*
 * The icon size used to be inline `width/height/fill`, which does nothing to a
 * Font Awesome webfont glyph: it needs font-size and color.
 */
.hebd-contact .contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--hebd-soft-tint, #F8F1E7);
    color: var(--hebd-primary, #2E7046);
    font-size: 17px;
}

.hebd-contact .contact-icon svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.hebd-contact .info-content p {
    margin: 0;
    color: var(--hebd-text-muted, #6B7568);
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.hebd-contact .info-content strong {
    display: inline-block;
    margin-bottom: 2px;
    color: var(--hebd-text, #1F2A22);
    font-weight: 600;
}

.hebd-contact .info-content a {
    color: var(--hebd-primary, #2E7046);
    text-decoration: none;
}

.hebd-contact .info-content a:hover,
.hebd-contact .info-content a:focus-visible {
    text-decoration: underline;
}

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

.hebd-contact .wpcf7-form .row {
    --bs-gutter-x: 1rem;
}

.hebd-contact .wpcf7-form label {
    color: var(--hebd-text, #1F2A22);
    font-size: 14px;
    font-weight: 600;
}

.hebd-contact .wpcf7-form .wpcf7-submit {
    margin-top: 6px;
    padding: 12px 26px;
    border: 0;
    border-radius: 10px;
    background: var(--hebd-primary, #2E7046);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.hebd-contact .wpcf7-form .wpcf7-submit:hover {
    background: var(--hebd-primary-dark, #1E5A34);
}

/* CF7 marks the field it could not accept; show that clearly. */
.hebd-contact .wpcf7-not-valid-tip {
    display: block;
    margin-top: 4px;
    color: #A3312B;
    font-size: 12.5px;
}

.hebd-contact .wpcf7-form .wpcf7-not-valid {
    border-color: #A3312B !important;
}

.hebd-contact .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
}

@media (max-width: 991.98px) {
    .hebd-contact .contact-content {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* Stacked: the divider belongs above the form, not beside it. */
    .hebd-contact .form-container {
        padding-left: 0;
        padding-top: 32px;
        border-left: 0;
        border-top: 1px solid var(--hebd-line, #E9E1D5);
    }
}

@media (max-width: 575.98px) {
    .hebd-contact .about-us {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}