/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  /* backdrop-filter removed from here */
}
.nav::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.3);
}
.nav.is-scrolled{ border-bottom-color: var(--line); }

.nav__inner{
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}

.nav__brand{ display: flex; align-items: center; gap: .7rem; }
.nav__logo{ width: 34px; height: 34px; flex-shrink: 0; }
.nav__logo img{ width: 100%; height: 100%; object-fit: contain; }
/* Logo is theme-aware: the white mark is for the dark background, and the
   orange mark (visible on light) is swapped in for light theme so the brand
   never becomes white-on-white. */
.nav__logo--light{ display: none; }
[data-theme="light"] .nav__logo--dark{ display: none; }
[data-theme="light"] .nav__logo--light{ display: block; }
.nav__wordmark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
  color: var(--text-0);
  white-space: nowrap;
}
.nav__wordmark span{ color: var(--accent); }

.nav__links-wrap{
  position: relative;
  display: flex; align-items: center;
  flex: 1 1 auto; min-width: 0;
}
.nav__links{
  display: flex; align-items: center; gap: var(--sp-2);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  flex: 1 1 auto; min-width: 0; width: 100%;
}
.nav__links::-webkit-scrollbar{ display: none; }
/* Desktop overflow hint: an orange ">" (with a soft fade so links scrolling
   underneath remain legible) appears at the right edge of the horizontally
   scrollable nav when there are more items than fit. It lives OUTSIDE the
   scrollable <ul> (in the non-scrolling .nav__links-wrap) so it stays pinned
   in place at the visible right edge instead of scrolling away with the links.
   Hidden on mobile where the nav becomes a vertical drawer. */
.nav__more{
  display: none;
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1;
  padding: .15em .5em .15em 1.4em;
  background: linear-gradient(270deg, var(--nav-bg) 0%, var(--nav-bg) 55%, transparent 100%);
  pointer-events: none;
}
.nav__links.has-more + .nav__more{ display: block; }
.nav__link{
  position: relative;
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 500;
  color: var(--text-1);
  padding: .4em 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--dur-fast);
}
.nav__link::after{
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 2px; background: var(--accent);
  transition: width var(--dur-fast) var(--ease-orbit);
}
.nav__link:hover, .nav__link.is-active{ color: var(--text-0); }
.nav__link:hover::after, .nav__link.is-active::after{ width: 100%; }

.nav__actions{ display: flex; align-items: center; gap: var(--sp-2); }

.theme-toggle{
  position: relative;
  width: 50px; height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  flex-shrink: 0;
}
.theme-toggle__thumb{
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-orbit);
  font-size: 11px;
}
[data-theme="light"] .theme-toggle__thumb{ transform: translateX(20px); }

/* ---- Language toggle (far right of menu, after the theme toggle) ----
   A compact two-option segmented control. The option texts are language names
   and are intentionally NOT translated. */
.lang-toggle{
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-2);
  padding: 2px;
  flex-shrink: 0;
}
.lang-toggle__btn, .lang-toggle .os-lang-btn{
  border: none; background: transparent;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  padding: .45em .7em;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
[data-lang="ar"] .lang-toggle .os-lang-btn{ font-family: "Tahoma Arabic","Segoe UI",Tahoma,sans-serif; }
.lang-toggle .os-lang-btn:hover{ color: var(--text-0); }
.lang-toggle .os-lang-btn.is-active{
  background: var(--accent);
  color: #16100a;
}

/* ---- Language toggle: mobile optimisation ----
   On small screens the two full labels ("English (US)" / "العربية (مصر)")
   with white-space:nowrap overflow the fixed nav bar and crowd the theme +
   hamburger controls. Fix: hide the parenthetical region subtag and slim the
   button padding/font so the segmented control stays compact and centered. */
@media (max-width: 640px){
  .lang-toggle .lang-toggle__sub{ display: none; }
  .lang-toggle .os-lang-btn{ font-size: .72rem; padding: .38em .55em; }
  .nav__actions{ gap: var(--sp-1); }
}

/* ---- Language dropdown (mobile) ----
   On phones the two-button segmented control is replaced by a compact native
   <select> dropdown (.lang-select). This keeps the nav bar from crowding the
   theme + hamburger controls so the side-nav (burger) menu always remains
   reachable/tappable, including when English is selected. The segmented
   control stays on desktop/tablet. */
.lang-select{ display: none; }
@media (max-width: 640px){
  .lang-toggle{ display: none; }
  .lang-select{
    display: inline-block;
    -webkit-appearance: none; appearance: none;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--bg-2)
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23787878' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")
      no-repeat right .7em center / 9px;
    color: var(--text-0);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    padding: .5em 1.7em .5em .9em;
    cursor: pointer;
    flex-shrink: 0;
  }
  .lang-select option{ background: var(--bg-1); color: var(--text-0); }
}

