/* ZHA GROUP — Divi 5 module design layer.
   Styles the Divi-native page modules to the ZHA design system.
   Tokens live in global.css. */

/* ---------- Page / section rhythm ---------- */
.et-l--post .et_pb_section { background-color: transparent; }

.et-l--post .zha-sec { padding-top: var(--sp-sec); padding-bottom: var(--sp-sec); }
.et-l--post .zha-sec--tight { padding-top: var(--sp-sec-tight); padding-bottom: var(--sp-sec-tight); }

.et-l--post .zha-bg-2 { background-color: var(--c-bg-2); }
.et-l--post .zha-surface { background-color: var(--c-surface); }
.et-l--post .zha-surface-alt { background-color: var(--c-surface-alt); }

.et-l--post .zha-sec + .zha-sec { border-top: 1px solid var(--c-border); }

/* ---------- Interior page hero ---------- */
.et-l--post .zha-hero-interior {
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(30, 167, 242, 0.14), transparent 60%),
    linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 100%);
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--c-border);
}

.et-l--post .zha-eyebrow {
  color: var(--c-silver);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: 0.82rem;
  margin: 0 0 10px;
}
.et-l--post .zha-hero__h1,
.et-l--post h1.zha-h1 { font-size: clamp(2.25rem, 1.2rem + 4vw, 4.25rem); line-height: 1.08; margin: 0 0 16px; color: var(--c-text); }
.et-l--post h2.zha-h2 { font-size: clamp(1.75rem, 1.1rem + 2.5vw, 2.75rem); line-height: 1.15; margin: 0 0 14px; color: var(--c-text); }
.et-l--post h3.zha-h3 { font-size: clamp(1.25rem, 1.05rem + 1.4vw, 1.75rem); line-height: 1.25; margin: 0 0 10px; color: var(--c-text); }
.et-l--post .zha-lede { color: var(--c-text-2); font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); max-width: 64ch; }
.et-l--post .zha-section-lede { color: var(--c-text-2); max-width: 70ch; }
.et-l--post .zha-muted { color: var(--c-text-2); }
.et-l--post .zha-muted-2 { color: var(--c-text-muted); }

/* Remove Divi default text-module bottom spacing so our rhythm controls it */
.et-l--post .et_pb_text { margin-bottom: 0; }
.et-l--post .et_pb_text_inner > :last-child { margin-bottom: 0; }

/* ---------- Text-box prose (every divi/text block) ---------- */
.et-l--post .et_pb_text_inner {
  max-inline-size: 70ch;
  color: var(--c-text-2);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.et-l--post .et_pb_text_inner > * + * { margin-block-start: 1em; }
.et-l--post .et_pb_text_inner p { text-wrap: pretty; }
.et-l--post .et_pb_text_inner h2 { font-size: var(--fs-h2); line-height: 1.15; color: var(--c-text); }
.et-l--post .et_pb_text_inner h3 { font-size: var(--fs-h3); line-height: 1.25; color: var(--c-text); }
.et-l--post .et_pb_text_inner ul,
.et-l--post .et_pb_text_inner ol { padding-inline-start: 1.15em; }
.et-l--post .et_pb_text_inner li + li { margin-block-start: .4em; }
.et-l--post .et_pb_text_inner ul > li::marker { color: var(--c-accent); }
.et-l--post .et_pb_text_inner a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(30, 167, 242, .45);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.et-l--post .et_pb_text_inner a:hover { color: var(--c-accent-hover); text-decoration-color: currentColor; }
.et-l--post .et_pb_text_inner strong { color: var(--c-text); font-weight: 600; }
.et-l--post .et_pb_text_inner blockquote {
  margin: 1.4em 0;
  padding-inline-start: 1em;
  border-inline-start: 3px solid var(--c-accent);
  color: var(--c-text);
  font-size: 1.08em;
}
.et-l--post .et_pb_text_inner hr { border: 0; border-top: 1px solid var(--c-border); margin-block: 1.6em; }
.et-l--post .et_pb_text_inner code {
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: .1em .4em;
  font-size: .9em;
}

/* Opt-in panel variant */
.et-l--post .zha-text-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: clamp(16px, 2.5vw, 28px);
}

