/* ep-design.css: DESKTOP parity layer for Eco Projects on Divi (Stage 3 starting point; Stage 4 owns the designed phone and tablet layouts).
   Each rule undoes something Divi adds that live iLaunch CSS never had. Adapted from kit/ilaunch-divi-parity.template.css (generic sections only). */
/* 1. Live CSS assumes the browser default content-box; Divi sets * {box-sizing:border-box}. Divi's contact-form module keeps border-box. */
body.ep-site #page-container, body.ep-site #page-container *, body.ep-site #page-container *::before, body.ep-site #page-container *::after { box-sizing: content-box; }
body.ep-site #page-container .et_pb_contact_form_container, body.ep-site #page-container .et_pb_contact_form_container * { box-sizing: border-box; }
body.ep-site #page-container select, body.ep-site #page-container button, body.ep-site #page-container input[type=submit], body.ep-site #page-container input[type=button] { box-sizing: border-box; }
/* 3. browser-default spacing the live CSS relies on */
body.ep-site :where(.et-l, #main-content) p { padding-bottom: 0; margin-bottom: 1em; }
body.ep-site :where(.et-l, #main-content) ul, body.ep-site :where(.et-l, #main-content) ol { padding: 0 0 0 40px; margin: 1em 0; line-height: inherit; }
/* 4. Divi pads "#main-content .container" 58px at the top */
html body.ep-site #main-content .container { padding-top: 0; }
/* 7. Divi's content-table look is not on live */
body.ep-site :where(.et-l, #main-content) table:not(.variations) { border: 0; margin: 0; width: auto; text-align: start; }
body.ep-site :where(.et-l, #main-content) table[width="100%"]:not(.variations) { width: 100%; }
body.ep-site :where(.et-l, #main-content) tr td, body.ep-site :where(.et-l, #main-content) tr th { border-top: 0; padding: 1px; }
body.ep-site :where(.et-l, #main-content) table[cellpadding="0"] tr td, body.ep-site :where(.et-l, #main-content) table[cellpadding="0"] tr th { padding: 0; }
/* 8. Divi draws a 5px rule down the left of every blockquote; live has none */
body.ep-site :where(.et-l, #main-content) blockquote { border-left: 0; }
/* 10. font smoothing: live uses the browser default */
body.ep-site { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
/* 11. Divi's sidebar rule */
body.ep-site #main-content .container::before { display: none; }
/* 15. nested lists */
body.ep-site :where(.et-l, #main-content) :is(ul, ol) :is(ul, ol) { margin-top: 0; margin-bottom: 0; }
body.ep-site :where(.et-l, #main-content) ul ul { list-style-type: circle; }
body.ep-site :where(.et-l, #main-content) ul ul ul { list-style-type: square; }
/* the Divi form thank-you line spans the column once the form is gone */
body.ep-site #page-container .ep-contact-form:not(:has(form)) { width: auto; max-width: none; }
/* 2. Divi pads every heading 10px at the bottom and sets its own line-height; live headings carry their own (browser default padding 0) */
body.ep-site :where(.et-l, #main-content) :is(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; }
/* Divi sets img { max-width: 100%; height: auto }; live sets neither (the project thumbnail tables shrank beside the floated main image) */
body.ep-site #page-container img { max-width: none; }
/* Divi sets body font-weight 500 and heading weight 500; live inherits the browser defaults (400 body, bold headings): Lato 500 is wider and rewraps lines */
body.ep-site, body.ep-site #page-container { font-weight: 400; }
body.ep-site :where(.et-l, #main-content) :is(h1, h2, h3, h4, h5, h6) { font-weight: 700; }

/* ===== Stage 4 desktop ===== */
/* A floated live list (site map buttons) overflows its box on live and nothing contains it; Divi's float:left column and the row clearfix wrapped it and added 6px */
body.ep-site :is(.ils-page-section, .ils-tb-section) .et_pb_row::before, body.ep-site :is(.ils-page-section, .ils-tb-section) .et_pb_row::after { display: none; }
body.ep-site :is(.ils-page-section, .ils-tb-section) .et_pb_column { float: none; }

/* Contact (ep-contact-form) and testimonial (ep-testimonial-form) forms: Divi's contact module dressed as live's two-column table.form (1250 and up; below it ep-mobile.css owns the look).
   Live: th 165 (padding 5 10 5 5, 14px/20px #333), td 445, inputs 416x22 (12px, 3px 5px, 1px #dbdbdb), message box 416x78 in a 94px row, captcha row 77px,
   button 90x30 (13px bold caps, radius 20, #86ae17), gold-green "required" star 16x16 at the right of the cell, "Required fields" note in the button row (contact) or its own row (testimonials). */
@media (min-width: 1250px) {
  body.ep-site #page-container .ep-contact-form.et_pb_contact_form_container { margin: 15px 0; padding: 0; width: 610px; max-width: none; }
  body.ep-site #page-container .ep-contact-form .et-pb-contact-message:empty { display: none; }
  body.ep-site #page-container .ep-contact-form .et_pb_contact { padding: 0; margin: 0; }
  body.ep-site #page-container .ep-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: 165px 445px; grid-template-rows: 32px 32px 32px minmax(94px, auto) 77px 40px; margin: 0; padding: 0; position: relative; }
  body.ep-site #page-container .ep-testimonial-form form.et_pb_contact_form { grid-template-rows: 32px 32px 32px minmax(94px, auto) 77px 40px 31px; }
  body.ep-site #page-container .ep-contact-form form.et_pb_contact_form::before { display: none; }
  body.ep-site #page-container .ep-contact-form p.et_pb_contact_field, body.ep-site #page-container .ep-contact-form .et_contact_bottom_container,
  body.ep-site #page-container .ep-contact-form .et_pb_contact_right { display: contents; }
  body.ep-site #page-container .ep-contact-form .et_pb_contact_form_label { display: block; position: relative; grid-column: 1; margin: 0; padding: 5px 10px 5px 5px; font: 400 14px/20px 'Lato', Arial, Helvetica, sans-serif; color: #333333; text-align: left; }
  body.ep-site #page-container .ep-contact-form p.et_pb_contact_field .input { grid-column: 2; display: block; box-sizing: content-box; width: 404px; max-width: none; height: 14px; min-height: 0; margin: 5px 24px 5px 5px; padding: 3px 5px; border: 1px solid #dbdbdb; border-radius: 0;
    background: #ffffff; font: 400 12px/normal 'Lato', Arial, Helvetica, sans-serif; color: #666666; box-shadow: none; align-self: start; }
  body.ep-site #page-container .ep-contact-form p.et_pb_contact_field textarea.input { box-sizing: border-box; width: 416px; height: calc(5lh + 8px); margin: 5px 24px 11px 5px; resize: both; }
  body.ep-site #page-container .ep-contact-form p.et_pb_contact_field .input::placeholder { color: transparent; }
  body.ep-site #page-container .ep-contact-form .input.et_contact_error { border-color: #e02b20; }
  /* the required star: icon-required.png 16x16, 7px from the top of the cell, at the right of the 445px cell (x 430 within it) */
  body.ep-site #page-container .ep-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { content: ""; position: absolute; left: calc(100% + 430px); top: 7px; width: 16px; height: 16px; background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat 0 0; }
  /* verification: live shows a 50x25 code picture and a 52x22 box with a two-line hint; the maths question takes the picture's place */
  body.ep-site #page-container .ep-contact-form .et_pb_contact_right p.clearfix { grid-column: 2; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; float: none; width: auto; margin: 0; padding: 5px 20px 5px 5px; min-height: 0; position: relative;
    font: 400 14px/25px 'Lato', Arial, Helvetica, sans-serif; color: #979797; }
  body.ep-site #page-container .ep-contact-form .et_pb_contact_right p.clearfix::before { display: none; }
  body.ep-site #page-container .ep-contact-form .et_pb_contact_right p.clearfix::after { content: "To prevent spam, please answer the sum above to verify you are a real person."; display: block; visibility: visible; height: auto; clear: none; flex: 0 0 100%; text-align: left; margin-top: 2px; font: 400 14px/18px 'Lato', Arial, Helvetica, sans-serif; color: #979797; }
  body.ep-site #page-container .ep-contact-form .et_pb_contact_captcha_question { font: inherit; color: inherit; padding: 0 4px 0 0; }
  body.ep-site #page-container .ep-contact-form input.et_pb_contact_captcha { display: inline-block; box-sizing: content-box; width: 40px; max-width: none; height: 14px; margin: 2px 0 0 10px; padding: 3px 5px; border: 1px solid #dbdbdb; border-radius: 0; background: #ffffff; font: 400 12px/normal 'Lato', Arial, Helvetica, sans-serif; color: #666666; box-shadow: none; }
  body.ep-site #page-container .ep-contact-form input.et_pb_contact_captcha.et_contact_error { border-color: #e02b20; }
  body.ep-site #page-container .ep-testimonial-form .et_pb_contact_right p.clearfix::before { content: ""; display: block; position: absolute; left: 425px; top: 7px; width: 16px; height: 16px; background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat 0 0; }
  /* submit: live input.button */
  body.ep-site #page-container .et_pb_section .ep-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { grid-column: 2; grid-row: 6; justify-self: start; align-self: start; display: inline-block; box-sizing: content-box; width: auto; height: 20px; margin: 5px 0 5px 5px !important; padding: 5px 20px !important;
    border: 0 !important; border-radius: 20px !important; background: #86ae17 !important; color: #ffffff !important; font: 700 13px/20px 'Lato', Arial, Helvetica, sans-serif !important; letter-spacing: normal; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: none; }
  body.ep-site #page-container .et_pb_section .ep-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:hover { background: #698e10 !important; color: #ffffff !important; padding: 5px 20px !important; }
  body.ep-site #page-container .et_pb_section .ep-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button::after { display: none !important; }
  /* "Required fields" (11px, #979797, star after it): in the button's row on the contact form, its own right-aligned row on the testimonial form */
  body.ep-site #page-container .ep-contact-form form.et_pb_contact_form::after { content: "Required fields"; clear: none; display: block; visibility: visible; height: auto; grid-column: 2; grid-row: 6; justify-self: end; align-self: start; box-sizing: content-box; width: auto; margin: 5px 0 0 0; padding: 0 21px 0 0; background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat right 2px; font: 400 11px/22px 'Lato', Arial, Helvetica, sans-serif; color: #979797; }
  body.ep-site #page-container .ep-testimonial-form form.et_pb_contact_form::after { grid-row: 7; margin: 0; padding-right: 21px; background-position: right 7px; font-size: 11px; line-height: 21px; padding-top: 5px; }
}

/* fancybox's shadow pieces are appended to <body>, outside #page-container: the port scoped their base rule under #page-container, so it never matched (frame edges drew as a striped border) */
body.ep-site .fancy-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; }