/* KLEER 0.1.0. Opt-in helpers; Divi presets remain the primary design controls.
 * Do not apply these classes to the OS app or the project-enquiry plugin output.
 * Neutral supporting colors are provisional. The approved dark value is #0e0e14.
 * Font family names are references, not included or downloaded font files.
 */
:root {
  --kleer-site-dark: #0e0e14;
  --kleer-site-light: #ffffff;
  --kleer-site-soft: #f4f4f6;
  --kleer-site-muted: #61616b;
  --kleer-site-line: #dcdce2;
  --kleer-site-body-font: "Montreal", Arial, sans-serif;
  --kleer-site-heading-font: "Montreal", Arial, sans-serif;
  --kleer-site-radius: 12px;
  --kleer-site-button-radius: 8px;
  --kleer-site-content-width: 1320px;
}

/* Low specificity allows native Divi module settings/presets to override these. */
:where(.kleer-surface-dark) {
  background-color: var(--kleer-site-dark);
  color: var(--kleer-site-light);
}
:where(.kleer-surface-light) {
  background-color: var(--kleer-site-light);
  color: var(--kleer-site-dark);
}
:where(.kleer-surface-soft) {
  background-color: var(--kleer-site-soft);
  color: var(--kleer-site-dark);
}
:where(.kleer-copy, .kleer-copy p, .kleer-copy li) {
  font-family: var(--kleer-site-body-font);
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
}
:where(.kleer-heading, .kleer-heading h1, .kleer-heading h2, .kleer-heading h3) {
  font-family: var(--kleer-site-heading-font);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}
:where(.kleer-media img) { border-radius: var(--kleer-site-radius); }
:where(.kleer-section) { scroll-margin-top: 100px; }
:where(.kleer-primary, .kleer-primary .et_pb_button) {
  border-radius: var(--kleer-site-button-radius);
  min-height: 48px;
}
:where(.kleer-surface-dark, .kleer-surface-light, .kleer-surface-soft) :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
/* This does not create navigation. Assign to the native Divi mobile-nav row. */
:where(.kleer-mobile-nav) { display: none; }
@media (max-width: 767px) {
  :where(.kleer-mobile-nav) {
    display: flex;
    position: fixed;
    inset: auto 0 0;
    z-index: 100;
    width: 100%;
    margin: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--kleer-site-dark);
    color: var(--kleer-site-light);
    gap: 8px;
    justify-content: space-around;
  }
  :where(.kleer-mobile-nav a) {
    color: inherit;
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  /* Assign to footer section only when mobile navigation is actually present. */
  :where(.kleer-bottom-clearance) {
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }
}