/* ==========================================================================
   Sajil - header redesign

   Load from templates/web/includes/header.html, AFTER style.css and
   responsive.css:
       <link rel="stylesheet" href="/web/css/header.css" />

   Styling only. The navbar markup, the class names and IDs, toggleMenu(),
   switchLanguage(), the login/profile switch and the active-link script in
   navbar.html all keep working exactly as before. header-effects.js adds the
   optional extras (sliding highlight, sticky-on-scroll, closing the phone
   menu) and the page still looks finished if it never loads.

   Icons are inline SVG masks, so nothing depends on Font Awesome.
   ========================================================================== */

.header {
  --sj-ink: #082c2b;
  --sj-ink-2: #0f4a46;
  --sj-teal: #2c5f5a;
  --sj-mint: #4aaaa4;
  --sj-cyan: #00efd2;
  /* see-through glass while the header sits over the banner.
     Raise the two alpha values (.34 / .14) for more white, lower them to
     show more of the banner. */
  --sj-glass: linear-gradient(135deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .14));
  --sj-blur: blur(6px) saturate(150%);
  --sj-line: rgba(8, 44, 43, .08);
  --sj-track: rgba(255, 255, 255, .34);
  --sj-halo: 0 1px 10px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .8);
  --sj-logo-glow: drop-shadow(0 0 6px rgba(255, 255, 255, .85));
  --sj-hover: rgba(255, 255, 255, .95);
  --sj-text: #2c5f5a;
  --sj-text-strong: #082c2b;
  --sj-drawer: rgba(255, 255, 255, .96);

  --i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9v12h13V9'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
  --i-car: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.5V13l2.2-5.2A2 2 0 0 1 7 6.5h10a2 2 0 0 1 1.8 1.3L21 13v3.5'/%3E%3Cpath d='M3 13h18'/%3E%3Cpath d='M3 16.5h18'/%3E%3Ccircle cx='7.5' cy='16.5' r='2'/%3E%3Ccircle cx='16.5' cy='16.5' r='2'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.5h.01'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --i-blog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4H15v16H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M15 9h3.5A1.5 1.5 0 0 1 20 10.5V18a2 2 0 0 1-4 0'/%3E%3Cpath d='M8 8.5h3.5M8 12h3.5M8 15.5h3.5'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
  --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l2 5-2.3 1.4a11 11 0 0 0 5.4 5.4L15 13.5l5 2V19a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
  --i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
  --i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E");
  --i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --i-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------- the capsule */

.header {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 1000;
  width: min(1240px, calc(100% - 48px)) !important;
  margin: 0 auto;
  padding: 9px 10px 9px 18px !important;
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 0 !important;
  border-radius: 24px !important;
  background: var(--sj-glass) !important;
  -webkit-backdrop-filter: var(--sj-blur);
  backdrop-filter: var(--sj-blur);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    0 18px 45px -18px rgba(8, 44, 43, .45),
    0 2px 6px rgba(8, 44, 43, .06),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: sjHdrDrop .8s cubic-bezier(.2, .9, .25, 1) both;
  transition: top .35s ease, padding .35s ease, box-shadow .35s ease, background .35s ease;
}

[dir="rtl"] .header {
  padding: 9px 18px 9px 10px !important;
}

/* a slow cyan light that travels round the edge */
.header::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(110deg,
      transparent 0%, transparent 35%,
      rgba(0, 239, 210, .95) 45%, rgba(74, 170, 164, .9) 52%,
      transparent 62%, transparent 100%);
  background-size: 250% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sjEdge 6s linear infinite;
  pointer-events: none;
}

/* scroll progress, shown once the header is pinned */
.header::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 22px;
  width: calc((100% - 44px) * var(--sj-progress, 0));
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sj-mint), var(--sj-cyan));
  box-shadow: 0 0 10px rgba(0, 239, 210, .7);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.header.sj-stuck::after {
  opacity: 1;
}

.header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 18px;
}

/* lets the logo, links and hamburger line up as direct children of <nav> */
.header .nav-container {
  display: contents;
}

/* ------------------------------------------------------------------ logo */

