/* ==========================================================================
   Ontario Fire Academy (OFA)
   Custom stylesheet for the CampusLogin "Request Information" form
   Target page: form1.campuslogin.com/.../RequestInformation.campuslogin

   Matches the visual style of the "Get the Details!" form on the OFA
   homepage (ontariofireacademy.com), which is built with these tokens:
     - Black:        #00000  (headings, button text, nav)
     - Red:      #B01919  (banner background, CTA button)
     - Panel grey:  #EFEFEF  (form background)
     - Border grey: #CED4DA  (input borders)
     - Label grey:  #4D4C4C  (field labels)
     - Font stack:  system UI stack used sitewide

   Paste this into the CampusLogin form's custom CSS field.
   ========================================================================== */

:root {
  --ofa-black: #000000;
  --ofa-red: #B01919;
  --ofa-red-dark: #711111;
  --ofa-bg: #efefef;
  --ofa-white: #fcfdfd;
  --ofa-border: #ced4da;
  --ofa-label: #4d4c4c;
  --ofa-input-text: #495057;
  --ofa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

body {
  font-family: var(--ofa-font);
}

/* Card wrapper around the whole form -------------------------------------- */
.clf-form {
  background-color: var(--ofa-bg);
  font-family: var(--ofa-font);
  max-width: 600px;
  margin: 0 auto;
  border-radius: 0 0 6px 6px;
  padding: 20px 20px 5px 20px;
}

/* Optional section heading / sub-heading, styled as the orange banner ----
   These classes only render if a heading is configured in the form admin,
   but are styled here so the banner appears automatically if you add one. */
.clf-d-section-heading {
  position: relative;
  display: block;
  background-color: var(--ofa-red);
  color: var(--ofa-black);
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  padding: 20px 16px 30px;
  margin: -20px -20px 28px;
  border-radius: 0;
}

.clf-d-section-heading::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -22px;
  height: 44px;
  background-color: var(--ofa-bg);
  border-radius: 50%;
}

.clf-d-section-sub-heading {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  color: var(--ofa-black);
  font-size: 14px;
  font-weight: 500;
  margin-top: -14px;
  margin-bottom: 16px;
}

/* Field groups -------------------------------------------------------------- */
.clf-d-fieldset {
  margin-bottom: 16px;
}

.clf-d-label {
  display: block;
  color: var(--ofa-label);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}

.clf-d-requiredmark {
  color: var(--ofa-red-dark);
  margin-left: 2px;
}

/* Inputs, selects, textareas ------------------------------------------------ */
.clf-d-control input[type="text"],
.clf-d-control input[type="email"],
.clf-d-control input[type="tel"],
.clf-d-control input:not([type]),
.clf-d-control select,
.clf-d-control textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--ofa-font);
  font-size: 15px;
  color: var(--ofa-input-text);
  background-color: #ffffff;
  border: 1px solid var(--ofa-border);
  border-radius: 4px;
  padding: 9px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.clf-d-control input:focus,
.clf-d-control select:focus,
.clf-d-control textarea:focus {
  outline: none;
  border-color: var(--ofa-red);
  box-shadow: 0 0 0 3px rgba(245, 130, 56, 0.18);
}

/* Three-part fields, e.g. phone number split into parts --------------------- */
.clf-form-input-3parts-30-30-40 {
  display: flex;
  gap: 10px;
}

.clf-form-input-3parts-30-30-40 input {
  width: 100%;
}

/* Checkbox / radio row (e.g. consent, yes/no groups) ------------------------ */
.clf-form-crbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--ofa-label);
}

.clf-form-crbox input[type="checkbox"],
.clf-form-crbox input[type="radio"] {
  accent-color: var(--ofa-red);
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* Consent / disclaimer text -------------------------------------------------- */
.clf-text-italic.clf-padding-small {
  display: block;
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: #ebebeb;
  margin: 0px;
}

/* Submit Container -------------------------------------------------------------- */
#SubmitContainer {
  padding: 10px 20px;
}

/* Submit button -------------------------------------------------------------- */
#Submit.clf-d-submitbutton,
.clf-d-submitbutton {
  display: block;
  width: 100%;
  background-color: var(--ofa-red);
  color: var(--ofa-white);
  font-family: var(--ofa-font);
  font-size: 17px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#Submit.clf-d-submitbutton:hover,
.clf-d-submitbutton:hover {
  background-color: var(--ofa-red-dark);
}

#Submit.clf-d-submitbutton:focus,
.clf-d-submitbutton:focus {
  outline: 2px solid var(--ofa-black);
  outline-offset: 2px;
}

/* Small screens -------------------------------------------------------------- */
@media (max-width: 480px) {
  .clf-form {
    border-radius: 0;
    padding: 16px 14px 20px;
  }

  .clf-form-input-3parts-30-30-40 {
    flex-wrap: wrap;
  }
}