/*
 * DivineX design tokens — real values from the live divinex.io (Next.js)
 * site's globals.css, carried over exactly so WordPress output matches.
 */

/*
 * ROOT-CONTAINER FIX (replaces the old per-section 100vw/negative-margin
 * hack below). Root cause, confirmed via live DevTools: Hello Elementor's
 * theme.css constrains main#content.site-main (and .page-content) to
 * max-width: 500/600/800/1140px at increasing breakpoints whenever the
 * body has no elementor-page-* class — true for every page here, since
 * Elementor itself is deliberately not active. The old per-section trick
 * computed `left: 50%` against that CONSTRAINED parent width, not the
 * true viewport, so it never correctly cancelled out above 576px —
 * explaining the lingering "inconsistent widths" symptom even after
 * applying it everywhere.
 *
 * Fixed at the root instead: body.page and body.single-post are
 * WordPress's own standard template body classes — every Page and every
 * blog Post (the only two templates DivineX content renders through, and
 * nothing else: archives/search/404 keep the theme's native layout,
 * untouched). main#content.site-main's ID selector guarantees this wins
 * over Hello Elementor's class-only selector on specificity alone
 * ((1,3,2) vs (0,2,1)) regardless of CSS file load order — no !important
 * needed anywhere.
 */
body.page main#content.site-main,
body.single-post main#content.site-main,
body.page .page-content,
body.single-post .page-content {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

/*
 * Same root-container fix, GeneratePress edition (2026-10-07, theme swap).
 * Confirmed via the live DOM: GeneratePress wraps the entire content area
 * in <div id="page" class="...grid-container..."> with
 * .grid-container{max-width:1200px} — squeezing every one of our full-
 * bleed section backgrounds into a centered column, white space on both
 * sides, on every section (the same bug class as Hello Elementor's
 * main#content.site-main, just a different theme's selector — our
 * existing fix above doesn't match GeneratePress's markup at all, since
 * GP's <main> is id="main", not id="content"). #page's ID selector
 * guarantees this wins over GeneratePress's class-only .grid-container
 * regardless of load order — no !important. Scoped to #page specifically
 * (not .grid-container generally) so GeneratePress's own header, which
 * uses the same class on a separate element, is untouched.
 */
#page.grid-container,
.container.grid-container,
#page #content.site-content,
#primary.content-area,
#primary main#main.site-main {
  max-width: none;
  width: 100%;
  flex: 1 1 100%;
  margin-inline: 0;
}
#page .site-content {
  display: block;
}

/*
 * GeneratePress renders a page-title <h1> ("Home") above our content by
 * default — the real site has no such heading here. Scoped to the front
 * page only; other pages' title behavior is a separate, not-yet-addressed
 * decision.
 */
body.home .entry-header {
  display: none;
}

/*
 * Real header styling (2026-10-07), values pulled directly from the real
 * production header via curl: <header class="sticky top-0 z-40
 * bg-cobalt-shade-65/80 backdrop-blur-md">, "DivineX" in white, nav links
 * in text-cream/95 with white on hover. GeneratePress's header (#masthead)
 * ships plain white/dark-text by default; restyled to match exactly,
 * scoped to the real GP selectors so nothing else is touched.
 */
/* Outer bar: sticky top-0 z-40 bg-cobalt-shade-65/80 backdrop-blur-md, plus
   the real 1px gradient rule along the bottom edge. */
header#masthead.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(0, 44, 61, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: none;
}
header#masthead.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(77, 141, 255, 0.4), rgba(16, 169, 138, 0.3), transparent);
}
/* Inner row: mx-auto max-w-7xl flex items-center justify-between gap-4 px-6 py-3 */
header#masthead .inside-header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}
/* Brand: mark h-9 (36px) w-auto with a jade glow, gap-2.5, "DivineX" text-lg bold tracking-tight white */
header#masthead .site-branding-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
header#masthead .site-logo {
  margin: 0;
}
header#masthead .site-logo img {
  height: 36px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(16, 169, 138, 0.45));
}
header#masthead .main-title {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
}
header#masthead .main-title a,
header#masthead .main-title a:hover {
  color: #ffffff;
  font-family: var(--dx-font-sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
}
header#masthead .main-navigation,
header#masthead .main-navigation .inside-navigation {
  background-color: transparent;
  margin: 0;
}
/* Links: rounded-full px-3.5 py-2 text-base font-medium text-cream/95, hover white */
header#masthead .main-navigation .main-nav ul li a {
  color: rgba(247, 243, 234, 0.95);
  font-family: var(--dx-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding: 8px 14px;
  text-decoration: none;
}
header#masthead .main-navigation .main-nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
header#masthead .main-navigation .main-nav ul li a:hover,
header#masthead .main-navigation .main-nav ul li a:focus,
header#masthead .main-navigation .main-nav ul li.sfHover > a {
  color: #ffffff;
  background: transparent;
}
header#masthead .main-navigation .main-nav ul li .dropdown-menu-toggle {
  padding: 0 0 0 4px;
  color: rgba(247, 243, 234, 0.95);
  font-size: 10px;
}
/* Dropdown: min-w-64 rounded-2xl border-white/10 bg-ink-2 p-2 shadow-2xl;
   items block rounded-lg px-4 py-2.5 text-lg font-medium text-cream, hover bg-white/10 */
