/* =========================================================================
   BASE — element defaults
   Sets the ground, the type ramp, the measure and the focus ring. Divi styles
   most of this too; these rules exist so anything Divi does not touch (a Code
   module, a plugin's markup, a form field) still lands inside the system.
   ========================================================================= */

/* The cream ground, everywhere. Divi's own body background is overridden in
   30-divi.css; this covers everything else. */
body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Headings ------------------------------------------------------------
   H1 to H5 are Newsreader 600. H6 is Mulish 800 and is a UI heading, not a
   display one: it labels a card or a form group, it does not open a section.
   Divi applies one heading face globally, so H6 needs this explicit override
   on both sides (here and in 30-divi.css) to stay Mulish. */
h1, h2, h3, h4, h5,
.cg-display {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: var(--lh-display);
  color: var(--heading);
}

h1 { font-size: var(--h1); line-height: 1.02; letter-spacing: -.022em; }
h2 { font-size: var(--h2); letter-spacing: -.018em; }
h3 { font-size: var(--h3); letter-spacing: -.014em; }
h4 { font-size: var(--h4); letter-spacing: -.01em; }
h5 { font-size: var(--h5); letter-spacing: -.008em; }

h6 {
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: var(--h6);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--heading);
}

/* An italic display line with descenders clips without this reserve. */
h1 em, h2 em, h3 em,
.cg-display em,
.cg-pull {
  font-style: italic;
  line-height: 1.1;
  padding-bottom: .06em;
}

/* ---- Running text --------------------------------------------------------
   68 characters. Never let body copy run the full width of a 1320 container.
   Applied to bare paragraphs; Divi text modules pick it up via 30-divi.css. */
p { max-width: var(--measure); }

/* A paragraph inside a card or a narrow column is already constrained. */
.cg-card p,
.cg-measure-none p { max-width: none; }

/* ---- Links ---------------------------------------------------------------- */
a {
  color: var(--text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--t-fast) var(--ease);
}

a:hover { color: var(--text-link-hover); }

/* Buttons are deliberately flat throughout the system. This broad safeguard
   covers Divi, WordPress blocks, forms and future native controls so a theme or
   plugin cannot silently reintroduce a drop shadow, glow or text shadow. */
:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .wp-element-button,
  .wp-block-button__link,
  .et_pb_button,
  .cg-btn
) {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* ---- Focus ---------------------------------------------------------------
   Keyboard users get a 3px green ring at 3px offset. Mouse users get nothing,
   which is what :focus-visible is for. Never remove this. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  /* No radius here on purpose: the outline follows the element's own radius,
     so a pill button gets a pill ring and a 12px input gets a 12px ring. */
}

/* On green grounds the green ring disappears. Switch it to gold. */
.on-dark :focus-visible,
.et_pb_section_inverse :focus-visible {
  outline-color: var(--gold-300);
}

/* ---- Selection ------------------------------------------------------------ */
::selection {
  background: var(--gold-200);
  color: var(--green-900);
}

/* ---- Rules and small print ------------------------------------------------ */
hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--s-6) 0;
}

small,
.cg-meta {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Images --------------------------------------------------------------- */
img { max-width: 100%; height: auto; }

/* ---- Skip link -----------------------------------------------------------
   Divi ships a skip target but does not always style the link visibly on
   focus. This makes it land properly. */
.cg-skip-link {
  position: absolute;
  left: -9999px;
  z-index: var(--z-overlay);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  background: var(--green-800);
  color: var(--text-on-dark);
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 14px;
}

.cg-skip-link:focus {
  left: var(--s-4);
  top: var(--s-4);
  color: var(--text-on-dark);
}

/* ---- Motion contract -----------------------------------------------------
   Reduced motion removes displacement and entrance choreography without
   globally disabling every state change on every element. Divi's animated
   modules are made visible immediately so content can never remain at
   opacity: 0 when the visitor asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  .et_animated {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .cg-lift-hover,
  .cg-btn,
  .cg-drawer,
  .et_pb_button,
  .cgmoh-program-card {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .cg-lift-hover:hover,
  .cgmoh-program-card:hover,
  .cgmoh-program-card:focus-within {
    transform: none !important;
  }
}