/* ============================================================================
   CompLogix component classes
   ----------------------------------------------------------------------------
   Built on complogix-tokens.css. Load tokens first.

   All classes are prefixed `clx-` so they cannot collide with Divi's `et_pb_*`
   classes. Nothing here overrides Divi — these are additive, for use inside
   Divi code modules and on new landing pages.

   No build step, no dependencies: this file is meant to be linkable or
   inlinable as-is.
   ========================================================================== */

/* --- Layout -------------------------------------------------------------- */

.clx-section {
  padding-block: var(--clx-section-py);
  background: var(--clx-surface);
}
.clx-section--alt    { background: var(--clx-surface-alt); }
.clx-section--muted  { background: var(--clx-surface-muted); }
.clx-section--dark   { background: var(--clx-surface-dark); color: var(--clx-text-on-dark); }
.clx-section--dark :is(h1, h2, h3, h4) { color: var(--clx-text-on-dark); }

.clx-container {
  width: 100%;
  max-width: var(--clx-container);
  margin-inline: auto;
  padding-inline: var(--clx-space-4);
  box-sizing: border-box;
}

/* Auto-fitting grid. `--clx-grid-min` tunes the breakpoint per instance. */
.clx-grid {
  display: grid;
  gap: var(--clx-space-5);
  grid-template-columns: repeat(auto-fit, minmax(var(--clx-grid-min, 260px), 1fr));
}

.clx-stack > * + * { margin-top: var(--clx-space-3); }

/* --- Typography ---------------------------------------------------------- */

.clx-prose {
  font-family: var(--clx-font);
  font-size: var(--clx-fs-body);
  line-height: var(--clx-lh-body);
  color: var(--clx-text);
}

.clx-h1, .clx-h2, .clx-h3 {
  font-family: var(--clx-font);
  margin: 0;
}
.clx-h1 {
  font-size: var(--clx-fs-h1); line-height: var(--clx-lh-h1);
  letter-spacing: var(--clx-ls-h1);
  font-weight: var(--clx-fw-bold); color: var(--clx-navy);
}
.clx-h2 {
  font-size: var(--clx-fs-h2); line-height: var(--clx-lh-h2);
  letter-spacing: var(--clx-ls-h2);
  font-weight: var(--clx-fw-medium); color: var(--clx-text-strong);
}
.clx-h3 {
  font-size: var(--clx-fs-h3); line-height: var(--clx-lh-h3);
  letter-spacing: var(--clx-ls-h3);
  font-weight: var(--clx-fw-medium); color: var(--clx-text-strong);
}

/* The uppercase cyan label that sits above a heading. Uses the AA-safe cyan:
   at 18px/700 the raw brand cyan measures 2.14:1 and is unreadable. */
.clx-eyebrow {
  display: block;
  font-family: var(--clx-font);
  font-size: var(--clx-fs-h4);
  line-height: var(--clx-lh-h4);
  letter-spacing: var(--clx-ls-h4);
  font-weight: var(--clx-fw-bold);
  text-transform: uppercase;
  color: var(--clx-cyan-aa);
  margin-bottom: var(--clx-space-2);
}
.clx-section--dark .clx-eyebrow { color: var(--clx-cyan); } /* 6.4:1 on navy — fine */

.clx-lead {
  font-family: var(--clx-font);
  font-size: var(--clx-fs-lead);
  line-height: var(--clx-lh-lead);
  color: var(--clx-text);
}

.clx-link {
  color: var(--clx-cyan-aa);
  font-weight: var(--clx-fw-bold);
  text-decoration: none;
}
.clx-link:hover { text-decoration: underline; }
.clx-section--dark .clx-link { color: var(--clx-cyan); }

/* --- Buttons ------------------------------------------------------------- */