header#masthead .main-navigation ul ul {
  width: 256px;
  padding: 8px;
  background: #005372;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}
header#masthead .main-navigation .main-nav ul ul li a {
  display: block;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 28px;
  color: #f7f3ea;
  border-radius: 8px;
}
header#masthead .main-navigation .main-nav ul ul li a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
/* Top-level underline: after:absolute after:inset-x-3.5 after:-bottom-px after:h-[2px]
   after:bg-jade after:origin-left after:scale-x-0 -> scale-x-100 on hover and on the
   current section (then also text-white). */
header#masthead .main-navigation .main-nav > ul > li:not(.dx-nav-cta) > a {
  position: relative;
}
header#masthead .main-navigation .main-nav > ul > li:not(.dx-nav-cta) > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: #00a68f;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s;
}
header#masthead .main-navigation .main-nav > ul > li:not(.dx-nav-cta) > a:hover::after,
header#masthead .main-navigation .main-nav > ul > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current-page-ancestor):not(.dx-nav-cta) > a::after {
  transform: scaleX(1);
}
header#masthead .main-navigation .main-nav > ul > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current-page-ancestor):not(.dx-nav-cta) > a {
  color: #ffffff;
}
header#masthead .menu-toggle,
header#masthead .menu-toggle .gp-icon {
  color: #ffffff;
}
/* CTA: rounded-full bg-accent px-5 py-2.5 text-base font-semibold text-ink, hover bg-accent-strong */
header#masthead .main-navigation .main-nav ul li.dx-nav-cta a {
  background: #007faf;
  color: #002c3d;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  margin-left: 12px;
}
header#masthead .main-navigation .main-nav ul li.dx-nav-cta a:hover {
  background: #005372;
  color: #002c3d;
}

/*
 * Page canvas. The real site's body is ink (#002c3d) with every section
 * painting its own background; GeneratePress paints a grey body plus a
 * white, padded content box ("separate containers") around the page,
 * which is where the remaining white strips and side gutters came from.
 * Pages, plus the blog index, category archives and single posts — since
 * 2026-10-07 those use the full-bleed blog templates (includes/blog.php),
 * not GeneratePress's reading layout.
 */
body.home,
body.page,
body.blog,
body.category,
body.single-post,
body.error404,
body.search {
  background-color: #002c3d;
}
:is(body.page, body.blog, body.category, body.single-post, body.error404, body.search) .inside-article,
:is(body.page, body.blog, body.category, body.single-post, body.error404, body.search) #primary main#main.site-main,
:is(body.page, body.blog, body.category, body.single-post, body.error404, body.search) #page #content.site-content,
:is(body.page, body.blog, body.category, body.single-post, body.error404, body.search) .entry-content {
  padding: 0;
  margin: 0;
  background: transparent;
}
:is(body.page, body.blog, body.category, body.single-post, body.error404, body.search) .site-main > * {
  margin-bottom: 0;
}

/* Sitewide footer — see patterns/site-footer.html; values from the real
   SiteFooter component (bg-ink, radial blue glow at the top, white/10 rules). */