/* Light bands — text */
.et-l--post .zha-light .et_pb_text_inner { color: var(--c-light-text-2); }
.et-l--post .zha-light .et_pb_text_inner h2,
.et-l--post .zha-light .et_pb_text_inner h3,
.et-l--post .zha-light .et_pb_text_inner strong { color: var(--c-light-text); }
.et-l--post .zha-light .et_pb_text_inner a { color: var(--c-light-link); }
.et-l--post .zha-light .et_pb_text_inner ul > li::marker { color: var(--c-accent); }

/* CKB / RTL */
[dir="rtl"] .et-l--post .et_pb_text_inner { text-align: start; line-height: 1.9; }

/* ---------- Breadcrumbs ---------- */
.et-l--post .zha-breadcrumb,
.et-l--post .et_pb_breadcrumbs { font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 14px; }
.et-l--post .zha-breadcrumb a,
.et-l--post .et_pb_breadcrumbs a { color: var(--c-text-2); text-decoration: none; }
.et-l--post .zha-breadcrumb a:hover { color: var(--c-accent-hover); }

/* ---------- Card blurbs ---------- */
.et-l--post .zha-card {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 22px;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.et-l--post .zha-card:hover {
  transform: translateY(-3px);
  border-color: rgba(30, 167, 242, 0.4);
  box-shadow: var(--shadow-soft);
}
.et-l--post .zha-card.et_pb_blurb .et_pb_module_header,
.et-l--post .zha-card .et_pb_module_header {
  color: var(--c-text);
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 8px;
}
.et-l--post .zha-card .et_pb_blurb_description { color: var(--c-text-2); font-size: 0.96rem; }
.et-l--post .zha-card .et-pb-icon { color: var(--c-accent); font-size: 28px; }

.et-l--post .zha-card--flat { background-color: transparent; border-color: transparent; padding: 0; }
.et-l--post .zha-card--accent { border-top: 3px solid var(--c-accent); }

/* Steps — numbered blurbs */
.et-l--post .zha-step { counter-reset: none; position: relative; padding-top: 8px; }
.et-l--post .zha-step .et_pb_module_header { color: var(--c-text); }
.et-l--post .zha-step .et_pb_blurb_description { color: var(--c-text-2); }
.et-l--post .zha-step__num {
  display: block;
  color: var(--c-accent);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

/* ---------- Buttons ---------- */
.et-l--post a.et_pb_button.zha-btn-primary,
.et-l--post .zha-btn-primary .et_pb_button,
.et-l--header a.et_pb_button.zha-btn-primary,
.et-l--footer a.et_pb_button.zha-btn-primary {
  background-color: var(--c-accent);
  color: var(--c-on-accent) !important;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.6em 1.3em;
  font-weight: 600;
  line-height: 1.3;
  transition: background-color .2s ease, transform .2s ease;
}
.et-l--post a.et_pb_button.zha-btn-primary:hover,
.et-l--post .zha-btn-primary .et_pb_button:hover,
.et-l--header a.et_pb_button.zha-btn-primary:hover,
.et-l--footer a.et_pb_button.zha-btn-primary:hover {
  background-color: var(--c-accent-hover);
  color: var(--c-on-accent) !important;
  transform: translateY(-1px);
}
.et-l--post a.et_pb_button.zha-btn-primary:after,
.et-l--post .zha-btn-primary .et_pb_button:after,
.et-l--header a.et_pb_button.zha-btn-primary:after,
.et-l--footer a.et_pb_button.zha-btn-primary:after,
.et-l--post a.et_pb_button.zha-btn-ghost:after,
.et-l--post .zha-btn-ghost .et_pb_button:after,
.et-l--header a.et_pb_button.zha-btn-ghost:after { display: none; }
.et-l--post a.et_pb_button.zha-btn-ghost,
.et-l--post .zha-btn-ghost .et_pb_button,
.et-l--header a.et_pb_button.zha-btn-ghost {
  background-color: transparent;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 0.6em 1.3em;
  font-weight: 600;
  line-height: 1.3;
  transition: background-color .2s ease, transform .2s ease;
}
.et-l--post a.et_pb_button.zha-btn-ghost:hover,
.et-l--post .zha-btn-ghost .et_pb_button:hover,
.et-l--header a.et_pb_button.zha-btn-ghost:hover {
  background-color: var(--c-surface-alt);
  color: var(--c-text) !important;
}

/* Divi button wrappers inside button modules */
.et-l--post .et_pb_button_module_wrapper,
.et-l--header .et_pb_button_module_wrapper,
.et-l--footer .et_pb_button_module_wrapper { margin: 0; line-height: 1.3; }

/* ---------- Icon lists ---------- */
.et-l--post .zha-list .et_pb_icon_list_item { align-items: flex-start; margin-bottom: 10px; }
.et-l--post .zha-list .et-pb-icon { color: var(--c-accent); }
.et-l--post .zha-list .et_pb_icon_list_text { color: var(--c-text-2); }

/* ---------- CTA banner ---------- */
.et-l--post .zha-cta {
  background: var(--grad-cta);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}
.et-l--post .zha-cta .et_pb_module_header,
.et-l--post .zha-cta h2 { color: var(--c-text); }
.et-l--post .zha-cta .et_pb_promo_content,
.et-l--post .zha-cta .et_pb_promo_description { color: var(--c-text-2); }
.et-l--post .zha-cta .et_pb_promo_button {
  background-color: var(--c-accent);
  color: var(--c-on-accent) !important;
  border-radius: 999px;
  font-weight: 600;
}
.et-l--post .zha-cta .et_pb_promo_button:hover { background-color: var(--c-accent-hover); }

/* ---------- Home hero ---------- */
.et-l--post .zha-hero {
  position: relative;
  min-height: min(92svh, 780px);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 100%);
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 64px;
}
.et-l--post .zha-hero__inner { position: relative; z-index: 2; }
/* Let the network SVG anchor to the section, not the column/module */
.et-l--post .zha-hero .et_pb_row,
.et-l--post .zha-hero .et_pb_row > .et_pb_column,
.et-l--post .zha-hero .et_pb_code,
.et-l--post .zha-hero .et_pb_code_inner { position: static; }
.et-l--post .zha-hero .et_pb_text,
.et-l--post .zha-hero .et_pb_button_module_wrapper { position: relative; z-index: 2; }
.et-l--post .zha-hero .et_pb_button_module_wrapper { display: inline-block; margin: 0 10px 10px 0; }
.et-l--post .zha-hero__tagline { margin-top: 16px; font-style: italic; color: var(--c-text-muted); }
.et-l--post .zha-hero-network {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: 100%;
  height: clamp(200px, 46vh, 430px);
  display: block;
  pointer-events: none;
  z-index: 1;
}
.et-l--post .zha-route { fill: none; stroke: var(--c-accent); stroke-width: 1.8; stroke-linecap: round; opacity: 0.9; }
.et-l--post .zha-route--dim { opacity: 0.35; }
.et-l--post .zha-hub { fill: var(--c-accent); stroke: var(--c-bg); stroke-width: 2; }
.et-l--post .zha-plane { will-change: transform; filter: drop-shadow(0 0 6px rgba(30, 167, 242, 0.45)); }
.et-l--post .zha-plane__body { fill: var(--c-silver); stroke: var(--c-accent); stroke-width: 1.2; }
.et-l--post .zha-plane__wing,
.et-l--post .zha-plane__tail { fill: var(--c-surface-alt); stroke: var(--c-accent); stroke-width: 1; }
.et-l--post .zha-hero__ctas { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* ---------- Forms (dark theme) ---------- */
.et-l--post .zha-form-wrap {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 36px);
}
.et-l--post .zha-form-wrap .fluentform,
.zha-form-wrap .fluentform { color: var(--c-text); }
.zha-form-wrap .fluentform input:not([type="checkbox"]):not([type="radio"]),
.zha-form-wrap .fluentform select,
.zha-form-wrap .fluentform textarea {
  background-color: var(--c-bg-2);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  border-radius: var(--radius-sm);
}
.zha-form-wrap .fluentform label,
.zha-form-wrap .fluentform .ff-el-input--label label { color: var(--c-text); }
.zha-form-wrap .fluentform .ff-el-help-message { color: var(--c-text-muted); }
.zha-form-wrap .fluentform .ff-btn-submit,
.et-l--post .zha-form-wrap .fluentform button[type="submit"] {
  background-color: var(--c-accent);
  color: var(--c-on-accent);
  border-radius: 999px;
  font-weight: 600;
  border: 0;
}
.zha-form-wrap .fluentform .step-nav button,
.zha-form-wrap .fluentform .ff-step-nav-btn {
  background-color: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  border-radius: 999px;
}

/* ---------- Translation-pending notice (CKB) ---------- */
.et-l--post .zha-notice {
  background: rgba(30, 167, 242, 0.12);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--c-text);
  font-weight: 600;
  margin: 0;
}

