/* v3.4 — compact mobile header (English & Arabic)
   Scoped to phones. Desktop navigation and footer are intentionally unchanged.
*/
@media (max-width:760px) {
  /* English header: preserve logo readability and free room for actions. */
  .site-header .nav-wrap {
    height:60px !important;
    min-height:60px;
    gap:8px !important;
    align-items:center;
  }
  .site-header .brand {gap:7px;min-width:0;flex:0 1 auto;}
  .site-header .brand-symbol {
    width:35px !important;height:35px !important;
    font-size:29px !important;border-radius:10px !important;
    padding-right:6px !important;flex:none;
  }
  .site-header .brand-dot {font-size:25px !important;}
  .site-header .brand-wordmark {
    font-size:10px !important;letter-spacing:1.15px !important;
    line-height:1.28 !important;
  }
  .site-header .brand-wordmark small {font-size:7px !important;letter-spacing:1.1px !important;}
  .site-header .lang-switch {
    margin-left:auto !important;flex:0 0 auto;
    gap:5px !important;padding:6px 9px !important;
    min-height:40px !important;font-size:11px !important;line-height:1.15 !important;
  }
  .site-header .lang-switch svg {width:14px !important;height:14px !important;}
  .site-header .menu-toggle {
    width:40px !important;height:40px !important;
    min-width:40px !important;min-height:40px !important;
    padding:8px !important;margin-left:0 !important;
    gap:4px !important;border-radius:10px !important;
    flex:0 0 auto;
  }
  .site-header .menu-toggle span {width:18px !important;}
  /* Arabic has its own header system; match the same compact proportions. */
  .ar-header .ar-topbar {min-height:60px !important;gap:8px !important;}
  .ar-header .ar-brand {gap:7px !important;min-width:0;}
  .ar-header .ar-mark {width:35px !important;height:35px !important;border-radius:10px !important;font-size:17px !important;}
  .ar-header .ar-brand-text strong {font-size:12px !important;line-height:1.3 !important;}
  .ar-header .ar-brand-text small {font-size:9px !important;line-height:1.3 !important;}
  .ar-header .ar-lang {
    gap:4px !important;padding:6px 9px !important;
    min-height:40px !important;font-size:11px !important;
    flex:0 0 auto;
  }
  .ar-header .ar-menu-btn {
    width:40px !important;min-height:40px !important;height:40px !important;
    gap:4px !important;border-radius:10px !important;flex:none;
  }
  .ar-header .ar-menu-btn span {width:18px !important;}
  /* Header anchor/scroll offsets follow the new height. */
  html {scroll-padding-top:68px;}
}
@media(max-width:360px){
  .site-header .brand-wordmark {font-size:9px !important;letter-spacing:.8px !important;}
  .site-header .brand-wordmark small {letter-spacing:.6px !important;}
  .site-header .nav-wrap,.ar-header .ar-topbar {gap:6px !important;}
  .site-header .lang-switch,.ar-header .ar-lang {padding-inline:7px !important;}
  .ar-header .ar-brand-text small {font-size:8px !important;}
}