/*
Mission College Preparatory Catholic High School
Bloomerang Hosted Donation — Legacy Form CSS v3
Refinements based on live-page screenshots.

Brand:
Mission Blue   #1D3B6C
Royal Gold     #C9A977
Cloudy Gray    #9A9C9F
Stucco White   #F4F2EF
*/

@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:wght@400;700&family=Merriweather+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --mcp-blue: #1D3B6C;
  --mcp-gold: #C9A977;
  --mcp-gray: #9A9C9F;
  --mcp-stucco: #F4F2EF;
  --mcp-white: #FFFFFF;
  --mcp-text: #26384F;
  --mcp-border: #D6DADF;
}

/* ---------- PAGE ---------- */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--mcp-stucco) !important;
  color: var(--mcp-text) !important;
  font-family: "Merriweather Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

body {
  max-width: 980px !important;
  margin: 32px auto !important;
  padding: 28px 48px 48px !important;
  box-sizing: border-box !important;
  background: var(--mcp-white) !important;
  border-top: 6px solid var(--mcp-gold) !important;
  box-shadow: 0 2px 16px rgba(29, 59, 108, 0.08) !important;
}

/* Keep images responsive; preserve MCP logo proportions */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* Tighten likely logo/header spacing without distorting logo */
body > img:first-of-type,
body > div:first-child img:first-of-type {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* ---------- TYPOGRAPHY ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inria Serif", Georgia, "Times New Roman", serif !important;
  color: var(--mcp-blue) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

h1 {
  font-size: 2rem !important;
  margin: 16px 0 24px !important;
}

/* Major section headings */
h2 {
  font-size: 1.55rem !important;
  margin: 30px 0 18px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--mcp-gold) !important;
}

/*
Legacy form appears to use H3 for sections like Donation,
Contact Information, Payment Information, and Questions.
Give these a consistent subtle gold rule.
*/
h3 {
  font-size: 1.32rem !important;
  margin: 28px 0 18px !important;
  padding-bottom: 7px !important;
  border-bottom: 1px solid var(--mcp-gold) !important;
}

p,
span,
div,
td,
th,
li {
  font-family: "Merriweather Sans", Arial, sans-serif;
}

a {
  color: var(--mcp-blue) !important;
  font-weight: 600 !important;
  text-decoration-color: var(--mcp-gold) !important;
}

a:hover,
a:focus {
  color: #132B52 !important;
}

/* ---------- LABELS ---------- */

label {
  display: block;
  color: var(--mcp-blue) !important;
  font-family: "Merriweather Sans", Arial, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  margin: 13px 0 5px !important;
}

/* Secondary choice labels should not compete with field labels */
input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline !important;
  color: var(--mcp-text) !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* Also soften text immediately following checkbox/radio controls */
input[type="checkbox"] ~ span,
input[type="radio"] ~ span {
  font-weight: 400 !important;
  color: var(--mcp-text) !important;
}

/* ---------- INPUTS ---------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input:not([type]),
select,
textarea {
  width: 100% !important;
  max-width: 540px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  border: 1px solid var(--mcp-gray) !important;
  border-radius: 4px !important;
  background: var(--mcp-white) !important;
  color: var(--mcp-text) !important;
  font-family: "Merriweather Sans", Arial, sans-serif !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}

textarea {
  min-height: 82px !important;
  resize: vertical !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--mcp-blue) !important;
  box-shadow: 0 0 0 3px rgba(29, 59, 108, 0.12) !important;
}

/* ---------- CHECKBOXES / RADIOS ---------- */

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--mcp-blue) !important;
  width: 18px !important;
  height: 18px !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

/* ---------- BUTTONS ---------- */

button,
input[type="submit"],
input[type="button"] {
  min-height: 48px !important;
  padding: 12px 28px !important;
  border: 2px solid var(--mcp-blue) !important;
  border-radius: 4px !important;
  background: var(--mcp-blue) !important;
  color: var(--mcp-white) !important;
  font-family: "Merriweather Sans", Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus {
  background: #132B52 !important;
  border-color: #132B52 !important;
}

/* ---------- TABLES / FIELD GROUPS ---------- */

table {
  border-collapse: collapse !important;
  max-width: 100% !important;
}

fieldset {
  margin: 26px 0 !important;
  padding: 22px 24px !important;
  border: 1px solid var(--mcp-border) !important;
  border-radius: 5px !important;
}

legend {
  padding: 0 8px !important;
  color: var(--mcp-blue) !important;
  font-family: "Inria Serif", Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}

hr {
  border: 0 !important;
  border-top: 1px solid var(--mcp-gold) !important;
  margin: 28px 0 !important;
}

/* ---------- HELP / EXPLANATORY TEXT ---------- */

small,
.help-block,
.help-text,
.form-text {
  color: #5B6573 !important;
  font-family: "Merriweather Sans", Arial, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 720px) {
  body {
    width: auto !important;
    margin: 0 !important;
    padding: 22px 20px 36px !important;
    border-top-width: 5px !important;
    box-shadow: none !important;
  }

  h1 {
    font-size: 1.75rem !important;
  }

  h2,
  h3 {
    font-size: 1.3rem !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input:not([type]),
  select,
  textarea {
    max-width: 100% !important;
  }

  button,
  input[type="submit"],
  input[type="button"] {
    width: 100% !important;
  }
}