/* ========== Divi 5 conflict overrides ========== */
/* These selectors override Divi's default styling that conflicts with our design */

/* Hide WordPress / Divi auto-rendered page title */
h1.entry-title,
.entry-title,
.et_pb_section .entry-title,
body.page .entry-title,
body.single-page h1.entry-title,
h1.main_title,
.main_title,
#main-content > .container > #content-area > #left-area > article > .entry-content > h1:first-child,
.et_post_meta_wrapper { display: none !important; }

/* Reset list styling for our nav and footer lists */
.jd-site ul,
.jd-site nav ul,
.jd-site .nav-links,
.jd-site .footer ul {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.jd-site ul li::before,
.jd-site .nav-links li::before { content: none !important; }
.jd-site .nav-links li,
.jd-site .footer li {
  padding: 0 !important;
  margin: 0 !important;
}
.jd-site .nav-links li { padding-left: 0 !important; }

/* Reset link underline that Divi may add */
.jd-site a {
  box-shadow: none !important;
  text-decoration: none !important;
}
.jd-site a:hover { text-decoration: none !important; }

/* Restore CTA button visibility (Divi resets button padding sometimes) */
.jd-site .btn,
.jd-site .nav-cta { padding: 14px 28px !important; }
.jd-site .nav-cta { padding: 10px 20px !important; }

/* Reset margins on Divi's main content wrapper */
.jd-site,
.jd-site * { box-sizing: border-box; }

/* Make sure body / section backgrounds work */
body.page-template-blank,
body.page-template-page-template-blank {
  background: var(--white, #fff) !important;
}

/* Hide possible Divi page wrapper styling that adds padding (use > to only target Divi's direct containers, not nested user .container elements) */
html body > #page-container > #main-content,
html body > #page-container > #main-content > .container,
html body > #page-container > #main-content > .container > #content-area,
html body > #page-container > #main-content > .container > #content-area > #left-area,
html body .et_pb_section { padding: 0 !important; }
html body > #page-container > #main-content > .container { width: 100% !important; max-width: none !important; margin: 0 !important; }

/* Make sure full-width sections are truly full-width */
.jd-site .hero,
.jd-site .stats-band,
.jd-site .footer,
.jd-site .section { width: 100%; }

/* Force critical layout rules to win against Divi's cascade — using html body for max specificity */
html body .jd-site .hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 0 !important;
  align-items: center !important;
}
/* Constrain hero photo to a proportional portrait shape (height + width balanced) */
html body .jd-site .hero-image {
  min-height: 0 !important;
  max-height: 540px !important;
  max-width: 460px !important;
  width: auto !important;
  height: auto !important;
  margin: 48px auto !important;
  border-radius: 16px !important;
  align-self: center !important;
  justify-self: center !important;
  overflow: hidden !important;
}
html body .jd-site .hero-image img {
  max-height: 540px !important;
  max-width: 460px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  display: block !important;
}
@media (max-width: 900px) {
  html body .jd-site .hero { grid-template-columns: 1fr !important; }
}
html body .jd-site .grid-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
html body .jd-site .grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
html body .jd-site .grid-4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; }
/* Force horizontal layout for questionnaire 1-5 rating scales */
html body .jd-site .scale {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
}
html body .jd-site .scale label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
/* Adjust progress bar sticky offset for WP context (account for our nav height ~97px) */
html body .jd-site .progress {
  position: sticky !important;
  top: 97px !important;
  z-index: 50 !important;
}
@media (max-width: 900px) {
  html body .jd-site .progress { top: 64px !important; }
}
/* Override contact-grid (and other 2-col grids) to keep horizontal layout on wider viewports */
html body .jd-site .contact-grid { display: grid !important; grid-template-columns: 1fr 1.1fr !important; gap: 56px !important; align-items: start !important; }

/* grid-2 / contact-grid collapse only on phones (< 540px); grid-3/4 collapse a bit earlier */
@media (max-width: 540px) {
  html body .jd-site .grid-2,
  html body .jd-site .grid-3,
  html body .jd-site .grid-4,
  html body .jd-site .contact-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 541px) and (max-width: 900px) {
  html body .jd-site .grid-3,
  html body .jd-site .grid-4 { grid-template-columns: 1fr 1fr !important; }
  /* grid-2 and contact-grid stay as 2 cols */
}
html body .jd-site .nav { position: sticky !important; top: 0 !important; z-index: 100 !important; }
html body .jd-site .nav-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; }
html body .jd-site .stats-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }
html body .jd-site .footer-grid { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr 1fr !important; gap: 48px !important; }

