/* Service navigation (page-subnav.js): on Careers, Pathways, Global and Business the header shows that service's own links instead of the
   six-item Home menu. Runtime-only; the static header is untouched. Logical properties so it mirrors in Arabic. */

/* 1. Hide the Home menu on the four service pages before any script runs. If page-subnav.js never runs, the menu comes back after 3s. */
body[data-page="careers"] .site-nav,body[data-page="pathways"] .site-nav,body[data-page="global"] .site-nav,body[data-page="business"] .site-nav{opacity:0;max-inline-size:0;overflow:hidden;margin:0;animation:ah-svc-fallback 0s linear 3s forwards}
/* sub pages of a service (page-subnav.js SUBPAGES): the same rule */
body[data-page^="business-"] .site-nav,body[data-page="destination"] .site-nav,body[data-page="destinations"] .site-nav,body[data-page="employers"] .site-nav{opacity:0;max-inline-size:0;overflow:hidden;margin:0;animation:ah-svc-fallback 0s linear 3s forwards}
@keyframes ah-svc-fallback{to{opacity:1;max-inline-size:100vw;margin-inline-start:var(--s-4,16px)}}
html.ah-svc .site-nav{display:none!important;animation:none}
html.ah-svc .svc-orig{display:none}

/* 2. The service row inside the header (phones and tablets: a second row of the SAME sticky header; wide screens: one line) */
.svc-nav{display:flex;align-items:center;gap:6px;min-inline-size:0;order:2;flex:1 0 100%;block-size:48px}
.svc-back{flex:none;display:inline-flex;align-items:center;gap:6px;min-block-size:44px;padding-inline:10px 12px;border-radius:var(--r-pill,999px);font-size:var(--fs-14,14px);font-weight:var(--fw-semibold,600);color:var(--primary-ink,#1F4FCC);text-decoration:none;white-space:nowrap}
.svc-back:hover{background:var(--hover-sky);text-decoration:none}
.svc-arrow{font-size:16px;line-height:1}
:root[dir="rtl"] .svc-arrow{display:inline-block;transform:scaleX(-1)}
.svc-name{display:none;flex:none;font-size:13px;font-weight:var(--fw-semibold,600);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink,#8a6a1f);white-space:nowrap}
.svc-list{list-style:none;margin:0;padding:2px 16px;flex:1 1 auto;min-inline-size:0;display:flex;gap:8px;align-items:center;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:16px;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%)}
.svc-list::-webkit-scrollbar{display:none}
.svc-list li{flex:none;scroll-snap-align:center}
.svc-list li[hidden]{display:none}
.svc-link{display:inline-flex;align-items:center;min-block-size:44px;padding:0 16px;border-radius:var(--r-pill,999px);border:1px solid var(--line-sky);background:var(--white,#fff);color:var(--ink,#13233a);font-weight:var(--fw-semibold,600);font-size:var(--fs-14,14px);text-decoration:none;white-space:nowrap}
.svc-link:hover{background:var(--sky,#eaf3fd);text-decoration:none}
.svc-link[aria-current="true"],.svc-link[aria-current="page"]{background:var(--primary,#2457d6);border-color:var(--primary,#2457d6);color:var(--on-solid,#fff)}

/* header shape while the service row is there */
html.ah-svc .site-top-in{flex-wrap:wrap;row-gap:0;min-block-size:0}
html.ah-svc .site-top-actions{order:1}
html.ah-svc .site-brand{min-block-size:var(--top-h,68px)}
/* on a 375px phone the logo and the four icons must share ONE row (QA 2026-10-10: the icons dropped under the logo on /business/): a tighter gap and a slightly smaller logo text make them fit */
@media (max-width:479.98px){
  html.ah-svc .site-top-in{gap:4px}
  html.ah-svc .site-top-actions{gap:2px}
  html.ah-svc .site-wordmark-name{font-size:15px;letter-spacing:.05em}
  html.ah-svc .site-wordmark-sub{font-size:13px;letter-spacing:.06em}
  html.ah-svc .site-brand{gap:4px;padding-inline:4px}
}

/* the header grows from one row (69px) to two (69 + the 48px service row) when page-subnav.js runs after the first paint: hold the two-row height
   from the start on phones and tablets so the page does not jump down (CLS, task Q6). Wide screens keep one row either way. */
@media (max-width:999.98px){
  body[data-page="careers"] #site-header:empty,body[data-page="pathways"] #site-header:empty,body[data-page="global"] #site-header:empty,body[data-page="business"] #site-header:empty,
  body[data-page="careers"] .site-top,body[data-page="pathways"] .site-top,body[data-page="global"] .site-top,body[data-page="business"] .site-top{min-block-size:117px}
}

/* QA 2026-10-10: the first chip never slides under "All services": the link sits above the scroller with its own background, and the scroller starts with
   room and clips at its own edge (the fade is drawn inside that room, not over the first chip). */
.svc-back{position:relative;z-index:2;background:var(--sky-bar-bg)}
.svc-list{overflow-clip-margin:0;padding-inline-start:20px;scroll-padding-inline-start:24px}
@media (max-width:999.98px){
  .svc-list{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%)}
  :root[dir="rtl"] .svc-list{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to left,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%)}
}

/* phones and tablets: the logo row slides away on scroll down, the section row stays; a real scroll up brings the logo row back */
@media (max-width:999.98px){
  html.ah-svc .site-top{inset-block-start:calc(-1 * var(--top-h,68px));transition:inset-block-start .2s ease}
  html.ah-svc.ah-svc-peek .site-top{inset-block-start:0}
  .svc-nav{margin-inline:calc(var(--gutter,16px) * -1);inline-size:calc(100% + var(--gutter,16px) * 2);flex:0 0 auto;padding-inline-start:6px}
}
@media (max-width:999.98px){
  body[data-page^="business-"] #site-header:empty,body[data-page="destination"] #site-header:empty,body[data-page="destinations"] #site-header:empty,body[data-page="employers"] #site-header:empty,
  body[data-page^="business-"] .site-top,body[data-page="destination"] .site-top,body[data-page="destinations"] .site-top,body[data-page="employers"] .site-top{min-block-size:117px}
}
@media (min-width:640px) and (max-width:999.98px){.svc-name{display:inline}}

/* wide screens: one line, tabs with an underline instead of pills */
@media (min-width:1000px){
  html.ah-svc .site-top-in{flex-wrap:nowrap}
  html.ah-svc .site-brand{min-block-size:0}
  html.ah-svc .site-top-actions{order:3}
  .svc-nav{order:2;flex:1 1 auto;block-size:var(--top-h,68px);margin-inline-start:var(--s-4,16px);gap:10px}
  .svc-back{padding-inline:6px 10px}
  .svc-name{display:inline;padding-inline-end:6px;border-inline-end:1px solid var(--line-sky);line-height:24px;padding-inline-start:4px}
  .svc-list{padding:0 14px;gap:2px;scroll-snap-type:none}
  .svc-link{border:0;border-radius:0;background:transparent;padding:0 12px;block-size:var(--top-h,68px);box-sizing:border-box;border-block-end:3px solid transparent;border-block-start:3px solid transparent;font-size:var(--fs-15,15px);color:var(--ink-2,#3a4a60);font-weight:var(--fw-medium,500)}
  .svc-link:hover{background:rgba(255,255,255,.55);color:var(--ink,#13233a)}
  .svc-link[aria-current="true"],.svc-link[aria-current="page"]{background:transparent;color:var(--primary-ink,#1F4FCC);border-block-end-color:var(--primary,#2457d6);font-weight:var(--fw-semibold,600)}
}
@media (min-width:1000px) and (max-width:1199.98px){.svc-name{display:none}.svc-link{padding:0 9px;font-size:var(--fs-14,14px)}}
/* QA 2026-10-10: the section row stops where the actions begin (nothing runs under the signed-in account button); the account greeting
   collapses to initials below 1440px and the actions keep a gap and their size. */
@media (min-width:1000px){
  html.ah-svc .site-top-actions{flex:none;gap:var(--s-2,8px);margin-inline-start:var(--s-2,8px)}
  .svc-nav{overflow:hidden}
}
@media (min-width:1000px) and (max-width:1439.98px){
  html.ah-svc .site-top-actions .acct-hi{display:none}
  html.ah-svc .site-top-actions .acct-btn,html.ah-svc[dir="rtl"] .site-top-actions .acct-btn{padding:4px}
}

/* drawer */
.svc-dsep{margin-block-start:var(--s-3,12px);padding-block-start:var(--s-3,12px);border-block-start:1px solid var(--border,#D8E6F5)}
.svc-drawer-nav .site-drawer-label{margin-block-end:4px}

/* before the anchors file arrives, keep jumps below the sticky header */
html:has(.svc-nav){scroll-padding-block-start:calc(var(--ah-svc-h,110px) + 12px)}

.svc-nav :focus-visible,.svc-drawer-nav :focus-visible{outline:3px solid #1F4FCC;outline-offset:-2px;border-radius:var(--r-pill,999px)}
@media (prefers-reduced-motion:reduce){.svc-list{scroll-behavior:auto}html.ah-svc .site-top{transition:none}}
@media print{.svc-nav{display:none}}

/* a soft fade at the far edge of the scrolling service row on phones, so it is clear there is more to swipe to (the list keeps room so the last link clears the fade) */
@media (max-width:999.98px){
  body[data-page^="business"] .svc-list{padding-inline-end:36px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
  :root[dir="rtl"] body[data-page^="business"] .svc-list{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent)}
}

/* Business pages carry six links (two of them only while their flag is ON): below 1440px drop the service name (the back link and the page itself say where you are) and tighten the links so the whole row fits at 1280 */
@media (min-width:1000px) and (max-width:1439.98px){
  body[data-page^="business-"] .svc-name{display:none}
  body[data-page^="business-"] .svc-list{padding:0 6px;gap:0}
  body[data-page^="business-"] .svc-link{padding:0 8px;font-size:var(--fs-14,14px)}
}