/*
 * Site header, rebuilt 2026-10-16 from measurements of the live smartmediajo.com header
 * (every value below was read off the live page at 1440/1366/1280/1024/768/600/390 px).
 *
 * States
 *   dark   transparent over a dark hero, white text (default)
 *   light  white bar, dark text: pages rendered with .is-light, and every page once scrolled (.is-scrolled)
 * Layouts
 *   >= 1280px  full bar: logo, links, "More", KSA button, language box
 *   <= 1279px  compact bar: logo, language box, menu button (the live site shows no header at all
 *              between ~1180 and 1279px; we show the compact bar there instead)
 */

.site-header {
    --hdr-text: #fff;
    --hdr-link: #fff;
    --hdr-pill: #fff;
    --hdr-pill-text: #000;
    --hdr-ksa-bg: #fff;
    --hdr-ksa-text: #020103;
    --hdr-lang-border: rgba(255, 255, 255, .19);
    --hdr-lang-text: #fff;
    --hdr-lang-hover-bg: #fff;
    --hdr-lang-hover-text: #000;
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    --hdr-pad-start: 60px;
    --hdr-pad-end: 60.9px;
    height: 105px;
    padding-block: 0;
    padding-inline: var(--hdr-pad-start) var(--hdr-pad-end);
    background: transparent;
    color: var(--hdr-text);
    font-family:Poppins,"IBM Plex Sans Arabic",sans-serif;
    transition: background-color .3s;
}

html[dir=rtl] .site-header { --hdr-pad-start: 60.9px; --hdr-pad-end: 60px; font-family: "IBM Plex Sans Arabic", Arial, sans-serif; }

.site-header.is-light,
.site-header.is-scrolled {
    --hdr-text: #2b2b2b;
    --hdr-link: #2b2b2b;
    --hdr-pill: #ffb912;
    --hdr-ksa-bg: #020103;
    --hdr-ksa-text: #fff;
    --hdr-lang-border: rgba(0, 0, 0, .19);
    --hdr-lang-text: #000;
    --hdr-lang-hover-bg: #000;
    --hdr-lang-hover-text: #fff;
    background: #fff;
}

/* Logo: both variants are in the markup; the state decides which one shows (no image swap on scroll). */
.site-header .brand { flex: none; display: block; line-height: 0; }
.site-header .brand img { display: block; width: auto; height: 60px; }
.site-header .brand img.brand-on-light,
.site-header:is(.is-light, .is-scrolled) .brand img.brand-on-dark { display: none; }
.site-header:is(.is-light, .is-scrolled) .brand img.brand-on-light { display: block; }

/* Primary links */
.site-header #main-nav {
    display: flex;
    align-items: center;
    margin-inline-start: 42px;
    white-space: nowrap;
}

.site-header .nav-link,
.site-header .nav-more > .nav-more-trigger {
    display: block;
    margin: 0 3px;
    padding: 10px 20px;
    border-radius: 4px;
    color: var(--hdr-link);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .3s, background-color .3s, box-shadow .3s;
}

html[dir=rtl] .site-header :is(.nav-link, .nav-more > .nav-more-trigger) { font-weight: 500; }

.site-header .nav-link[aria-current] { font-weight: 700; }

.site-header .nav-link:is(:hover, :focus-visible, [aria-current]),
.site-header .nav-more:is(:hover, .is-open) > summary,
.site-header .nav-more > .nav-more-trigger:focus-visible {
    background: var(--hdr-pill);
    color: var(--hdr-pill-text);
    box-shadow: 0 10px 20px rgba(255, 255, 255, .2);
}

