@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

/* ==========================================================
   ebmnt1-base.css
   reset + body + main + هيكل السكشن (master / inner)
   + متغيرات الـ layout والـ typography المشتركة
   ========================================================== */

:root {
    /* ---------- layout ---------- */
    --ebmnt1-container-max-width: 1280px;
    --ebmnt1-container-side-space: 2em;
    --ebmnt1-main-gap: 5em;
    --ebmnt1-section-inner-gap: 2em;
    --ebmnt1-section-edge-gap: 4em;
    --ebmnt1-header-top-bar-height: 5.5rem;
    --ebmnt1-header-scroll-offset: 5rem;

    /* ---------- radius ---------- */
    --ebmnt1-radius-card: 15px;
    --ebmnt1-radius-pill: 100px;

    /* ---------- motion ---------- */
    --ebmnt1-transition-base: 0.3s ease;

    /* ---------- typography (كلها clamp) ---------- */
    --ebmnt1-font-family-main: "El Messiri", sans-serif;
    --ebmnt1-font-size-hero-title: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);
    --ebmnt1-font-size-section-title: clamp(2.1rem, 1.2rem + 3vw, 3.5rem);
    --ebmnt1-font-size-large-title: clamp(1.5rem, 1rem + 1.6vw, 2.3rem);
    --ebmnt1-font-size-card-title: clamp(1.25rem, 0.9rem + 0.9vw, 1.6rem);
    --ebmnt1-font-size-small-title: clamp(1.05rem, 0.85rem + 0.5vw, 1.3rem);
    --ebmnt1-font-size-label: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
    --ebmnt1-font-size-body: clamp(0.95rem, 0.9rem + 0.2vw, 1rem);
    --ebmnt1-font-size-caption: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
    --ebmnt1-font-size-quote: clamp(1.1rem, 0.9rem + 0.75vw, 1.6rem);

    --ebmnt1-line-height-heading: 1.3;
    --ebmnt1-line-height-body: 1.8;

    --ebmnt1-font-weight-regular: 400;
    --ebmnt1-font-weight-medium: 500;
    --ebmnt1-font-weight-semibold: 600;
    --ebmnt1-font-weight-bold: 700;

    /* ---------- ألوان الـ base (راجعة للـ root) ---------- */
    --ebmnt1-base-page-background-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-base-body-text-color: var(--ebmnt1-color-helper-body-gray);
    --ebmnt1-base-heading-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-base-focus-outline-color: var(--ebmnt1-color-secondary-yellow);
}

@media (min-width: 768px) {
    :root {
        --ebmnt1-section-edge-gap: 5em;
        --ebmnt1-header-top-bar-height: 3.5rem;
        --ebmnt1-header-scroll-offset: 5.5rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --ebmnt1-section-edge-gap: 7em;
        --ebmnt1-header-scroll-offset: 6rem;
    }
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--ebmnt1-header-scroll-offset);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "El Messiri", sans-serif;
    font-size: var(--ebmnt1-font-size-body);
    font-weight: var(--ebmnt1-font-weight-regular);
    line-height: var(--ebmnt1-line-height-body);
    color: var(--ebmnt1-base-body-text-color);
    background-color: var(--ebmnt1-base-page-background-color);
    overflow-x: hidden;
    overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ebmnt1-font-family-main);
    line-height: var(--ebmnt1-line-height-heading);
    color: var(--ebmnt1-base-heading-text-color);
}

ul,
ol {
    list-style: none;
}

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

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

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
}

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

/* ---------- main ---------- */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ebmnt1-main-gap);
}

/* عنصر وهمي في آخر الـ main عشان الـ gap يفصل بين آخر سكشن والفوتر (بدون padding) */
main::after {
    content: "";
}

/* ==========================================================
   هيكل السكشن
   master container  >  inner container
   ========================================================== */
.ebmnt1-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ebmnt1-section__inner {
    width: calc(100% - var(--ebmnt1-container-side-space));
    max-width: var(--ebmnt1-container-max-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ebmnt1-section-inner-gap);
    text-align: center;
}

/* سكشن له خلفية ملونة ممتدة:
   المسافة فوق وتحت بتتعمل بالـ gap بين عنصرين وهميين (بدون padding أو margin) */
.ebmnt1-section--edged {
    gap: var(--ebmnt1-section-edge-gap);
}

.ebmnt1-section--edged::before,
.ebmnt1-section--edged::after {
    content: "";
}

.ebmnt1-section--edged-top-only::after {
    content: none;
}

/* السكشن اللي بيلزق في اللي قبله (بيلغي الـ gap بتاع الـ main) */
.ebmnt1-section--attached {
    margin-block-start: calc(var(--ebmnt1-main-gap) * -1);
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}