/* CodeX Media — base element styles built on top of Bootstrap 5 + tokens.css */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background-color: var(--cx-background);
  color: var(--cx-text);
  font-family: var(--cx-font-en);
  font-size: var(--cx-fs-base);
  line-height: var(--cx-lh-normal);
  -webkit-font-smoothing: antialiased;
}

html[lang="ar"] body {
  font-family: var(--cx-font-ar);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--cx-lh-tight);
  color: var(--cx-text);
}

a {
  color: var(--cx-primary);
  text-decoration: none;
}

a:hover {
  color: var(--cx-purple);
}

p {
  color: var(--cx-secondary-text);
}

.text-secondary-cx {
  color: var(--cx-secondary-text);
}

/* Visible, accessible focus state for every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cx-soft-blue);
  outline-offset: 2px;
  border-radius: var(--cx-radius-sm);
}

::selection {
  background: var(--cx-lavender);
  color: var(--cx-text);
}

.container-cx {
  width: 100%;
  max-width: var(--cx-container-max);
  margin-inline: auto;
  padding-inline: var(--cx-space-16);
}

@media (min-width: 768px) {
  .container-cx {
    padding-inline: var(--cx-space-32);
  }
}

/* On phones the container padding is 16px, while a Bootstrap `g-5` row pulls
   its edges out by 24px — that 8px on each side is what made the page scroll
   sideways (most visible in RTL). Cap the horizontal gutter to twice the
   container padding so rows stay inside the viewport. */
@media (max-width: 767.98px) {
  .container-cx .row.g-5,
  .container-cx .row.gx-5 {
    --bs-gutter-x: 2rem;
  }
}

.section {
  padding-block: var(--cx-space-64);
}

@media (max-width: 767.98px) {
  .section {
    padding-block: var(--cx-space-48);
  }
}

.section-title {
  font-size: var(--cx-fs-2xl);
}

@media (min-width: 768px) {
  .section-title {
    font-size: var(--cx-fs-3xl);
  }
}

.eyebrow {
  display: inline-block;
  font-size: var(--cx-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cx-primary);
  background: var(--cx-lavender);
  padding: var(--cx-space-4) var(--cx-space-12);
  border-radius: var(--cx-radius-pill);
}

img {
  max-width: 100%;
  height: auto;
}

/* Prevent any layout from introducing horizontal scroll */
html, body {
  overflow-x: hidden;
}