/* mfa-core brand-page.css — shared styling for [mfa_about_page] and
   [mfa_contact_page] (/about-us/ and /contact-us/). Plain HTML, no
   Kadence blocks. Reuses .mfa-tool-page-header from tool-page.css (both
   files are always enqueued together on these pages). */

.mfa-brand-page { font-family: var(--mfa-font, "Lato", sans-serif); max-width: 900px; margin: 0 auto; }
.mfa-brand-page-body { padding: 0 20px 140px; }
@media (min-width: 783px) {
  .mfa-brand-page-body { padding: 0 24px 72px; }
}

/* ---------- About: intro ---------- */
.mfa-about-intro { text-align: center; }
.mfa-about-logo {
  max-width: 220px;
  height: auto;
  margin: 0 auto 28px;
  display: block;
}
.mfa-about-body {
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
}
.mfa-about-body p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #3d4a45;
  margin: 0 0 14px;
}
.mfa-about-body strong { color: var(--mfa-ink); }

.mfa-about-partner-strip {
  max-width: 100%;
  height: auto;
  margin: 32px auto 0;
  display: block;
}

/* ---------- About: recognition ---------- */
.mfa-about-recognition {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 700px) {
  .mfa-about-recognition { grid-template-columns: 1fr; }
}
.mfa-recognition-block {
  background: var(--mfa-white);
  border: 1px solid var(--mfa-border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}
.mfa-recognition-block h2 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--mfa-ink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 18px;
}
.mfa-recognition-block img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.mfa-award-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* ---------- Contact: info card ---------- */
.mfa-contact-info { text-align: center; margin-bottom: 40px; }
.mfa-contact-info .mfa-about-logo { max-width: 180px; margin-bottom: 20px; }
.mfa-contact-info h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--mfa-ink);
  margin: 0 0 6px;
}
.mfa-contact-regno {
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  color: #56655f;
  margin: 0 0 10px;
}
.mfa-contact-address {
  font-size: 15px;
  color: #3d4a45;
  margin: 0;
}

/* ---------- Contact: form + map ---------- */
.mfa-contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 820px) {
  .mfa-contact-grid { grid-template-columns: 1fr; }
}

.mfa-contact-form-col {
  background: var(--mfa-white);
  border: 1px solid var(--mfa-border);
  border-radius: 18px;
  padding: 28px;
}
/* Mobile: this card's own 28px padding stacks on top of
   .mfa-brand-page-body's 20px, squeezing form fields into ~230px of
   usable width on a 375px screen. Trim the card's own padding here -
   the body padding + this smaller inset still reads as a clear gutter
   without cramping the inputs. */
@media (max-width: 782px) {
  .mfa-contact-form-col {
    padding: 16px;
  }
}
/* [mfa_contact_form] field styling - same class names as the reusable
   business/website update-form fields (member-account-modals-v1.css's
   original set), duplicated locally rather than enqueuing that stylesheet.
   No collision risk here (unlike the directory singles): this page never
   loads modal-v1.css, so there's no competing .mfa-modal-overlay/
   .mfa-modal-close definition to clash with. */
.mfa-contact-form-col .mfa-modal-form {
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-4, 16px);
}
.mfa-contact-form-col .mfa-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mfa-contact-form-col .mfa-form-group label {
  font-size: 13px;
  font-weight: 700;
  color: var(--mfa-muted, #56655f);
}
.mfa-contact-form-col .mfa-form-group input,
.mfa-contact-form-col .mfa-form-group textarea {
  border: 1px solid var(--mfa-border, #d7e4e1);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--mfa-ink, #12181f);
  font-family: inherit;
  background: var(--mfa-white, #ffffff);
}
.mfa-contact-form-col .mfa-form-group textarea { resize: vertical; }
.mfa-contact-form-col .mfa-form-group input:focus,
.mfa-contact-form-col .mfa-form-group textarea:focus {
  outline: 2px solid var(--mfa-teal, #0d8f83);
  outline-offset: 1px;
}
.mfa-contact-form-col .cf-turnstile { margin: 4px 0; }
/* #25988b was 3.53:1 against the button's white text - fails 4.5:1.
   var(--mfa-teal-dark) clears it (~4.96:1). */
.mfa-contact-form-col button[type="submit"] {
  background: var(--mfa-teal-dark) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  width: 100%;
}
.mfa-contact-form-col button[type="submit"]:hover {
  filter: brightness(0.92);
}
.mfa-contact-form-col .mfa-modal-message {
  margin: 0;
  font-size: 13px;
  min-height: 18px;
  color: #b3261e;
}
.mfa-contact-form-col .mfa-modal-message.is-success {
  color: var(--mfa-teal-dark, #0d4d47);
  font-size: 15px;
  text-align: center;
  padding: 20px 0;
}

.mfa-contact-map-col iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 1px solid var(--mfa-border);
  border-radius: 18px;
  display: block;
}