/* ============================================================================
 SHM four-language visual system — 2026-11-10
 Shared stylesheet: identical file on Egypt and Saudi hosting.
 Egypt: purple/red brand. Saudi Arabia: green/red brand.
 The site languages use one unified body/menu/headings font per language.
 IMPORTANT: KEEP the Font Awesome / Ionicons CSS; their icon fonts are excluded.
 ============================================================================ */
:root {
  --shm-brand: #383480;
  --shm-brand-deep: #27245d;
  --shm-accent: #df2635;
  --shm-accent-hover: #bd202d;
  --shm-text-main: #354052;
  --shm-text-muted: #556273;
  --shm-hairline: #e5e9ee;
  --shm-soft: #f5f7fa;
  --shm-font: 'Roboto', Arial, sans-serif;
  --shm-card-shadow: 0 6px 24px rgba(29,37,67,.07);
}
body.shm-ksa {
  --shm-brand: #076b45;
  --shm-brand-deep: #07543a;
  --shm-soft: #f4f8f6;
}
html[lang="ar"] { --shm-font: 'Cairo', Tahoma, sans-serif; }

/* Text typography across the WHOLE page, not only the navigation.
   The intentionally selected elements exclude decorative i.icon/i.fa glyphs. */
body,
body :is(h1,h2,h3,h4,h5,h6,p,li,a,button,input,select,textarea,label,blockquote,small,strong,b,td,th,summary,figcaption),
body .story .entry-summary ol,
body .story .entry-summary ol li,
body #primary-menu a,
body #primary-menu-mobile a {
  font-family: var(--shm-font) !important;
}
/* Icon rendering comes from Font Awesome / Ionicons, never override it. */
/* Decorative i.icon / i.fa elements retain their original icon-library font. */
body { font-size:16px; line-height:1.72; color:var(--shm-text-main); -webkit-font-smoothing:antialiased; }
html[lang="ar"] body { line-height:1.9; }
body p,body .entry-summary,body .about-text p,body li { line-height:inherit; }
body :is(h1,h2,h3,h4,h5,h6) { line-height:1.32; font-weight:700; letter-spacing:-.01em; }
html[lang="ar"] body :is(h1,h2,h3,h4,h5,h6) { line-height:1.45;letter-spacing:normal; }
body h1 {font-size:clamp(30px,3.3vw,44px);}
body h2 {font-size:clamp(27px,2.8vw,36px);}
body h3 {font-size:clamp(20px,2vw,26px);}
body :is(p,li,a) {overflow-wrap:break-word;}
.container,.container-custom { max-width:1240px; }

/* Exactly 20% visual enlargement relative to the site's current logo size.
   Transform leaves the intrinsic logo proportions unchanged and does not force
   the navigation column wider (which would break the existing mega menu). */
#site-header .logo-brand a,
#site-header .logo-brand-mobile a {display:inline-flex;align-items:center;overflow:visible;}
#site-header .logo-brand img,
#site-header .logo-brand-mobile img {
  transform:scale(1.20) !important;
  transform-origin:left center !important;
  object-fit:contain;
}
html[lang="ar"] #site-header .logo-brand img,
html[lang="ar"] #site-header .logo-brand-mobile img { transform-origin:right center !important; }
#site-header .logo-brand,#site-header .logo-brand-mobile {overflow:visible!important;}
#site-header .main-header {background:#fff;box-shadow:0 3px 16px rgba(31,39,61,.07);}
#site-header .main-header > .container-custom {padding-top:10px;padding-bottom:10px;}
#site-header #primary-menu > li > a {font-size:13px;font-weight:700;letter-spacing:0;}
#site-header #primary-menu > li:hover > a { color:var(--shm-accent)!important; }
#header_topbar { background:var(--shm-brand-deep); }
#header_topbar a, #header_topbar li {font-size:12px;}
#header_topbar .topbar-languages a {font-weight:700;}
#site-header .mobile-header {background:#fff;box-shadow:0 3px 14px rgba(31,39,61,.07);}

