/* ================================================================== */
/*  Cybersolus Design System — cs-* class namespace                   */
/*                                                                    */
/*  Replaces Elementor/TheGem classes with clean, semantic selectors.  */
/*  Source of truth for all generated content styling (prose regions   */
/*  rendered by content-renderer.ts).                                  */
/*                                                                    */
/*  Font stack: Sora (weights 100-800) via Google Fonts                */
/*  Color palette: dark navy #071c26, teal accent #0b7a5f             */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/*  1. CSS Custom Properties (design tokens)                           */
/* ------------------------------------------------------------------ */

:root {
  /* typography */
  --cs-font-heading: "Sora Regular", "Sora", sans-serif;
  --cs-font-body: "Sora Regular", "Sora", sans-serif;
  --cs-font-button: "Sora Medium", "Sora", sans-serif;

  --cs-text-h1: 46px;
  --cs-text-h2: 36px;
  --cs-text-h3: 30px;
  --cs-text-xl: 58px;
  --cs-text-body: 20px;

  --cs-lh-h1: 1.3;
  --cs-lh-h2: 1.47;       /* 53px / 36px */
  --cs-lh-h3: 1.33;       /* 40px / 30px */
  --cs-lh-xl: 1.4;        /* 81.2px / 58px */
  --cs-lh-body: 1.5;      /* 30px / 20px */

  /* color */
  --cs-color-heading: #071c26;
  --cs-color-text: rgba(7, 28, 38, 0.82);
  --cs-color-text-light: rgba(7, 28, 38, 0.6);
  --cs-color-border: rgba(7, 28, 38, 0.08);
  --cs-color-accent: #0b7a5f;
  --cs-color-btn-bg: #76ffc2;
  --cs-color-white: #ffffff;

  /* layout */
  --cs-container-max: 1500px;
  --cs-container-inner-max: 1170px;
  --cs-widget-spacing: 20px;
  --cs-section-padding: 10px;

  /* border */
  --cs-radius-img: 50px;
  --cs-radius-btn: 50px;
}

/* ------------------------------------------------------------------ */
/*  2. Layout containers                                               */
/*  Replaces: .e-con, .e-con-boxed, .e-con-full, .e-con-inner,        */
/*            .e-parent, .e-child, .e-flex                             */
/* ------------------------------------------------------------------ */

.cs-section {
  display: var(--display, flex);
  flex-direction: var(--flex-direction, column);
  position: relative;
  box-sizing: border-box;
  width: var(--width, 100%);
  min-width: 0;
  overflow: var(--overflow, visible);
  margin-block-start: var(--margin-top, 0);
  margin-block-end: var(--margin-bottom, 0);
  margin-inline-start: var(--margin-left, 0);
  margin-inline-end: var(--margin-right, 0);
  padding-inline-start: var(--padding-left, var(--cs-section-padding));
  padding-inline-end: var(--padding-right, var(--cs-section-padding));
  padding-block-start: var(--padding-top, var(--cs-section-padding));
  padding-block-end: var(--padding-bottom, var(--cs-section-padding));
  transition: background 0.3s, border 0.3s, box-shadow 0.3s;
}

.cs-section--boxed {
  max-width: 100%;
}

.cs-section__inner {
  display: flex;
  flex-direction: var(--flex-direction, column);
  width: 100%;
  max-width: var(--cs-container-inner-max);
  margin: 0 auto;
  box-sizing: border-box;
}

/* prose region wrapper gets wider max-width */
.cs-section--root.cs-section--boxed > .cs-section__inner {
  max-width: var(--cs-container-max);
}

.cs-section--nested {
  padding: 0;
}

/* ------------------------------------------------------------------ */
/*  3. Widget wrappers                                                 */
/*  Replaces: .elementor-element, .elementor-widget,                   */
/*            .elementor-widget-container, .elementor-widget__width-*   */
/* ------------------------------------------------------------------ */

.cs-el {
  --flex-direction: initial;
  --flex-wrap: initial;
  --justify-content: initial;
  --align-items: initial;
  --align-content: initial;
  --gap: initial;
  --flex-basis: initial;
  --flex-grow: initial;
  --flex-shrink: initial;
  --order: initial;
  --align-self: initial;
  align-self: var(--align-self);
  flex-basis: var(--flex-basis);
  flex-grow: var(--flex-grow);
  flex-shrink: var(--flex-shrink);
  order: var(--order);
}

.cs-widget {
  position: relative;
  width: var(--container-widget-width, 100%);
}

.cs-widget:not(:last-child) {
  margin-block-end: var(--cs-widget-spacing);
}

.cs-widget--width-initial {
  max-width: 100%;
}

.cs-widget__inner {
  display: block;
  padding: 0;
  overflow: visible;
}