.header .logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header .logo img {
  width: 104px !important;
  height: auto;
  display: block;
  filter: var(--sj-logo-glow);
  transition: transform .4s cubic-bezier(.2, .9, .25, 1.3), filter .4s ease;
}

.header .logo:hover img {
  transform: scale(1.06) rotate(-2deg);
  filter: drop-shadow(0 6px 12px rgba(0, 239, 210, .35));
}

/* ------------------------------------------------------------ link track */

.header .nav-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px !important;
  margin: 0 auto !important;
  padding: 5px !important;
  list-style: none;
  border-radius: 999px;
  background: var(--sj-track);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.header .nav-menu li {
  margin: 0 !important;
  position: relative;
  z-index: 1;
}

.header .nav-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  color: var(--sj-text);
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: none !important;
  transition: color .3s ease, background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.header .nav-menu a:not(.active):not(.sj-lit) {
  text-shadow: var(--sj-halo) !important;
}

.header .nav-menu a:hover {
  color: var(--sj-text-strong);
  background: var(--sj-hover);
  box-shadow: 0 4px 12px -4px rgba(8, 44, 43, .2);
}

.header .nav-menu a.active {
  color: var(--sj-cyan) !important;
  font-weight: 800;
  background: linear-gradient(135deg, var(--sj-ink), var(--sj-ink-2));
  box-shadow: 0 8px 18px -8px rgba(8, 44, 43, .75), inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* small glowing dot under the current page */
.header .nav-menu a.active::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--sj-cyan);
  box-shadow: 0 0 8px var(--sj-cyan);
}

/* sliding highlight - header-effects.js adds .sj-glide and sets the vars */
.header .nav-menu.sj-glide::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--gy, 5px);
  left: var(--gx, 0);
  width: var(--gw, 0);
  height: var(--gh, 0);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sj-ink), var(--sj-ink-2));
  box-shadow: 0 8px 18px -8px rgba(8, 44, 43, .75), inset 0 1px 0 rgba(255, 255, 255, .12);
  opacity: var(--go, 0);
  transition:
    left .5s cubic-bezier(.3, 1.3, .4, 1),
    width .5s cubic-bezier(.3, 1.3, .4, 1),
    opacity .25s ease;
}

.header .nav-menu.sj-glide a,
.header .nav-menu.sj-glide a:hover,
.header .nav-menu.sj-glide a.active {
  background: transparent;
  box-shadow: none;
}

.header .nav-menu.sj-glide a.active:not(.sj-lit) {
  color: var(--sj-text-strong) !important;
}

.header .nav-menu.sj-glide a.active:not(.sj-lit)::after {
  opacity: 0;
}

.header .nav-menu.sj-glide a.sj-lit {
  color: var(--sj-cyan) !important;
}

/* --------------------------------------------------------- right buttons */

.header .nav-buttons {
  display: flex;
  align-items: center;
  gap: 8px !important;
  flex-shrink: 0;
}

.header .language-switcher {
  gap: 0;
}

.header .lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  min-width: 0;
  padding: 0 13px !important;
  border-radius: 14px !important;
  border: 1px solid var(--sj-line) !important;
  background: rgba(255, 255, 255, .7) !important;
  color: var(--sj-ink) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  box-shadow: 0 2px 6px rgba(8, 44, 43, .06) !important;
  transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
}

.header .lang-btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--i-globe) center / contain no-repeat;
  mask: var(--i-globe) center / contain no-repeat;
  transition: transform .6s ease;
}

.header .lang-btn:hover {
  background: var(--sj-ink) !important;
  color: var(--sj-cyan) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px -10px rgba(8, 44, 43, .7) !important;
}

.header .lang-btn:hover::before {
  transform: rotate(180deg);
}

/* login and "my profile" share .login-btn */
.header .login-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto !important;
  min-width: 132px;
  height: 44px;
  padding: 0 20px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, var(--sj-ink) 0%, #11524d 100%) !important;
  color: var(--sj-cyan) !important;
  font-size: 14px !important;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
  box-shadow:
    0 12px 24px -12px rgba(8, 44, 43, .9),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 0 0 1px rgba(0, 239, 210, .18);
  transition: transform .3s ease, box-shadow .3s ease;
}

