/* Contact Us page (templates/contact.html). Scoped to .contact-*; colours follow design.md */

.contact-page { color: #333; }

.contact-hero { background: #FFF8DC; border-bottom: 1px solid #f5e7a3; padding: 56px 0 48px; }
.contact-hero h1 { color: #511616; font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: .75rem; }
.contact-hero p { max-width: 620px; margin: 0; font-size: 1.05rem; color: #333; }

.contact-main { padding: 56px 0 72px; }
.contact-main h2 { color: #511616; font-weight: 700; font-size: 1.35rem; margin-bottom: 1.25rem; }

.contact-card, .contact-info {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 1.75rem;
}
.contact-info { background: #FFFDF3; border-color: #f5e7a3; }

.contact-info ul { margin: 0 0 1.25rem; }
.contact-info li { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid #f1e8b8; }
.contact-info li:last-child { border-bottom: 0; }
.contact-info-icon {
    flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 50%; background: #FACC15; color: #0a0a0a; font-size: 1rem;
}
.contact-info-label { display: block; font-size: .8rem; color: #6b7280; }
.contact-info a { color: #0a0a0a; font-weight: 600; text-decoration: none; word-break: break-word; }
.contact-info a:hover { text-decoration: underline; }
.contact-info-note { margin: 0; font-size: .92rem; color: #4b5563; }
.contact-info-note a { color: #511616; text-decoration: underline; font-weight: 500; }

.contact-card .form-label { font-weight: 500; font-size: .9rem; margin-bottom: .3rem; color: #333; }
.contact-card .form-control { min-height: 46px; border-radius: 10px; border: 1px solid #ced4da; font-size: 16px; }
.contact-card textarea.form-control { min-height: 140px; }
.contact-card .form-control:focus { border-color: #FACC15; box-shadow: 0 0 0 .2rem rgba(250, 204, 21, .35); }
.contact-req { color: #dc2626; }
.contact-error { color: #b91c1c; font-size: .85rem; margin-top: .3rem; }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* primary button: brand yellow, near-black text, #E6B800 hover (design.md) */
.contact-submit {
    background: #FACC15; color: #0a0a0a; border: 0; font-weight: 600;
    border-radius: 999px; padding: .7rem 2rem; transition: background-color .2s;
}
.contact-submit:hover, .contact-submit:focus { background: #E6B800; color: #0a0a0a; }
.contact-submit:disabled { opacity: .7; cursor: not-allowed; }
.contact-submit:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; box-shadow: none; }

@media (max-width: 575.98px) {
    .contact-hero { padding: 40px 0 32px; }
    .contact-main { padding: 36px 0 52px; }
    .contact-card, .contact-info { padding: 1.25rem; }
    .contact-submit { width: 100%; }
}