/* Consistent buttons. Keep existing Contact Us links; do not add RFQ links. */
body .btn.btn-primary,
body a.btn.btn-primary,
body .main-navigation > .btn.btn-primary,
body .mobile-nav > .btn.btn-primary {
  background:var(--shm-accent)!important;
  border:1px solid var(--shm-accent)!important;
  color:white!important;
  border-radius:6px!important;
  padding:12px 21px;
  font-size:14px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  box-shadow:none;
}
body .btn.btn-primary:hover,body a.btn.btn-primary:hover {
  background:var(--shm-accent-hover)!important;
  border-color:var(--shm-accent-hover)!important;
}
body a:focus-visible,body button:focus-visible,body summary:focus-visible {
 outline:3px solid var(--shm-accent);outline-offset:3px;
}

/* Both homepages: matching 510px desktop / 390px tablet / 350px phone hero.
   Existing Egypt slide photos and Saudi slide photo are intentionally preserved. */
body.shm-home .slider .slider-item,
body.shm-ksa .slider .slider-item {position:relative;isolation:isolate;overflow:hidden;}
body.shm-home .slider .slider-item > img,
body.shm-ksa .slider .slider-item > img {
 display:block!important;width:100%!important;
 height:510px!important;min-height:0!important;max-height:none!important;
 object-fit:cover!important;
}
body.shm-home .slider .slider-item::after,
body.shm-ksa .slider .slider-item::after {
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,rgba(12,22,42,.76) 0%,rgba(12,22,42,.48) 56%,rgba(12,22,42,.17) 100%);
}
html[lang="ar"] body.shm-home .slider .slider-item::after,
html[lang="ar"] body.shm-ksa .slider .slider-item::after {
  background:linear-gradient(270deg,rgba(12,22,42,.76) 0%,rgba(12,22,42,.48) 56%,rgba(12,22,42,.17) 100%);
}
body.shm-home .slider .slider-content,
body.shm-ksa .slider .shm-hero-copy {color:#fff;position:relative;z-index:2;}
body.shm-home .slider .slider-content h2,
body.shm-ksa .slider .shm-hero-copy h1 {
  font-size:clamp(30px,3.7vw,50px)!important;
  font-weight:800!important;
  line-height:1.24!important;
  color:white!important;
  max-width:870px;
  margin:0 0 25px!important;
  text-shadow:0 2px 12px rgba(0,0,0,.15);
}
html[lang="ar"] body.shm-home .slider .slider-content h2,
html[lang="ar"] body.shm-ksa .slider .shm-hero-copy h1 {line-height:1.42!important;}
body.shm-home .shm-hero-kicker,
body.shm-ksa .shm-hero-kicker {
 display:block;color:#fff!important;font-size:13px;line-height:1.5;
 font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 15px;
}
html[lang="ar"] body .shm-hero-kicker {letter-spacing:normal;text-transform:none;font-size:15px;}
body.shm-ksa .slider .shm-hero-overlay {
 position:absolute;inset:0;z-index:2;display:flex;align-items:center;pointer-events:none;
}
body.shm-ksa .slider .shm-hero-overlay a,
body.shm-ksa .slider .shm-hero-overlay button {pointer-events:auto;}
body.shm-ksa .slider .shm-hero-overlay .container {width:100%;}

/* Shared section rhythm, content cards, product imagery and partner logos. */
body.shm-ksa .about,body.shm-ksa .story,body.shm-ksa .partners,
body.shm-ksa .sections,body.shm-ksa .certificates,
body.shm-ksa .bg-contact-info {padding-top:66px;padding-bottom:66px;}
body.shm-ksa .bg-light {background:var(--shm-soft)!important;}
body.shm-ksa .story .post-box,
body.shm-ksa .services-item .services-box,
body.shm-home .services-item .services-box {
  background:white;border:1px solid var(--shm-hairline);
  border-radius:10px;box-shadow:var(--shm-card-shadow);overflow:hidden;
}
body.shm-ksa .story .entry-media img,
body.shm-ksa .services-item .services-icon img {
 width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
}
body.shm-ksa .story .inner-post {padding:22px;}
body.shm-ksa .story .entry-summary p,
body.shm-ksa .story .entry-summary ol li,
body.shm-ksa .services-item .services-content p {font-size:16px;line-height:1.75;}
html[lang="ar"] body.shm-ksa .story .entry-summary :is(p,li) {line-height:1.95;}
body.shm-ksa .story .entry-summary ol {padding-inline-start:23px!important;}
body.shm-ksa .about-text p {font-size:16px;line-height:1.8;}
html[lang="ar"] body.shm-ksa .about-text p {line-height:1.95;}
body.shm-ksa .partner-slider .partner-item .inner {
  border:1px solid var(--shm-hairline);border-radius:8px;
  box-shadow:0 4px 15px rgba(25,40,55,.055);
}
body.shm-ksa .partner-slider .partner-item .thumb img {object-fit:contain;}
body.shm-ksa #site-footer {margin-top:0;}

/* Desktop and mobile are deliberately matched between the two countries. */
@media(max-width:991px){
  body.shm-home .slider .slider-item > img,
  body.shm-ksa .slider .slider-item > img {height:390px!important;}
  body.shm-ksa .about,body.shm-ksa .story,body.shm-ksa .partners,
  body.shm-ksa .sections,body.shm-ksa .certificates,
  body.shm-ksa .bg-contact-info {padding-top:52px;padding-bottom:52px;}
  #site-header .logo-brand-mobile img {transform:scale(1.20)!important;}
}
@media(max-width:600px){
  body {font-size:15px;}
  body.shm-home .slider .slider-item > img,
  body.shm-ksa .slider .slider-item > img {height:350px!important;}
  body.shm-home .slider .slider-content h2,
  body.shm-ksa .slider .shm-hero-copy h1 {font-size:27px!important;line-height:1.3!important;}
  html[lang="ar"] body.shm-home .slider .slider-content h2,
  html[lang="ar"] body.shm-ksa .slider .shm-hero-copy h1 {font-size:26px!important;line-height:1.48!important;}
  body.shm-ksa .about,body.shm-ksa .story,body.shm-ksa .partners,
  body.shm-ksa .sections,body.shm-ksa .certificates,
  body.shm-ksa .bg-contact-info {padding-top:40px;padding-bottom:40px;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;}}


/* ==========================================================================
   Typography correction (2026-11-11)
   Cairo: ALL Arabic content, including the Arabic language-switcher on EN pages.
   Roboto: English content and the English language-switcher on AR pages.
   This also handles legacy Egyptian AR pages mistakenly declaring html lang=en.
   Other shared theme rules, brand colors, layout and icons stay unchanged.
   ========================================================================== */

/* The modern Arabic templates use lang=ar; older Egypt product pages sometimes
   use html lang=en but body style=direction:rtl. Both must receive Cairo. */
html[lang|="ar"],
body[dir="rtl"],
body[style*="direction:rtl"],
body[style*="direction: rtl"] {
  --shm-font: 'Cairo', Tahoma, sans-serif;
}

/* Consistent Arabic body, menu, titles, paragraphs, footer and form fields. */
html[lang|="ar"] body,
body[dir="rtl"],
body[style*="direction:rtl"],
body[style*="direction: rtl"] {
  font-family: 'Cairo', Tahoma, sans-serif !important;
}

/* Arabic word in the English site's top-right language switcher.
   This needs an explicit override because the shared design uses Roboto on
   English pages, including all <a> elements. */
html[lang|="en"] body:not([dir="rtl"]):not([style*="direction:rtl"]):not([style*="direction: rtl"])
#header_topbar .topbar-languages a,
html[lang|="en"] body:not([dir="rtl"]):not([style*="direction:rtl"]):not([style*="direction: rtl"])
.topbar-languages a,
#header_topbar .topbar-languages a[lang|="ar"],
#primary-menu-mobile a[lang|="ar"] {
  font-family: 'Cairo', Tahoma, sans-serif !important;
  letter-spacing: normal !important;
  font-weight: 700;
}

