/* =====================================================
   v43 Header donate + hero CTA visibility fix
   - Keeps the approved main green (#204C3C)
   - Prevents Arabic/English header donate text from being clipped
   - Makes the hero Donate button visible over dark hero images
===================================================== */
:root{
  --shuaa-main-green:#204C3C;
  --shuaa-main-green-edge:#2B6A53;
  --shuaa-hero-cta-border:rgba(255,255,255,.58);
}

.site-header .donate-top{
  background:var(--shuaa-main-green) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.24) !important;
  color:#fff !important;
  flex:0 0 auto !important;
  overflow:visible !important;
  white-space:nowrap !important;
  line-height:1.25 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.18) !important;
}

.site-header .donate-top span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  overflow:visible !important;
  line-height:1.35 !important;
  padding-block:2px !important;
}

html[dir="rtl"] .site-header .donate-top span,
html[lang^="ar"] .site-header .donate-top span{
  line-height:1.48 !important;
  transform:translateY(-1px) !important;
}

.site-header .donate-top svg{
  flex:0 0 auto !important;
  color:#fff !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

.hero-buttons .btn-primary{
  background:linear-gradient(135deg,var(--shuaa-main-green) 0%, var(--shuaa-main-green-edge) 100%) !important;
  background-color:var(--shuaa-main-green) !important;
  color:#fff !important;
  border:2px solid var(--shuaa-hero-cta-border) !important;
  opacity:1 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.24) !important;
  box-shadow:
    0 20px 46px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.hero-buttons .btn-primary:hover,
.hero-buttons .btn-primary:focus-visible{
  background:linear-gradient(135deg,var(--shuaa-main-green) 0%, #327A5F 100%) !important;
  border-color:rgba(255,255,255,.72) !important;
  filter:none !important;
}

.hero-buttons .btn-primary svg{
  color:#fff !important;
  fill:currentColor !important;
  stroke:currentColor !important;
  flex:0 0 auto !important;
}

@media (max-width:820px){
  .header-shell{
    grid-template-columns:minmax(150px,auto) minmax(0,1fr) 52px !important;
    gap:8px !important;
    padding-inline:12px !important;
  }

  .site-header .donate-top{
    width:clamp(150px,39vw,168px) !important;
    min-width:clamp(150px,39vw,168px) !important;
    max-width:168px !important;
    height:50px !important;
    min-height:50px !important;
    padding:0 13px !important;
    gap:7px !important;
    border-radius:13px !important;
    font-size:clamp(13.5px,3.7vw,15.5px) !important;
    font-weight:900 !important;
    white-space:nowrap !important;
  }

  html[dir="rtl"] .site-header .donate-top,
  html[lang^="ar"] .site-header .donate-top{
    font-size:clamp(14px,3.85vw,16px) !important;
  }

  .site-header .donate-top span{
    line-height:1.42 !important;
  }

  .site-header .donate-top svg{
    width:18px !important;
    height:18px !important;
    flex-basis:18px !important;
  }

  .site-header .brand{
    width:clamp(118px,32vw,144px) !important;
    min-width:0 !important;
    max-width:144px !important;
  }

  .site-header .brand img{
    max-height:52px !important;
    object-fit:contain !important;
  }

  .site-header .menu-btn{
    width:52px !important;
    min-width:52px !important;
    height:52px !important;
    min-height:52px !important;
    background:var(--shuaa-main-green) !important;
    border-radius:13px !important;
    box-shadow:none !important;
  }

  .site-header .menu-btn span{
    background:#fff !important;
  }

  .hero-buttons .btn-primary{
    min-height:56px !important;
    border-width:2px !important;
    box-shadow:
      0 18px 42px rgba(0,0,0,.46),
      0 0 0 1px rgba(255,255,255,.18),
      inset 0 1px 0 rgba(255,255,255,.30) !important;
  }
}

@media (max-width:430px){
  .header-shell{
    grid-template-columns:minmax(144px,auto) minmax(0,1fr) 50px !important;
    gap:7px !important;
    padding-inline:10px !important;
  }

  .site-header .donate-top{
    width:clamp(144px,39vw,154px) !important;
    min-width:clamp(144px,39vw,154px) !important;
    max-width:154px !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 10px !important;
    gap:6px !important;
    font-size:13.5px !important;
  }

  html[dir="rtl"] .site-header .donate-top,
  html[lang^="ar"] .site-header .donate-top{
    font-size:14px !important;
  }

  .site-header .brand{
    width:clamp(112px,30vw,132px) !important;
    max-width:132px !important;
  }

  .site-header .brand img{
    max-height:48px !important;
  }

  .site-header .menu-btn{
    width:50px !important;
    min-width:50px !important;
    height:50px !important;
    min-height:50px !important;
  }
}

@media (max-width:380px){
  .header-shell{
    grid-template-columns:minmax(136px,auto) minmax(0,1fr) 48px !important;
    gap:6px !important;
    padding-inline:10px !important;
  }

  .site-header .donate-top{
    width:clamp(136px,38vw,146px) !important;
    min-width:clamp(136px,38vw,146px) !important;
    max-width:146px !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 9px !important;
    font-size:13px !important;
  }

  html[dir="rtl"] .site-header .donate-top,
  html[lang^="ar"] .site-header .donate-top{
    font-size:13.5px !important;
  }

  .site-header .donate-top svg{
    width:16px !important;
    height:16px !important;
    flex-basis:16px !important;
  }

  .site-header .brand{
    width:112px !important;
    max-width:112px !important;
  }

  .site-header .menu-btn{
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
  }
}

@media (max-width:340px){
  .header-shell{
    grid-template-columns:132px minmax(0,1fr) 46px !important;
    padding-inline:8px !important;
    gap:5px !important;
  }

  .site-header .donate-top{
    width:132px !important;
    min-width:132px !important;
    max-width:132px !important;
    font-size:12.5px !important;
    padding-inline:7px !important;
  }

  html[dir="rtl"] .site-header .donate-top,
  html[lang^="ar"] .site-header .donate-top{
    font-size:13px !important;
  }

  .site-header .brand{
    width:104px !important;
    max-width:104px !important;
  }

  .site-header .menu-btn{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
  }
}