.nav__burger{
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  position: relative;
}
.nav__burger span{
  position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--text-0);
  transition: transform var(--dur-fast) var(--ease-orbit), opacity var(--dur-fast);
}
.nav__burger span:nth-child(1){ top: 14px; }
.nav__burger span:nth-child(2){ top: 19px; }
.nav__burger span:nth-child(3){ top: 24px; }
.nav.is-open .nav__burger span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 980px){
  .nav__links{
    position: fixed; top: 76px; left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg-1);
    padding: var(--sp-3) clamp(1.25rem, 4vw, 3rem);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-orbit);
    overflow-y: auto;
  }
  .nav.is-open .nav__links{ transform: translateX(0); }
  /* Bug fix: rows previously spanned edge-to-edge with only a 1px border
     between them and generous padding, so adjacent tap targets touched
     directly with no visual gap — making it easy to misjudge where one
     item ended and the next began, and tap the wrong page. Each row is
     now a distinct, rounded, separated pill instead of one continuous
     strip, so its actual boundary matches what it visually looks like. */
  .nav__link{
    display: block; width: 100%; box-sizing: border-box;
    padding: .8em 1em; margin: 3px 0;
    border-radius: 10px;
    border-bottom: none;
    font-size: 1.02rem;
  }
  .nav__burger{ display: block; }
  .nav__more{ display: none; }

  /* Bug fix: on mobile the bottom-edge ::after underline (used for the
     desktop hover/active indicator) sits right on top of the border-bottom
     divider shared with the NEXT list item, which visually reads as if the
     item below is the active one. Mobile gets its own unambiguous
     full-row indicator instead — a left accent bar + background tint —
     and the shared ::after underline is suppressed here so the two never
     overlap or fight each other. */
  .nav__link::after{ display: none; }
  .nav__link.is-active{
    background: rgba(var(--accent-rgb), .1);
    border-left: 3px solid var(--accent);
    padding-left: calc(1em - 3px);
    color: var(--accent);
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  position: relative;
  border-top: 1px solid var(--line);
  padding-block: var(--sp-6) var(--sp-4);
  background: var(--bg-1);
  overflow: hidden;
}
.footer__grid{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-5);
}
.footer__brand-logo{ width: 46px; height: auto; margin-bottom: var(--sp-2); }
.footer__tagline{ max-width: 320px; color: var(--text-2); font-family: var(--font-display); font-size: var(--fs-sm); }
.footer__heading{
  font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2); margin-bottom: var(--sp-2);
}
.footer__links li{ margin-bottom: .55em; }
.footer__links a{ font-family: var(--font-display); font-size: .92rem; color: var(--text-1); transition: color var(--dur-fast); }
.footer__links a:hover{ color: var(--accent); }
.footer__bottom{
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-2); flex-wrap: wrap;
}
.footer__social{ display: flex; gap: var(--sp-2); }
.footer__social a{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.footer__social a:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

@media (max-width: 900px){
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__bottom{ flex-direction: column; align-items: flex-start; }
}