/* 1) Σταθεροποίησε layer order */
.upper-header-container { position: relative; }

/* 2) Σκούρο overlay ΠΙΣΩ από το κείμενο */
.upper-header-container::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.58); /* 0.55–0.65 δίνει άνεση για AA */
  z-index:0; pointer-events:none;
}

/* 3) Φέρε το πραγματικό περιεχόμενο πάνω από το overlay */
.upper-header-container > *{ position:relative; z-index:1; }

/* 4) Χρώματα κειμένου/links για υψηλή αντίθεση */
.upper-header-container,
.upper-header-container span,
.upper-header-container a{
  color:#fff !important;
}

/* 5) Hover/Focus states να παραμένουν ευανάγνωστα */
.upper-header-container a:hover{ text-decoration: underline; }
.upper-header-container a:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
}

/* 6) Αν υπάρχουν icons (svg) στο header */
.upper-header-container svg{ fill:#fff; stroke:#fff; }

.upper-header-container .content,
.upper-header-container .inner,
.upper-header-container > div{
  position:relative;
  z-index:1;
}