/* ==========================================================
   base.css — reset + body + main + أبعاد مشتركة (بدون ألوان)
   Breakpoints (mobile first / min-width):
   320 (base) · 375 · 425 · 768 · 1024 · 1440 (large)
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

:root {
  /* Containers */
  --ebmnt1-container-max-width: 1240px;
  --ebmnt1-container-gutter: calc(100% - 2em);
  --ebmnt1-text-max-width-hero: 42rem;
  --ebmnt1-text-max-width-section: 38rem;

  /* Layout rhythm */
  --ebmnt1-main-gap: 5em;
  --ebmnt1-inner-gap: 2em;

  /* Typography scale (clamp) */
  --ebmnt1-font-size-display: clamp(2.25rem, 1.4rem + 4.2vw, 4.375rem);
  --ebmnt1-font-size-section-title: clamp(1.875rem, 1.3rem + 2.8vw, 3.4375rem);
  --ebmnt1-font-size-subheading: clamp(1.375rem, 1.1rem + 1.3vw, 1.875rem);
  --ebmnt1-font-size-card-title: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
  --ebmnt1-font-size-item-title: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  --ebmnt1-font-size-lead: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
  --ebmnt1-font-size-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --ebmnt1-font-size-label: clamp(0.8125rem, 0.8rem + 0.15vw, 0.9375rem);

  /* Shape + motion */
  --ebmnt1-radius-card: 15px;
  --ebmnt1-radius-panel: 10px;
  --ebmnt1-radius-button: 16px;
  --ebmnt1-radius-pill: 100px;
  --ebmnt1-transition-duration: 0.35s;
  --ebmnt1-transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ebmnt1-header-height: 5.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--ebmnt1-header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  font-family: "El Messiri", sans-serif;
  font-size: var(--ebmnt1-font-size-body);
  line-height: 1.7;
  color: var(--ebmnt1-color-text-body);
  background-color: var(--ebmnt1-color-white);
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--ebmnt1-color-secondary);
  font-weight: 700;
  line-height: 1.35;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ebmnt1-main-gap);
  overflow-x: clip;
}

/* ---------- Section scaffold (master + inner) ---------- */
.ebmnt1-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ebmnt1-section__inner {
  position: relative;
  width: var(--ebmnt1-container-gutter);
  max-width: var(--ebmnt1-container-max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ebmnt1-inner-gap);
  text-align: center;
}

.ebmnt1-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--ebmnt1-color-primary);
  outline-offset: 3px;
}

/* ---------- Reveal on scroll ---------- */
[data-ebmnt1-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.8s var(--ebmnt1-transition-easing), transform 0.8s var(--ebmnt1-transition-easing);
  transition-delay: var(--ebmnt1-reveal-delay, 0s);
}

[data-ebmnt1-reveal="right"] {
  transform: translateX(2rem);
}

[data-ebmnt1-reveal="left"] {
  transform: translateX(-2rem);
}

[data-ebmnt1-reveal="zoom"] {
  transform: scale(0.88);
}

[data-ebmnt1-reveal].ebmnt1-is-visible {
  opacity: 1;
  transform: none;
}

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

  [data-ebmnt1-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 768px) {
  :root {
    --ebmnt1-header-height: 5.75rem;
  }
}