.header .login-btn::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--i-user) center / contain no-repeat;
  mask: var(--i-user) center / contain no-repeat;
}

/* light sweep */
.header .login-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(0, 239, 210, .35), transparent);
  transform: skewX(-20deg);
  animation: sjShine 4.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}

.header .login-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 30px -12px rgba(8, 44, 43, .95),
    0 0 0 1px rgba(0, 239, 210, .5),
    0 0 24px -4px rgba(0, 239, 210, .55);
}

/* -------------------------------------------------------------- hamburger */

.header .hamburger {
  display: none;
}

/* ------------------------------------------------------- pinned on scroll */

.header.sj-stuck {
  --sj-glass: linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .66));
  --sj-blur: blur(18px) saturate(170%);
  --sj-track: rgba(8, 44, 43, .055);
  --sj-halo: none;
  --sj-logo-glow: none;
  position: fixed !important;
  top: 10px;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  animation: sjHdrPin .5s cubic-bezier(.2, .9, .25, 1) both;
  box-shadow:
    0 22px 50px -20px rgba(8, 44, 43, .55),
    0 2px 6px rgba(8, 44, 43, .08),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

.header.sj-stuck .logo img {
  width: 92px !important;
}

/* ========================================================================
   DARK PAGES
   Branches, Call Sajil, Work Periods and About already switch the links to
   cyan and swap in the cyan logo. The capsule turns to dark glass there so
   that cyan stays readable.
   ======================================================================== */

