/**
 * Contact Section — Dance Quest Contact section 1. Live values: 80% column,
 * 2/3 + 1/3 columns, 18px intro, Gravity Form styled like the old child theme
 * (labels hidden, #eee borderless fields with 15px padding, an outlined blue
 * submit button that fills on hover), 14px address at line height 2.
 */
.contactsection {
    padding: 60px 0;
    background: var(--background, #ffffff);
}

.contactsection-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 5.5%;
    width: 80%;
    margin-inline: auto;
}

.contactsection-intro {
    margin: 0 0 20px;
    font-family: var(--font-heading, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-weight: 400;
    font-size: var(--font-size-lg, 18px);
    color: var(--foreground, #333333);
}

.contactsection-address {
    margin: 0 0 16px;
    font-family: var(--font-paragraph, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-size: var(--font-size-sm, 14px);
    line-height: 2;
    color: var(--muted-foreground, #666666);
}

.contactsection-social { display: flex; gap: 6px; margin: 0 0 20px; }

.contactsection-social a {
    --icon-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary, #325cb2);
    color: var(--primary-foreground, #ffffff);
    border-bottom: 0;
}

.contactsection-map {
    display: block;
    width: 100%;
    height: 240px;
    border: 0;
}

/* Gravity Forms — the live site's exact styling. Live runs GF's
   "Gravity Forms 2.5" theme (rg_gforms_default_theme = gravity-theme) with
   legacy markup, plus these rules copied verbatim from the old
   dance-quest-ballroom child theme (only scoped to this block). They style
   text inputs and the textarea only — the email box keeps GF's white bordered
   look and the Send button the browser default, exactly as live. */
.contactsection .gfield .gfield_label,
.contactsection .gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label,
.contactsection .gfield_label,
.contactsection .gfield .name_first label,
.contactsection .gfield .name_last label {
	display: none!important;
}

.contactsection input[type=text],
.contactsection textarea {
 background: #eee;
 border: none;
 border-radius: 0;
 color: #999 !important;
 padding: 15px !important;
}

.contactsection .gform_wrapper .gform_footer input.button {
 float: right;
 background: transparent;
 border: 2px solid #325cb2;
 font-size: 22px;
 color: #325cb2;
 padding: 12px 23px;
 border-radius: 0!important;
 letter-spacing: 2px;
 cursor: pointer;
}

.contactsection .gform_wrapper .gform_footer input.button:hover {
 background: #325cb2;
 border: 2px solid transparent;
color: #fff;
}

@media (max-width: 980px) {
    .contactsection-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* contact geometry — measured on the live page: form column
   631px starting 30px into the 80% column, map column 321px, 60px between
   them, 22px intro, 14px form text. The email box and Send button are styled
   like the other fields / the child theme intent (live leaves them unstyled
   only because its selectors missed type=email and GF's <button>). */
@media (min-width: 981px) {
    .contactsection-grid {
        grid-template-columns: minmax(0, 631px) minmax(0, 321px);
        gap: 60px;
        padding-left: 30px;
    }
}
.contactsection-intro { font-size: 22px; }
.contactsection .gform_wrapper { font-size: 14px; }
.contactsection .gform_wrapper input[type=email] {
    background: #eee;
    border: none;
    border-radius: 0;
    color: #999 !important;
    padding: 15px !important;
    font-size: 14px;
}
.contactsection .gform_wrapper .gform_footer { overflow: hidden; }
.contactsection .gform_wrapper .gform_footer button.button {
    float: right;
    margin-right: 16px; /* GF legacy field gutter */
    background: transparent;
    border: 2px solid #325cb2;
    border-radius: 0;
    color: #325cb2;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 2px;
    padding: 12px 23px;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.contactsection .gform_wrapper .gform_footer button.button:hover,
.contactsection .gform_wrapper .gform_footer button.button:focus-visible {
    background: #325cb2;
    color: #fff;
}