/* ============================================================
   OLIVEDALE - CSS FOR THE EMAILMEFORM HOSTED FORM PAGES
   Paste this into the form's Custom CSS box in EmailMeForm
   (Form Builder > Themes / Design > Custom CSS) for BOTH forms:
   the membership application and the contact form.

   It matches olivedale.com: Open Sans, olive green #2F580F,
   white logo band at the top, 48px tall fields for older eyes.
   ============================================================ */

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

body {
  background: #f4f6ef !important;
  color: #1f1f1c !important;
  font-family: "Open Sans", "Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Olivedale logo band on a white background --- */
body::before {
  content: "";
  display: block;
  width: 100%;
  height: 120px;
  background-color: #ffffff;
  background-image: url('https://www.olivedale.com/images/logo-olivedale-group.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 92px;
  border-bottom: 4px solid #2f580f;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  body::before {
    height: 92px;
    background-size: 88% auto;
  }
}

/* --- form card --- */
form,
.emf-form,
#emf-form,
.form-all,
#main_body,
.emf-main-container {
  max-width: 760px !important;
  margin: 0 auto 40px !important;
  background: #ffffff !important;
  border: 1px solid #d5dccb !important;
  border-left: 5px solid #2f580f !important;
  border-radius: 0 !important;
  padding: 28px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* --- headings --- */
h1, h2, h3,
.emf-form-title,
.form-header,
.emf-header {
  font-family: "Open Sans", "Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif !important;
  color: #24440b !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 0 .5em !important;
}

h1, .emf-form-title { font-size: 30px !important; }

/* --- labels --- */
label,
.emf-label,
.form-label,
.emf-field-label {
  font-weight: 600 !important;
  color: #1f1f1c !important;
  font-size: 17px !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* required marker readable, not just colour */
.emf-required,
.form-required,
span.required {
  color: #8a2b00 !important;
  font-weight: 700 !important;
}

/* --- fields: big enough for older eyes and touch --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea,
.emf-input,
.form-textbox,
.form-textarea,
.form-dropdown {
  font-family: inherit !important;
  font-size: 17px !important;
  color: #1f1f1c !important;
  background: #ffffff !important;
  border: 2px solid #9aa48e !important;
  border-radius: 4px !important;
  padding: 12px !important;
  min-height: 48px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

textarea { min-height: 140px !important; }

input:focus,
select:focus,
textarea:focus {
  border-color: #2f580f !important;
  outline: 3px solid #2f580f !important;
  outline-offset: 1px !important;
}

/* checkboxes and radios: bigger targets */
input[type="checkbox"],
input[type="radio"] {
  width: 24px !important;
  height: 24px !important;
  margin-right: 8px !important;
  accent-color: #2f580f !important;
}

/* --- buttons --- */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.emf-button,
.form-submit-button {
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: #2f580f !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 4px !important;
  padding: 14px 26px !important;
  min-height: 52px !important;
  cursor: pointer !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

button:hover,
input[type="submit"]:hover,
.emf-button:hover,
button:focus,
input[type="submit"]:focus,
.emf-button:focus {
  background: #24440b !important;
}

input[type="reset"],
.emf-button-reset {
  background: #ffffff !important;
  color: #24440b !important;
  border: 2px solid #2f580f !important;
}

/* --- links --- */
a { color: #24440b !important; text-decoration: underline !important; }
a:hover, a:focus { color: #0f2a00 !important; }

/* --- validation and help text --- */
.emf-error,
.form-error-message,
.error {
  color: #8a2b00 !important;
  font-weight: 700 !important;
  background: #fdf1ea !important;
  border-left: 4px solid #8a2b00 !important;
  padding: 8px 12px !important;
}

.emf-instruction,
.form-sub-label,
.description {
  color: #55554e !important;
  font-size: 15px !important;
}

/* --- hide the provider's promo footer if the plan allows --- */
.emf-powered-by,
#emf_footer_ads,
.poweredby {
  font-size: 12px !important;
  color: #77776f !important;
}