/* Hide Divi-injected page title with max specificity */
html body h1.main_title,
html body .main_title,
html body .et_post_meta_wrapper,
html body h1.entry-title,
html body .entry-title { display: none !important; visibility: hidden !important; }

/* Note: legacy "make images fill container" rules removed for .hero-image — see constrained rules above */

/* Reset any Divi-imposed max-width and force full-width layout */
/* Important: ONLY target Divi's outer wrappers — leave .section .container alone since it has its own padding for content */
html body #main-content,
html body #main-content > article,
html body #main-content .entry-content,
html body #main-content > .container { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
/* Restore container padding inside our content (32px horizontal on desktop) */
html body .jd-site .container { padding-left: 32px !important; padding-right: 32px !important; }
html body .jd-site .nav-inner { padding-left: 32px !important; padding-right: 32px !important; }
@media (max-width: 720px) {
  html body .jd-site .container { padding-left: 24px !important; padding-right: 24px !important; }
}
html body #main-content article { float: none !important; }
/* Note: body element has the et_right_sidebar class — no space between body and .et_right_sidebar */
html body.et_right_sidebar #left-area,
html body.et_left_sidebar #left-area,
html body #left-area,
html body #content-area #left-area {
  width: 100% !important;
  float: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
html body #sidebar,
html body #content-area #sidebar { display: none !important; width: 0 !important; }

