/* Contact Us page, 2026-10-30. Loaded only by pages/contact.html through head_extra, so site.css is not recompiled.
   Field visibility is CSS (:has), so the two paths work with JavaScript off. The script only sets `required`. */
#contact-form, #contact-form [id] { scroll-margin-top: 7rem; }
.cf-page [hidden] { display: none !important; }

.cf-hero { background: linear-gradient(to bottom, #111111, #0A0A0A); padding: 6.75rem 1rem 1.25rem; text-align: center; }
.cf-hero h1 { font-family: 'Oswald', 'Montserrat', sans-serif; font-weight: 700; font-size: 2.25rem; line-height: 1.15; letter-spacing: 0.08em; color: #F5F5F5; }
.cf-hero p { color: #C0C0C0; max-width: 42rem; margin: 0.5rem auto 0; font-size: 1rem; }

.cf-notice-wrap { background: #0A0A0A; padding: 0 1rem 1.5rem; }
.cf-notice { max-width: 78rem; margin: 0 auto; background: #1A1A1A; border: 1px solid #2A2A2A; border-left: 4px solid #3399FF; padding: 1rem 1.25rem; }
.cf-notice h2 { font-family: 'Oswald', 'Montserrat', sans-serif; font-size: 1.125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #5CB3FF; margin-bottom: 0.35rem; }
.cf-notice p { color: #F5F5F5; font-size: 1rem; line-height: 1.5; }

.cf-body { background: #0A0A0A; padding: 1rem 0 5rem; }
.cf-layout { max-width: 80rem; margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.cf-card { background: #1A1A1A; border: 1px solid #2A2A2A; padding: 1.5rem; }
.cf-card h2, .cf-subhead { font-family: 'Oswald', 'Montserrat', sans-serif; font-weight: 600; font-size: 1.25rem; color: #F5F5F5; }
.cf-vehicles p, .cf-vehicles li { color: #C0C0C0; font-size: 0.9375rem; line-height: 1.55; }
.cf-vehicles p { margin-top: 0.75rem; }
.cf-vehicles ul { margin-top: 0.5rem; padding-left: 1.1rem; list-style: disc; }

.cf-form { display: grid; gap: 1.5rem; }
.cf-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.cf-field label, .cf-form legend { display: block; color: #E8E8E8; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.cf-req { color: #5CB3FF; }
.cf-optional { color: #C0C0C0; font-weight: 400; }
.cf-hint { color: #C0C0C0; font-size: 0.8125rem; margin-top: 0.35rem; }
.cf-form input[type="text"], .cf-form input[type="email"], .cf-form input[type="tel"], .cf-form select, .cf-form textarea {
    width: 100%; background: #111111; color: #F5F5F5; color-scheme: dark; border: 1px solid #8B8B8B; border-radius: 0; padding: 0.7rem 0.75rem; font-size: 1rem; line-height: 1.4; }
.cf-form textarea { resize: vertical; min-height: 9rem; }
.cf-form ::placeholder { color: #A8A8A8; opacity: 1; }
.cf-form input:focus-visible, .cf-form select:focus-visible, .cf-form textarea:focus-visible, .cf-form button:focus-visible, .cf-page a:focus-visible, .cf-summary:focus-visible {
    outline: 2px solid #5CB3FF; outline-offset: 2px; }
.cf-form [aria-invalid="true"] { border-color: #FF9BA8; }
.cf-error { color: #FF9BA8; font-size: 0.875rem; margin-top: 0.35rem; }
.cf-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.cf-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.cf-radio { display: flex; gap: 0.6rem; align-items: flex-start; border: 1px solid #8B8B8B; padding: 0.7rem 0.85rem; color: #F5F5F5; font-size: 0.9375rem; cursor: pointer; }
.cf-radio:has(input:checked) { border-color: #3399FF; background: rgba(51, 153, 255, 0.1); }
.cf-radio input, .cf-check input { accent-color: #3399FF; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; flex-shrink: 0; }
.cf-radio input:focus-visible, .cf-check input:focus-visible { outline: 2px solid #5CB3FF; outline-offset: 2px; }
.cf-note { background: #2A2410; border-left: 3px solid #E8C468; color: #F5E6B8; font-size: 0.9375rem; padding: 0.6rem 0.85rem; }
.cf-counter { color: #C0C0C0; font-size: 0.8125rem; margin-top: 0.35rem; }
.cf-counter-met { color: #8FD9A8; }
.cf-policy { border-top: 1px solid #2A2A2A; padding-top: 1.25rem; }
.cf-policy p, .cf-ack li, .cf-ack p { color: #E8E8E8; font-size: 0.9375rem; line-height: 1.55; }
.cf-policy p { margin-top: 0.6rem; }
.cf-ack { border: 1px solid #2A2A2A; background: #111111; padding: 1rem 1.1rem; margin: 0; min-width: 0; }
.cf-ack legend { font-family: 'Oswald', 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; color: #F5F5F5; padding: 0 0.4rem; margin-bottom: 0; }
.cf-ack ul { list-style: disc; padding-left: 1.1rem; margin: 0.4rem 0 0.9rem; }
.cf-check { display: flex; gap: 0.6rem; align-items: flex-start; color: #F5F5F5; font-size: 0.9375rem; font-weight: 500; cursor: pointer; }
.cf-submit { display: flex; flex-direction: column; gap: 0.5rem; }
.cf-summary { background: #1A1A1A; border: 1px solid #FF9BA8; padding: 1rem 1.1rem; color: #F5F5F5; font-size: 0.9375rem; }
.cf-summary ul { list-style: disc; padding-left: 1.1rem; margin-top: 0.4rem; }
.cf-summary a { color: #FF9BA8; text-decoration: underline; }
.cf-success { background: #1A1A1A; border: 1px solid #3399FF; padding: 1.25rem; }
.cf-success p { color: #F5F5F5; font-size: 0.9375rem; margin-top: 0.4rem; }
.cf-success .cf-success-title { color: #5CB3FF; margin-top: 0; font-family: 'Oswald', 'Montserrat', sans-serif; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* The two paths. No :has support means both sets show, and the server still checks the chosen path. */
#contact-form:has(#path-sale:checked) .cf-service-only { display: none; }
#contact-form:has(#path-service:checked) .cf-sale-only { display: none; }
#contact-form:not(:has(#vehicle_model option[data-referral]:checked)) .cf-referred { display: none; }
#contact-form:not(:has(#vehicle_make option[value="Other"]:checked)) .cf-make-other { display: none; }
#contact-form:has(#vehicle_make option[value="Other"]:checked) .cf-model-wrap { display: none; }

@media (min-width: 640px) {
    .cf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-card { padding: 2rem; }
    .cf-hero h1 { font-size: 2.75rem; }
    .cf-hero { padding-top: 7.25rem; }
}
@media (min-width: 1024px) {
    .cf-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 2.5rem 3rem; align-items: start; }
    .cf-main { grid-column: 1; grid-row: 1 / span 2; }
    .cf-vehicles { grid-column: 2; grid-row: 1; }
    .cf-aside { grid-column: 2; grid-row: 2; }
}
.sr-only-cf { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }