/* WebMorteza v35 — blog header cleanup
   The blog now uses the exact visual grammar of the main site header. */

/* Kill magazine legacy header sizing/collisions. */
body.mag-page > .header{
  box-sizing:border-box!important;
  width:min(1240px,calc(100% - 48px))!important;
  height:86px!important;
  min-height:86px!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto auto!important;
  align-items:center!important;
  column-gap:22px!important;
  position:relative!important;
  inset:auto!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  overflow:visible!important;
  z-index:120!important;
}

body.mag-page > .header .logo{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  min-width:174px!important;
  flex:none!important;
  direction:ltr!important;
  white-space:nowrap!important;
}
body.mag-page > .header .logo img{
  display:block!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  object-fit:contain!important;
}
body.mag-page > .header .logo span{font-size:19px!important;line-height:1.25!important}
body.mag-page > .header .logo b{display:block!important;font-size:19px!important}
body.mag-page > .header .logo small{display:block!important;font-size:10px!important;line-height:1.55!important}

body.mag-page > .header .desktop-nav{
  width:auto!important;
  min-width:0!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
body.mag-page > .header .desktop-nav a{
  box-sizing:border-box!important;
  min-width:0!important;
  height:42px!important;
  padding:9px 10px!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border-radius:11px!important;
  font-size:12px!important;
  line-height:1!important;
  color:#596579!important;
  background:transparent!important;
}
body.mag-page > .header .desktop-nav a:hover,
body.mag-page > .header .desktop-nav a.active{
  color:var(--primary-dark)!important;
  background:var(--primary-soft)!important;
}
/* This was the source of the huge/scattered icons in the blog header. */
body.mag-page > .header .desktop-nav .nav-icon,
body.mag-page > .header .desktop-nav a > svg{
  display:block!important;
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  min-height:18px!important;
  max-height:18px!important;
  stroke-width:1.7!important;
}
body.mag-page > .header .desktop-nav a span{
  display:inline-block!important;
  line-height:1!important;
  font-size:12px!important;
}

body.mag-page > .header .client-panel{
  width:auto!important;
  min-width:112px!important;
  height:43px!important;
  margin:0!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border-radius:13px!important;
  font-size:12px!important;
  line-height:1!important;
  white-space:nowrap!important;
  flex:none!important;
}
body.mag-page > .header .client-panel svg{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  flex:0 0 18px!important;
}
body.mag-page > .header .menu-button{display:none!important;flex:none!important}

/* Blog search/tools must start on a separate row and never collide with nav. */
body.mag-page .mag-blog-tools{
  box-sizing:border-box!important;
  width:min(1180px,calc(100% - 48px))!important;
  margin:2px auto 18px!important;
  position:relative!important;
  inset:auto!important;
  z-index:10!important;
  clear:both!important;
}

@media (max-width:1180px){
  body.mag-page > .header{column-gap:12px!important;width:calc(100% - 32px)!important}
  body.mag-page > .header .desktop-nav{gap:1px!important}
  body.mag-page > .header .desktop-nav a{padding:8px 7px!important;font-size:11px!important}
  body.mag-page > .header .desktop-nav a span{font-size:11px!important}
}

@media (max-width:1080px){
  body.mag-page > .header{
    display:flex!important;
    height:72px!important;
    min-height:72px!important;
    gap:10px!important;
  }
  body.mag-page > .header .desktop-nav{display:none!important}
  body.mag-page > .header .logo{min-width:0!important}
  body.mag-page > .header .client-panel{margin-right:auto!important;min-width:auto!important}
  body.mag-page > .header .menu-button{
    display:block!important;
    width:45px!important;
    height:45px!important;
    margin:0!important;
  }
  body.mag-page .mag-blog-tools{width:calc(100% - 32px)!important}
}

@media (max-width:800px){
  body.mag-page > .header{width:calc(100% - 24px)!important}
  body.mag-page > .header .logo img{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important}
  body.mag-page > .header .logo span{font-size:17px!important}
  body.mag-page > .header .logo b{font-size:17px!important}
  body.mag-page > .header .logo small{font-size:9px!important}
  body.mag-page > .header .client-panel{width:43px!important;min-width:43px!important;padding:0!important}
  body.mag-page > .header .client-panel span{display:none!important}
  body.mag-page .mag-blog-tools{width:calc(100% - 24px)!important;margin-top:0!important}
}

@media (max-width:540px){
  body.mag-page > .header{width:calc(100% - 20px)!important}
  body.mag-page .mag-blog-tools{width:calc(100% - 20px)!important}
}