body:has(.branches-main-container) .header,
body:has(.call-sajil-container) .header,
body:has(.work-periods-container) .header,
body:has(.info-hero) .header {
  --sj-glass: linear-gradient(135deg, rgba(10, 58, 55, .78), rgba(8, 44, 43, .62));
  --sj-line: rgba(0, 239, 210, .16);
  --sj-track: rgba(255, 255, 255, .06);
  --sj-hover: rgba(0, 239, 210, .1);
  --sj-text: #00f1d4;
  --sj-text-strong: #00f1d4;
  --sj-drawer: rgba(8, 44, 43, .97);
  --sj-blur: blur(18px) saturate(170%);
  --sj-halo: none;
  --sj-logo-glow: none;
  border-color: rgba(0, 239, 210, .18);
  box-shadow:
    0 18px 45px -18px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

body:has(.branches-main-container) .header .nav-menu a.active,
body:has(.call-sajil-container) .header .nav-menu a.active,
body:has(.work-periods-container) .header .nav-menu a.active,
body:has(.info-hero) .header .nav-menu a.active,
body:has(.branches-main-container) .header .nav-menu.sj-glide::before,
body:has(.call-sajil-container) .header .nav-menu.sj-glide::before,
body:has(.work-periods-container) .header .nav-menu.sj-glide::before,
body:has(.info-hero) .header .nav-menu.sj-glide::before {
  background: linear-gradient(135deg, rgba(0, 241, 212, .2), rgba(0, 241, 212, .08));
  box-shadow: inset 0 0 0 1px rgba(0, 241, 212, .45), 0 0 18px -6px rgba(0, 241, 212, .6);
  text-shadow: none !important;
}

body:has(.branches-main-container) .header .nav-menu.sj-glide a.active,
body:has(.call-sajil-container) .header .nav-menu.sj-glide a.active,
body:has(.work-periods-container) .header .nav-menu.sj-glide a.active,
body:has(.info-hero) .header .nav-menu.sj-glide a.active {
  background: transparent;
  box-shadow: none;
}

body:has(.branches-main-container) .header .lang-btn,
body:has(.call-sajil-container) .header .lang-btn,
body:has(.work-periods-container) .header .lang-btn,
body:has(.info-hero) .header .lang-btn {
  background: rgba(255, 255, 255, .06) !important;
  color: #00f1d4 !important;
}

body:has(.branches-main-container) .header .login-btn,
body:has(.call-sajil-container) .header .login-btn,
body:has(.work-periods-container) .header .login-btn,
body:has(.info-hero) .header .login-btn {
  background: linear-gradient(135deg, #00f1d4, #4aaaa4) !important;
  color: #082c2b !important;
}

body:has(.branches-main-container) .header .login-btn::after,
body:has(.call-sajil-container) .header .login-btn::after,
body:has(.work-periods-container) .header .login-btn::after,
body:has(.info-hero) .header .login-btn::after {
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
}

/* ========================================================================
   NARROWER LAPTOPS - tighten before collapsing
   ======================================================================== */

@media (max-width: 1320px) {
  .header .nav-menu a {
    padding: 9px 12px !important;
    font-size: 13.5px !important;
  }

  .header .login-btn {
    min-width: 0;
    padding: 0 16px !important;
  }
}

/* ========================================================================
   TABLET AND PHONE - collapse the links into a drop-down card
   ======================================================================== */

@media (max-width: 1180px) {
  .header {
    top: 12px;
    width: calc(100% - 24px) !important;
    padding: 8px 8px 8px 14px !important;
    border-radius: 20px !important;
  }

  [dir="rtl"] .header {
    padding: 8px 14px 8px 8px !important;
  }

  .header nav {
    gap: 8px;
  }

  .header .logo {
    order: 0;
  }

  .header .logo img {
    width: 88px !important;
  }

  .header .nav-buttons {
    order: 1;
    margin-inline-start: auto;
  }

  .header .hamburger {
    order: 2;
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--sj-ink), #11524d);
    box-shadow: 0 10px 20px -10px rgba(8, 44, 43, .9), 0 0 0 1px rgba(0, 239, 210, .18);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .3s ease;
  }

  .header .hamburger:active {
    transform: scale(.92);
  }

  .header .hamburger div {
    width: 18px;
    height: 2px !important;
    border-radius: 2px;
    background: var(--sj-cyan) !important;
    transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), opacity .25s ease, width .3s ease;
  }

  .header .hamburger div:nth-child(2) {
    width: 12px;
    align-self: center;
  }

  /* open: bars become an X */
  .header:has(.nav-menu.active) .hamburger div:nth-child(1),
  .header.sj-menu-open .hamburger div:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .header:has(.nav-menu.active) .hamburger div:nth-child(2),
  .header.sj-menu-open .hamburger div:nth-child(2) {
    opacity: 0;
    width: 0;
  }

  .header:has(.nav-menu.active) .hamburger div:nth-child(3),
  .header.sj-menu-open .hamburger div:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* the drop-down card */
  .header .nav-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px !important;
    border-radius: 22px !important;
    background: var(--sj-drawer) !important;
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--sj-line);
    box-shadow: 0 30px 60px -20px rgba(8, 44, 43, .55) !important;
    transform-origin: top center;
  }

  .header .nav-menu.active {
    display: flex !important;
    animation: sjDrawer .45s cubic-bezier(.2, .9, .25, 1.1) both;
  }

  .header .nav-menu.sj-glide::before {
    display: none;
  }

  .header .nav-menu li {
    text-align: start !important;
    animation: sjItem .45s cubic-bezier(.2, .9, .25, 1) both;
  }

  .header .nav-menu.active li:nth-child(1) { animation-delay: .04s; }
  .header .nav-menu.active li:nth-child(2) { animation-delay: .08s; }
  .header .nav-menu.active li:nth-child(3) { animation-delay: .12s; }
  .header .nav-menu.active li:nth-child(4) { animation-delay: .16s; }
  .header .nav-menu.active li:nth-child(5) { animation-delay: .20s; }
  .header .nav-menu.active li:nth-child(6) { animation-delay: .24s; }
  .header .nav-menu.active li:nth-child(7) { animation-delay: .28s; }
  .header .nav-menu.active li:nth-child(8) { animation-delay: .32s; }

  .header .nav-menu a,
  .header .nav-menu a:not(.active):not(.sj-lit) {
    text-shadow: none !important;
  }

  .header .nav-menu a {
    display: flex !important;
    width: 100%;
    gap: 12px;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }

  /* icon tile */
  .header .nav-menu a::before {
    content: "";
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background-color: var(--sj-track);
    background-image: none;
    transition: background-color .3s ease;
  }

  /* chevron */
  .header .nav-menu a::after,
  .header .nav-menu a.active::after {
    content: "";
    position: static;
    width: 16px;
    height: 16px;
    margin: 0;
    margin-inline-start: auto;
    border-radius: 0;
    box-shadow: none;
    background: currentColor;
    opacity: .45;
    -webkit-mask: var(--i-chev) center / contain no-repeat;
    mask: var(--i-chev) center / contain no-repeat;
  }

  [dir="rtl"] .header .nav-menu a::after {
    transform: scaleX(-1);
  }

  .header .nav-menu a:hover {
    background: var(--sj-track);
    box-shadow: none;
  }

  .header .nav-menu a.active {
    background: linear-gradient(135deg, var(--sj-ink), var(--sj-ink-2));
  }

  .header .nav-menu a.active::before {
    background-color: rgba(0, 239, 210, .14);
  }

  /* the glyph itself, drawn on the li so the tile can stay a plain square */
  .header .nav-menu li::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    inset-inline-start: 12px;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    background: var(--sj-text);
    -webkit-mask: var(--sj-ico, var(--i-dot)) center / 19px no-repeat;
    mask: var(--sj-ico, var(--i-dot)) center / 19px no-repeat;
    pointer-events: none;
  }

  .header .nav-menu li:has(a.active)::before {
    background: var(--sj-cyan);
  }

  .header .nav-menu li:has(a[href="/"]) { --sj-ico: var(--i-home); }
  .header .nav-menu li:has(a[href^="/cars"]) { --sj-ico: var(--i-car); }
  .header .nav-menu li:has(a[href^="/info"]) { --sj-ico: var(--i-info); }
  .header .nav-menu li:has(a[href^="/branches"]) { --sj-ico: var(--i-pin); }
  .header .nav-menu li:has(a[href^="/blog"]) { --sj-ico: var(--i-blog); }
  .header .nav-menu li:has(a[href^="/work-periods"]) { --sj-ico: var(--i-clock); }
  .header .nav-menu li:has(a[href^="/call-sajil"]) { --sj-ico: var(--i-phone); }

  /* tablets: the card hangs under the hamburger instead of spanning the bar */
  @media (min-width: 680px) {
    .header .nav-menu {
      inset-inline-start: auto !important;
      inset-inline-end: 0 !important;
      width: 360px !important;
    }
  }

  .header.sj-stuck {
    top: 8px;
  }

  .header.sj-stuck .logo img {
    width: 80px !important;
  }

  /* dark pages: active row stays in the cyan outline style */
  body:has(.branches-main-container) .header .nav-menu a.active,
  body:has(.call-sajil-container) .header .nav-menu a.active,
  body:has(.work-periods-container) .header .nav-menu a.active,
  body:has(.info-hero) .header .nav-menu a.active {
    background: rgba(0, 241, 212, .1);
  }
}