/* ------------------------------------------------------------------ */
/*  4. Typography — Headings                                           */
/*  Replaces: .thegem-heading, .thegem-animated-heading,               */
/*            .title-h1, .title-h2, .title-h3, .title-xlarge          */
/* ------------------------------------------------------------------ */

.cs-heading {
  position: relative;
  font-family: var(--cs-font-heading);
  font-weight: 400;
  color: var(--cs-color-heading);
  margin: 0;
}

.cs-heading.cs-text--h1 {
  font-size: var(--cs-text-h1);
  line-height: var(--cs-lh-h1);
}

.cs-heading.cs-text--h2 {
  font-size: var(--cs-text-h2);
  line-height: var(--cs-lh-h2);
}

.cs-heading.cs-text--h3 {
  font-size: var(--cs-text-h3);
  line-height: var(--cs-lh-h3);
}

.cs-heading.cs-text--xl {
  font-size: var(--cs-text-xl);
  line-height: var(--cs-lh-xl);
}

/* Line wrap helpers (used by animation JS) */
.cs-heading .cs-heading-line-wrap {
  display: block;
  overflow: hidden;
}

.cs-heading .cs-heading-word-wrap,
.cs-heading .cs-heading-letter-wrap {
  display: inline-flex;
  overflow: hidden;
}

.cs-heading .cs-heading-word {
  display: inline-flex;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/*  5. Typography — Body text                                          */
/*  Replaces: .text-body, .elementor-text-editor                       */
/* ------------------------------------------------------------------ */

.cs-text-body {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-body);
  font-weight: 400;
  line-height: var(--cs-lh-body);
  color: var(--cs-color-heading);
  position: relative;
  margin: 0;
}

.cs-rich-text {
  font-family: var(--cs-font-body);
  font-size: var(--cs-text-body);
  line-height: var(--cs-lh-body);
  color: var(--cs-color-heading);
}

.cs-rich-text::after {
  content: "";
  display: table;
  clear: both;
}

.cs-rich-text ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.cs-rich-text li {
  margin-bottom: 0.3em;
}

.cs-rich-text p {
  margin: 0 0 0.7em;
}

.cs-rich-text a {
  color: var(--cs-color-accent);
  text-decoration: underline;
}

.cs-rich-text b,
.cs-rich-text strong {
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/*  6. Image widget                                                    */
/*  Replaces: .elementor-widget-image                                  */
/* ------------------------------------------------------------------ */

.cs-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--cs-radius-img);
  display: block;
}

/* ------------------------------------------------------------------ */
/*  7. Animations                                                      */
/*  Replaces: .thegem-heading-animate, .fade-simple, .lines-slide-up   */
/* ------------------------------------------------------------------ */

.cs-heading--animated:not(.cs-heading--visible) {
  opacity: 0 !important;
}

/* Simple fade */
.cs-heading--visible.cs-anim--fade {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: csHeadingFade;
}

@keyframes csHeadingFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Lines slide up */
.cs-heading--visible.cs-anim--slide-up .cs-heading-line {
  animation-name: csHeadingSlideUp;
  transform: translateY(100%);
  display: inline-block;
  animation-fill-mode: forwards;
  animation-duration: 1200ms;
  animation-timing-function: cubic-bezier(0, 1, 0.3, 1);
}

@keyframes csHeadingSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateX(0); }
}

/* ------------------------------------------------------------------ */
/*  8. Buttons                                                         */
/*  Replaces: .gem-button, .gem-text-button                            */
/* ------------------------------------------------------------------ */

.cs-btn {
  display: inline-block;
  font-family: var(--cs-font-button);
  font-size: 14px;
  font-weight: 400;
  color: var(--cs-color-white);
  background-color: var(--cs-color-btn-bg);
  border: none;
  border-radius: var(--cs-radius-btn);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.cs-btn:hover {
  filter: brightness(0.9);
}

.cs-btn__text {
  display: inline-block;
}

/* ------------------------------------------------------------------ */
/*  9. Prose region wrapper                                            */
/*  New semantic class for the content area between hero and bottom     */
/* ------------------------------------------------------------------ */

.cs-prose {
  width: 100%;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/*  10. Responsive                                                     */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
  :root {
    --cs-text-h2: 30px;
    --cs-text-h3: 26px;
    --cs-text-xl: 46px;
    --cs-text-body: 18px;
  }

  .cs-section__inner {
    max-width: 100%;
    padding: 0 20px;
  }
}

@media (max-width: 767px) {
  :root {
    --cs-text-h2: 26px;
    --cs-text-h3: 22px;
    --cs-text-xl: 36px;
    --cs-text-body: 16px;
  }

  .cs-section__inner {
    padding: 0 15px;
  }

  .cs-heading--animated:not(.cs-heading--visible) {
    opacity: 1 !important;
    animation: none !important;
  }
}