.site-footer {
  padding: 0;
  background: transparent;
}
.dx-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(77, 141, 255, 0.1), transparent), #002c3d;
  color: rgba(247, 243, 234, 0.95);
  font-family: var(--dx-font-sans);
  text-align: left;
}
.dx-footer-glow {
  position: absolute;
  left: -96px;
  top: -96px;
  width: 320px;
  height: 320px;
  opacity: 0.12;
  pointer-events: none;
}
.dx-footer-contact {
  position: relative;
  max-width: 672px;
  margin: 0 auto;
  padding: 48px 24px 40px;
  text-align: center;
}
.dx-footer-eyebrow {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #007faf;
}
.dx-footer-headline {
  margin: 12px 0 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
}
@media (min-width: 640px) {
  .dx-footer-headline { font-size: 30px; line-height: 36px; }
}
.dx-footer-sub {
  max-width: 448px;
  margin: 8px auto 0;
  font-size: 16px;
  line-height: 24px;
}
.dx-footer-formwrap {
  max-width: 576px;
  margin: 20px auto 0;
  text-align: left;
}
.dx-footer-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(0, 83, 114, 0.6);
}
.dx-footer-form .dx-hp {
  position: absolute;
  left: -9999px;
}
.dx-footer-form label {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: rgba(247, 243, 234, 0.95);
}
.dx-footer-form .dx-req { color: #007faf; }
.dx-footer .dx-footer-form input,
.dx-footer .dx-footer-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: #002c3d;
  color: #f7f3ea;
  font-family: var(--dx-font-sans);
  font-size: 16px;
  line-height: 24px;
}
.dx-footer .dx-footer-form input::placeholder,
.dx-footer .dx-footer-form textarea::placeholder { color: rgba(247, 243, 234, 0.95); }
.dx-footer .dx-footer-form input:focus,
.dx-footer .dx-footer-form textarea:focus {
  border-color: #007faf;
  outline: none;
}
.dx-footer .dx-footer-form button[type="submit"] {
  width: 100%;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  background: #007faf;
  color: #002c3d;
  font-family: var(--dx-font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.dx-footer .dx-footer-form button[type="submit"]:hover { background: #005372; }
.dx-footer .dx-footer-form button[type="submit"]:disabled { opacity: 0.6; }
.dx-footer-status { margin: 0; font-size: 16px; }
.dx-footer-status:empty { display: none; }
.dx-footer-email {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 24px;
}
.dx-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.dx-footer a:hover { color: #ffffff; }
.dx-footer .dx-footer-email a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.dx-footer .dx-footer-email a:hover { color: #007faf; }
.dx-footer-rule { border-top: 1px solid rgba(255, 255, 255, 0.1); }
/* Columns: mx-auto grid max-w-7xl gap-x-8 gap-y-6 px-6 py-8 sm:grid-cols-2 lg:grid-cols-4 */
.dx-footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
}
@media (min-width: 640px) { .dx-footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dx-footer-cols { grid-template-columns: repeat(4, 1fr); } }
.dx-footer-cols h2 {
  margin: 0;
  font-family: var(--dx-font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(247, 243, 234, 0.95);
}
.dx-footer-cols ul,
.dx-footer-bottom ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dx-footer-cols ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.dx-footer-cols a,
.dx-footer-bottom {
  font-size: 16px;
  line-height: 24px;
}
.dx-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px;
}
@media (min-width: 640px) {
  .dx-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.dx-footer-bottom p { margin: 0; }
.dx-footer-bottom ul { display: flex; gap: 20px; }

/* Right-edge "Free Growth Scan" tab (StickyGrowthTab): fixed right-0 top-1/2,
   vertical text, rounded-l-lg bg-jade px-3.5 py-5 text-lg font-semibold, hidden below sm. */
.dx-growth-tab {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 30;
  display: none;
  transform: translateY(-50%);
}
@media (min-width: 640px) { .dx-growth-tab { display: block; } }
.dx-growth-tab a {
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  padding: 20px 14px;
  border-radius: 8px 0 0 8px;
  background: #00a68f;
  color: #012621;
  font-family: var(--dx-font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.15s ease, color 0.15s ease, padding 0.15s ease;
}
.dx-growth-tab a:hover {
  background: #006c5d;
  color: #ffffff;
  padding-right: 20px;
}

/*
 * Sitewide body font — confirmed gap, found during the homepage visual-
 * parity audit: Hello Elementor's reset.css sets
 * body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",...}
 * with nothing here ever overriding it at the body level (only individual
 * elements carrying an explicit class like .dx-body got the right font).
 * Every text element that doesn't set its own font-family was silently
 * inheriting the system-font stack instead of Darker Grotesque, which is
 * the real site's actual body default (src/app/globals.css:
 * body{font-family:var(--font-sans)}). Scoped via WP's own standard body
 * template classes (0,1,1) — same specificity pattern as the .site-main
 * fix above — to reliably beat Hello Elementor's bare body{} (0,0,1)
 * regardless of stylesheet load order, no !important.
 */
body.home, body.page, body.single-post, body.archive, body.search {
  font-family: var(--dx-font-sans);
}

:root {
  --dx-cobalt: #007faf;
  --dx-cobalt-tint-70: #b2d9e7;
  --dx-cobalt-tint-40: #66b2cf;
  --dx-cobalt-shade-35: #005372;
  --dx-cobalt-shade-65: #002c3d;

  --dx-jade: #00a68f;
  --dx-jade-tint-70: #b2e4dd;
  --dx-jade-tint-40: #66cabc;
  --dx-jade-shade-35: #006c5d;
  --dx-jade-shade-65: #003a32;

  --dx-ink: #002c3d;
  --dx-ink-2: #005372;
  --dx-cream: #f7f3ea;
  --dx-accent: #007faf;
  --dx-accent-strong: #005372;

  --dx-font-display: "Fraunces", "Fraunces Fallback", ui-serif, Georgia, serif;
  --dx-font-sans: "Darker Grotesque", "Darker Grotesque Fallback", ui-sans-serif, system-ui, sans-serif;
  --dx-font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Utility classes used by block render templates. Prefixed dx- to never collide with a theme. */
/*
 * Full-bleed background regardless of the theme's own content container.
 * Hello Elementor (and most themes) wrap page content in a max-width
 * wrapper (e.g. .page-content) with its own side padding — without this,
 * a section's background color only fills that narrow inner column,
 * showing as a colored box with visible white gutters on either side
 * instead of running edge to edge like the real site's sections do.
 */
.dx-section {
  /* Simple width:100% is now correct and sufficient — its ancestor chain
     (.site-main/.page-content) is genuinely unconstrained by the root fix
     above, so the old 100vw/negative-margin workaround is no longer
     needed (and was never fully correct — see the root-fix comment). */
  padding: 80px 0;
  width: 100%;
}
.dx-wrap { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.dx-wrap-sm { max-width: 896px; margin: 0 auto; padding: 0 24px; }

.dx-bg-cream { background: var(--dx-cream); color: var(--dx-ink); }
.dx-bg-ink { background: var(--dx-ink); color: var(--dx-cream); }
.dx-bg-cobalt-deep { background: var(--dx-cobalt-shade-65); color: var(--dx-cream); }
.dx-bg-white { background: #ffffff; color: var(--dx-ink); }

.dx-eyebrow {
  font-family: var(--dx-font-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--dx-accent-strong);
}
.dx-bg-ink .dx-eyebrow, .dx-bg-cobalt-deep .dx-eyebrow { color: var(--dx-cobalt-tint-70); }

.dx-h1, .dx-h2, .dx-h3 {
  font-family: var(--dx-font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.dx-h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 700; }
.dx-h2 { font-size: clamp(1.875rem, 3.5vw, 2.5rem); }
.dx-h3 { font-size: 1.375rem; font-weight: 700; }

.dx-body { font-family: var(--dx-font-sans); font-size: 18px; line-height: 1.6; }
.dx-body-sm { font-family: var(--dx-font-sans); font-size: 16px; line-height: 1.55; }

.dx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  padding: 12px 28px;
  font-family: var(--dx-font-sans);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.dx-btn-primary { background: var(--dx-accent); color: var(--dx-ink); }
.dx-btn-primary:hover { background: var(--dx-accent-strong); color: #ffffff; }
.dx-btn-quiet {
  background: transparent;
  color: var(--dx-cream);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 16px;
  padding: 0;
}
.dx-bg-cream .dx-btn-quiet, .dx-bg-white .dx-btn-quiet { color: var(--dx-accent-strong); }
.dx-btn-quiet:hover { color: #ffffff; }
.dx-bg-cream .dx-btn-quiet:hover, .dx-bg-white .dx-btn-quiet:hover { color: var(--dx-accent); }

@media (max-width: 640px) {
  .dx-section { padding: 56px 0; }
}

/*
 * Reusable responsive layout primitives — added for the Home page rebuild
 * (2026-10-06) but deliberately generic/reusable, not homepage-specific
 * hacks: the prior converter only ever emitted one non-responsive pattern
 * (`grid-template-columns: repeat(auto-fit, minmax(_,1fr))`, zero
 * breakpoints), which cannot reproduce the real Next.js site's actual
 * responsive behavior (real Tailwind `sm:`/`md:`/`lg:` grid/flex changes).
 * These mirror Tailwind's real default breakpoints (640/768/1024/1280px —
 * NOT Hello Elementor's own 576/768/992/1200px scale) so migrated sections
 * reproduce the real site's responsive behavior, not the theme's.
 *
 * Extra container widths, matching Tailwind's max-w-* scale exactly
 * (dx-wrap / dx-wrap-sm already existed at 1152px / 896px):
 */
.dx-wrap-xs { max-width: 768px; margin: 0 auto; padding: 0 24px; }  /* max-w-3xl */
.dx-wrap-md { max-width: 1024px; margin: 0 auto; padding: 0 24px; } /* max-w-5xl */
.dx-wrap-lg { max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* max-w-7xl */

/* 1-column-mobile -> N-column-desktop grids (sm breakpoint, 640px — matches
   Tailwind's `sm:grid-cols-N`, the most common real pattern on this site). */
.dx-grid-resp { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) {
  .dx-grid-resp[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
  .dx-grid-resp[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  .dx-grid-resp[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

/* Logo/partner grid: 2 -> 3 -> 5 columns (matches Tailwind's
   `grid-cols-2 sm:grid-cols-3 lg:grid-cols-5`) — reusable anywhere a grid of
   client/partner logos appears, not just the homepage's Trusted By section. */
.dx-logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px) { .dx-logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .dx-logo-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; } }

/* Asymmetric two-column desktop split (stacks to one column until `lg`,
   1024px) — set the actual ratio per use via the --dx-split-ratio custom
   property (e.g. `style="--dx-split-ratio:53fr 47fr"` or `85fr 115fr`), so
   this one primitive covers every asymmetric split on the site rather than
   a one-off per ratio. */
.dx-split { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 1024px) {
  .dx-split {
    display: grid;
    grid-template-columns: var(--dx-split-ratio, 1fr 1fr);
    gap: 56px;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/*
 * Real FAQ card primitive — translated directly from
 * src/components/system/FaqSection.tsx (the actual shared component every
 * real page's FAQ uses, not an invented pattern). Distinct from the older,
 * generic .dx-accordion above (separate bordered boxes with gaps) — this is
 * ONE rounded card with hairline dividers between items and a rotating "+"
 * icon, matching the real site exactly. Reusable: every page's FAQ should
 * eventually use this, not .dx-accordion — introduced as a new primitive
 * here rather than changing .dx-accordion's existing behavior sitewide,
 * since other already-approved pages currently depend on it.
 */
.dx-faq-card {
  margin-top: 32px;
  border: 1px solid rgba(0, 44, 61, 0.1);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.dx-faq-item { padding: 4px 20px; border-top: 1px solid rgba(0, 44, 61, 0.1); }
.dx-faq-item:first-child { border-top: none; }
@media (min-width: 640px) { .dx-faq-item { padding: 4px 24px; } }
.dx-faq-item summary {
  display: flex; cursor: pointer; list-style: none; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 0; font-family: var(--dx-font-sans); font-size: 18px; line-height: 28px; font-weight: 600; color: var(--dx-ink);
}
.dx-faq-item summary::-webkit-details-marker { display: none; }
.dx-faq-item summary .dx-faq-icon { font-size: 1.5rem; line-height: 1; color: var(--dx-accent-strong); transition: transform 0.2s ease; flex-shrink: 0; }
.dx-faq-item[open] summary .dx-faq-icon { transform: rotate(45deg); }
.dx-faq-item p { margin: 0; padding-bottom: 20px; font-family: var(--dx-font-sans); font-size: 18px; line-height: 1.625; color: rgba(0, 44, 61, 0.95); }

/* Generic page content (checklist/accordion/feature/form/rotating headline) —
   shared by every migrated Page, not tied to any one custom block. */
.dx-checklist { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.dx-checklist .dx-check { padding-left: 28px; position: relative; font-family: var(--dx-font-sans); font-size: 17px; }
.dx-checklist .dx-check::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--dx-jade); color: #fff; font-size: 12px; font-weight: 700;
}

hr.dx-divider { border: none; border-top: 1px solid rgba(0, 44, 61, 0.15); margin: 24px 0; }
hr.dx-section-break { border: none; margin: 48px 0; }

.dx-feature { text-align: center; }
.dx-feature-title { font-family: var(--dx-font-display); font-size: 2.25rem; font-weight: 700; color: var(--dx-accent-strong); }
.dx-feature-desc { font-family: var(--dx-font-sans); font-size: 15px; opacity: 0.85; margin-top: 4px; }

.dx-accordion { display: grid; gap: 10px; margin: 16px 0; }
.dx-accordion-item { border: 1px solid rgba(0, 44, 61, 0.15); border-radius: 10px; padding: 14px 18px; }
.dx-accordion-item summary { font-family: var(--dx-font-sans); font-weight: 700; cursor: pointer; }
.dx-accordion-item p { margin: 10px 0 0; }

.dx-form { display: grid; gap: 14px; max-width: 480px; margin: 16px 0; }
.dx-field { display: grid; gap: 6px; font-family: var(--dx-font-sans); font-weight: 600; font-size: 14px; }
.dx-field input {
  font-family: var(--dx-font-sans); font-size: 16px; padding: 10px 14px;
  border: 1px solid rgba(0, 44, 61, 0.25); border-radius: 8px; background: #fff; color: var(--dx-ink);
}

.dx-rotate { position: relative; display: inline-grid; vertical-align: top; }
.dx-rotate [data-dx-rotate-item] {
  grid-area: 1 / 1; opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease; white-space: nowrap;
}
.dx-rotate [data-dx-rotate-item][data-dx-rotate-active] { opacity: 1; transform: translateY(0); }

/*
 * Booking modal overlay (created by initBookingButtons() in
 * divinex-interactive.js). This was missing entirely — the JS appends this
 * markup straight to <body> with no CSS to hide it until opened, so it
 * rendered as a plain visible empty box with a "Close" button at the
 * bottom of every page that has a booking button, confirmed live via
 * screenshot. Hidden by default; .dx-booking-open (toggled by the JS) is
 * the only thing that reveals it.
 */
.dx-booking-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 44, 61, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.dx-booking-overlay.dx-booking-open {
  opacity: 1;
  visibility: visible;
}
.dx-booking-dialog {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: min(80vh, 820px);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.dx-booking-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  font-family: var(--dx-font-sans);
  font-size: 14px;
  font-weight: 700;
  background: var(--dx-ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
}
.dx-booking-close:hover { background: var(--dx-accent-strong); }
.dx-booking-iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Hover-diagram interaction states, driven by initDiagrams() in divinex-interactive.js */
[data-dx-node] circle { transition: stroke 0.2s ease, filter 0.2s ease; }
[data-dx-node].dx-node-dimmed { opacity: 0.45; transition: opacity 0.2s ease; }
[data-dx-node].dx-node-active circle { filter: drop-shadow(0 0 6px rgba(111, 168, 255, 0.6)); stroke: #b7e2ff; }
[data-dx-line].dx-line-active { opacity: 0.95 !important; stroke: #8fd0ff !important; }
[data-dx-line].dx-line-dimmed { opacity: 0.12 !important; }
[data-dx-info].dx-info-active { border-color: rgba(255, 255, 255, 0.3); }

/* Real-site CSS reset parity: Tailwind's preflight zeroes element margins, so
   every gap on the real page comes from an explicit utility. GeneratePress adds
   its own h1-h6/p/ul margins, which stacked extra space under headings
   throughout. Specificity (0,0,2) via :where(): beats GP's bare element rules
   (0,0,1), loses to any explicit dx- class margin (0,1,0). */
:where(body.page .entry-content) section :is(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) {
  margin-top: 0;
  margin-bottom: 0;
}
:where(body.page .entry-content) section :is(ul, ol) {
  padding-left: 0;
}

/* Nav placement: real header is justify-between across logo | nav | CTA, so
   the link group sits centered in the space between the logo and the CTA.
   Two auto margins (before the first link, before the CTA) split the free
   space equally, reproducing that exactly. */
header#masthead #site-navigation {
  flex: 1 1 auto;
}
header#masthead .main-navigation .main-nav {
  flex: 1 1 auto;
}
header#masthead .main-navigation .main-nav > ul {
  width: 100%;
}
header#masthead .main-navigation .main-nav > ul > li:first-child {
  margin-left: auto;
}
header#masthead .main-navigation .main-nav > ul > li.dx-nav-cta {
  margin-left: auto;
}
header#masthead .main-navigation .main-nav ul li .dropdown-menu-toggle .gp-icon {
  display: none;
}
header#masthead .main-navigation .main-nav ul li .dropdown-menu-toggle::after {
  content: "\25BE";
  font-size: 10px;
  line-height: 1;
}


/* Form status line added to real-markup forms (extract_prod_pages.py) for the
   proxy's success/error message — takes no space until there is one, so the
   form keeps production's exact height. */
.dx-real .dx-form-status:empty {
  display: none;
}
/* space-y-* puts a bottom margin on every child except the last; the hidden
   status line is now the last child, so the real last field/button would get
   an extra 16px. Cancel it while the status line is empty. */
.dx-real form:has(> .dx-form-status:empty) > :nth-last-child(2) {
  margin-block-end: 0;
}

/*
 * Blog post body (templates/blog-single.php). WordPress stores posts as plain
 * HTML, so these rules give it the same look as the real site's ArticleBody:
 * flex-col gap-5; text: text-lg leading-relaxed text-ink/95; headings by level
 * (h1 text-3xl/sm:4xl bold, h2 text-2xl/sm:3xl bold, h3 text-xl/sm:2xl
 * semibold, h4 text-lg/sm:xl, h5 text-lg, h6 small caps accent); lists pl-6
 * space-y-2; links accent-strong underlined; bold/italic in full ink.
 */
.dx-real .dx-prose {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: color-mix(in oklab, var(--color-ink) 95%, transparent);
}
.dx-real .dx-prose > :is(p, div, blockquote) {
  font-size: 1.125rem;
  line-height: 1.625;
}
.dx-real .dx-prose :is(h1, h2, h3, h4, h5, h6) {
  /* Body headings use the text font on the real site; also overrides the
     legacy .dx-h1/.dx-h2/.dx-h3 classes left in imported post HTML. */
  font-family: var(--font-sans);
  color: var(--color-ink);
  text-wrap: balance;
}
.dx-real .dx-prose h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -0.025em; }
.dx-real .dx-prose h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -0.025em; }
.dx-real .dx-prose h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
.dx-real .dx-prose h4,
.dx-real .dx-prose h5 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.dx-real .dx-prose h6 { font-size: 1rem; line-height: 1.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent-strong); }
@media (min-width: 40rem) {
  .dx-real .dx-prose h1 { font-size: 2.25rem; line-height: 2.5rem; }
  .dx-real .dx-prose h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .dx-real .dx-prose h3 { font-size: 1.5rem; line-height: 2rem; }
  .dx-real .dx-prose h4 { font-size: 1.25rem; line-height: 1.75rem; }
}
.dx-real .dx-prose :is(ul, ol) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.dx-real .dx-prose ul { list-style: disc; }
.dx-real .dx-prose ol { list-style: decimal; }
.dx-real .dx-prose a {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dx-real .dx-prose :is(strong, b) { color: var(--color-ink); font-weight: 700; }
.dx-real .dx-prose :is(em, i) { color: var(--color-ink); }
.dx-real .dx-prose blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: 1.25rem;
  font-style: italic;
}
.dx-real .dx-prose :is(img, video, iframe) { max-width: 100%; height: auto; border-radius: 1rem; }
.dx-real .dx-prose iframe { width: 100%; aspect-ratio: 16 / 9; }
.dx-real .dx-prose figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: color-mix(in oklab, var(--color-ink) 75%, transparent); }

/* Footer social links (2026-10-07): icon + name pill buttons so they're easy
   to find, still quiet. Explicit :visited color — the old plain text links
   fell back to the browser's visited color, which made "X" nearly invisible. */
.dx-footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.dx-footer-social-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(247, 243, 234, 0.8);
}
.dx-footer-bottom .dx-footer-social ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dx-footer .dx-footer-social a,
.dx-footer .dx-footer-social a:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #f7f3ea;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.dx-footer .dx-footer-social a:hover,
.dx-footer .dx-footer-social a:focus-visible {
  background: #00a68f;
  border-color: #00a68f;
  color: #002c3d;
}
.dx-footer-social a:focus-visible {
  outline: 2px solid #f7f3ea;
  outline-offset: 2px;
}
.dx-footer-social svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/*
 * Mobile/tablet header (2026-10-07) — matches the real site's header below
 * 1024px (its `lg` breakpoint; GeneratePress's mobile menu is moved to the
 * same width in divinex-blocks.php):
 *   row:   logo + rounded-full border-white/15 px-3 py-2 "Menu" / "Close" button
 *   panel: border-t white/10 bg-ink-2, max-h-[80vh] scroll, px-4 py-3;
 *          rows border-b white/5, links py-3 text-lg font-medium cream,
 *          "+" / "−" submenu toggles, submenu pl-4 pb-2 links py-2.5 text-lg;
 *          CTA mt-4 mb-2 full-width rounded-full bg-accent py-3 font-semibold.
 * #site-navigation in these selectors outranks the desktop nav rules above.
 */
@media (max-width: 1023px) {
  header#masthead .inside-header {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 0 16px;
  }
  header#masthead #mobile-menu-control-wrapper {
    display: flex;
    margin-left: auto;
  }
  header#masthead #mobile-menu-control-wrapper .menu-toggle {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 8px 12px;
    color: #f7f3ea;
    font-family: var(--dx-font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }
  header#masthead #mobile-menu-control-wrapper .menu-toggle .gp-icon {
    display: none;
  }
  header#masthead #mobile-menu-control-wrapper .menu-toggle::after {
    content: "Menu";
  }
  header#masthead #mobile-menu-control-wrapper .menu-toggle[aria-expanded="true"]::after {
    content: "Close";
  }
  header#masthead #site-navigation .inside-navigation > .menu-toggle {
    display: none;
  }

  header#masthead #site-navigation {
    flex: 1 1 100%;
    order: 3;
    margin: 12px -16px -12px;
    background: #005372;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 80vh;
    overflow-y: auto;
  }
  header#masthead #site-navigation:not(.toggled) {
    display: none;
  }
  header#masthead #site-navigation .inside-navigation {
    display: block;
    padding: 12px 16px;
  }
  header#masthead #site-navigation .main-nav > ul {
    display: block;
    width: 100%;
  }
  header#masthead #site-navigation .main-nav > ul > li {
    float: none;
    margin-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  header#masthead #site-navigation .main-nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: #f7f3ea;
  }
  header#masthead #site-navigation .main-nav > ul > li > a::after {
    display: none;
  }
  header#masthead #site-navigation .main-nav ul li .dropdown-menu-toggle {
    padding: 0 12px;
    font-size: 18px;
    line-height: 28px;
    color: rgba(247, 243, 234, 0.95);
  }
  header#masthead #site-navigation .main-nav ul li .dropdown-menu-toggle::after {
    content: "+";
    font-size: 18px;
  }
  header#masthead #site-navigation .main-nav ul li.sfHover > a .dropdown-menu-toggle::after,
  header#masthead #site-navigation .main-nav ul li .dropdown-menu-toggle[aria-expanded="true"]::after {
    content: "\2212";
  }
  header#masthead #site-navigation ul ul {
    display: none;
    position: static;
    width: auto;
    height: auto;
    left: auto;
    opacity: 1;
    visibility: visible;
    float: none;
    padding: 0 0 8px 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  header#masthead #site-navigation ul ul.toggled-on,
  header#masthead #site-navigation ul li.sfHover > ul {
    display: block;
  }
  header#masthead #site-navigation .main-nav ul ul li a {
    padding: 10px 0;
    font-size: 18px;
    line-height: 28px;
    background: transparent;
    border-radius: 0;
  }
  header#masthead #site-navigation .main-nav > ul > li.dx-nav-cta {
    border-bottom: 0;
    margin: 16px 0 8px;
  }
  header#masthead #site-navigation .main-nav > ul > li.dx-nav-cta > a {
    display: block;
    width: 100%;
    margin-left: 0;
    padding: 12px 20px;
    text-align: center;
    font-weight: 600;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  header#masthead .inside-header {
    padding: 12px 24px;
  }
  header#masthead #site-navigation {
    margin: 12px -24px -12px;
  }
  header#masthead #site-navigation .inside-navigation {
    padding: 12px 24px;
  }
}

/* Phone gutters: the real site's containers are px-4 (16px) below 640px and
   px-6 (24px) from sm up; the .dx-wrap family was 24px at every width. */
@media (max-width: 639px) {
  .dx-wrap, .dx-wrap-sm, .dx-wrap-xs, .dx-wrap-md, .dx-wrap-lg { padding-left: 16px; padding-right: 16px; }
}