/*!
 * Additions that the static design did not need. Nothing here changes an approved screen:
 * it only covers what a live site adds (skip link without inline handlers, form states, honeypot).
 */

/* skip link: same behaviour as the design's inline onfocus handler, without inline script (strict CSP) */
.skip-link{position:absolute;inset-inline-start:-9999px}
.skip-link:focus{inset-inline-start:12px;inset-block-start:12px;z-index:99;background:#fff;padding:10px 16px}

/* honeypot: off-screen, not display:none (bots ignore hidden fields less often) */
.ab-hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}

/* form feedback (appears only after a submission) */
.f-status{grid-column:1/-1;margin:0 0 4px;padding:14px 18px;border-inline-start:4px solid var(--petrol);background:var(--paper);border-radius:0 var(--r) var(--r) 0;color:var(--ink);font-size:16px;line-height:1.5}
.f-status.is-error{border-inline-start-color:#B3261E}
.f-status:focus{outline:2px solid var(--petrol);outline-offset:2px}
.f .field-error{display:block;margin-block-start:6px;color:#B3261E;font-size:14px;line-height:1.4}
.f [aria-invalid="true"],.f .filepick[data-invalid="true"]{border-color:#B3261E}
.f button[disabled]{opacity:.7;cursor:progress}

/* the 404 page reuses the legal text layout */
.route-404 .legal .btn{margin-block-start:10px}

/* ---- Arabic (right-to-left) ----
 * The design stylesheet is written with logical properties and already carries [dir="rtl"] hooks. The only physical
 * left/right rules are in the language selector; they are mirrored here. Nothing else changes between languages. */
a.lg-opt{text-decoration:none}
.flang a,footer.site .flang a{display:inline;color:inherit;text-decoration:underline;text-underline-offset:2px}
.flang a:hover,footer.site .flang a:hover{text-decoration:none}
@media(min-width:821px){
  html[dir=rtl] .langsel{border-left:0;border-right:1px solid var(--line);margin-left:0;margin-right:14px;padding-left:0;padding-right:8px}
  html[dir=rtl] .site-head.over .langsel,html[dir=rtl][data-top] .site-head .langsel{border-right-color:rgba(255,255,255,.4)}
}
@media(min-width:821px) and (max-width:1239px){html[dir=rtl] .langsel{margin-left:0;margin-right:8px;padding-left:0;padding-right:4px}}
html[dir=rtl] .lg-opt[lang=ar]{direction:rtl}
html[dir=rtl] .field-error{text-align:start}
html[dir=rtl] input[type=email],html[dir=rtl] input[type=tel],html[dir=rtl] input[name=position]{text-align:start}
html[dir=rtl] input[type=email],html[dir=rtl] input[type=tel]{direction:ltr}
html[dir=rtl] input[type=email]::placeholder,html[dir=rtl] input[type=tel]::placeholder{direction:rtl}

/* ---- version 218 additions ---- */
/* News list pages: server-rendered links look like the design's page buttons */
.npag a,.npag .npag-off{display:inline-flex;align-items:center;justify-content:center;min-inline-size:44px;block-size:44px;padding-inline:14px;border:1px solid var(--line);background:var(--white);color:var(--ink);font:inherit;font-size:15px;font-weight:600;border-radius:4px;text-decoration:none;box-sizing:border-box}
.npag a:hover{border-color:var(--petrol);color:var(--petrol)}
.npag a[aria-current="page"]{background:var(--petrol);border-color:var(--petrol);color:#fff}
.npag .npag-off{opacity:.35}
html[dir=rtl] .npag span[aria-hidden]{display:inline-block;transform:scaleX(-1)}
/* the thank-you panel's "send another" link in the no-JavaScript path */
.fsent a.fsent-again{text-decoration:none}
/* a server-rendered invalid file box looks like the browser-checked one */
form.fcv .filepick[data-invalid="true"]{border-color:#B42318!important;background:#FEF3F2}
/* Careers on a phone: details sit under the title and the Apply button */
@media(max-width:560px){.jobs .job{row-gap:10px}}
/* a page that is not the last has no closing rule under its final story (the design hid the stories of the next page, so the last one shown was never the last child) */
.news.more li:last-child{border-block-end:0}

/* ---- Arabic round 2 (29 October 2026) ---- */
/* D1: the Our Businesses dropdown is only as wide as its longest label, so the arrows line up just after it (laptop and up; the phone menu is untouched) */
@media(min-width:821px){
  .submenu.wide.secmenu{inline-size:max-content;min-inline-size:0}
  .submenu.wide.secmenu .sec{gap:16px}
}
/* D2: Careers job cards on phones: no extra space above the Apply button */
@media(max-width:480px){
  .route[data-route="careers.html"] .jobs .job{row-gap:14px !important}
  .route[data-route="careers.html"] .jobs .job .btn{margin-block-start:0 !important}
}
/* D4: Arabic stats bars. Almarai Num is Almarai Extra Bold (Latin part, SIL Open Font License) limited to digits and % + , - . so the numbers match the Arabic labels; the "+" stays after the number as on the English site */
@font-face{font-family:"Almarai Num";src:url("../fonts/almarai-latin-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0025,U+002B-002E,U+0030-0039}
html[dir=rtl] .proof b{font-family:"Almarai Num",Plex,Almarai,sans-serif;font-weight:800;direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .proof span{letter-spacing:0 !important;text-transform:none !important;font-size:13px !important;font-weight:700 !important;line-height:1.5 !important}
/* ---- Arabic round 1, Part 1 (C1-C8) ---- */
/* C1: dropdown arrow of the Careers and Contact forms sits at the left edge in Arabic, not on top of the first letter */
html[dir=rtl] form.f select{background-position:left 14px center}
/* C2: read-more arrows (اقرأ الخبر, استكشف) point left in Arabic; main.css forces the arrow with !important */
html[dir=rtl] .go::after,html[dir=rtl] .card .go::after{content:"\2190" !important}
html[dir=rtl] .card:hover .go::after{transform:translateX(-4px)}
/* C3: laptop menu, Our Businesses: the sector arrow points left because the company list opens to the left */
@media(min-width:821px){
  html[dir=rtl] .secmenu .sec .cv{transform:rotate(90deg)}
}
@media(max-width:820px){
  /* C4: phone menu language switch, same size for both options (English too) */
  .mainnav .lg-opt{font-size:16px;font-weight:600}
  /* C5: phone menu language switch position (Arabic) */
  html[dir=rtl] .mainnav > .langsel{margin:18px calc(22px + (.5*(100% - min(520px,86%)))) 0 0;padding-right:0;border-right:0}
  html[dir=rtl] .mainnav a.lg-opt:first-child{padding-inline-start:0}
  /* C6: phone menu sub-menu indentation, logical properties so it works in both directions (applied to the Arabic menu) */
  html[dir=rtl] .mainnav .submenu:not(.secmenu) a,html[dir=rtl] .mainnav .secmenu .sec,html[dir=rtl] .mainnav .secmenu .allbiz{padding-block:11px;padding-inline:38px 22px}
  html[dir=rtl] .mainnav .secmenu .cos{margin:0 0 8px;margin-inline-start:38px;padding:0;padding-inline-start:14px}
  html[dir=rtl] .mainnav .secmenu .cos a{padding-block:9px;padding-inline:0 22px}
}
/* C7: Careers, the show-details arrow (Arabic) */
html[dir=rtl] .jd summary::after{border-inline-end:0;border-inline-start:2px solid currentColor}
/* C8: Careers job cards on phones: the Apply button sits below the title and details, full width (English too) */
@media(max-width:480px){
  .route[data-route="careers.html"] .jobs .job{grid-template-columns:minmax(0,1fr) !important}
  .route[data-route="careers.html"] .jobs .job .job-main{order:1}
  .route[data-route="careers.html"] .jobs .job .jd{order:2}
  .route[data-route="careers.html"] .jobs .job > .btn{order:3;inline-size:100%;justify-content:center;text-align:center;box-sizing:border-box}
}
/* Cloudflare Turnstile widget above the Send button (only printed when active): keep its space from jumping while it loads */
.ab-turnstile{min-height:65px}
/* Arabic stats: a long text value (for example "متعدد الاستخدامات") wraps instead of spilling out of its box */
html[dir=rtl] .route .proof .grid .cell b{white-space:normal}

/* ---- cookie banner (round 4): a slim bar fixed to the bottom, site fonts, petrol filled and outlined buttons ---- */
.cookiebar{position:fixed;inset-inline:0;inset-block-end:0;z-index:85;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(16px,4vw,48px);background:#fff;border-block-start:1px solid var(--line);box-shadow:0 -2px 12px rgba(0,0,0,.08)}
.cookiebar[hidden]{display:none}
.cookiebar .cb-text{margin:0;max-inline-size:900px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.cookiebar .cb-text a{color:var(--petrol);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cookiebar .cb-btns{display:flex;gap:10px;flex:none}
.cookiebar .btn{padding:10px 22px;min-inline-size:96px;justify-content:center;text-align:center;box-sizing:border-box;cursor:pointer}
@media(max-width:700px){
  .cookiebar{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px}
  .cookiebar .cb-btns{display:grid;grid-template-columns:1fr 1fr}
  .cookiebar .btn{min-inline-size:0;inline-size:100%}
}
/* leave room under the footer while the bar is showing */
html.has-cookiebar footer.site{margin-block-end:var(--cb-h,0px)}
.f4legal a[data-cookie-settings]{cursor:pointer}

/* cookie bar on the home page slides up (round 5); switched off for visitors who ask for reduced motion */
@keyframes cbUp{from{transform:translateY(100%)}to{transform:none}}
.cookiebar.cb-in{animation:cbUp .35s ease}
@media (prefers-reduced-motion:reduce){.cookiebar.cb-in{animation:none}}