/* BLOG HEADER — synchronized from the approved homepage header code.
   Source geometry/style: style.css + zoo-header.css + zoo-header-adjustments.css + support-nav.js + resources-nav.js. */

@media (min-width:1051px){
  .blog-topbar{
    position:sticky;
    top:0;
    z-index:100;
    isolation:isolate;
    overflow:visible!important;
    background:
      radial-gradient(circle at 10% 0%,rgba(85,145,92,.10),transparent 25%),
      radial-gradient(circle at 92% 8%,rgba(216,185,93,.055),transparent 22%),
      linear-gradient(180deg,rgba(5,42,30,.99) 0%,rgba(5,48,34,.99) 100%)!important;
    border-bottom:1px solid rgba(216,185,93,.22)!important;
    box-shadow:0 12px 32px rgba(0,0,0,.18);
  }

  .blog-topbar::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.20;
    background:
      radial-gradient(ellipse at 1% 0%,rgba(66,120,71,.55) 0 7%,transparent 8%),
      radial-gradient(ellipse at 4% 3%,rgba(60,112,67,.42) 0 6%,transparent 7%),
      radial-gradient(ellipse at 98% 0%,rgba(66,120,71,.52) 0 7%,transparent 8%),
      radial-gradient(ellipse at 95% 4%,rgba(60,112,67,.38) 0 6%,transparent 7%);
  }

  .blog-topbar-inner{
    position:relative;
    z-index:2;
    width:calc(100% - 80px)!important;
    min-height:64px!important;
    height:64px!important;
    max-height:64px!important;
    margin:0 auto!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:clamp(8px,.8vw,16px)!important;
    overflow:visible!important;
  }

  .blog-topbar-inner::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:112px;
    right:235px;
    bottom:0;
    height:8px;
    opacity:.22;
    background:rgba(42,104,70,.72);
    clip-path:polygon(0 100%,0 78%,3% 78%,4% 58%,5% 78%,8% 78%,9% 48%,10% 78%,13% 78%,15% 60%,16% 78%,20% 78%,22% 44%,24% 78%,28% 78%,30% 62%,31% 78%,35% 78%,37% 50%,39% 78%,43% 78%,45% 64%,47% 78%,51% 78%,53% 45%,55% 78%,60% 78%,62% 58%,64% 78%,68% 78%,70% 51%,72% 78%,77% 78%,79% 62%,81% 78%,86% 78%,88% 48%,90% 78%,94% 78%,96% 60%,97% 78%,100% 78%,100% 100%);
  }

  .blog-brand{
    width:106px!important;
    min-width:106px!important;
    margin-right:clamp(8px,.7vw,14px)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    position:relative!important;
    z-index:90!important;
    overflow:visible!important;
    text-decoration:none!important;
  }

  .blog-brand img{
    width:100px!important;
    height:100px!important;
    max-width:none!important;
    object-fit:contain!important;
    border-radius:50%!important;
    position:relative!important;
    z-index:90!important;
    transform:translateY(18px)!important;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.28));
    transition:transform .22s ease,filter .22s ease;
  }

  .blog-brand:hover img{
    transform:translateY(18px) scale(1.035)!important;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.32));
  }

  .blog-categories{
    flex:1 1 auto!important;
    min-width:0!important;
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(3px,.38vw,7px)!important;
    position:relative!important;
    z-index:4!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
    padding:0!important;
  }
  .blog-categories::-webkit-scrollbar{display:none!important}

  .blog-category{
    position:relative!important;
    min-height:40px!important;
    height:40px!important;
    padding:0 clamp(9px,.68vw,14px)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-right:1px solid rgba(216,185,93,.13)!important;
    border-radius:13px!important;
    background:transparent!important;
    color:#f0f4ef!important;
    font-size:16.5px!important;
    line-height:1.05!important;
    font-weight:780!important;
    letter-spacing:-.015em!important;
    text-align:center!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease!important;
  }

  .blog-category:last-child{border-right-color:transparent!important}

  .blog-category::after{
    content:""!important;
    position:absolute!important;
    left:16px!important;
    right:16px!important;
    bottom:5px!important;
    height:3px!important;
    border-radius:999px!important;
    background:#dfbd52!important;
    opacity:0!important;
    transform:scaleX(.45)!important;
    transform-origin:center!important;
    transition:opacity .2s ease,transform .2s ease!important;
  }

  .blog-category:hover,.blog-category:focus-visible{
    color:#fff8df!important;
    background:rgba(216,185,93,.075)!important;
    border-right-color:rgba(216,185,93,.20)!important;
    transform:translateY(-1px)!important;
  }
  .blog-category:hover::after,.blog-category:focus-visible::after{
    opacity:1!important;
    transform:scaleX(1)!important;
  }

  .blog-category.active{
    color:#fff9e6!important;
    background:linear-gradient(180deg,rgba(216,185,93,.12),rgba(216,185,93,.055))!important;
    box-shadow:inset 0 0 0 1px rgba(216,185,93,.17),0 8px 20px rgba(0,0,0,.08)!important;
  }
  .blog-category.active::after{
    opacity:1!important;
    transform:scaleX(1)!important;
  }

  .blog-category[data-category="cucul"]{
    color:#f2cf62!important;
    font-weight:900!important;
  }

  .blog-top-actions{
    margin-left:clamp(2px,.35vw,7px)!important;
    margin-top:0!important;
    margin-bottom:0!important;
    height:64px!important;
    min-height:64px!important;
    display:flex!important;
    align-items:center!important;
    align-self:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    transform:translateY(4px)!important;
    flex:0 0 auto!important;
  }

  .blog-support-action{
    min-height:40px!important;
    padding:8px 12px!important;
    border:1px solid rgba(255,255,255,.24)!important;
    border-radius:13px!important;
    color:#fff!important;
    font-size:13.5px!important;
    line-height:1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    text-decoration:none!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .blog-donate{background:#d8b95d!important;color:#173126!important;border-color:#d8b95d!important}
  .blog-adopt{background:rgba(255,255,255,.075)!important}

  .blog-lang-switch{
    position:relative!important;
    z-index:9000!important;
    overflow:visible!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    width:auto!important;
    height:auto!important;
    display:block!important;
  }
  .blog-lang-current{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:60px!important;
    height:40px!important;
    padding:0 13px!important;
    border:1px solid rgba(255,255,255,.28)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.06)!important;
    color:#fff!important;
    font-size:13.5px!important;
    font-weight:900!important;
    cursor:pointer!important;
  }
  .blog-lang-menu{
    display:none!important;
    position:absolute!important;
    right:0!important;
    top:calc(100% + 8px)!important;
    min-width:170px!important;
    padding:8px!important;
    border-radius:14px!important;
    background:#fff!important;
    border:1px solid rgba(8,61,44,.10)!important;
    box-shadow:0 20px 48px rgba(0,0,0,.28)!important;
    z-index:99999!important;
  }
  .blog-lang-switch.open .blog-lang-menu{display:grid!important;gap:2px!important}
  .blog-lang-menu a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:42px!important;
    padding:10px 12px!important;
    margin:0!important;
    border:0!important;
    border-radius:9px!important;
    background:transparent!important;
    color:#173126!important;
    font-size:14px!important;
    font-weight:800!important;
    text-align:left!important;
    text-decoration:none!important;
  }
  .blog-lang-menu a:hover,.blog-lang-menu a.active{background:#edf4f0!important}
}

@media (min-width:1051px) and (max-width:1450px){
  .blog-topbar-inner{gap:clamp(8px,.8vw,16px)!important}
  .blog-brand{width:84px!important;min-width:84px!important;margin-right:2px!important}
  .blog-brand img{width:78px!important;height:78px!important;transform:translateY(13px)!important}
  .blog-brand:hover img{transform:translateY(13px) scale(1.035)!important}
  .blog-categories{gap:2px!important}
  .blog-category{
    font-size:clamp(10.5px,.92vw,13px)!important;
    padding-left:clamp(3px,.42vw,7px)!important;
    padding-right:clamp(3px,.42vw,7px)!important;
  }
  .blog-top-actions{gap:4px!important;margin-left:1px!important}
  .blog-support-action{font-size:11.5px!important;padding-left:8px!important;padding-right:8px!important}
  .blog-lang-current{min-width:48px!important;padding-left:8px!important;padding-right:8px!important;font-size:11.5px!important}
}

@media (max-width:1050px){
  .blog-support-action{display:none!important}
}