:root{
  --bg:#ffffff; --fg:#0b132b; --muted:#475569;
  --brand:#0e7490; --border:#e2e8f0; --card:#f8fafc;
  --link:#0e7490; --link-visited:#7c3aed;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:17px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--fg)
}

a{color:var(--link)}
a:hover,a:focus{text-decoration:underline}
a:focus,button:focus,input:focus,select:focus,textarea:focus{
  outline:3px solid var(--brand);
  outline-offset:2px
}

.container{max-width:1150px;margin:0 auto;padding:0 1rem}

.topbar{
  display:flex;
  gap:.75rem;
  justify-content:space-between;
  align-items:center;
  padding:.35rem 0;
  font-size:.95rem;
  color:var(--muted)
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 0;
  position:relative;
}

.brand{display:flex;align-items:center;gap:.75rem}
.logo{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#22b8cf)}
.brand h1{font-size:1.05rem;line-height:1.2;margin:0}

/* === NAVIGATION === */
nav ul{
  list-style:none;
  display:flex;
  gap:1rem;
  margin:0;
  padding:0
}
nav li a{
  display:inline-block;
  padding:.5rem .75rem;
  border-radius:10px
}
nav li a[aria-current="page"]{
  background:var(--card);
  border:1px solid var(--border)
}

header{
  position:sticky;
  top:0;
  background:#ffffffd9;
  backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid var(--border);
  z-index:1000
}

.hero{background:linear-gradient(180deg,#ecfeff,transparent)}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:1.25rem;padding:2.25rem 0}
.hero h2{font-size:clamp(1.7rem,2vw+1.4rem,2.5rem);margin:.25rem 0}
.subtitle{color:var(--muted);margin:.25rem 0 1rem}
.cta{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  padding:.75rem 1rem;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-weight:600
}
.cta:hover,.cta:focus{background:#0a637a}
.cards{display:grid;grid-template-columns:1fr;gap:1rem}
.grid-2{display:grid;grid-template-columns:1fr;gap:1rem}

@media(min-width:900px){
  .hero .wrap{grid-template-columns:1.2fr .8fr}
  .cards{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:1fr 1fr}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem;
  height:100%
}
.card h3{margin-top:0;font-size:1.1rem}
.meta{font-size:.96rem;color:var(--muted)}
.section{padding:2rem 0}

.footer{
  padding:1.5rem 0;
  background:var(--card);
  border-top:1px solid var(--border);
  font-size:.95rem
}

.espa{display:flex;flex-direction:column;gap:.25rem}
.badges{display:flex;flex-wrap:wrap;gap:.5rem}

.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden
}
.skip:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  background:#fff;
  border:2px solid var(--brand);
  padding:.5rem 1rem;
  border-radius:10px;
  z-index:2000
}

img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}

/* === ESPA sticky banner === */

.espa-banner {
  position: fixed;      /* ✅ Από sticky -> fixed */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1200;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

header {
  margin-top: 80px; /* ✅ Δημιουργεί χώρο κάτω από το banner */
}
@media (max-width: 640px) {
  header {
    margin-top: 70px;
  }
}
.espa-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:60px;
}
.espa-logos{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  padding:.35rem 0;
}
.espa-logos img{display:block;height:70px;}
.espa-logos img.isa{height:32px;margin-left:auto;opacity:.9}

@media (max-width:640px){
  .espa-logos{gap:8px;}
  .espa-logos img{height:36px;}
  .espa-logos img.isa{height:28px;}
}

header{top:64px;}
@media (max-width:640px){header{top:60px;}}

/* === Accessibility toggle === */
.accessibility-toggle {
  font-size: 22px;
  background: #0b132b;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: 0.3s;
}
.accessibility-toggle:hover,
.accessibility-toggle:focus {
  background: #0e7490;
}

/* === Accessibility menu === */
.accessibility-menu {
  position: fixed;
  top: 70px;
  right: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 10px;
  z-index: 1300;
}
.accessibility-menu button {
  display: block;
  width: 100%;
  margin: 4px 0;
  padding: 6px;
  font-size: 15px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.accessibility-menu button:hover {
  background: #0a637a;
}

/* === High Contrast === */
.high-contrast body,
.high-contrast header,
.high-contrast footer,
.high-contrast main {
  background: #000 !important;
  color: #fff !important;
}
.high-contrast p,
.high-contrast h1,
.high-contrast h2,
.high-contrast h3,
.high-contrast h4,
.high-contrast h5,
.high-contrast h6 {
  color: #fff !important;
}
.high-contrast a {color: #00ffff !important;}
.high-contrast .cta {
  background: #00ffff !important;
  color: #000 !important;
}
.high-contrast .card {
  background: #111 !important;
  border-color: #444 !important;
}
.high-contrast .espa-banner {
  background: #000 !important;
  border-bottom: 1px solid #444 !important;
}

/* === Footer === */
.site-footer {
  background: #0b132b;
  color: #f0f4f8;
  padding: 40px 20px;
  font-size: 15px;
  margin-top: 60px;
}
.site-footer a {color: #00c4ff;text-decoration: none;}
.site-footer a:hover {text-decoration: underline;}
.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-left {flex: 1;min-width: 250px;}
.footer-left img {margin-top: 10px;}
.funding-text {font-weight: 500;}
.footer-right {flex: 1;min-width: 250px;text-align: right;}
.footer-links {list-style: none;padding: 0;margin: 0 0 10px 0;}
.footer-links li {margin-bottom: 5px;}
.footer-links a {color: #00c4ff;}
.footer-links a:hover {text-decoration: underline;}
.copyright {font-size: 14px;opacity: 0.8;}

/* === Cookies Banner === */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #222;
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  z-index: 2000;
}
.cookie-banner p {margin: 0;font-size: 14px;}
.cookie-banner a {color: #00c4ff;text-decoration: underline;}
.cookie-banner button {
  background: #00c4ff;
  border: none;
  color: #000;
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.cookie-banner button:hover {background: #00a0d2;}
.cookie-banner.hidden {
  display: none !important;
}

/* === Responsive Navigation (Toggle) === */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--fg);
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  nav ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
    padding: 1rem 0;
    z-index: 999;
  }

  nav ul.open {
    display: flex;
  }

  nav li a {
    font-size: 1.2rem;
    padding: 0.75rem 0;
  }

  .espa-wrap {
    flex-direction: column;
    gap: 8px;
  }
}
/* === Footer Quick CTA Bar === */
.footer-cta-bar {
  background: #0e7490;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  font-size: 16px;
  margin-top: 1.5rem;
  border-radius: 12px;
  width: 100%;
}

.footer-cta-bar a {
  color: #fff;
  text-decoration: underline;
}

.footer-cta-bar a:hover {
  text-decoration: none;
}

@media (max-width: 600px) {
  .footer-cta-bar {
    font-size: 15px;
    padding: 0.8rem;
  }
}
/* === Footer Contact βελτιωμένο === */
.footer-contact {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 16px;
  line-height: 1.8;
}

.footer-contact p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
}

.footer-contact a {
  color: #00c4ff;
  text-decoration: none;
  font-weight: 500;
}

.footer-contact a:hover {
  text-decoration: underline;
}

/* 📱 Καλύτερη εμφάνιση σε κινητά */
@media (max-width: 600px) {
  .footer-contact {
    font-size: 15px;
    line-height: 1.6;
    padding: 0 10px;
  }

  .footer-contact p {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .footer-contact a {
    font-size: 1.05rem;
  }
}

/* === Fix για header σε κινητά === */
@media (max-width: 640px) {
  .brand h1 {
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: center;
  }

  .brand .meta {
    font-size: 0.8rem;
    display: block;
  }

  .nav {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .espa-logos img {
    height: 30px;
  }
}
/* === Header (2 γραμμές – mobile friendly) === */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
}

.brand h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.brand .meta {
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
}

/* 📱 Mobile βελτιστοποίηση */
@media (max-width: 640px) {
  .brand h1 {
    font-size: 1.2rem;
  }
  .brand .meta {
    font-size: 0.95rem;
  }

  .nav {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .espa-logos img {
    height: 32px;
  }
}

/* === Footer Main Row (2 στήλες) === */
.footer-main-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 0;
}

.footer-funding {
  text-align: left;
}

.footer-funding img {
  height: 80px;
  margin-top: 0.5rem;
}

.footer-contact {
  text-align: right;
  font-size: 1.05rem;
  line-height: 1.8;
}

.footer-contact a {
  color: #00c4ff;
  text-decoration: none;
  font-weight: 600;
}
.footer-contact a:hover { text-decoration: underline; }

/* 📱 Mobile View */
@media (max-width: 768px) {
  .footer-main-row {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-contact {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.95rem;
  }
  .footer-funding img {
    height: 65px;
  }
}

/* === Social + Back to Top Row === */
.footer-social-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.footer-social {
  display: flex;
  gap: 1.2rem;
}

.footer-social img {
  width: 38px;
  height: 38px;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}
.footer-social a:hover img { transform: scale(1.15); }


/* === Back to Top – ΕΜΦΑΝΙΣΗ και STYLE === */
#backToTop {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: #00c4ff;
  color: #0b132b;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 9999 !important; /* ✅ Πάνω απ’ όλα */
  transition: background 0.3s ease, transform 0.3s ease;
  pointer-events: auto; /* ✅ παίρνει click */
}


#backToTop:hover {
  background: #0a5f77;
  color: #fff;
  transform: translateY(-4px);
}

/* 📱 Καλύτερο μέγεθος σε κινητά */
@media (max-width: 600px) {
  #backToTop {
    width: 50px;
    height: 50px;
    font-size: 24px;
    bottom: 20px;
    right: 20px;
  }
}



/* === Footer Policies (σε μία γραμμή στο κέντρο) === */
.footer-policies {
  text-align: center;
  margin: 1.5rem 0;
  font-size: 1rem;
}

.footer-policies a {
  color: #00c4ff;
  text-decoration: none;
  margin: 0 0.4rem;
  font-weight: 500;
}

.footer-policies a:hover {
  text-decoration: underline;
}

/* 📱 Mobile responsive */
@media (max-width: 600px) {
  .footer-policies {
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 1.2rem 0;
  }
}
#backToTop {
  display: flex !important;
}
/* Κουμπί/σύνδεσμος μέσα στο ESPA strip */
.espa-link{
  margin-left: auto;
  border: 1px solid var(--fg);
  background: #fff;
  padding: .35rem .6rem;
  border-radius: .5rem;
  font-size: .9rem;
  text-decoration: none;
  color: inherit;
}
.espa-link:hover,.espa-link:focus{ text-decoration: none; }
.espa-modal__dialog{
  position: fixed;
  left: 50%;
  top: 50%;                    /* κεντράρισμα κάθετα */
  transform: translate(-50%, -50%);
  width: min(720px, 94vw);
  max-height: 88vh;            /* αρκετό ύψος, χωρίς να «σπάει» */
  overflow: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  padding: 1.2rem;
  z-index: 12001;
}

/* Σε πολύ μικρές οθόνες, άστο λίγο πιο κάτω για άνεση */
@media (max-width: 480px){
  .espa-modal__dialog{
    top: 55%;
    max-height: 90vh;
  }
}
.modal-open { overflow: hidden; }
/* === High Contrast fixes for ESPA modal === */
.high-contrast .espa-modal__backdrop{
  background: rgba(0,0,0,0.85) !important;
}

.high-contrast .espa-modal__dialog{
  background: #000 !important;
  color: #fff !important;
  border-color: #444 !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.6) !important;
}

.high-contrast .espa-modal__content h2,
.high-contrast .espa-modal__content h3,
.high-contrast .espa-modal__content p,
.high-contrast .espa-modal__content li{
  color: #fff !important;
}

.high-contrast .espa-modal__content .meta{
  color: #ccc !important;
}

.high-contrast .espa-modal__content a{
  color: #00ffff !important;   /* ίδια λογική με τα links του site */
  text-decoration: underline;
}

.high-contrast .espa-modal__content hr{
  border-top: 1px solid #444 !important;
}

.high-contrast .espa-modal__close{
  color: #fff !important;
}
.high-contrast .espa-modal__close:hover,
.high-contrast .espa-modal__close:focus{
  outline: 3px solid #00ffff !important;
  outline-offset: 2px;
}
.high-contrast .espa-modal__dialog{
  box-shadow: 0 0 0 2px #00ffff inset, 0 24px 60px rgba(0,0,0,.6) !important;
}
/* Πιο έντονο και ευδιάκριτο Χ στο modal (χωρίς αλλαγές HTML) */
.espa-modal__close{
  color:#0b132b;            /* πιο σκούρο */
  font-weight:900;          /* παχύτερο σύμβολο × */
  font-size:1.9rem;         /* μεγαλύτερο */
  width:2.6rem; height:2.6rem;   /* μεγαλύτερη "πιθανή" επιφάνεια */
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
  transition: color .15s ease, background-color .15s ease, transform .1s ease;
}
.espa-modal__close:hover{ 
  color:#fff; 
  background:#0e7490;       /* brand φόντο στο hover */
}
.espa-modal__close:active{ transform:scale(.96); }
.espa-modal__close:focus-visible{
  outline:3px solid #0e7490;
  outline-offset:2px;
}

/* High-contrast: να ξεχωρίζει κι εκεί */
.high-contrast .espa-modal__close{
  color:#fff !important; font-weight:900 !important;
}
.high-contrast .espa-modal__close:hover{
  color:#000 !important; background:#00ffff !important;
}
.high-contrast .espa-modal__close:focus-visible{
  outline:3px solid #00ffff !important; outline-offset:2px;
}
/* High-contrast: κόκκινο Χ πάνω σε μαύρο φόντο */
.high-contrast .espa-modal__close{
  color: #e11d48 !important;           /* κόκκινο, έντονο */
}
.high-contrast .espa-modal__close:hover{
  color: #000 !important;               /* αντιστροφή στο hover */
  background: #e11d48 !important;
}
.high-contrast .espa-modal__close:focus-visible{
  outline: 3px solid #00ffff !important; /* κρατάμε έντονο focus ring */
  outline-offset: 2px;
}
.site-footer {
  position: relative;
  z-index: 10;
}

.footer-badges {
  position: relative;
  z-index: 20;
}

.footer-badges button,
.footer-badges img {
  pointer-events: auto;
}

.footer-main-row .footer-badges {
  grid-column: 1 / -1;        /* πιάνει όλο το grid */
  justify-self: center;       /* κέντρο στο grid */
}

.footer-badges {
  justify-content: center;    /* κέντρο τα logos */
}