/*
 * Contact page — self-contained styles, faithful port onto the v2 stack.
 * Scoped under .contact so the shared v2 header/footer keep their own styling.
 * All text uses Nunito (the single brand typeface, loaded by core/fonts.css).
 */

/* ── Page base ── */
.contact {
    font-family: 'Nunito', sans-serif;
    color: #1d1d1d;
    line-height: 1.5;
}
.contact img {
    max-width: 100%;
}
.contact .main-component {
    background-color: #ffffff;
    max-width: 1450px;
    margin: auto;
    user-select: none;
    box-sizing: border-box;
    padding-bottom: 60px;
}

/* ── Grid (Bootstrap 5 subset, scoped) ── */
.contact .container {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px)  { .contact .container { max-width: 540px; } }
@media (min-width: 768px)  { .contact .container { max-width: 720px; } }
@media (min-width: 992px)  { .contact .container { max-width: 960px; } }
@media (min-width: 1200px) { .contact .container { max-width: 1140px; } }
@media (min-width: 1400px) { .contact .container { max-width: 1320px; } }

/* ── Typography ── */
.contact .dingdoong__heading   { font-family: 'Nunito', sans-serif; }
.contact .dingdoong__heading-3 { font-size: 24px; }
.contact .dingdoong__subheading { font-size: 20px; }
.contact .dingdoong__subtitle  { font-size: 14px; }

/* ── Contact layout ── */
.contact .dingdoong__box-contact {
    display: flex;
    justify-content: space-around;
}
.contact .dingdoong__contact-box-thankyou {
    max-width: 700px;
}
.contact .dingdoong__contact-form {
    margin-left: 30px;
    width: 405px;
}
.contact .dingdoong__mailbox {
    display: flex;
    margin: 100px auto 50px;
    align-items: center;
    flex-direction: column;
}

/* ── Form controls (Bootstrap subset, scoped) ── */
.contact .mb-3 { margin-bottom: 1rem; }
.contact .form-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 14px;
}
.contact .form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.contact .form-control:focus {
    border-color: #f62369;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(246, 35, 105, 0.15);
}
.contact textarea.form-control {
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* ── Button ── */
.contact .btn-customize {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    background-color: #f62369;
    color: #ffffff;
    border: 3px solid #1d1d1d;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}
.contact .btn-customize:hover,
.contact .btn-customize:focus {
    background: #ffcb47 !important;
    color: #000 !important;
    box-shadow: 5px 5px 0px #000000;
    border: 3px solid #1d1d1d;
}

/* ── Mobile ── */
@media screen and (max-width: 672px) {
    .contact .dingdoong__box-contact { display: block; }
    .contact .dingdoong__contact-form { width: 100%; margin-left: 0; }
}
@media (min-width: 320px) and (max-width: 480px) {
    .contact .dingdoong__heading-3 { font-size: 20px !important; }
    .contact .dingdoong__subheading { font-size: 16px !important; }
    .contact .dingdoong__subtitle { font-size: 12px !important; }
}

/* ── Contact form: honeypot + inline alert (added with REST contact endpoint) ── */
.contact .dd-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.contact .dd-contact-alert {
    margin-bottom: 15px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fdecef;
    border: 1px solid #E8175D;
    color: #b3123f;
    font-size: 14px;
}