/* === Justify multi-line paragraph text (user request) === */
/* Apply justify to body text paragraphs, but preserve centered/specific zones */
html body .jd-site p,
html body .jd-site .lead,
html body .jd-site .card-desc,
html body .jd-site .info-banner p,
html body .jd-site .info-box p,
html body .jd-site .feature-text p,
html body .jd-site .email-body p,
html body .jd-site .testi-quote {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
/* Preserve centered alignment in specific zones */
html body .jd-site .section-head,
html body .jd-site .section-head p,
html body .jd-site .section-head .lead,
html body .jd-site .text-center,
html body .jd-site .text-center p,
html body .jd-site .submit-bar p,
html body .jd-site .stats-band p,
html body .jd-site .section.dark .section-head p,
html body .jd-site .page-header p,
html body .jd-site .typo-illustration .ti-text,
html body .jd-site .scale-extremes,
html body .jd-site .nav p,
html body .jd-site .nav-links p { text-align: center !important; }
/* Keep footer left-aligned (helps with the contact column), EXCEPT brand description */
html body .jd-site .footer-contact,
html body .jd-site .footer-bottom p { text-align: left !important; hyphens: manual !important; }
html body .jd-site .footer .footer-brand p { text-align: justify !important; hyphens: auto !important; -webkit-hyphens: auto !important; }
html body .jd-site .footer ul,
html body .jd-site .footer ul li { text-align: left !important; }
/* Keep stats labels centered */
html body .jd-site .stat,
html body .jd-site .stat-label,
html body .jd-site .stat-num { text-align: center !important; }

/* Nuke any borders, box-shadows, dividers on Divi wrapper chain that could create a vertical line */
html body > #page-container,
html body > #page-container > #main-content,
html body > #page-container > #main-content > .container,
html body > #page-container > #main-content > .container > #content-area,
html body > #page-container > #main-content > .container > #content-area > #left-area,
html body article#post-1454,
html body article.page,
html body .et-l,
html body .et-l--body,
html body .et_pb_section,
html body div.entry-content {
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
html body > #page-container::before,
html body > #page-container::after,
html body #main-content::before,
html body #main-content::after,
html body #content-area::before,
html body #content-area::after,
html body #left-area::before,
html body #left-area::after,
html body article::before,
html body article::after,
html body .entry-content::before,
html body .entry-content::after { display: none !important; content: none !important; }

/* Force html/body to span full width without right gutter */
html, body { width: 100% !important; min-width: 0 !important; max-width: 100vw !important; overflow-x: hidden !important; }
/* Do NOT force body background here — let each page set its own (email pages use cream/lavender backdrop) */

/* === NUCLEAR fix for vertical lines: remove ALL left/right borders inside .jd-site === */
/* This catches every possible source of aligned vertical lines (cards, inputs, sessions, fields, etc.) */
html body .jd-site * {
  border-left-width: 0 !important;
  border-right-width: 0 !important;
}
/* Re-introduce visual definition via inset box-shadow on bordered blocks (no aligned lines) */
html body .jd-site .card,
html body .jd-site .placeholder,
html body .jd-site .contact-block,
html body .jd-site .map-frame {
  border-top: 1px solid rgba(237, 224, 240, 0.6) !important;
  border-bottom: 1px solid rgba(237, 224, 240, 0.6) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html body .jd-site .card:hover {
  box-shadow: 0 4px 24px rgba(123, 63, 160, 0.06) !important;
  transform: translateY(-2px) !important;
}
/* Re-introduce input borders for usability (inputs MUST have visible borders) */
html body .jd-site input[type="text"],
html body .jd-site input[type="email"],
html body .jd-site input[type="tel"],
html body .jd-site input[type="password"],
html body .jd-site input[type="number"],
html body .jd-site input[type="search"],
html body .jd-site input[type="url"],
html body .jd-site select,
html body .jd-site textarea {
  border: 1px solid var(--purple-line, #ede0f0) !important;
}
html body .jd-site input:focus,
html body .jd-site select:focus,
html body .jd-site textarea:focus {
  border-color: var(--purple, #7B3FA0) !important;
}
/* Restore .btn borders since they're decorative ovals */
html body .jd-site .btn {
  border: 1.5px solid transparent !important;
}
html body .jd-site .btn-ghost { border-color: var(--purple-border, #dfc4df) !important; }
html body .jd-site .btn-ghost:hover { border-color: var(--purple, #7B3FA0) !important; }
/* Brand mark keeps full border (logo circle) */
html body .jd-site .brand-mark {
  border: 1px solid var(--purple-line, #ede0f0) !important;
}
html body .jd-site .feature-icon {
  border: 1px solid var(--purple-border, #dfc4df) !important;
}

/* === Nav menu: force all items to stay on a single line === */
html body .jd-site .nav-links { flex-wrap: nowrap !important; }
html body .jd-site .nav-links li { flex-shrink: 0 !important; white-space: nowrap !important; }
html body .jd-site .nav-links a { white-space: nowrap !important; }
html body .jd-site .nav-cta { white-space: nowrap !important; }
/* Tighten gap a bit so all items fit comfortably */
html body .jd-site .nav-links { gap: 28px !important; }
@media (max-width: 1100px) { html body .jd-site .nav-links { gap: 22px !important; } }

/* === DEEPER search: remove vertical lines from elements OUTSIDE .jd-site too === */
/* Sometimes Divi wrappers (article, .et-l, etc.) have background gradients or pseudo-element decorations */
html body article#post-1454,
html body article.page,
html body .et-l,
html body .et-l--body,
html body .entry-content,
html body #content-area,
html body #left-area {
  background-image: none !important;
  background-repeat: no-repeat !important;
}
/* Kill any background gradient on body/html that could create vertical stripes */
html, body {
  background-image: none !important;
}
/* Kill any pseudo-element decorations on Divi wrappers */
html body article::before, html body article::after,
html body #content-area::before, html body #content-area::after,
html body #left-area::before, html body #left-area::after,
html body .entry-content::before, html body .entry-content::after,
html body .et-l::before, html body .et-l::after,
html body .et-l--body::before, html body .et-l--body::after {
  display: none !important; content: none !important;
}
/* Kill backdrop / outline / column rule on EVERY element across the page */
html body * {
  column-rule: 0 none transparent !important;
  outline: none !important;
}

/* === ROOT FIX for the persistent vertical lines === */
/* Divi creates a 1px vertical separator via #main-content .container::before to divide content/sidebar */
/* This rule is in Divi's stylesheet inside @media (min-width: 981px) */
/* Divi disables it only for .et_full_width_page — but Blank Page template doesn't add that class */
/* Force it OFF for all our pages */
html body #main-content .container::before,
html body #main-content .container::after { display: none !important; content: none !important; }
html body #content-area { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important; }
html body #content-area::after,
html body #left-area::after { content: none !important; }