/* Geometry and type follow SHM Egypt. Colors belong to the Saudi theme. */
:root {
  --shm-font: Roboto, Arial, sans-serif;
  --shm-body-leading: 1.72;
  --shm-nav-size: 14px;
  --shm-wrap: 1240px;
  --shm-gutter: 15px;
  --shm-section-space: 66px;
  --shm-body-ink: #293f35;
  --shm-heading-ink: #08643a;
  --shm-nav-ink: #232c26;
  --shm-link-ink: #ab2231;
}

html[lang="ar"] {
  --shm-font: Cairo, Tahoma, sans-serif;
  --shm-body-leading: 1.9;
  --shm-nav-size: 16px;
}

html body, html body[dir="rtl"] {
  font: 400 16px/var(--shm-body-leading) var(--shm-font);
  color: var(--shm-body-ink);
}

body :is(input, textarea, select, button) { font-family: var(--shm-font); }
body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--shm-font);
  font-weight: 700;
  line-height: 1.35;
}

/* Home and Partners use different header markup. */
#site-header .container-custom, .ksa-header .ksa-headrow, .ksa-contactbar .ksa-container {
  box-sizing: border-box;
  width: min(100%, var(--shm-wrap));
  max-width: var(--shm-wrap);
  margin-inline: auto;
  padding-inline: var(--shm-gutter);
}

#site-header :is(#primary-menu, #primary-menu-mobile) > li > a,
body :is(.ksa-nav, .ksa-mobile-nav) > a {
  font: 700 var(--shm-nav-size)/1.5 var(--shm-font);
  color: var(--shm-nav-ink);
}

#site-header :is(#primary-menu, #primary-menu-mobile) > li > a:hover,
#site-header :is(#primary-menu, #primary-menu-mobile) > li > a:focus-visible,
#site-header #primary-menu > li.active > a,
body :is(.ksa-nav, .ksa-mobile-nav) > a:hover,
body :is(.ksa-nav, .ksa-mobile-nav) > a:focus-visible,
body :is(.ksa-nav, .ksa-mobile-nav) > a[aria-current="page"] { color: var(--shm-heading-ink); }

#site-header #header_topbar :is(li, a), body :is(.ksa-topitem, .ksa-lang) {
  font-size: 13px;
  line-height: 1.5;
}

@media (min-width: 992px) {
  #site-header #header_topbar, body .ksa-contactbar .ksa-container { min-height: 56px; }
  #site-header #header_topbar :is(.topbar-left, .topbar-right) {
    display: flex;
    align-items: center;
    min-height: 56px;
    margin-block: 0;
  }
  #site-header .main-header > .container-custom { padding-block: 10px; }
  #site-header .main-header > .container-custom > .row { min-height: 112px; }
  #site-header .main-header.active > .container-custom > .row { min-height: 60px; }
  #site-header .main-header .logo-brand { margin: 0; padding: 0; }
  #site-header .main-header .logo-brand img, .ksa-header .ksa-logo img { max-height: 104px; }
  #site-header .main-header.active .logo-brand img, .ksa-header.is-compact .ksa-logo img { max-height: 60px; }
  #site-header .main-header .main-navigation { margin: 0; }
  #site-header #primary-menu { display: inline-flex; align-items: center; gap: 12px; }
  #site-header #primary-menu > li { margin: 0; }
  #site-header #primary-menu > li > a, body .ksa-nav > a { padding: 12px 3px; }
  .ksa-header .ksa-headrow { height: 132px; }
  .ksa-header.is-compact .ksa-headrow { height: 80px; }
  body .ksa-header .ksa-logo { width: min(25vw, 280px); flex-basis: min(25vw, 280px); }
  body .ksa-header.is-compact .ksa-logo { width: min(22vw, 208px); flex-basis: min(22vw, 208px); }
  body .ksa-header .ksa-nav { display: flex; gap: 12px; }
  body .ksa-header .ksa-mobile-toggle, body .ksa-mobile-nav.is-open { display: none; }
  body .ksa-contactbar { display: block; }
}

@media (max-width: 991px) {
  #site-header #primary-menu-mobile > li > a, body .ksa-mobile-nav > a {
    padding: 11px 8px;
    font-size: 14px;
  }
  html[lang="ar"] #site-header #primary-menu-mobile > li > a,
  html[lang="ar"] body .ksa-mobile-nav > a { font-size: 16px; }
  #site-header .mobile-header .logo-brand-mobile img, .ksa-header .ksa-logo img { max-height: 65px; }
  .ksa-header .ksa-headrow, .ksa-header.is-compact .ksa-headrow { height: 80px; }
}

/* Content widths include the same side gutters as the reference. */
#site-header ~ section .container, #site-header ~ section .container-custom {
  box-sizing: border-box;
  width: min(100%, var(--shm-wrap));
  max-width: var(--shm-wrap);
  padding-inline: var(--shm-gutter);
}