/* "More": live shows a vertical ellipsis on the dark English bar and the "More ⇥" label otherwise. */
.site-header .nav-more { position: relative; }
.site-header .nav-more > .nav-more-trigger { border: 0; background: none; font-family: inherit; cursor: pointer; }
.site-header .nav-more-dots {
    display: none;
    width: 3px;
    height: 21px;
    background: radial-gradient(circle, currentColor 1.45px, transparent 1.6px) center / 3px 4.5px repeat-y;
    background-size: 3px 4.5px;
    -webkit-mask: linear-gradient(#000 0 0) center / 3px 12px no-repeat;
    mask: linear-gradient(#000 0 0) center / 3px 12px no-repeat;
}

.site-header .nav-panel {
    display: none;
    position: absolute;
    top: calc(100% + 9px);
    inset-inline-start: -10px;
    z-index: 2;
    text-transform: uppercase;
}

/* Keeps the panel open while the pointer crosses the 9px gap under the trigger. */
.site-header .nav-panel::before { content: ""; position: absolute; inset: -9px 0 100%; }

.site-header .nav-more:is(:hover, .is-open) > .nav-panel { display: block; }

.site-header .nav-submenu {
    box-sizing: border-box;
    width: 210px;
    padding: 14px 0;
    background: #000;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
}

.site-header .nav-submenu a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    font-size: 14px;
    line-height: 21px;
    text-decoration: none;
    white-space: normal;
    transition: color .3s;
}

/* Live hover: yellow label with a 1px rule 5px under the text, drawn from the reading start. */
.site-header .nav-submenu a > span { display: inline-block; }
.site-header .nav-submenu a > span::after {
    content: "";
    position: relative;
    bottom: -5px;
    display: block;
    height: 1px;
    background: #f9d377;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s;
}
html[dir=rtl] .site-header .nav-submenu a > span::after { transform-origin: right center; }
.site-header .nav-submenu a:is(:hover, :focus-visible) { color: #f7c13d; }
.site-header .nav-submenu a:is(:hover, :focus-visible) > span::after { transform: scaleX(1); }

/* Label mode: the panel is just the black submenu. */
.site-header .nav-panel-contact,
.site-header .nav-panel-more-label { display: none; }

/* Ellipsis mode: a slate panel holding white pills; "More" opens the submenu to its side. */
.site-header.is-collapsed .nav-panel {
    inset-inline-start: auto;
    inset-inline-end: -3px;
    box-sizing: border-box;
    width: 210px;
    padding: 14px;
    background: #222733;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
}

.site-header.is-collapsed :is(.nav-panel-contact, .nav-panel-more-label) {
    display: block;
    margin: 0 3px;
    padding: 10px 20px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(255, 255, 255, .2);
    color: #808080;
    font-size: 14px;
    line-height: 21px;
    text-decoration: none;
    transition: color .3s;
}

.site-header.is-collapsed .nav-panel-contact { display: none; margin-bottom: 6px; }
.site-header.is-collapsed :is(.nav-panel-contact, .nav-panel-more:hover > .nav-panel-more-label, .nav-panel-contact:focus-visible):hover { color: #f9d377; }
.site-header.is-collapsed .nav-panel-more { position: relative; }
.site-header.is-collapsed .nav-panel-more > .nav-submenu {
    display: none;
    position: absolute;
    top: 50px;
    inset-inline-start: calc(100% + 18px);
}
.site-header.is-collapsed .nav-panel-more:is(:hover, :focus-within) > .nav-submenu { display: block; }

/* KSA button */
.site-header .ksa-link {
    flex: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 42px;
    margin-inline-start: auto;
    padding: 9px 16px 8px;
    border-radius: 5px;
    background: var(--hdr-ksa-bg);
    box-shadow: 0 10px 20px rgba(255, 255, 255, .2);
    color: var(--hdr-ksa-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s, background-color .3s;
}

.site-header .ksa-flag { flex: none; width: 23px; height: 25px; margin-inline-end: 10px; }
.site-header .ksa-arrow { flex: none; width: 12px; height: 14.08px; margin-inline-start: 8px; transition: filter .3s; }
html[dir=rtl] .site-header .ksa-arrow { transform: scaleX(-1); }
/* Live keeps the LTR physical margins in Arabic, so they land on the outer sides: +10px right, +8px left. */
html[dir=rtl] .site-header .ksa-flag { margin-inline: 10px; }
html[dir=rtl] .site-header .ksa-arrow { margin-inline: 8px; }
.site-header:is(.is-light, .is-scrolled) .ksa-arrow { filter: brightness(0) invert(1); }

.site-header .ksa-link:is(:hover, :focus-visible) { background: #f7c13d; color: #000; }
.site-header .ksa-link:is(:hover, :focus-visible) .ksa-arrow { filter: none; }

/* Language box: a 1px rounded frame around the switch link. */
.site-header .language-box {
    flex: none;
    box-sizing: border-box;
    height: 44px;
    margin-inline-start: 27px;
    padding: 9px 9px 0;
    border: 1px solid var(--hdr-lang-border);
    border-radius: 7px;
    transition: background-color .3s, border-color .3s;
}

html[dir=rtl] .site-header .language-box { margin-inline-start: 30.6px; padding-inline: 16px; }

.site-header .language {
    /* Same text model as live: a 17px Poppins line holding a 14px Arabic label and an icon sitting 5px below the baseline. */
    box-sizing: border-box;
    display: block;
    height: 33px;
    padding: 5px 10px 6px;
    color: var(--hdr-lang-text);
    font: 400 17px/17px Poppins,"IBM Plex Sans Arabic",sans-serif;
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s;
}

html[dir=rtl] .site-header .language { font-family: "IBM Plex Sans Arabic", Arial, sans-serif; }

.site-header .language > span {
    font: 500 14px/14px "IBM Plex Sans Arabic", Arial, sans-serif;
    vertical-align: middle;
}

.site-header .language img { display: inline-block; width: 20px; height: 19px; margin-inline-start: 10px; vertical-align: -5px; }
.site-header:is(.is-light, .is-scrolled) .language img { margin-inline-end: 10px; }
/* Arabic: the icon sits 6px into the link padding, 6px from the label. */
html[dir=rtl] .site-header .language img { margin-inline: 6px -6px; }
html[dir=rtl] .site-header:is(.is-light, .is-scrolled) .language img { margin-inline: 6px 4px; }
.site-header .language img.language-icon-on-light,
.site-header:is(.is-light, .is-scrolled) .language img.language-icon-on-dark { display: none; }
.site-header:is(.is-light, .is-scrolled) .language img.language-icon-on-light { display: inline-block; }

.site-header .language-box:has(.language:is(:hover, :focus-visible)) { background: var(--hdr-lang-hover-bg); }
.site-header .language:is(:hover, :focus-visible) { color: var(--hdr-lang-hover-text); }
/* Hovering swaps to the icon that reads on the inverted box. */
.site-header:not(.is-light, .is-scrolled) .language:is(:hover, :focus-visible) img.language-icon-on-dark { display: none; }
.site-header:not(.is-light, .is-scrolled) .language:is(:hover, :focus-visible) img.language-icon-on-light { display: inline-block; }
.site-header:is(.is-light, .is-scrolled) .language:is(:hover, :focus-visible) img.language-icon-on-light { display: none; }
.site-header:is(.is-light, .is-scrolled) .language:is(:hover, :focus-visible) img.language-icon-on-dark { display: inline-block; }

/* Menu button (compact layouts only) */
.site-header .menu-toggle {
    display: none;
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--hdr-text);
    line-height: 0;
    cursor: pointer;
}

.site-header:is(.is-light, .is-scrolled) .menu-toggle { color: #2b2b2b; }
.site-header .menu-toggle svg { display: block; width: 22.75px; height: 16px; }

/* ---------- Which links fit (thresholds measured on live) ---------- */

/* English pages that open on the dark bar: "More ⇥" from 1488px, the ellipsis below that
   (even once scrolled white); Contact joins the ellipsis below 1420px. */
@media (max-width: 1487px) {
    html[dir=ltr] .site-header:not(.is-light):not(.is-scrolled) .nav-more-label { display: none; }
    html[dir=ltr] .site-header:not(.is-light):not(.is-scrolled) .nav-more-dots { display: block; }
}

/* English pages that open on the light bar: label at 1420px+, ellipsis below; Contact joins it below 1330px. */
@media (max-width: 1419px) {
    html[dir=ltr] .site-header .nav-more-label { display: none; }
    html[dir=ltr] .site-header .nav-more-dots { display: block; }
    html[dir=ltr] .site-header:not(.is-light):not(.is-scrolled) .nav-contact { display: none; }
}

@media (max-width: 1419px) {
    html[dir=ltr] .site-header.is-collapsed:not(.is-light):not(.is-scrolled) .nav-panel-contact { display: block; }
}

@media (max-width: 1329px) {
    html[dir=ltr] .site-header .nav-contact { display: none; }
    html[dir=ltr] .site-header.is-collapsed .nav-panel-contact { display: block; }
}

/* Arabic (dark and light bars alike): "المزيد ⇤" from 1320px, the ellipsis below that. */
@media (max-width: 1319px) {
    html[dir=rtl] .site-header .nav-more-label { display: none; }
    html[dir=rtl] .site-header .nav-more-dots { display: block; }
}

/* ---------- Compact layouts ---------- */

@media (max-width: 1279px) {
    .site-header { height: 86.5px; }
    .site-header .brand img { height: 40px; }
    .site-header :is(#main-nav, .ksa-link) { display: none; }
    html[dir] .site-header .language-box { margin-inline-start: auto; }
    .site-header .menu-toggle { display: block; margin-inline-start: 25.5px; }
}

@media (max-width: 1023px) {
    .site-header .menu-toggle { margin-inline-start: 35.4px; }
}

/* Live tablets: the language box is 15px roomier on each side between 768 and 1023px and sits 20.4px from the
   menu button; in Arabic the logo stands 70px from the edge (9px more) and, from 1024px, the menu button is
   28.9px from the box. Live has no header at all from 1180 to 1279px (a theme bug we do not copy). */
@media (min-width: 768px) and (max-width: 1023px) {
    .site-header .language-box { padding-inline: 24px; }
    html[dir=rtl] .site-header .language-box { padding-inline: 31px; }
    .site-header .menu-toggle { margin-inline-start: 20.4px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
    html[dir=rtl] .site-header .brand { margin-inline-start: 9px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    html[dir=rtl] .site-header .menu-toggle { margin-inline-start: 28.9px; }
}

@media (max-width: 767px) {
    .site-header { --hdr-pad-start: 25px; --hdr-pad-end: 25px; height: 60px; }
    html[dir=rtl] .site-header { --hdr-pad-start: 25px; --hdr-pad-end: 25px; }
    html[dir=rtl] .site-header .language-box { padding-inline: 13px; }
    .site-header .menu-toggle { margin-inline-start: 19.2px; }
    html[dir=rtl] .site-header .brand { margin-inline-start: 10px; }
}

/* ---------- Top loading bar (page-progress.js) ---------- */
.page-progress { position: fixed; inset: 0 0 auto; z-index: 100000; height: 3px; pointer-events: none; transition: opacity .4s ease; }
.page-progress-bar { position: absolute; inset: 0; background: #f7c13d; transition: transform .25s ease-out; }
.page-progress-peg { position: absolute; top: 0; inset-inline-end: 0; width: 100px; height: 100%; box-shadow: 0 0 10px #f7c13d, 0 0 5px #f7c13d; opacity: 1; transform: rotate(3deg) translate(0, -4px); }
html[dir=rtl] .page-progress-peg { transform: rotate(-3deg) translate(0, -4px); }
@media (prefers-reduced-motion: reduce) { .page-progress, .page-progress-bar { transition: none; } }

/* State switch (header-scroll.js): no recolour/resize animation; the white bar fades in like live's fixed copy. */
.site-header.is-switching,
.site-header.is-switching *,
.site-header.is-switching *::before,
.site-header.is-switching *::after { transition: none !important; }
.site-header.is-entering { animation: site-header-enter .3s ease-out both; }
@keyframes site-header-enter { from { opacity: 0; } to { opacity: 1; } }

/* Live's scrolled (white) English bar always shows "Contact Us" and the "More ⇥" label from 1280px up — below
   1420px its nav even wraps to a second row, which we do not copy; ours keeps one row. */
@media (min-width: 1280px) and (max-width: 1419px) {
    html[dir=ltr] .site-header.is-scrolled:not(.is-light) .nav-more-label { display: inline; }
    html[dir=ltr] .site-header.is-scrolled:not(.is-light) .nav-more-dots { display: none; }
    html[dir=ltr] .site-header.is-scrolled:not(.is-light) .nav-contact { display: inline-flex; }
    html[dir=ltr] .site-header.is-scrolled:not(.is-light).is-collapsed .nav-panel-contact { display: none; }
}
/* Arabic scrolled bar (live): "المزيد ⇤" label from 1280px, and the KSA button is 2px wider. */
@media (min-width: 1280px) and (max-width: 1319px) {
    html[dir=rtl] .site-header.is-scrolled .nav-more-label { display: inline; }
    html[dir=rtl] .site-header.is-scrolled .nav-more-dots { display: none; }
}
@media (min-width: 1280px) {
    html[dir=rtl] .site-header.is-scrolled .ksa-link { padding-inline: 17px; }
}