/* =========================================================================
   ΕΣΠΑ co-financing header bar
   Lives in the theme's native .navbar-top slot (auto-hidden by the theme when
   the header turns sticky on scroll). Same #202124 as the navbar so it reads
   as one continuous dark header on every page, including light interior pages.
   ========================================================================= */

.navbar-top { background: #202124; }

/* Desktop / tablet: centered 500px badge */
.navbar-top .espa-card {
  display: inline-block;
  background: #fff;
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  line-height: 0;                 /* kills inline-img descender gap */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease;
  width: 500px;
  max-width: 100%;                /* never overflow narrow viewports */
  margin: 0 auto;                 /* auto-margins center the flex item */
}
.navbar-top .espa-card:hover { transform: translateY(-1px); }

/* Image fills the card at whatever width the card is set to */
.navbar-top .espa-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile: full-width badge, capped navbar, hero pushed clear of the header */
@media (max-width: 767px) {
  .navbar-top .espa-card { width: 100%; }

  nav.navbar.navbar-expand-xl.px-lg-5 {
    background: #202124 !important;
    max-height: 100px;
  }
  nav.navbar.navbar-expand-xl.px-lg-5 .container-fluid {
    max-height: 100px;
  }
  .h-100.scale-img.py-9 { margin-top: 130px; }
}

/* ---------------------------------------------------------------------------
   Clearance for the position:absolute header on INTERIOR pages.
   Home hero (vh-100, centered) absorbs the bar on desktop; the mobile home
   hero is cleared by the .scale-img margin-top above. Keyed to .espa-offset,
   added only to interior <header>s.
   --------------------------------------------------------------------------- */
header.espa-offset + main { padding-top: 72px; }
@media (max-width: 767px) {
  header.espa-offset + main { padding-top: 80px; }
}

/* ---------------------------------------------------------------------------
   Tighter logo: zero the navbar-brand vertical padding.
   The var covers < 1200px; the theme hard-sets padding at >= 1200px, so that
   is overridden explicitly too.
   --------------------------------------------------------------------------- */
.navbar { --bs-navbar-brand-padding-y: 0px; }
@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-brand { padding-top: 0; padding-bottom: 0; }
}

.px-5.px-xxl-8.py-6.py-lg-8 {
    padding-top: 200px !important;
}