#site-header ~ :is(#about, #story, #sections, #contact) { padding-block: var(--shm-section-space); }
#site-header ~ section h2 {
  color: var(--shm-heading-ink);
  font-size: 32px;
  margin-block-end: 12px;
}
#site-header ~ section h3 { font-size: 22px; margin-block-end: 10px; }
#site-header ~ section :is(p, .entry-summary ol, .entry-summary ol li) {
  font: 400 16px/var(--shm-body-leading) var(--shm-font) !important;
  color: var(--shm-body-ink);
}
#site-header ~ #contact .contact-info h2 { font-size: 22px; }

main .ksa-container {
  box-sizing: border-box;
  width: min(100%, 1200px);
  padding-inline: var(--shm-gutter);
}
main .ksa-hero { padding-block: 67px 70px; }
main .ksa-hero h1 { font-size: clamp(30px, 3.55vw, 45px); line-height: 1.35; }
main .ksa-hero .ksa-eyebrow { font-size: 12px; line-height: 1.72; margin-block-end: 12px; }
main .ksa-hero p:not(.ksa-eyebrow) { max-width: 760px; font-size: 17px; line-height: 1.75; }
main .ksa-main { padding-block: 14px 20px; }
main .ksa-box { padding: 15px 20px; margin-block-end: 13px; }
main .ksa-box h2 { font-size: 29px; margin-block-end: 6px; color: var(--shm-heading-ink); }
main .ksa-box p { font-size: 15px; line-height: 1.6; margin-block-end: 7px; color: var(--shm-body-ink); }
main .ksa-red-link { color: var(--shm-link-ink); }
main .ksa-network { margin-block-end: 13px; }
main .ksa-network-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 15px; }
main .ksa-countries { padding: 14px 16px; }
main .ksa-countries h3 { font-size: 19px; line-height: 1.35; margin-block-end: 5px; }
main .ksa-country-group h4 { font-size: 14px; line-height: 1.32; margin-block-end: 6px; gap: 8px; }
main .ksa-country-list li { font-size: 12px; line-height: 1.45; }
main .ksa-partner-card { min-height: 253px; padding: 19px 15px 22px; }
main .ksa-logo-frame { height: 125px; min-height: 125px; padding: 8px 8px 5px; margin-block-end: 12px; }
main .ksa-logo-frame img { max-height: 112px; }
main .ksa-partner-card h3 { font-size: 19px; line-height: 1.35; margin-block-end: 10px; }
main .ksa-partner-card p { font-size: 14px; line-height: 1.65; }

/* The shared Saudi footer keeps the same component sizes in both languages. */
body #shm-ksa-footer, body #shm-ksa-footer[dir="rtl"] {
  font: 400 16px/var(--shm-body-leading) var(--shm-font);
}
body #shm-ksa-footer .ksa-foot-wrap { width: min(100%, var(--shm-wrap)); max-width: var(--shm-wrap); padding-inline: 30px; }
body #shm-ksa-footer .ksa-foot-main { padding-block: 27px 18px; }
body #shm-ksa-footer .ksa-foot-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
body #shm-ksa-footer .ksa-foot-main-logo { width: 240px; max-height: 65px; margin-block-end: 11px; }
body #shm-ksa-footer .ksa-foot-copyright { font-size: 14px; line-height: 1.65; font-weight: 400; }
body #shm-ksa-footer .ksa-foot-group-title { font-size: 16px; line-height: 1.5; margin-block-end: 7px; }
body #shm-ksa-footer .ksa-foot-company { min-height: 42px; font-size: 13px; gap: 10px; }
body #shm-ksa-footer .ksa-foot-social { margin-block-start: 0; }
body #shm-ksa-footer .ksa-foot-bottom-row { min-height: 54px; }
body #shm-ksa-footer .ksa-foot-bottom-item { min-height: 52px; padding: 13px 24px; font-size: 14px; line-height: 1.8; }

@media (max-width: 991px) {
  :root { --shm-section-space: 52px; }
  main .ksa-hero { padding-block: 48px; }
  body #shm-ksa-footer .ksa-foot-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  main .ksa-network-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  body #shm-ksa-footer .ksa-foot-wrap { padding-inline: var(--shm-gutter); }
  body #shm-ksa-footer .ksa-foot-columns { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  body #shm-ksa-footer .ksa-foot-company { font-size: 14px; }
  body #shm-ksa-footer .ksa-foot-bottom-item { min-height: 44px; padding: 8px 11px; font-size: 12px; white-space: normal; }
}

@media (max-width: 600px) {
  :root { --shm-section-space: 40px; }
  html body, html body[dir="rtl"] { font-size: 15px; }
  #site-header ~ section h2, main .ksa-box h2 { font-size: 27px; }
  main .ksa-hero { padding-block: 40px; }
  main .ksa-box { padding: 15px; }
  main .ksa-partner-card { min-height: 223px; }
  main .ksa-logo-frame { height: 118px; min-height: 118px; }
  main .ksa-logo-frame img { max-height: 105px; }
}