@media screen {
  /* IE7 needs !important */

  body  {
    background-color:#f8faf9 !important;
  }

  
/* =========================================================
   Wauwatosa Lutheran School — Finalsite Enrollment CSS (v8)
   - WLS branding (green #005133, champagne #dfcba6, accent #0082c8)
   - No injected hero band (you manage hero placement)
   - Full-width hero helpers (if your hero uses common classes)
   - Buttons: color-only overrides (keep platform sizing/typography)
   - Login logo override (replaces theme-injected logo on sign-in page)
   ========================================================= */

/* ---------- Base ---------- */
body {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  margin: 0 auto;
  padding: 0;
  color: #2d3a35 !important;      /* body text */
  background-color: #fff !important;
  background-image: none !important; /* ensure no leftover bg from older versions */
}

#content-body {
  border-top: 0;
  padding: 25px;
  margin: auto;
  position: relative;
  z-index: 0;
  max-width: 65rem;
  background-color: #fff !important;
}

/* ---------- Headings ---------- */
h1 {
  font-family: "Gotham Condensed","Barlow Condensed","Oswald","Arial Narrow",Arial, Helvetica, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #0e1b16 !important;
  padding: 15px 25px;
  margin: 0 -25px;
  border-bottom: 2px solid #005133; /* WLS green */
}
h2, .sa-form-field[data-flavor='section'], .sa-form-field[data-flavor='subsection'] {
  font-family: "Gotham Condensed","Barlow Condensed","Oswald","Arial Narrow",Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff !important;
  background-color: #005133 !important;
  margin: 0 -25px 15px !important;
  padding: 10px 25px !important;
}
h3, .sa-form-title, .sa-form-nav-page-name {
  font-family: "Gotham Condensed","Barlow Condensed","Oswald","Arial Narrow",Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #0e1b16 !important;
}
.form-text { color: #2d3a35 !important; }

/* ---------- Links ---------- */
a {
  color: #005133 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
a:hover, a:focus { text-decoration: none !important; }

/* ---------- Header ---------- */
header {
  max-width: 65rem;
  margin: auto;
  background-color: transparent;
  border-bottom: 10px solid #005133;
}
.sign-in header { border-bottom: 0 !important; }
.header-image img { max-width: 500px; margin: 20px auto; }

/* ---------- Login options / preview / misc accents ---------- */
.sign-in .login-options .login-option-separator span,
.create-account .login-options .login-option-separator span,
.forgot-password .login-options .login-option-separator span,
.admin-login .login-options .login-option-separator span {
  background-color: #2d3a35 !important;
  color: #fff !important;
}
.header-actions li.active a { color: #0e1b16 !important; }
.header-actions li.active { border-bottom: 3px solid #005133 !important; }

.sa-form-preview {
  margin: 0 -25px 20px -25px !important;
  background: #dfcba6;  /* champagne */
  color: #000;
}

.upload-details.helper-text { color: #0082c8; }
.sa-form-nav-pages-current i.fa-circle { color: #dfcba6 !important; }
.sa-form-nav-pages .sa-form-nav-pages-current .sa-form-nav-pages-current-number { color: #000; }
a i.fa.fa-circle, .sa-form-nav-pages { color: #2d3a35 !important; }

.label-required:after, .teacher-rec-modal-required-label:after,
.sa-form-required-label:after, .label-required-prepend:before,
.sa-form-required-label-prepend:before { color: #0082c8; }

/* ---------- Inputs / Forms ---------- */
input[type="radio"], input[type="checkbox"] { accent-color: #005133 !important; }
.form-check-input:checked { background-color: #005133 !important; border-color: #005133 !important; }

.form-select, .sa-form-field-group-body select, .cta-widget-large, .Select-control,
.form-control, .sa-form-field-group-body input[type=text], .sa-form-field-group-body textarea,
select#form_preview_page_select { border-color: #ced4da !important; }

.form-select:focus, .sa-form-field-group-body select:focus, .form-control:focus,
.sa-form-field-group-body input[type=text]:focus, .sa-form-field-group-body textarea:focus {
  border-color: #0082c8 !important;
  box-shadow: 0 0 0 0.25rem rgba(0,130,200,0.15) !important;
}

/* ---------- Checklist / Progress / Alerts ---------- */
.checklist-item { border-color: #e6ebe8 !important; }
.checklist-item-status > i, .checklist-item-box > i { color: #0082c8; }

.bg-success, .file-upload-progress-bar { background-color: #005133 !important; }
.progress, .file-upload-progress {
  background-color: #fff !important;
  border: 1px solid #005133 !important;
}

.alert-warning {
  background-color: #dfcba6 !important;
  color: #0e1b16 !important;
  border-color: #0e1b16 !important;
}
.calendar h2 { background-color: #fff !important; color: #0e1b16 !important; }

.fc-unthemed td.fc-today { background: #dfcba6; }
td.fc-today span.fc-day-number { color: #000; }
.fc-other-month { color: #2d3a35 !important; opacity: 0.8 !important; }
.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody,
.fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content,
.fc-unthemed .fc-popover, .fc-unthemed .fc-list-view,
.fc-unthemed .fc-list-heading td { border-color: #e6ebe8 !important; }

/* ---------- Buttons (colors only; keep platform sizing/weights) ---------- */
button,
input[type="submit"],
.btn,
.btn-primary,
.btn-success,
.btn-secondary,
a.btn,
.cta-widget a.btn {
  background-color: #005133 !important;
  border-color: #005133 !important;
  color: #ffffff !important;
}
button:hover,
input[type="submit"]:hover,
.btn:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-secondary:hover,
a.btn:hover {
  background-color: #003a24 !important;
  border-color: #003a24 !important;
  color: #ffffff !important;
}
button:disabled,
input[type="submit"]:disabled,
.btn:disabled {
  background-color: #005133 !important;
  border-color: #005133 !important;
  color: #ffffff !important;
  opacity: 0.5 !important;
}

/* ---------- Footer ---------- */
footer {
  max-width: 65rem;
  color: #2d3a35 !important;
  background-color: #fff;
  border-top: 0 !important;
  margin: auto !important;
}
footer a { color: #005133 !important; text-decoration: underline !important; }
footer a:hover, footer a:focus { color: #003a24; text-decoration: none !important; }
footer .footer-container .footer-rights { color: #2d3a35 !important; }

/* =========================================================
   HERO HELPERS (no injection; just prevent accidental shrinking)
   ========================================================= */
/* Let hero go full width regardless of container caps */
header,
.site-header,
.page-header {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-bottom-width: 0; /* optional */
}

/* If your hero is an <img> */
.header-image img,
.hero img,
.banner img,
.login-hero img,
#hero img {
  max-width: none !important;  /* remove 500px cap */
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* If your hero is a background-image on a div */
.header-image,
.hero,
.banner,
.login-hero,
#hero {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 100% !important;
  min-height: 220px; /* adjust as needed */
}

/* Allow wide content on login pages if needed */
body[class*="sign"] #content-body,
body.users-sessions-new #content-body {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   LOGIN PAGE — Logo override only (no hero)
   ========================================================= */
html:has(body form[action$="/users/sign_in"]) :is(.logo img, .site-logo img, .navbar-brand img, .brand img, .header-logo img, .fs-login .logo img) {
  content: url("https://s3.us-east-1.amazonaws.com/sa-assets-production/file_resources/0cd6aafc-761c-11f0-9edf-fe4090a80e74/6843315c-829d-11f0-8630-1ed0b2454ae8.png?1756227300") !important;
  height: 56px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
html:has(body form[action$="/users/sign_in"]) :is(.logo, .site-logo, .navbar-brand, .brand, .header-logo, .fs-login .logo) {
  background: none !important;
}
html:has(body form[action$="/users/sign_in"]) :is(.logo svg, .site-logo svg, .navbar-brand svg, .brand svg) {
  display: none !important;
}

/* Fallback logo override for older tenants */
body.users-sessions-new :is(.logo img, .site-logo img, .navbar-brand img, .brand img, .header-logo img, .fs-login .logo img) {
  content: url("https://s3.us-east-1.amazonaws.com/sa-assets-production/file_resources/0cd6aafc-761c-11f0-9edf-fe4090a80e74/6843315c-829d-11f0-8630-1ed0b2454ae8.png?1756227300") !important;
  height: 56px !important;
}

/* =========================================================
   (Optional) Temporary load badge — uncomment to debug
   ========================================================= */
/*
body::after {
  content: "WLS CSS v8 active";
  position: fixed; bottom: 6px; right: 6px;
  font: 12px/1.2 system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  background: #dfcba6; color: #005133;
  padding: 3px 6px; border-radius: 6px;
  z-index: 999999; opacity: .9;
}
*/


  h1,
  h2,
  h3,
  .sa-form-title,
  .sa-form-nav-page-name,
  .sa-form-nav-pages-current i.fa-circle,
  .sa-form-field[data-flavor='section'],
  .sa-form-field[data-flavor='subsection']
  {
    color: #005133;
  }

  section h2:first-of-type {
    border-bottom-color: #005133;
  }

  #content-body {
    border-top-color: #005133
  }

  .notification-alert {
    background-color: rgba(0, 81, 51, 0.1);
  }

  .notification-alert .notification-icon > i {
    color: #005133;
  }

  .summary-communication > .notification-icon > .fa-bullhorn {
    color: #005133;
  }

  li.page-item.active > a.page-link {
    background-color: #005133
  }

  ul.header-actions > li > a > .header-action-label {
    color: #005133
  }

  .student-summary-action-link {
    color: #005133
  }

  button.btn-primary {
    background-color: #005133
  }

  .ap-installment-list.table {
    .ap-installment-contact-highlight {
      background-color: #005133
    }
  }
}