:root{
  --brand:#0d3b66; /* deep blue */
  --accent:#1d70b8; /* EU-ish blue */
  --text:#1a1a1a;
  --muted:#666;
  --bg:#fff;
  --edge:#e6e6e6;
  --max:1080px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
img{max-width:100%;height:auto}
.container{max-width:var(--max);margin-inline:auto;padding:0 1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--edge);z-index:50}
.nav-wrap{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.625rem;text-decoration:none;color:var(--text)}
.brand-logo{width:36px;height:36px;display:block}
.brand-title{font-weight:700;letter-spacing:.2px}

.nav-toggle{ display:none; }
.site-nav{margin-left:auto}
.site-nav ul{display:flex;list-style:none;padding:0;margin:0;gap:1rem}
.site-nav a{display:block;padding:.5rem .25rem;text-decoration:none;color:var(--text)}
.site-nav a:hover, .site-nav a:focus{color:var(--accent)}

@media (max-width: 840px){
  .site-nav{display:none}
  .site-nav.open{display:block;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--edge)}
  .site-nav ul{flex-direction:column;padding: .5rem}
}

/* Main */
.site-content{padding:2rem 1rem}

/* Footer */
.site-footer{border-top:1px solid var(--edge);background:#fafafa}
.footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;align-items:start;padding:2rem 0}
.eu-flag{width:88px;height:auto;display:block;margin-bottom:.5rem}
.eu-disclaimer{font-size:.95rem;color:var(--muted);margin:0}
.project-meta h4{margin:.25rem 0 .5rem 0}
.project-meta ul{list-style:none;margin:0;padding:0}
.project-meta li{margin:.125rem 0}
.copyright{border-top:1px solid var(--edge);padding:.75rem 0;margin-top:1rem;font-size:.95rem;color:var(--muted)}

@media (max-width: 800px){
  .footer-grid{grid-template-columns:1fr}
}