/* ---------- Long-form legal pages ---------- */
.et-l--post .zha-legal { background-color: var(--c-light); color: #0b1a2a; }
.et-l--post .zha-legal h1,
.et-l--post .zha-legal h2,
.et-l--post .zha-legal h3 { color: #0b1a2a; }
.et-l--post .zha-legal a { color: var(--c-light-link); }
.et-l--post .zha-legal .et_pb_text_inner { color: #22303f; }

/* ---------- Light sections: component overrides (Appendix C) ---------- */
.et-l--post .zha-light .zha-card,
.et-l--post .zha-light-2 .zha-card {
  background-color: #FFFFFF;
  border-color: var(--c-light-border);
  box-shadow: var(--shadow-soft);
}
.et-l--post .zha-light .zha-card .et_pb_module_header,
.et-l--post .zha-light-2 .zha-card .et_pb_module_header { color: var(--c-light-text); }
.et-l--post .zha-light .zha-card .et_pb_blurb_description,
.et-l--post .zha-light-2 .zha-card .et_pb_blurb_description { color: var(--c-light-text-2); }
.et-l--post .zha-light .zha-card .et-pb-icon,
.et-l--post .zha-light-2 .zha-card .et-pb-icon { color: var(--c-light-link); }

.et-l--post .zha-light .zha-step .et_pb_module_header { color: var(--c-light-text); }
.et-l--post .zha-light .zha-step .et_pb_blurb_description { color: var(--c-light-text-2); }
.et-l--post .zha-light .zha-step__num { color: var(--c-light-link); }

.et-l--post .zha-light a.et_pb_button.zha-btn-ghost,
.et-l--post .zha-light .zha-btn-ghost .et_pb_button {
  border-color: var(--c-light-border);
  color: var(--c-light-text) !important;
}
.et-l--post .zha-light a.et_pb_button.zha-btn-ghost:hover { background: var(--c-light-2); }

.et-l--post .zha-light .zha-cta {
  background-color: #FFFFFF;
  border-color: var(--c-light-border);
  box-shadow: var(--shadow-soft);
}
.et-l--post .zha-light .zha-cta h2,
.et-l--post .zha-light .zha-cta .et_pb_module_header { color: var(--c-light-text); }
.et-l--post .zha-light .zha-cta .et_pb_promo_content { color: var(--c-light-text-2); }

.zha-light .zha-office-card {
  background: #FFFFFF;
  border-color: var(--c-light-border);
  box-shadow: var(--shadow-soft);
}
.zha-light .zha-office-card__name { color: var(--c-light-text); }
.zha-light .zha-office-card__location,
.zha-light .zha-office-card__address { color: var(--c-light-text-2); }

.zha-light .zha-form-wrap { background-color: #FFFFFF; border-color: var(--c-light-border); }
.zha-light .zha-form-wrap .fluentform input:not([type="checkbox"]):not([type="radio"]),
.zha-light .zha-form-wrap .fluentform select,
.zha-light .zha-form-wrap .fluentform textarea {
  background-color: #FFFFFF;
  border-color: var(--c-light-border);
  color: var(--c-light-text);
}
.zha-light .zha-form-wrap .fluentform label,
.zha-light .zha-form-wrap .fluentform .ff-el-input--label label { color: var(--c-light-text); }