:root {
  /* --- Typography --- */
  --fs-hero: clamp(3.5rem, 5vw + 1rem, 4.5rem);
  --h1-font-size: clamp(2rem, 3vw + 1rem, 2.8rem);    /* Max: 44.8px */
  --h2-font-size: clamp(1.6rem, 2.5vw + 1rem, 2.1rem); /* Max: 33.6px */
  --h3-font-size: clamp(1.25rem, 2vw + 1rem, 1.6rem);  /* Max: 25.6px */
  --h4-font-size: clamp(1rem, 1.5vw + 1rem, 1.3rem);   /* Max: 20.8px */
  
  --fs-base: 1.125rem;  /* 18px */
  --fs-label: 1rem;     /* 16px (تم تقليلها قليلاً لتبرز العناوين أكثر) */

  --h1-font-size-sub:   calc(var(--h1-font-size) * 0.75);
  --h2-font-size-sub:   calc(var(--h2-font-size) * 0.75);
  --h3-font-size-sub:   calc(var(--h3-font-size) * 0.75);
  --h4-font-size-sub:   calc(var(--h4-font-size) * 0.75);
  
  /* --- Spacing --- */
  --space-tiny: 0.5rem;   /* 8px */
  --space-small: 1rem;    /* 16px */
  --space-medium: 2rem;   /* 32px */
  --space-large: 3rem;    /* 48px */
  --space-xl: 5rem;       /* 80px */
}

/* Service Categories (Previously Tags) - 20px for high visibility */
  --service-category: 1.15rem;                          /* ~20.7px */
  --category-weight: 700;

  /* 2. Spacing System (8pt Grid) */
  --hero-gap-elements: 24px;   /* الفراغ بين الخدمات والعنوان */
  --hero-gap-section: 48px;    /* الفراغ بين العنوان والفقرة المتغيرة */
  
/* --- الاستخدام العملي في الموقع --- */

/* الفواصل بين الأقسام (تستخدم في كل الـ Sections) */
.section-wrapper {
  padding-block: var(--space-xl);
}

/* المسافة بين العنوان والفقرة داخل أي قسم */
.section-title {
  margin-bottom: var(--space-medium);
}

/* الفقرات العامة */
p,p li,.moduletable p {
  font-size: var(--fs-base);
  margin-bottom: var(--space-small);
  line-height: 1.7; /* لضمان راحة العين */
}
.container-header .mod-menu > li > a, .container-header .mod-menu > li > span,div.mod-languages a{font-size: var(--fs-base)}

html{font-size: var(--fs-base);}
body *, body{font-size: var(--fs-base);font-family:Inter;font-family:"Space Grotesk";color:var(--black-text-color);
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{font-family:"Space Grotesk";}
h1{font-size:var(--h1-font-size);}
h2{font-size:var(--h2-font-size);}
h3{font-size:var(--h3-font-size);}
h4{font-size:var(--h4-font-size);}
.h2_subtitle *, .h2_subtitle{font-size:var(--h2_subtitle-font-size);font-family:'Inter';text-align:center;}
.h3_subtitle *, .h3_subtitle{font-size:var(--h3_subtitle-font-size);font-family:'Inter';}


small {
  font-size: clamp(0.75rem, 0.3vw + 0.6rem, 0.8rem); /* 12px → 13px */
  line-height: 1.4;
}
.home-banner .home-intro div.first .all-tags{display: flex;flex-wrap: wrap;gap: clamp(0.625rem, 0.5vw, 1.25rem);}
.home-banner .home-intro div.first span.badge{font-size:var(--fs-label);font-weight:var(--category-weight);margin:0;}
body.homepage .moduletable.semi-width.home-banner .carousel-caption .mod-articles-title{font-size:var(--h3-font-size);}
body.homepage .moduletable.semi-width.home-banner .carousel-caption p{font-size:var(--h3-font-size-sub);margin:0;}
header.header.container-header.full-width{margin-bottom:var(--space-medium);}
.moduletable.home-banner figure{margin-top:var(--space-large);}
.moduletable.home-banner figure{margin-bottom:var(--space-small);}
.mod-articles-tags{margin:0 !important;}
.home-banner .row{grid-template-columns: 65% auto 35%;
  align-items: center;
  width: 100%;
  
  margin: 0 auto;}
  ol, ul{padding:0;}
 div.mod-articles-item-content ol,div.mod-articles-item-content ul{padding-left:0;padding-right:1rem;}
 div.mod-articles-item-content ol li,div.mod-articles-item-content ul li{list-style-position:inside;}
.home-banner .home-intro div.separator{margin: 0 0.5rem;}

body.homepage .banner-holder,body.homepage .site-grid{margin-bottom:var(--space-large);}
.moduletable .blog-category-title{margin-top:var(--space-large);}
.moduletable.linked .mod-articles-grid,.moduletable.dark-background .mod-articles-items{margin-top:var(--space-medium);}

.moduletable ul ul li,.moduletable ul li .readmore a{font-size:var(--fs-base);}
.moduletable.dark-background .mod-articles-items .btn-secondary span{display:none;}
.moduletable ul li .readmore a{white-space:nowrap;padding-left:0;}