/* ============================================================
   DCMX Site Overlay — v1
   Cosmetic re-skin for Divi-rendered pages and posts.
   Loaded site-wide EXCEPT on dcmx-raw-pages (which have full dcmx.css)
   and on Woo/checkout/account/membership pages.

   Goal: harmonize color + type with the Case File aesthetic
   without changing layout. !important is used liberally because
   Divi's per-page CSS has very high specificity.
   ============================================================ */

:root {
  --dcmx-bg: oklch(12% 0 0);
  --dcmx-bg-deep: oklch(8% 0 0);
  --dcmx-bg-card: oklch(15% 0 0);
  --dcmx-paper: oklch(96% 0 0);
  --dcmx-paper-mute: oklch(72% 0 0);
  --dcmx-paper-faint: oklch(52% 0 0);
  --dcmx-rule: oklch(100% 0 0 / 0.1);
  --dcmx-accent: oklch(87% 0.24 140);
  --dcmx-accent-deep: oklch(76% 0.22 140);
  /* Display font on overlay-styled (Divi) pages = Play, which Divi
     already loads sitewide via the Theme Customizer (family=Play:regular,700).
     Raw-pages (/, /freedom, /mission, /credit-river) keep Syne via their own
     dcmx.css + dedicated <link> in the raw-pages template. */
  --dcmx-f-display: "Play", system-ui, sans-serif;
  --dcmx-f-body: "Newsreader", Georgia, serif;
  --dcmx-f-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Pull display + body fonts (matches the upgraded pages). */
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Newsreader:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;600&display=swap");

/* ----------------------------------------------------------
   PAGE FOUNDATION
   ---------------------------------------------------------- */

html, body {
  background: var(--dcmx-bg) !important;
  color: var(--dcmx-paper) !important;
}

body,
body p,
body li,
body td,
body dd,
body blockquote,
body .et_pb_text_inner,
body .et_pb_post_content,
body .entry-content {
  font-family: var(--dcmx-f-body) !important;
  color: var(--dcmx-paper) !important;
  line-height: 1.68;
}

/* Headings — display font, slightly tighter tracking.
   The longer selectors below (e.g. body .et_pb_text_inner h2) beat the
   broad `.et_pb_text_inner { font-family: body }` body-font rule, so
   headings inside Divi text modules pick up Syne like post titles do. */
body h1, body h2, body h3, body h4, body h5, body h6,
body .et_pb_text_inner h1,
body .et_pb_text_inner h2,
body .et_pb_text_inner h3,
body .et_pb_text_inner h4,
body .et_pb_text_inner h5,
body .et_pb_text_inner h6,
body .et_pb_module_header,
body .et_pb_post_title,
body .entry-title,
body .post-title,
body .et_pb_toggle_title,
body .et_pb_accordion_item .et_pb_toggle_title,
body .et_pb_tab_title,
body .et_pb_blurb_header,
body .et_pb_pricing_title,
body .et_pb_cta_title,
body .et_pb_promo_title,
body .et_pb_team_member_name,
body .et_pb_testimonial_author {
  font-family: var(--dcmx-f-display) !important;
  color: var(--dcmx-paper) !important;
  letter-spacing: -0.012em;
}

/* Toggle / accordion modules — flattened.
   Pulling the body content out of click-to-open behavior and rendering
   each toggle item as a plain section: title becomes a section heading,
   content always visible, no chevron, no click affordance. */

/* Wrappers + items — strip backgrounds, padding, borders. */
body .et_pb_toggle,
body .et_pb_toggle_open,
body .et_pb_toggle_close,
body .et_pb_accordion,
body .et_pb_accordion_item {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 32px 0 !important;
  cursor: default !important;
}

/* Title — render as a section heading, not an interactive toggle bar.
   Class-chain trick: Divi emits per-instance rules like
   `.et_pb_accordion_0.et_pb_accordion h5.et_pb_toggle_title { color:#000!important }`
   which is specificity (0,0,3,1). Chaining `.et_pb_toggle_title` 3× pushes us
   to (0,0,3,2) so we win without depending on the accordion index. */
body h5.et_pb_toggle_title.et_pb_toggle_title.et_pb_toggle_title {
  color: var(--dcmx-paper) !important;
  font-family: var(--dcmx-f-display) !important;
  font-size: clamp(22px, 2.2vw + 0.4rem, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.012em !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Hide the ▼ / ▶ chevron icon — not interactive anymore.
   Same class-chain trick to beat per-instance pseudo-element rules. */
body h5.et_pb_toggle_title.et_pb_toggle_title.et_pb_toggle_title::before,
body h5.et_pb_toggle_title.et_pb_toggle_title.et_pb_toggle_title::after {
  display: none !important;
  content: none !important;
}

/* Body — always shown, regardless of open/close state. Divi normally hides
   .et_pb_toggle_close .et_pb_toggle_content with display:none. */
body .et_pb_toggle .et_pb_toggle_content,
body .et_pb_toggle_close .et_pb_toggle_content,
body .et_pb_toggle_open .et_pb_toggle_content,
body .et_pb_accordion_item .et_pb_toggle_content,
body .et_pb_bg_layout_light .et_pb_toggle_content {
  display: block !important;
  color: var(--dcmx-paper) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Generic catch-all: any heading INSIDE a Divi `bg_layout_light` block gets
   forced back to paper. (`bg_layout_light` is Divi's default for any module
   that doesn't have a dark-bg-layout flag flipped, so it covers most pages.) */
body .et_pb_bg_layout_light h1,
body .et_pb_bg_layout_light h2,
body .et_pb_bg_layout_light h3,
body .et_pb_bg_layout_light h4,
body .et_pb_bg_layout_light h5,
body .et_pb_bg_layout_light h6 {
  color: var(--dcmx-paper) !important;
}
body .et_pb_bg_layout_light,
body .et_pb_bg_layout_light p,
body .et_pb_bg_layout_light li {
  color: var(--dcmx-paper) !important;
}

/* ----------------------------------------------------------
   LINKS + BUTTONS
   ---------------------------------------------------------- */

body a,
body .et_pb_text_inner a {
  color: var(--dcmx-accent);
  transition: color 0.15s ease;
}
body a:hover,
body .et_pb_text_inner a:hover {
  color: var(--dcmx-accent-deep);
  text-decoration: underline;
}

/* Divi buttons — re-skin to Case-File style without resizing. */
body .et_pb_button,
body input[type="submit"],
body button.et_pb_button {
  background: transparent !important;
  border: 1px solid var(--dcmx-accent) !important;
  color: var(--dcmx-accent) !important;
  font-family: var(--dcmx-f-mono) !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 28px !important;
  transition: background 0.18s ease, color 0.18s ease;
}
body .et_pb_button:hover,
body input[type="submit"]:hover,
body button.et_pb_button:hover {
  background: var(--dcmx-accent) !important;
  color: oklch(12% 0 0) !important;
}

/* Divi adds its own ::after arrow on buttons; suppress so the
   mono caps don't fight a unicode arrow that won't be tinted. */
body .et_pb_button::after { display: none !important; }

/* ----------------------------------------------------------
   BACKGROUND CONTAINERS
   Divi sections often have hardcoded white/gray backgrounds.
   ---------------------------------------------------------- */

body .et_pb_section,
body .et_pb_row,
body .et_pb_column,
body #main-content,
body #et-main-area,
body #left-area,
body #sidebar,
body article,
body .et_pb_post {
  background: transparent !important;
}

/* But preserve hero/full-image sections. */
body .et_pb_section_video,
body .et_pb_fullwidth_header,
body .et_pb_section.et_pb_with_background {
  background-color: var(--dcmx-bg) !important;
}

/* Cards — apply the Case-File "lift" treatment. */
body .et_pb_post,
body article.et_pb_post {
  background: var(--dcmx-bg-card) !important;
  border: 1px solid var(--dcmx-rule);
  padding: clamp(20px, 3vw, 36px) !important;
  margin-bottom: 24px;
}

/* ----------------------------------------------------------
   NAV + HEADER
   Divi's classic main nav (#main-header / #top-menu) AND the
   Theme Builder Header pattern (.et_pb_menu_*_tb_header) both
   ship hardcoded text colors. Override both, with high specificity
   to beat Divi's per-page inline CSS like:
       .et_pb_menu_0_tb_header.et_pb_menu ul li a { color:#000 !important }
   ---------------------------------------------------------- */

body #main-header,
body #top-header,
body #et-top-navigation,
body .et_pb_menu {
  background: oklch(0% 0 0 / 0.7) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dcmx-rule);
}

/* Classic + Theme-Builder nav links, including the per-page index
   variants (et_pb_menu_0_tb_header, et_pb_menu_1_tb_header, …). */
body #top-menu li a,
body .et_pb_menu li a,
body .et-menu-nav li a,
body .et-menu li a,
body [class*="et_pb_menu_"][class*="tb_header"] ul li a,
body [class*="et_pb_menu_"][class*="tb_header"].et_pb_menu ul li a,
body [class*="et_pb_menu_"][class*="tb_header"] .et-menu li a {
  color: var(--dcmx-paper-mute) !important;
  font-family: var(--dcmx-f-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Active + hover */
body #top-menu li.current-menu-item a,
body #top-menu li a:hover,
body .et_pb_menu li.current-menu-item a,
body .et_pb_menu li a:hover,
body .et-menu-nav li.current-menu-item a,
body .et-menu-nav li a:hover,
body [class*="et_pb_menu_"][class*="tb_header"] ul li.current-menu-item a,
body [class*="et_pb_menu_"][class*="tb_header"] ul li a:hover,
body [class*="et_pb_menu_"][class*="tb_header"].et_pb_menu ul li.current-menu-item a,
body [class*="et_pb_menu_"][class*="tb_header"].et_pb_menu ul li a:hover {
  color: var(--dcmx-accent) !important;
}

/* Sub-menu (dropdown) — Divi defaults to a light grey panel that clashes hard.
   Per-page Theme-Builder CSS (`et_pb_menu_<N>_tb_header.et_pb_menu .nav li ul.sub-menu a`)
   loads AFTER this overlay and uses 5 classes + !important. We must match or
   exceed that specificity (0,0,5,3) to win. The attribute-selector chains below
   each carry ≥5 simple selectors so they beat any per-page generated ID. */
body [class*="et_pb_menu_"][class*="tb_header"].et_pb_menu .nav li ul.sub-menu,
body [class*="et_pb_menu_"][class*="tb_header"].et_pb_menu ul.sub-menu,
body .et-menu-nav .et-menu li ul.sub-menu,
body .et_pb_menu .nav li ul,
body .et_pb_menu ul.sub-menu {
  background-color: var(--dcmx-bg-card) !important;
  border-color: var(--dcmx-rule) !important;
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.4);
}
body [class*="et_pb_menu_"][class*="tb_header"].et_pb_menu .nav li ul.sub-menu a,
body [class*="et_pb_menu_"][class*="tb_header"].et_pb_menu ul.sub-menu li a,
body [class*="et_pb_menu_"][class*="tb_header"].et_pb_menu .et_mobile_menu a,
body .et-menu-nav .et-menu li ul.sub-menu li a,
body .et_pb_menu .nav li ul.sub-menu li a {
  color: var(--dcmx-paper) !important;
  opacity: 1 !important;
}
body [class*="et_pb_menu_"][class*="tb_header"].et_pb_menu .nav li ul.sub-menu a:hover,
body [class*="et_pb_menu_"][class*="tb_header"].et_pb_menu ul.sub-menu li a:hover,
body .et-menu-nav .et-menu li ul.sub-menu li a:hover,
body .et_pb_menu .nav li ul.sub-menu li a:hover {
  color: var(--dcmx-accent) !important;
}
body [class*="et_pb_menu_"][class*="tb_header"].et_pb_menu .nav li ul.sub-menu li.current-menu-item a {
  color: var(--dcmx-accent) !important;
}

/* Inline search field in the header (Divi `.et_pb_menu__search-input`). */
body .et_pb_menu .et_pb_menu__search-input,
body .et_pb_menu input.et_pb_menu__search-input {
  color: var(--dcmx-paper) !important;
  font-family: var(--dcmx-f-mono) !important;
}
body .et_pb_menu .et_pb_menu__search-input::placeholder {
  color: var(--dcmx-paper-faint) !important;
}

/* Mobile menu — Divi defaults to white background. */
body .et_mobile_menu {
  background: var(--dcmx-bg-card) !important;
  border-top-color: var(--dcmx-accent) !important;
}
body .et_mobile_menu li a {
  color: var(--dcmx-paper-mute) !important;
  border-bottom-color: var(--dcmx-rule) !important;
}
body .et_mobile_menu li a:hover {
  color: var(--dcmx-accent) !important;
  background-color: oklch(100% 0 0 / 0.04) !important;
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

body #main-footer,
body .et_pb_section_footer,
body #footer-bottom {
  background: var(--dcmx-bg-deep) !important;
  border-top: 1px solid var(--dcmx-rule);
  color: var(--dcmx-paper-mute) !important;
}
body #main-footer a,
body #footer-bottom a {
  color: var(--dcmx-paper-mute) !important;
}
body #main-footer a:hover,
body #footer-bottom a:hover {
  color: var(--dcmx-accent) !important;
}

/* ----------------------------------------------------------
   FORMS (contact form 7, Divi forms, comments)
   ---------------------------------------------------------- */

body input[type="text"],
body input[type="email"],
body input[type="url"],
body input[type="search"],
body input[type="tel"],
body input[type="password"],
body textarea,
body select {
  background: var(--dcmx-bg-card) !important;
  color: var(--dcmx-paper) !important;
  border: 1px solid var(--dcmx-rule) !important;
  font-family: var(--dcmx-f-mono) !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
}
body input:focus,
body textarea:focus,
body select:focus {
  border-color: var(--dcmx-accent) !important;
  outline: none !important;
}
body label {
  color: var(--dcmx-paper-mute) !important;
  font-family: var(--dcmx-f-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   CODE / PRE
   ---------------------------------------------------------- */

body pre,
body code {
  background: var(--dcmx-bg-deep) !important;
  color: var(--dcmx-accent) !important;
  font-family: var(--dcmx-f-mono) !important;
  border: 1px solid var(--dcmx-rule);
}
body pre { padding: 16px; overflow-x: auto; }
body code { padding: 2px 6px; }

/* ----------------------------------------------------------
   HORIZONTAL RULES, BLOCKQUOTES
   ---------------------------------------------------------- */

body hr { border: 0; border-top: 1px solid var(--dcmx-rule) !important; margin: 32px 0; }
body blockquote {
  border-left: 3px solid var(--dcmx-accent) !important;
  padding-left: 20px !important;
  color: var(--dcmx-paper-mute) !important;
  font-style: italic;
}

/* ----------------------------------------------------------
   IMAGES
   Add a subtle border so embedded images stand against dark bg.
   ---------------------------------------------------------- */

body .entry-content img,
body .et_pb_post img,
body article img {
  border: 1px solid var(--dcmx-rule);
  background: var(--dcmx-bg-card);
}

/* ----------------------------------------------------------
   COMMENTS
   ---------------------------------------------------------- */

body .comment-body,
body .comment {
  background: var(--dcmx-bg-card) !important;
  border: 1px solid var(--dcmx-rule);
  padding: 16px;
  margin-bottom: 12px;
}
body .comment-author,
body .comment-meta {
  color: var(--dcmx-paper-mute) !important;
  font-family: var(--dcmx-f-mono) !important;
  font-size: 11px;
  letter-spacing: 0.18em;
}

/* ----------------------------------------------------------
   PAGE TITLE BANNER (Divi auto-emits this on posts)
   ---------------------------------------------------------- */

body .et_post_meta_wrapper,
body .single-post .entry-title,
body .post-meta {
  color: var(--dcmx-paper-mute) !important;
  font-family: var(--dcmx-f-display) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
}
/* Links inside post-meta (author, category) inherited Divi's purple
   link color — bring them onto the muted paper / accent-on-hover scheme. */
body .post-meta a,
body .et_post_meta_wrapper a {
  color: var(--dcmx-paper-mute) !important;
  font-family: var(--dcmx-f-display) !important;
}
body .post-meta a:hover,
body .et_post_meta_wrapper a:hover {
  color: var(--dcmx-accent) !important;
}