/* Contact page in the new look (site reskin, 15 Oct 2026). Loaded by includes/header.cfm only
   in preview (request.reskin), after reskin.css. Markup: includes/inc_rs_contact.cfm. The form
   is today's markup; this file only dresses the boxes around it. No edge bars, no new fonts. */

/* The form panel fills its column (the shared .rs-panel is a centred 520px box) */
body.ft-reskin .rs-contact .rs-contact-panel {
    max-width: none;
    margin: 0;
}
body.ft-reskin .rs-contact .rs-contact-panel textarea.form-control { min-height: 150px; }
body.ft-reskin .rs-contact .rs-contact-panel .btn-ft {
    border-radius: var(--rs-radius-sm);
    padding: 12px 22px;
    font-size: 15px;
}
/* fueltool.css gives .btn-ft a bright green glow on hover and a bright green focus ring;
   here both are the one dark green (bright green is for the logo and the bolt only). */
body.ft-reskin .rs-contact .rs-contact-panel .btn-ft:hover { box-shadow: 0 6px 16px rgba(25,79,53,0.25); }
body.ft-reskin .rs-contact .rs-contact-panel .btn-ft:focus-visible { box-shadow: 0 0 0 3px rgba(25,79,53,0.35); }

/* After a failed submit fueltool.js adds .was-validated: Bootstrap would paint every valid
   field in its own success green with a tick. Keep valid fields calm; the red invalid state
   stays as Bootstrap draws it. */
body.ft-reskin .rs-contact .was-validated .form-control:valid {
    border-color: var(--rs-field);
    background-image: none;
    padding-right: 0.85rem;
}
body.ft-reskin .rs-contact .was-validated .form-control:valid:focus {
    border-color: var(--rs-green);
    box-shadow: 0 0 0 3px rgba(25,79,53,0.15);
}

/* Sent / error messages: calm boxes, the usual 1px border, no edge bar */
body.ft-reskin .rs-contact .alert {
    border-radius: var(--rs-radius-sm);
    overflow-wrap: anywhere;
}
body.ft-reskin .rs-contact .alert-success {
    background: var(--rs-wash);
    border: 1px solid var(--rs-hair);
    color: var(--rs-ink);
    margin: 0;
}
body.ft-reskin .rs-contact .alert-success h5 {
    font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif;
    font-weight: 700;
    color: var(--rs-ink);
}

/* Beside the form: the details card and the ordering note (no photo). From 992px the two columns
   start level at the top; below 992px the details come first, so the phone number is not
   620px down the page. Only the order changes; the form's markup is untouched. */
body.ft-reskin .rs-contact-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
body.ft-reskin .rs-contact-side > * { margin: 0; }
/* Hero: a quiet photo, shaded hard so it is a background and not a picture to look at */
body.ft-reskin .rs-contact-hero.rs-hero--photo { padding: 28px 0 32px; background-position: center 55%; }
body.ft-reskin .rs-contact-hero.rs-hero--photo::before {
    background: linear-gradient(180deg, rgba(12,34,23,0.84) 0%, rgba(12,34,23,0.78) 100%);
}
body.ft-reskin .rs-contact-hours { display: block; font-size: 13.5px; font-weight: 400; color: var(--rs-label); margin-top: 1px; }
body.ft-reskin .rs-contact-card h2 {
    font-size: 18px;
    letter-spacing: normal;
    margin: 0 0 14px;
}
body.ft-reskin .rs-contact-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 15px;
    min-width: 0;
}
body.ft-reskin .rs-contact-line:last-child { margin-bottom: 0; }
body.ft-reskin .rs-contact-line a {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}
body.ft-reskin .rs-contact-note {
    background: var(--rs-wash);
    border-radius: var(--rs-radius);
    padding: 16px 18px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--rs-ink);
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    body.ft-reskin .rs-contact .row > .col-lg-5 { order: -1; }
}

@media (min-width: 992px) {
    body.ft-reskin .rs-contact-hero.rs-hero--photo { padding: 40px 0 44px; min-height: 0; display: block; }
    body.ft-reskin .rs-contact-hero.rs-hero--photo::before {
        background: linear-gradient(90deg, rgba(12,34,23,0.84) 0%, rgba(12,34,23,0.72) 100%);
    }
    body.ft-reskin .rs-contact-side { gap: 16px; }
    body.ft-reskin .rs-contact-card h2 { font-size: 19px; }
}

/* On a wide laptop the three short fields share a row, so the form is about as tall as the
   details beside it (the two columns are then about the same height, with no big gap).
   Markup order and every field are unchanged; this only places them. */
@media (min-width: 1200px) {
    body.ft-reskin .rs-contact .rs-contact-panel form {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 16px;
    }
    body.ft-reskin .rs-contact .rs-contact-panel form > .mb-3:has(#contactMessage),
    body.ft-reskin .rs-contact .rs-contact-panel form > button[type="submit"] { grid-column: 1 / -1; }
    body.ft-reskin .rs-contact .rs-contact-panel form > button[type="submit"] { justify-self: start; }
}