/* Utility */
.lead{font-size:1.15rem;color:#2a2a2a}
.card-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{border:1px solid var(--edge);border-radius:.75rem;padding:1rem;background:#fff}
.card h3{margin-top:0}
.meta{font-size:.9rem;color:var(--muted)}

/* Keep long logos tidy in the navbar */
.brand-logo{
  height: 44px;          /* fits the bar; tweak 36–48px */
  width: auto;           /* keep aspect ratio (5292×1599) */
  max-width: clamp(160px, 22vw, 360px); /* don’t let it push the menu */
  display: block;
  object-fit: contain;
}

@media (max-width: 840px){
  .brand-logo{ height: 28px; max-width: 60vw; }
}

.brand{ gap: .25rem; }              /* was .625rem */
.nav-wrap{ min-height: 60px; }      /* or keep 64px */


/* Two-column contact grid */
.contact-grid{display:grid;gap:2rem;padding:3rem 0;grid-template-columns:repeat(2,1fr)}
.contact-col h2{color:#1d70b8;margin:0 0 1rem 0;line-height:1.15}
.person h3{margin:.25rem 0}
.person .meta{margin:.15rem 0 .75rem 0;color:#444;font-weight:600}
address{font-style:normal;color:#333;line-height:1.55}

@media (max-width:840px){
  .contact-grid{grid-template-columns:1fr}
}


/* Fully justify body copy */
.site-content p,
.site-content li {
  text-align: justify;        /* align both edges */
  text-justify: inter-word;   /* nicer word spacing */
  hyphens: auto;              /* allow hyphen breaks */
  -webkit-hyphens: auto;      /* Safari */
  overflow-wrap: anywhere;    /* long URLs/words still wrap */
}

/* Keep the lead paragraph left-aligned if you prefer */
.lead { text-align: left; }

.figure { margin: 1.5rem 0; }
.figure img { display: block; width: 100%; height: auto; border-radius: .5rem; }
.caption { color: var(--muted); font-size: .95rem; margin-top: .5rem; }

/* === Partners logo sizing (easy to tune) === */
:root{
  --partner-logo-h: 72px;      /* desktop logo height (try 56–72px) */
  --partner-logo-h-sm: 54px;   /* mobile logo height */
}

.logo-box{
  height: calc(var(--partner-logo-h) + 12px);
  display: flex; align-items: center; justify-content: center;
  padding: 6px; background: #fff;
  border: 1px solid var(--edge); border-radius: .5rem;
  margin-bottom: .5rem;
}

.partner-logo{
  max-height: var(--partner-logo-h);
  max-width: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
}

@media (max-width: 840px){
  .logo-box{ height: calc(var(--partner-logo-h-sm) + 12px); }
  .partner-logo{ max-height: var(--partner-logo-h-sm); }
}

/* ===== Deliverables by WP ===== */
.wp-toc { margin: 0 0 1rem 0; }
.wp-toc ul { list-style: none; margin: .25rem 0 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.wp-toc a { text-decoration: none; padding: .25rem .5rem; border: 1px solid var(--edge); border-radius: .5rem; }
.wp-toc a:hover { background: #f5f8ff; border-color: var(--accent); }

.wp-grid { display: grid; gap: 1.25rem; }

.wp-card { border: 1px solid var(--edge); border-radius: .75rem; background: #fff; }
.wp-card header { padding: 1rem 1rem .5rem 1rem; border-bottom: 1px solid var(--edge); }
.wp-card h2 { margin: 0; }
.wp-card .meta { margin: .25rem 0 0 0; color: var(--muted); }

.deliverable-list { list-style: none; margin: 0; padding: .25rem 1rem 1rem 1rem; }
.deliverable { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px dashed var(--edge); }
.deliverable:last-child { border-bottom: 0; }

.badge {
  flex: 0 0 auto;
  min-width: 3.8rem;
  text-align: center;
  font-weight: 600;
  border: 1px solid var(--edge);
  border-radius: .5rem;
  padding: .25rem .5rem;
  background: #f6f8fa;
}

.d-body { flex: 1 1 auto; }
.d-title { margin: 0 0 .25rem 0; }
.d-authors { margin: .1rem 0 .4rem 0; color: var(--muted); }

.chip {
  display: inline-block;
  border: 1px solid var(--edge);
  padding: .1rem .4rem;
  border-radius: .5rem;
  font-size: .85rem;
  color: #444;
  margin-right: .25rem;
}

.btn {
  display: inline-block;
  padding: .25rem .6rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: .5rem;
  text-decoration: none;
  margin-left: .25rem;
}
.btn:hover { background: var(--accent); color: #fff; }

@media (max-width: 840px){
  .badge { min-width: 3.2rem; }
}


/* Deliverables layout */
.wp-grid { display: grid; gap: 1.25rem; }
.wp-card { border: 1px solid var(--edge); border-radius: .75rem; background: #fff; }
.wp-card header { padding: 1rem 1rem .5rem 1rem; border-bottom: 1px solid var(--edge); }
.wp-card h2 { margin: 0; }

.deliverable-list { list-style: none; margin: 0; padding: .25rem 1rem 1rem 1rem; }
.deliverable { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px dashed var(--edge); }
.deliverable:last-child { border-bottom: 0; }

.badge { flex: 0 0 auto; min-width: 3.8rem; text-align: center; font-weight: 600;
  border: 1px solid var(--edge); border-radius: .5rem; padding: .25rem .5rem; background: #f6f8fa; }
.d-body { flex: 1 1 auto; }
.d-title { margin: 0 0 .25rem 0; }
.d-title a { color: inherit; text-decoration: none; }
.d-title a:hover, .d-title a:focus { color: var(--accent); text-decoration: underline; }
.d-org { margin: .1rem 0 .4rem 0; font-weight: 600; }
.chip { display: inline-block; border: 1px solid var(--edge); padding: .1rem .4rem;
  border-radius: .5rem; font-size: .85rem; color: #444; margin-right: .25rem; }


/* ===== Fancy News Cards ===== */
.news-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  margin:1rem 0 2rem 0;
}

.news-card{
  border:1px solid var(--edge);
  border-radius:.9rem;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,0.02);
  transition:transform .18s ease, box-shadow .18s ease;
}
.news-card:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,0.06); }

.news-card .cover{
  position:relative; display:block; text-decoration:none; color:inherit;
  aspect-ratio: 16 / 9;            /* consistent card cover */
  background:#f0f3f8;
}
.news-card .cover img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.news-card .cover::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
}
.news-card .cover .title{
  position:absolute; left:.9rem; right:.9rem; bottom:.7rem;
  margin:0; color:#fff; font-size:1.05rem; line-height:1.25;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.date-chip{
  position:absolute; top:.6rem; left:.6rem;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  border-radius:.5rem;
  font-size:.85rem; padding:.15rem .45rem;
}

.cover-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:700; letter-spacing:.08em; color:#5b6f92;
  background:repeating-linear-gradient(45deg, #e9eef7, #e9eef7 12px, #f5f7fb 12px, #f5f7fb 24px);
}

.news-card .excerpt{ padding: .9rem .9rem 0 .9rem; color:#2a2a2a; }
.news-card .more{ padding: .25rem .9rem 1rem .9rem; margin:0; }
.news-card .more a{ text-decoration:none; color:var(--accent); }
.news-card .more a:hover{ text-decoration:underline; }

/* Make long words/URLs wrap nicely inside excerpts */
.news-card .excerpt{ overflow-wrap:anywhere; hyphens:auto; }

.post-hero { margin: .5rem 0 1.25rem 0; }
.post-hero img { display:block; width:100%; height:auto; border-radius:.75rem; }
.post .caption { text-align:center; color:var(--muted); font-size:.95rem; margin-top:.4rem; }


/* Home hero image — constrained to page width */
.home-hero { margin: 1rem 0 1.5rem; }
.home-hero img {
  display: block;
  width: 100%;       /* fill the container, not the window */
  height: auto;
  border-radius: .75rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* Home: news list */
.news-list{ list-style:none; padding:0; margin: .5rem 0 2rem; }
.news-list li{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.5rem 0; border-bottom:1px dashed var(--edge);
}
.news-list li:last-child{ border-bottom:0; }
.news-date{
  flex:0 0 auto; font-size:.95rem; color:var(--muted);
  padding:.1rem .45rem; border:1px solid var(--edge); border-radius:.5rem;
}
.news-link{ text-decoration:none; }
.news-link:hover, .news-link:focus{ text-decoration:underline; color:var(--accent); }


/* Footer: 3-column layout */
.footer-3col{
  display:grid;
  grid-template-columns: 120px minmax(0,1fr) 320px; /* logo | text | meta */
  gap: 1.25rem 1.5rem;
  align-items:start;
  padding: 2rem 0;
}

.eu-col{ display:flex; align-items:flex-start; }
.eu-flag{ width:96px; height:auto; display:block; }
.disclaimer-col .eu-disclaimer{ font-size:.95rem; color:var(--muted); line-height:1.55; margin:0; }
.project-meta h4{ margin:.25rem 0 .5rem; }
.project-meta ul{ list-style:none; margin:0; padding:0; }
.project-meta li{ margin:.125rem 0; }

/* Center EU flag + disclaimer vertically; keep project info top-aligned */
.footer-3col{ align-items: center; }     /* centers items in the grid row */
.eu-col, .disclaimer-col{ align-self: center; }
.project-meta{ align-self: start; }

/* Tidy any extra offsets */
.eu-flag{ display:block; margin:0; }
.disclaimer-col .eu-disclaimer{ margin:0; line-height:1.55; }

/* Social strip above copyright */
.footer-social{ text-align:center; padding: .75rem 0 0; }
.footer-sep{ border:0; border-top:1px solid var(--edge); margin:0 0 .75rem; }
.social-link{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit; }
.social-link .icon{ width:22px; height:22px; display:block; }
.social-link:hover{ color:var(--accent); }

/* Center the copyright text */
.copyright{ text-align:center; }

/* Larger LinkedIn icon in footer */
.footer-social .social-link .icon{
  width: 32px;   /* was 22px */
  height: 32px;
}
.footer-social .social-link{
  gap: .6rem;
  padding: .25rem .5rem;   /* nicer hit area */
}

@media (max-width: 640px){
  .footer-social .social-link .icon{ width: 28px; height: 28px; }
}

/* === Sitewide heading color === */
:root{
  /* Pick your blue: */
  --heading: var(--brand);   /* deep blue (#0d3b66) */
  /* Or use the accent instead:  --heading: var(--accent); */
}

h1, h2, h3, h4, h5, h6 { color: var(--heading); }

/* Make links inside headings keep the same blue */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.card h3 a, .d-title a { color: inherit; }

/* Keep news card overlay title white for contrast */
.news-card .cover .title { color: #fff; }


/* === Larger navbar + logo (desktop) === */
:root{
  --nav-height: 88px;   /* bar height */
  --logo-h: 72px;       /* logo height within bar */
  --nav-font: 1.05rem;  /* menu text size */
}

.site-header { box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.nav-wrap { min-height: var(--nav-height); }
.brand-logo { height: var(--logo-h); width: auto; display: block; object-fit: contain; }
.site-nav ul { gap: 1.25rem; }                 /* more breathing room */
.site-nav a  { padding: .75rem .35rem; font-size: var(--nav-font); }

/* Mobile tweaks so it still feels compact */
@media (max-width: 840px){
  :root{
    --nav-height: 68px;
    --logo-h: 40px;
    --nav-font: 1rem;
  }
  .nav-toggle{ padding:.5rem .6rem; font-size:1.25rem; }
}

/* If anchor links jump under the taller sticky header */
:target, h1, h2, h3 { scroll-margin-top: calc(var(--nav-height) + 8px); }

/* === Light-blue nav + dot separators === */
:root{
  --nav-link: #2b8ae2;       /* light blue */
  --nav-link-hover: #0d57a7; /* deeper blue on hover/focus */
  --nav-sep: #9ec3ef;        /* dot color */
}

.site-nav a{
  color: var(--nav-link);
  font-weight: 600;
}
.site-nav a:hover,
.site-nav a:focus{
  color: var(--nav-link-hover);
  text-decoration: underline;
}

/* Dot exactly between nav items */
:root{
  --nav-sep: #8cb7eb;
  --nav-sep-size: 3px;         /* dot size */
}

/* normal (not bold) nav links */
.site-nav a{
  font-weight: 400 !important;    /* was 600 */
  padding: .5rem .35rem;          /* keep touch target comfy */
}

.site-nav ul{ display:flex; align-items:center; gap:0; }
.site-nav li{ display:flex; align-items:center; }

/* remove any earlier separator rules */
.site-nav ul li + li a::before{ content:none !important; }

/* centered dot between items */
.site-nav li + li::before{
  content:"";
  width: var(--nav-sep-size);
  height: var(--nav-sep-size);
  background: var(--nav-sep);
  border-radius: 50%;
  display:inline-block;
  margin: 0 .75rem;            /* space on both sides of the dot */
  align-self: center;          /* vertical centering */
}

/* hide dots when the menu stacks on mobile */
@media (max-width: 840px){
  .site-nav li + li::before{ display:none; }
}


/* Header positioning (so the dropdown positions correctly) */
.site-header { position: sticky; top: 0; background:#fff; z-index: 1000; }
.nav-wrap { position: relative; display:flex; align-items:center; justify-content:space-between; }

/* Hamburger */
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.5rem; }
.nav-toggle .bar{ display:block; width:24px; height:2px; margin:5px 0; background: var(--nav-link-hover, #0d57a7); border-radius:2px; }

/* Desktop nav stays inline */
.site-nav ul{ display:flex; align-items:center; gap:0; }

/* Mobile: collapse menu */
@media (max-width: 840px){
  .nav-toggle{ display:block; }
  .site-nav{
    display:none;
    position:absolute; left:0; right:0;
    top: var(--nav-height, 68px);
    background:#fff; border-top:1px solid var(--edge);
    padding:.5rem 1rem;
    box-shadow:0 10px 20px rgba(0,0,0,.05);
  }
  .site-header.menu-open .site-nav{ display:block; }
  .site-nav ul{ flex-direction:column; align-items:flex-start; gap:.25rem; }
  /* hide separator dots on mobile */
  .site-nav li + li::before{ display:none !important; }
}

/* Keep your separator dots on desktop (you already added these earlier) */
.site-nav li{ display:flex; align-items:center; }
.site-nav li + li::before{
  content:""; width:4px; height:4px; background: var(--nav-sep, #bcd4f4);
  border-radius:50%; display:inline-block; margin:0 .5rem; vertical-align:middle;
}

/* === Footer layout refresh === */
.site-footer{ border-top:1px solid var(--edge); background:#fafafa; }

.footer-3col{
  display:grid;
  grid-template-columns: 110px minmax(0,1fr) 320px; /* logo | text | project */
  gap: 1rem 1.25rem;
  align-items: start;         /* top-align on desktop */
  padding: 1.25rem 0 1.5rem;
}

.eu-col{ display:flex; justify-content:center; }
.eu-flag{ max-width:90px; width:100%; height:auto; display:block; }

.disclaimer-col .eu-disclaimer{
  margin:0;
  line-height:1.55;
  max-width: 70ch;            /* keep a comfortable line length */
  text-wrap: pretty;          /* modern browsers; safe to ignore if unsupported */
}

.project-meta{ justify-self:end; text-align:left; }
.project-meta h4{ margin:0 0 .4rem 0; }
.project-meta ul{ list-style:none; margin:0; padding:0; }
.project-meta li{ margin:.125rem 0; }

/* --- Tablet: 2 columns; project block drops below --- */
@media (max-width: 980px){
  .footer-3col{ grid-template-columns: 90px minmax(0,1fr); }
  .project-meta{ grid-column: 1 / -1; justify-self:start; margin-top:.75rem; }
  .eu-flag{ max-width:80px; }
}

/* --- Mobile: stack all three blocks vertically --- */
@media (max-width: 640px){
  .footer-3col{
    grid-template-columns: 1fr;
    gap: .75rem;
    text-align: center;
  }
  .eu-col{ justify-content:center; }
  .eu-flag{ max-width:72px; margin:0 auto; }
  .disclaimer-col .eu-disclaimer{ text-align:center; margin:0 auto; }
  .project-meta{ justify-self:center; text-align:center; }
}

/* Put a bit of space between social icons */
.footer-social .social-link + .social-link{ margin-left: .7rem; }

/* Icons already sized earlier; keep them consistent */
.footer-social .social-link .icon{ width: 32px; height: 32px; display:block; }
@media (max-width: 640px){
  .footer-social .social-link .icon{ width: 28px; height: 28px; }
}

/* Align all news dates in a right-fixed column */
.news-list li{
  border-bottom: none !important;
}

.news-date{
  /* keep your original look, but fix the column width */
  flex: 0 0 var(--news-date-col, 6.6rem);
  box-sizing: border-box;
  text-align: right;         /* right edge lines up */
  white-space: nowrap;       /* keep on one line */
  padding: .1rem .45rem;     /* (your original) */
  border: 1px solid var(--edge);
  border-radius: .5rem;
  font-size: .95rem;
  color: var(--muted);
}

.news-link{ flex: 1; }       /* title takes the remaining space */

@media (max-width: 520px){
  .news-date{ flex-basis: 8.6rem; }
}