/* The label 'English' on the Arabic sites should match other English text. */
html[lang|="ar"] #header_topbar .topbar-languages a,
html[lang|="ar"] #primary-menu-mobile a[lang="en"],
body[dir="rtl"] #header_topbar .topbar-languages a,
body[style*="direction:rtl"] #header_topbar .topbar-languages a,
body[style*="direction: rtl"] #header_topbar .topbar-languages a {
  font-family: 'Roboto', Arial, sans-serif !important;
  letter-spacing: normal !important;
}

/* Explicit Arabic snippets anywhere inside otherwise English pages. */
body [lang|="ar"]:not(.fa):not(.icon):not([class*="ion-"]) {
  --shm-font: 'Cairo', Tahoma, sans-serif;
  font-family: 'Cairo', Tahoma, sans-serif !important;
  letter-spacing: normal !important;
}

/* Keep decorative icons on their own Font Awesome / Ionicons fonts. */

/* ====================================================================
   2026-11-11 Stable typography: loaded as the FINAL stylesheet in <head>.
   Explicitly lock Cairo / Roboto against earlier theme-specific rules.
   These rules DO NOT target <i>, SVG icons, .fa or ionicon glyphs.
   ==================================================================== */
html[lang|="ar"] body,
html[lang|="ar"] body :is(h1,h2,h3,h4,h5,h6,p,li,a,button,input,textarea,select,label,small,strong,b,blockquote,td,th,summary,figcaption),
body[dir="rtl"], body[dir="rtl"] :is(h1,h2,h3,h4,h5,h6,p,li,a,button,input,textarea,select,label,small,strong,b,blockquote,td,th,summary,figcaption),
body[style*="direction:rtl"], body[style*="direction:rtl"] :is(h1,h2,h3,h4,h5,h6,p,li,a,button,input,textarea,select,label,small,strong,b,blockquote,td,th,summary,figcaption),
body[style*="direction: rtl"], body[style*="direction: rtl"] :is(h1,h2,h3,h4,h5,h6,p,li,a,button,input,textarea,select,label,small,strong,b,blockquote,td,th,summary,figcaption) {
  font-family: 'Cairo', Tahoma, sans-serif !important;
}
html[lang|="en"] body:not([dir="rtl"]):not([style*="direction:rtl"]):not([style*="direction: rtl"]),
html[lang|="en"] body:not([dir="rtl"]):not([style*="direction:rtl"]):not([style*="direction: rtl"]) :is(h1,h2,h3,h4,h5,h6,p,li,a,button,input,textarea,select,label,small,strong,b,blockquote,td,th,summary,figcaption) {
  font-family: 'Roboto', Arial, sans-serif !important;
}
/* Language-switch labels are exceptions to the page-language rule. */
html[lang|="en"] body #header_topbar .topbar-languages a,
html[lang|="en"] body .topbar-languages a,
html[lang|="en"] body #primary-menu-mobile a[lang="ar"],
html[lang|="en"] body #primary-menu-mobile a[href^="ar/"] {
  font-family: 'Cairo', Tahoma, sans-serif !important;
  letter-spacing: normal !important;
}
html[lang|="ar"] body #header_topbar .topbar-languages a,
html[lang|="ar"] body #primary-menu-mobile a[lang="en"],
body[dir="rtl"] #header_topbar .topbar-languages a,
body[style*="direction:rtl"] #header_topbar .topbar-languages a {
  font-family: 'Roboto', Arial, sans-serif !important;
  letter-spacing: normal !important;
}
/* Explicitly language-tagged inline text in either version. */
body :is(a,span,p,div,li,strong,b)[lang|="ar"] {font-family:'Cairo',Tahoma,sans-serif!important;}
body :is(a,span,p,div,li,strong,b)[lang|="en"] {font-family:'Roboto',Arial,sans-serif!important;}