@media (max-width: 420px) {
  .header {
    width: calc(100% - 20px) !important;
    top: 10px;
  }

  .header .logo img {
    width: 78px !important;
  }

  .header .lang-btn {
    height: 40px;
    padding: 0 10px !important;
  }

  .header .login-btn {
    height: 42px;
    padding: 0 12px !important;
    gap: 7px;
    font-size: 12.5px !important;
  }

  .header .hamburger {
    width: 42px !important;
    height: 42px !important;
  }
}

/* very small phones: the sign-in button becomes an icon */
@media (max-width: 370px) {
  .header .login-btn {
    width: 42px !important;
    min-width: 42px;
    padding: 0 !important;
    font-size: 0 !important;
    gap: 0;
  }

  .header .lang-btn::before {
    display: none;
  }
}

/* ------------------------------------------------------------- keyframes */

@keyframes sjHdrDrop {
  from { opacity: 0; transform: translateY(-24px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes sjHdrPin {
  from { transform: translateY(-120%); }
  to   { transform: none; }
}

@keyframes sjEdge {
  from { background-position: 150% 0; }
  to   { background-position: -100% 0; }
}

@keyframes sjShine {
  0%, 70% { left: -60%; }
  100%    { left: 130%; }
}

@keyframes sjDrawer {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes sjItem {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .header,
  .header::before,
  .header .login-btn::after,
  .header .nav-menu.active,
  .header .nav-menu li {
    animation: none !important;
  }
}