.clx-btn {
  display: inline-block;
  font-family: var(--clx-font);
  font-size: var(--clx-fs-button);
  font-weight: var(--clx-fw-bold);
  letter-spacing: var(--clx-ls-button);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 12px 50px;
  border: 0;
  border-radius: var(--clx-radius-button);
  cursor: pointer;
  transition: background-color var(--clx-transition), color var(--clx-transition);
}

/* Green = highest intent ("Request a Demo"). AA-safe green with white label. */
.clx-btn--primary { background: var(--clx-green-aa); color: var(--clx-text-on-dark); }
.clx-btn--primary:hover { background: #3d6510; }

/* Blue = standard action. */
.clx-btn--secondary { background: var(--clx-blue-aa); color: var(--clx-text-on-dark); }
.clx-btn--secondary:hover { background: #005b82; }

/* White/outline, as used for "Let's Start a Conversation". */
.clx-btn--ghost {
  background: var(--clx-surface);
  color: var(--clx-text-ghost);
  box-shadow: inset 0 0 0 var(--clx-border-width) var(--clx-border-strong);
  padding: 10px 36px;
}
.clx-btn--ghost:hover { background: var(--clx-surface-alt); }

/* On navy sections. */
.clx-btn--on-dark {
  background: var(--clx-surface);
  color: var(--clx-navy);
}
.clx-btn--on-dark:hover { background: var(--clx-surface-alt); }

.clx-btn--sm { padding: 7px 38px; }
.clx-btn--block { display: block; width: 100%; }

.clx-btn:focus-visible {
  outline: 3px solid var(--clx-cyan-aa);
  outline-offset: 2px;
}

/* --- Card ---------------------------------------------------------------- */

.clx-card {
  background: var(--clx-surface);
  border: 1px solid var(--clx-border);
  border-radius: var(--clx-radius-card);
  padding: var(--clx-space-5);
  box-shadow: var(--clx-shadow-card);
}
.clx-card__title {
  font-family: var(--clx-font);
  font-size: 20px;
  font-weight: var(--clx-fw-semibold);
  color: var(--clx-text-strong);
  margin: 0 0 var(--clx-space-2);
}
.clx-card__body {
  font-family: var(--clx-font);
  font-size: var(--clx-fs-body);
  line-height: var(--clx-lh-body);
  color: var(--clx-text);
  margin: 0;
}

/* --- Hero ---------------------------------------------------------------- */

.clx-hero {
  padding-block: var(--clx-space-8);
  background: var(--clx-surface);
}
.clx-hero__inner {
  display: grid;
  gap: var(--clx-space-6);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
}
.clx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clx-space-3);
  margin-top: var(--clx-space-5);
}

/* --- Forms --------------------------------------------------------------- */
/*
   Forms are NOT defined here. The form component lives in
   frontend/forms/complogix-forms.{css,js} and is already in production; its
   markup convention is authoritative:

       .clx-form-wrapper > .clx-form > .clx-form-group
                         > label + input + .clx-field-error
       .clx-submit-btn, .clx-form-message, .clx-form-row, .clx-required

   That stylesheet is now written against these same tokens, so forms inherit
   the design system automatically. Load complogix-tokens.css alongside it.

   Do not add .clx-input / .clx-label / .clx-error here: `.clx-error` already
   means "this field is in an error state" in the production stylesheet, and
   redefining it as a message element would break the live forms.
   ------------------------------------------------------------------------- */

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 980px) {
  .clx-hero__inner { grid-template-columns: 1fr; }
  :root {
    --clx-fs-h1: 40px; --clx-lh-h1: 46px;
    --clx-fs-h2: 34px; --clx-lh-h2: 38px; --clx-ls-h2: -1px;
  }
}

@media (max-width: 600px) {
  :root {
    --clx-fs-h1: 32px; --clx-lh-h1: 38px;
    --clx-fs-h2: 27px; --clx-lh-h2: 32px;
    --clx-section-py: 40px;
  }
  .clx-btn { padding: 12px 28px; }
  .clx-btn--block { width: 100%; }
}