/* =========================================================================
   EUROBRIDGE UA MD — design system
   Style: "Accessible & Ethical" (WCAG-minded) · Pattern: Enterprise Gateway
   Palette: institutional EU navy + gold accent · Type: EB Garamond / Lato
   ========================================================================= */

:root {
  /* Color tokens */
  --navy-900: #0f1f45;
  --navy-800: #16306b;
  --navy-700: #1d3a7e;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-50:  #eff5ff;

  --gold-600: #c8890a;
  --gold-500: #e8a400;
  --gold-100: #fbeccb;

  --bg:        #f6f8fb;
  --surface:   #ffffff;
  --surface-2: #f1f5f9;
  --text:      #1e293b;
  --text-soft: #475569;
  --text-mute: #64748b;
  --border:    #e2e8f0;
  --border-strong: #cbd5e1;

  --success: #15803d;
  --success-bg: #dcfce7;
  --warning: #b45309;
  --warning-bg: #fef3c7;
  --danger:  #b91c1c;
  --danger-bg: #fee2e2;
  --info-bg: #e0ecff;

  /* Spacing scale (4 / 8 pt rhythm) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Radius & elevation */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15,31,69,.06), 0 1px 3px rgba(15,31,69,.08);
  --shadow-2: 0 4px 12px rgba(15,31,69,.08), 0 2px 4px rgba(15,31,69,.06);
  --shadow-3: 0 12px 28px rgba(15,31,69,.14);

  --font-head: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --container: 1140px;
}

/* ----- Reset / base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; color: var(--navy-900); margin: 0 0 var(--s-3); font-weight: 600; }
h1 { font-size: clamp(1.85rem, 1.25rem + 2.6vw, 2.4rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.5vw, 1.8rem); }
h3 { font-size: 1.3rem; font-family: var(--font-body); font-weight: 700; }
h4 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; }
p { margin: 0 0 var(--s-3); }
a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
/* <fieldset> defaults to min-inline-size:min-content, which refuses to shrink
   below its content (e.g. a wide budget table) and overflows the page — reset
   it so overflow-x:auto wrappers inside can scroll instead. */
fieldset { min-width: 0; }

/* Accessibility: visible focus everywhere */
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; border-radius: 3px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--navy-900); color: #fff; padding: var(--s-3) var(--s-4);
}
.skip-link:focus { left: var(--s-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ----- Layout helpers --------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-4); }
.main { flex: 1 0 auto; padding: var(--s-6) 0; }
.stack > * + * { margin-top: var(--s-4); }
.muted { color: var(--text-mute); }
.small { font-size: .875rem; }
.center { text-align: center; }
.row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.row-between { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; justify-content: space-between; }
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ----- Top navigation (white header with the official logo) ------------- */
/* The header must always be a SINGLE line: brand left, nav right. The wide
   EU logo (~320px) + the logged-in nav don't fit into the page container
   (1140px), so the header gets its own wider container and never wraps —
   below the burger breakpoint the links collapse behind the toggle instead. */
.topbar { background: #fff; color: var(--text); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-1); }
.topbar .container { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 80px; max-width: 1440px; flex-wrap: nowrap; }
/* No-JS fallback: the toggle stays hidden, links stay visible and may wrap. */
html:not(.js) .topbar .container { flex-wrap: wrap; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 60px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
html:not(.js) .nav { flex-wrap: wrap; }
.nav a { color: var(--text-soft); padding: var(--s-2) 8px; border-radius: var(--r-sm); display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size: .88rem; }
.nav a:hover { background: var(--surface-2); text-decoration: none; color: var(--navy-900); }
.nav a.active { color: var(--navy-900); background: var(--blue-50); }
/* Between the burger breakpoint and a comfortable desktop, squeeze a little
   so even the longest variant (RO/UK, logged in, with the audit link) still
   fits on one line. */
@media (min-width: 1200px) and (max-width: 1400px) {
  .brand-logo { height: 52px; }
  .nav a { font-size: .84rem; padding: var(--s-2) 6px; }
  .langs button { padding: 5px 9px; }
}

/* Language switcher */
.langs { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-pill); overflow: hidden; }
.langs button { background: transparent; color: var(--text-soft); border: 0; padding: 6px 12px; font-weight: 700; cursor: pointer; font-size: .8rem; }
.langs button.active { background: var(--gold-500); color: var(--navy-900); }
.langs button:hover:not(.active) { background: var(--surface-2); color: var(--navy-900); }

/* Notification bell */
.bell { position: relative; color: var(--text-soft); display: inline-flex; }
.bell:hover { color: var(--navy-900); }
.bell .count { position: absolute; top: -4px; right: -4px; background: var(--gold-500); color: var(--navy-900); border-radius: var(--r-pill); font-size: .68rem; font-weight: 800; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ----- Buttons ---------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: var(--r-sm); border: 1px solid transparent; font-family: var(--font-body); font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .18s ease, box-shadow .18s ease, color .18s ease; text-decoration: none; line-height: 1.1; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue-600); color: #fff; }
.btn-primary:hover { background: var(--navy-800); color: #fff; }
.btn-gold { background: var(--gold-500); color: var(--navy-900); }
.btn-gold:hover { background: var(--gold-600); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy-800); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); color: var(--navy-900); }
/* Ghost button on a dark background (e.g. the hero) — keep text readable on hover. */
.btn-ghost-light { color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #991b1b; color:#fff; }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: .82rem; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ----- Cards ------------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s-5); }
.card + .card { margin-top: var(--s-4); }
/* Inside a gap-spaced grid the adjacent-sibling margin is both redundant and
   harmful: it pushes cards 2..n down and breaks the default equal-height
   stretch, so cards in the same row end up different heights. Cancel it there. */
.grid > .card + .card { margin-top: 0; }
.card-head { display:flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-4); }
.card-head h2, .card-head h3 { margin: 0; }

/* Section tiles (the 4 big areas) */
.tile { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-1); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; height: 100%; }
.tile:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); text-decoration: none; border-color: var(--blue-500); }
.tile .ico { width: 46px; height: 46px; border-radius: var(--r-md); background: var(--blue-50); color: var(--blue-600); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--s-3); }
.tile h3 { color: var(--navy-900); margin-bottom: 4px; }
.tile p { color: var(--text-soft); margin: 0; font-size: .92rem; }
.tile .meta { margin-top: var(--s-3); font-weight: 700; color: var(--text-mute); font-size: .82rem; }

/* ----- Badges & status -------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; letter-spacing:.01em; }
.badge-draft { background: var(--surface-2); color: var(--text-soft); }
.badge-submitted { background: var(--info-bg); color: var(--navy-800); }
.badge-under_review { background: var(--gold-100); color: var(--gold-600); }
.badge-approved, .badge-contracted, .badge-in_implementation { background: var(--success-bg); color: var(--success); }
.badge-completed { background: #e2e8f0; color: var(--navy-800); }
.badge-rejected { background: var(--danger-bg); color: var(--danger); }
.role-pill { background: var(--blue-50); color: var(--blue-600); padding: 2px 10px; border-radius: var(--r-pill); font-size:.74rem; font-weight:700; }

/* ----- Messages / alerts ------------------------------------------------ */
.alerts { margin-bottom: var(--s-4); }
.alert { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid; margin-bottom: var(--s-2); display:flex; gap:var(--s-3); align-items:flex-start; }
.alert-success { background: var(--success-bg); border-color: #86efac; color: var(--success); }
.alert-error, .alert-danger { background: var(--danger-bg); border-color: #fca5a5; color: var(--danger); }
.alert-warning { background: var(--warning-bg); border-color: #fcd34d; color: var(--warning); }
.alert-info { background: var(--info-bg); border-color: #bfdbfe; color: var(--navy-800); }

/* ----- Forms ------------------------------------------------------------ */
.field { margin-bottom: var(--s-4); }
.field > label { display: block; font-weight: 700; margin-bottom: 6px; color: var(--navy-800); }
.field .req { color: var(--danger); }
.field-control, input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], select, textarea {
  width: 100%; font: inherit; color: var(--text);
  padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.field-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-50); outline: none; }
textarea.field-control { min-height: 120px; resize: vertical; }

/* File inputs: restyle the native control so the picker button matches the
   platform's buttons (kept native for accessibility/i18n — the browser
   localizes its own "choose file" label). */
input[type="file"].field-control {
  padding: 6px;
  color: var(--text-soft);
  font-size: .9rem;
  cursor: pointer;
  background: var(--surface-2);
}
input[type="file"].field-control::file-selector-button {
  background: var(--navy-900);
  color: #fff;
  border: 1px solid var(--navy-900);
  border-radius: var(--r-sm);
  padding: 9px 16px;
  margin-right: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
input[type="file"].field-control:hover::file-selector-button {
  background: var(--blue-700, #1d4ed8);
  box-shadow: var(--shadow-1);
}
input[type="file"].field-control:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-50);
  outline: none;
}
.help-text, .helptext { color: var(--text-mute); font-size: .85rem; margin-top: 4px; display:block; }
.errorlist { list-style: none; padding: 0; margin: 6px 0 0; color: var(--danger); font-size: .86rem; font-weight: 600; }
.char-counter { font-size: .78rem; color: var(--text-mute); text-align: right; margin-top: 2px; }
.char-counter.over { color: var(--danger); font-weight: 700; }
.field-check { width: auto; margin-right: 8px; }

/* Auth split card */
.auth-wrap { max-width: 460px; margin: var(--s-7) auto; }

/* ----- Tables ----------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { background: var(--surface-2); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); }
.table tr:hover td { background: #fafcff; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ----- Budget table ----------------------------------------------------- */
.budget-num { width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.budget-cat td { background: var(--navy-800); color: #fff; font-weight: 700; font-family: var(--font-body); }
.budget-group td { background: var(--surface-2); font-weight: 700; color: var(--text-soft); font-size: .85rem; }
.budget-subtotal td { background: var(--blue-50); font-weight: 700; }
.budget-total td { background: var(--gold-100); font-weight: 800; font-size: 1.05rem; color: var(--navy-900); }
/* The generic `.table tr:hover td` tint outranks `.budget-* td` (specificity
   0,2,2 vs 0,1,1), so on hover it washed out these structural rows — worst on
   the navy category headers, whose white text turned invisible on the pale
   background as the cursor crossed between chapters. Re-assert each row's own
   colour on hover (the `#budget-table` id wins); only data rows get tinted. */
#budget-table tr.budget-cat:hover td      { background: var(--navy-800); }
#budget-table tr.budget-group:hover td    { background: var(--surface-2); }
#budget-table tr.budget-subtotal:hover td { background: var(--blue-50); }
#budget-table tr.budget-total:hover td    { background: var(--gold-100); }
.line-total { font-variant-numeric: tabular-nums; font-weight: 700; }
/* Free-text route on C.1 travel rows ("from → to"). The anchor row's field is
   editable and drives the autocopy; the sub rows show a muted mirror. */
.budget-destination-wrap { margin-top: 6px; }
.budget-destination { width: 100%; font-size: .85rem; padding: 5px 8px; }
.budget-destination-wrap--sub .budget-destination { background: var(--surface-2); color: var(--text-soft); }
/* "+ Add for another partner" — subtle link-style action under a template line. */
.budget-copy-add { margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--blue-500); }
.budget-copy-add:hover { text-decoration: underline; }

/* ----- Project sub-navigation (tabs) ------------------------------------ */
.subnav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--border); margin-bottom: var(--s-5); }
.subnav a { padding: 10px 16px; color: var(--text-soft); font-weight: 700; border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 6px 6px 0 0; }
.subnav a:hover { background: var(--surface-2); text-decoration: none; }
.subnav a.active { color: var(--navy-900); border-bottom-color: var(--gold-500); }

/* ----- Application form sections ---------------------------------------- */
.form-toc { position: sticky; top: 80px; }
.form-toc a { display:block; padding: 6px 10px; color: var(--text-soft); border-left: 3px solid transparent; font-size:.9rem; }
.form-toc a:hover { border-left-color: var(--blue-500); background: var(--surface-2); text-decoration:none; }
.section-card { scroll-margin-top: 84px; }
.section-num { display:inline-block; background: var(--navy-800); color:#fff; border-radius: var(--r-sm); font-size:.78rem; font-weight:800; padding: 2px 9px; margin-right: 8px; font-family: var(--font-body); }

/* ----- Validation checklist --------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 8px 0; border-bottom: 1px dashed var(--border); display:flex; gap:10px; align-items:flex-start; }
.checklist li:last-child { border-bottom: 0; }
.dot { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; margin-top: 3px; }
.dot-ok { background: var(--success-bg); border: 2px solid var(--success); }
.dot-bad { background: var(--danger-bg); border: 2px solid var(--danger); }

/* ----- Hero / landing --------------------------------------------------- */
.hero { background: radial-gradient(1200px 500px at 80% -10%, rgba(232,164,0,.18), transparent), linear-gradient(160deg, var(--navy-900), var(--navy-700)); color: #fff; padding: var(--s-8) 0; position: relative; overflow: hidden; min-height: clamp(560px, 78vh, 720px); display: flex; flex-direction: column; justify-content: center; }
.hero .container { text-align: center; position: relative; z-index: 1; }
/* Project name as a gradient title at the top of the hero — in normal flow,
   so it never overlaps the heading below. */
.hero-bg-title {
  display: block; width: fit-content; max-width: 100%; margin: 0 auto var(--s-5);
  white-space: nowrap; line-height: 1.05; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.4rem, 4.2vw, 3rem);
  background: linear-gradient(95deg, var(--gold-500), #7fb0ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

@media (max-width: 720px) {
  .hero { min-height: clamp(440px, 64vh, 560px); }
}
.hero h1 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 2.1vw, 2.1rem); max-width: 22ch; margin-left: auto; margin-right: auto; }
.hero p.lead { color: #dbe4f7; font-size: clamp(1.02rem, .92rem + .6vw, 1.2rem); max-width: 60ch; margin-left: auto; margin-right: auto; }
.hero .row { justify-content: center; }
/* Country flag pinned to each hero partner card's top-right corner. */
.hero-partner-row .partner { position: relative; }
.hero-partner-row .partner-flag { position: absolute; top: var(--s-3); right: var(--s-3); margin: 0; }

/* Autosave status pill (application & budget forms). */
.autosave-status { align-self: center; font-size: .85rem; color: var(--text-mute); }
.autosave-status.autosave-saving { color: var(--text-soft); }
.autosave-status.autosave-saved { color: var(--success); }
.autosave-status.autosave-error { color: var(--danger); }
/* Implementing-partner logos under the hero CTA. They reuse the /info/ partner
   treatment — a proportional logo (max-height + max-width, never distorted) in a
   white .card — but sit on the dark hero and link out to each partner's site. */
.hero-partners { margin-top: var(--s-6); }
.hero-partners-label {
  margin: 0 0 var(--s-4); color: #9fb2d6;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.hero-partner-row { max-width: 780px; margin-inline: auto; }
.hero-partner-row .partner {
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hero-partner-row a.partner:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.hero-partner-row a.partner:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
/* On phones the cards stack to one column — keep them compact (narrower, smaller
   logo and padding) so the hero stays scannable. Scoped to the hero so the
   /info/ partner cards are untouched. */
@media (max-width: 640px) {
  .hero-partner-row { max-width: 320px; gap: var(--s-3); }
  .hero-partner-row .partner { padding: var(--s-4); }
  .hero-partner-row .partner-logo { height: 46px; margin-bottom: var(--s-2); }
  .hero-partner-row .partner-logo img { max-height: 38px; }
  .hero-partner-row .partner .small { font-size: .78rem; }
}
.hero .flags { display:inline-flex; gap:8px; align-items:center; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); padding:6px 14px; border-radius: var(--r-pill); font-weight:700; font-size:.85rem; letter-spacing:.04em; margin-bottom: var(--s-4); }
.feature .ico { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--blue-50); color: var(--blue-600); display:inline-flex; align-items:center; justify-content:center; margin-bottom: var(--s-3); }
.stage { position: relative; padding-left: var(--s-5); }
.stage::before { content:""; position:absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--gold-500); }
.stage h4 { color: var(--navy-900); }

/* =========================================================================
   Home page — institutional "EU programme" bands
   Full-bleed horizontal zones (rendered in {% block fullbleed %}, so they sit
   outside the centred .container and span the viewport). Rhythm alternates
   light / tint / dark to break the flat sea of white and echo the navy hero.
   ========================================================================= */
.home .main, .about .main, .transparency .main, .media .main { padding: 0; }       /* bands own the vertical rhythm */
.home .footer, .about .footer, .transparency .footer, .media .footer { margin-top: 0; } /* last band flows into footer */

.band { padding: var(--s-8) 0; position: relative; }
.band-light { background: var(--bg); }
.band-tint  { background: linear-gradient(180deg, #e9f0fb 0%, var(--bg) 70%); }
.band-dark  {
  color: #fff; overflow: hidden;
  background:
    radial-gradient(900px 420px at 82% -25%, rgba(232,164,0,.16), transparent 70%),
    linear-gradient(160deg, var(--navy-900), var(--navy-700));
}
/* Faint dotted star-field over the dark band — quiet echo of the hero orbit. */
.band-stars {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 80%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 80%);
}

/* Section header: heading + a short gold underline. */
.band-head { max-width: 720px; margin: 0 auto var(--s-6); }
.band-head h2 { margin: 0; }
.band-head .band-lead { margin: var(--s-3) 0 0; color: var(--text-soft); }
.band-head.center::after {
  content: ""; display: block; width: 52px; height: 3px; border-radius: 2px;
  background: var(--gold-500); margin: var(--s-4) auto 0;
}
.band-dark .band-head h2 { color: #fff; }
.band-dark .band-head .band-lead { color: rgba(255,255,255,.82); }

/* ----- Access gateways: two identical light tiles ----------------------- */
.role-cards .tile { display: flex; flex-direction: column; border-top: 4px solid var(--gold-500); }
.tile-ico {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-3); background: var(--gold-100); color: var(--gold-600);
}
.tile-cta { margin-top: auto; padding-top: var(--s-4); }

/* ----- Lifecycle stepper ------------------------------------------------ */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5);
}
.step { position: relative; text-align: center; padding: 0 var(--s-2); }
.step-num {
  position: relative; z-index: 1;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto var(--s-3);
  background: var(--navy-900); color: #fff; border: 2px solid var(--gold-500);
  font-family: var(--font-head); font-weight: 700; font-size: 1.55rem;
  box-shadow: 0 8px 20px -8px rgba(15,31,69,.5);
}
.step h4 { color: var(--navy-900); margin-bottom: var(--s-1); }
.step p { font-size: .92rem; }
/* Dashed gold connector between consecutive steps (echoes the orbit ring). */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 29px; z-index: 0;
  left: calc(50% + 34px); right: calc(-50% + 34px);
  border-top: 2px dashed rgba(232,164,0,.55);
}

/* ----- Open calls on the dark band ------------------------------------- */
.calls-band .call-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14); border-top: 3px solid var(--gold-500);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.calls-band .call-card h3 { color: #fff; }
.calls-band .call-card > p { color: rgba(255,255,255,.78); }
.calls-band .call-badge { color: var(--navy-900); background: var(--gold-500); }
.calls-band .call-facts { border-top-color: rgba(255,255,255,.18); }
.calls-band .call-num { color: var(--gold-500); }
.calls-band .call-lbl { color: rgba(255,255,255,.7); }

/* ----- Feature cards: navy/gold icon + hover lift ----------------------- */
.feature-grid .feature {
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.feature-grid .feature:hover {
  box-shadow: var(--shadow-2); transform: translateY(-3px); border-color: var(--border-strong);
}
.feature .ico { background: var(--gold-100); color: var(--gold-600); }

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-5); }
  .step:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .band { padding: var(--s-7) 0; }
  .steps { grid-template-columns: 1fr; }
}

/* =========================================================================
   About page
   ========================================================================= */
.container.narrow { max-width: 820px; }
.about-hero { text-align: center; }
.about-hero h1 { color: #fff; max-width: 18ch; margin-inline: auto; }
.about-subtitle {
  max-width: 760px; margin: var(--s-3) auto 0;
  font-family: var(--font-head); font-style: italic;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem); color: var(--gold-500); line-height: 1.4;
}
.about-fund {
  margin: var(--s-5) auto 0; max-width: 760px;
  font-size: .82rem; letter-spacing: .02em; color: rgba(255,255,255,.72);
}
.about-intro { font-size: 1.1rem; line-height: 1.7; }
.about-intro + .about-intro { margin-top: var(--s-4); }
.about-goal {
  max-width: 820px; margin: 0 auto; font-family: var(--font-head);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); color: var(--navy-900); line-height: 1.4;
}

/* Country flag chip reused on partner & geo cards. */
.partner-flag {
  display: inline-block; width: 34px; height: 23px; border-radius: 3px;
  margin: 0 auto var(--s-2); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-1);
}
.partner-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }

.partner-name { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700;
  color: var(--navy-900); margin: 0; line-height: 1.3; }
.partner-place { margin: 2px 0 var(--s-2); }
.partner-role { font-size: .9rem; color: var(--text-soft); margin: 0; }
.partner-row .partner { display: flex; flex-direction: column; }

/* Geographic scope cards */
.geo-card { text-align: center; }
.geo-card h3 { margin: var(--s-1) 0; color: var(--navy-900); }
.geo-card p { margin: 0; }

/* ----- Transparency register -------------------------------------------- */
.tpost-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.tpost { border-left: 4px solid var(--gold-500); }
.tpost-date {
  display: inline-block; font-size: .82rem; font-weight: 700; color: var(--text-mute);
  margin-bottom: var(--s-2);
}
.tpost h3 { margin: 0 0 var(--s-4); color: var(--navy-900); line-height: 1.35; }
.tpost-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.tpost-links-label { font-size: .85rem; color: var(--text-mute); margin-right: 2px; }
.tpost-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .85rem; padding: 6px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  color: var(--navy-800); transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tpost-link:hover { background: var(--blue-50); border-color: var(--blue-500); color: var(--blue-600); text-decoration: none; }
.tpost-link svg { opacity: .7; }

/* ----- Media gallery ---------------------------------------------------- */
.mpost-list { display: flex; flex-direction: column; gap: var(--s-5); }
.mpost { padding: 0; overflow: hidden; }
.mpost-media { display: grid; gap: 4px; background: var(--surface-2); }
.mpost-media a { display: block; overflow: hidden; }
.mpost-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.mpost-media a:hover img { transform: scale(1.04); }
.mpost-media.g1 { grid-template-columns: 1fr; }
.mpost-media.g1 img { aspect-ratio: 16 / 9; }
.mpost-media.g2 { grid-template-columns: repeat(2, 1fr); }
.mpost-media.g2 img { aspect-ratio: 3 / 2; }
.mpost-media.g3 { grid-template-columns: repeat(3, 1fr); }
.mpost-media.g3 img { aspect-ratio: 4 / 3; }
.mpost-media.gmany { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mpost-media.gmany img { aspect-ratio: 1 / 1; }
.mpost-body { padding: var(--s-5); }
.mpost-date { display: inline-block; font-size: .82rem; font-weight: 700; color: var(--text-mute); margin-bottom: var(--s-2); }
.mpost-body h3 { margin: 0 0 var(--s-4); color: var(--navy-900); line-height: 1.35; }
@media (max-width: 560px) {
  .mpost-media.g3 { grid-template-columns: repeat(2, 1fr); }
  .mpost-media.gmany { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Placeholder ("coming soon") pages -------------------------------- */
.placeholder-page {
  max-width: 560px; margin: var(--s-8) auto; text-align: center;
  padding: var(--s-7) var(--s-4);
}
.placeholder-ico {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--s-4);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-100); color: var(--gold-600);
}
.placeholder-page .eyebrow { margin-bottom: var(--s-2); }
.placeholder-page h1 { margin: 0 0 var(--s-3); }

/* ----- Legal pages (Terms, Privacy) ------------------------------------- */
.legal-page { padding: var(--s-7) 0 var(--s-8); }
.legal-page h1 { margin: 0 0 var(--s-4); }
.legal-page h2 {
  font-size: 1.25rem; margin: var(--s-6) 0 var(--s-3);
  padding-top: var(--s-5); border-top: 1px solid var(--border);
}
.legal-page h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-page p { line-height: 1.7; margin: 0 0 var(--s-3); }
.legal-page ul { margin: 0 0 var(--s-3) var(--s-5); }
.legal-page li { line-height: 1.7; margin-bottom: var(--s-2); }
.legal-page .legal-meta { color: var(--text-mute); font-size: .9rem; margin-bottom: var(--s-5); }
.legal-page .muted.small { color: var(--text-mute); font-size: .85rem; margin-top: var(--s-5); }
.legal-back { margin-top: var(--s-6); }

/* ----- Organisation / partner identification (read-only on the dossier) - */
.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); }
.org-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); background: var(--bg); }
.org-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.org-card-head strong { word-break: break-word; }
.org-dl { margin: 0; display: grid; gap: var(--s-2); }
.org-dl > div { display: grid; gap: 2px; }
.org-dl dt { font-size: .78rem; color: var(--text-mute); }
.org-dl dd { margin: 0; word-break: break-word; }

/* ----- Footer ----------------------------------------------------------- */
.footer { background: var(--navy-900); color: #c2cee6; margin-top: var(--s-8); padding: var(--s-6) 0; font-size: .9rem; }
.footer a { color: #fff; }
.footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--s-5); }
@media (max-width: 980px) { .footer .container { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer .container { grid-template-columns: 1fr; } }
.footer h4 { color: #fff; }

/* ----- Notifications list ----------------------------------------------- */
.note-item { display:flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.note-item.unread { background: var(--blue-50); margin: 0 calc(-1 * var(--s-4)); padding-left: var(--s-4); padding-right: var(--s-4); }
.note-dot { width:10px; height:10px; border-radius:50%; background: var(--blue-500); margin-top: 7px; flex:0 0 auto; }

/* dropdown for bell */
.dropdown { position: relative; }
.dropdown-panel { position:absolute; right:0; top: calc(100% + 8px); width: 320px; background:#fff; color: var(--text); border:1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-3); padding: var(--s-3); display:none; z-index: 50; }
.dropdown.open .dropdown-panel { display:block; }

.empty { text-align:center; padding: var(--s-7) var(--s-4); color: var(--text-mute); }
.empty .ico { width:60px; height:60px; border-radius:50%; background: var(--surface-2); display:inline-flex; align-items:center; justify-content:center; margin-bottom: var(--s-3); color: var(--text-mute); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-5) 0; }
.tag-eur { font-variant-numeric: tabular-nums; font-weight:700; }

/* ----- News slider (landing) & news cards ------------------------------- */
.news-slider { position: relative; }
.news-slider-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4);
}
.news-slider-head h2 { margin: 0; }

.slider-viewport {
  overflow: hidden; border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); background: var(--surface);
}
.slider-track {
  display: flex; margin: 0; padding: 0; list-style: none;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.slide { flex: 0 0 100%; min-width: 0; }
.slide-link {
  display: grid; grid-template-columns: 42% 1fr; min-height: 280px;
  text-decoration: none; color: inherit;
}
.slide-media { background: var(--surface-2); overflow: hidden; }
.slide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-media-empty {
  background: linear-gradient(135deg, var(--navy-800), var(--blue-600));
}
.slide-body {
  padding: var(--s-6); display: flex; flex-direction: column;
  justify-content: center; gap: var(--s-2);
}
.slide-body h3 { font-size: 1.5rem; margin: var(--s-1) 0; color: var(--navy-900); }
.slide-cta { color: var(--gold-600); font-weight: 700; margin-top: var(--s-2); align-self: flex-start; }
.slide-link:hover .slide-cta { text-decoration: underline; }

.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: rgba(255,255,255,.92);
  color: var(--navy-900); font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-1); transition: background .15s, transform .15s;
}
.slider-arrow:hover { background: #fff; }
.slider-prev { left: -12px; }
.slider-next { right: -12px; }

.slider-dots {
  display: flex; justify-content: center; gap: var(--s-2);
  margin-top: var(--s-4);
}
.slider-dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: var(--border-strong); cursor: pointer; transition: background .15s;
}
.slider-dots button[aria-selected="true"] { background: var(--gold-500); }

/* News list cards */
.news-card { padding: 0; overflow: hidden; }
.news-card-link { display: block; text-decoration: none; color: inherit; }
.news-card-media { aspect-ratio: 16 / 9; background: var(--surface-2); }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-body { padding: var(--s-4); }
.news-card-body h3 { margin: var(--s-1) 0; }

/* News article */
.news-article { max-width: 760px; margin-inline: auto; }
.news-article-media {
  margin: var(--s-4) 0; border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-1);
}
.news-article-media img { width: 100%; height: auto; display: block; }
.news-article-body { margin-top: var(--s-4); }

/* Event photo gallery on a news article */
.news-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3); margin-top: var(--s-5);
}
.news-gallery-item { margin: 0; }
.news-gallery-item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-md); display: block; box-shadow: var(--shadow-1);
}
.news-gallery-item figcaption {
  font-size: .82rem; color: var(--text-mute); margin-top: 6px;
}
@media (max-width: 560px) { .news-gallery { grid-template-columns: 1fr; } }

/* Photo slider (cover + gallery) on the news article — reuses the slider JS */
.news-photos { position: relative; }
.news-photos .slide { flex: 0 0 100%; min-width: 0; }
.news-photos .slide img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
}

/* Featured news on the landing: a photo carousel (inner, auto) inside a
   media+text card, wrapped by a news switcher (outer, manual). */
.news-featured-card { display: grid; grid-template-columns: 48% 1fr; min-height: 320px; }
.news-featured-media {
  position: relative; min-height: 300px; background: var(--surface-2); overflow: hidden;
}
.photo-viewport { position: absolute; inset: 0; overflow: hidden; }
.photo-track {
  display: flex; height: 100%; margin: 0; padding: 0; list-style: none;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.news-featured-media .slide { flex: 0 0 100%; min-width: 0; }
.news-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-featured-media .slide-media-empty { width: 100%; height: 100%; }
.photo-dots { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; z-index: 2; }
.photo-dots button { background: rgba(255, 255, 255, .55); }
.photo-dots button[aria-selected="true"] { background: #fff; }
.news-featured-body {
  padding: var(--s-6); display: flex; flex-direction: column;
  justify-content: center; gap: var(--s-2); text-decoration: none; color: inherit;
}
.news-featured-body h3 { font-size: 1.5rem; margin: var(--s-1) 0; color: var(--navy-900); }
/* Photo carousel arrows — inset on the image. */
.photo-arrow { width: 36px; height: 36px; font-size: 1.3rem; z-index: 2; }
.photo-prev { left: 8px; }
.photo-next { right: 8px; }
/* News switcher — a control bar (‹ dots ›) below the card. */
.news-nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-3); margin-top: var(--s-4);
}
.news-nav-arrow { position: static; transform: none; top: auto; }
.news-nav .news-dots { margin-top: 0; }
@media (max-width: 720px) {
  .news-featured-card { grid-template-columns: 1fr; }
  .news-featured-media { min-height: 220px; }
}
/* Hide slider arrows on phones — dots remain for navigation. */
@media (max-width: 560px) {
  .photo-arrow, .news-nav-arrow { display: none; }
}

@media (max-width: 720px) {
  .slide-link { grid-template-columns: 1fr; }
  .slide-media { height: 180px; }
  .slide-body { padding: var(--s-5); }
  .slider-prev { left: 4px; }
  .slider-next { right: 4px; }
}

/* ----- Calls + programme info page -------------------------------------- */
.eyebrow {
  text-transform: uppercase; letter-spacing: .08em; font-size: .8rem;
  font-weight: 700; color: var(--gold-600); margin: 0 0 var(--s-2);
}

/* Two-call cards (home + info) */
.call-card { display: flex; flex-direction: column; gap: var(--s-2); }
.call-badge {
  align-self: flex-start; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--gold-600); background: var(--gold-100);
  padding: 3px 10px; border-radius: var(--r-pill);
}
.call-card h3 { margin: var(--s-1) 0; color: var(--navy-900); }
.call-facts {
  display: flex; gap: var(--s-5); margin-top: auto;
  padding-top: var(--s-3); border-top: 1px solid var(--border);
}
.call-facts > div { display: flex; flex-direction: column; }
.call-num { font-size: 1.35rem; font-weight: 800; color: var(--navy-800);
  font-variant-numeric: tabular-nums; }
.call-lbl { font-size: .8rem; color: var(--text-mute); }
.call-breakdown { margin: var(--s-2) 0 0; padding-left: 1.1em; color: var(--text-soft); }
.call-breakdown li { margin-bottom: var(--s-1); font-size: .92rem; }

/* Key-figures strip */
.stat-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3);
  background: var(--navy-900); border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4); box-shadow: var(--shadow-2);
}
.stat-strip.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stat { text-align: center; color: #fff; }
.stat-num { display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 1.9rem; color: var(--gold-500); line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.stat-lbl { display: block; font-size: .82rem; color: rgba(255,255,255,.8);
  margin-top: 4px; }

/* Partner + objective cards */
.partner { text-align: center; }
.partner h4 { font-family: var(--font-head); font-size: 1.25rem; color: var(--navy-900);
  margin: 0 0 var(--s-2); }
.partner-logo {
  height: 64px; display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-3);
}
.partner-logo img { max-height: 56px; max-width: 100%; object-fit: contain; }
.partner-name {
  font-family: var(--font-head); font-size: 1.35rem; font-weight: 700;
  color: var(--navy-900);
}
.objective { position: relative; }
.obj-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--blue-50); color: var(--blue-600);
  font-weight: 800; font-size: .85rem; margin-bottom: var(--s-2);
}
.objective h3 { margin: var(--s-1) 0; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.timeline-item {
  position: relative; padding-top: var(--s-4);
  border-top: 3px solid var(--border-strong);
}
.timeline-item::before {
  content: ""; position: absolute; top: -8px; left: 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold-500); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--gold-500);
}
.tl-date { display: block; font-weight: 700; color: var(--navy-800);
  margin-bottom: var(--s-1); }
.timeline-item p { margin: 0; color: var(--text-soft); font-size: .92rem; }

/* CTA band */
.info-cta {
  text-align: center; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-4); margin-top: var(--s-7);
}
.info-cta h2 { margin: 0 0 var(--s-2); }

@media (max-width: 860px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .timeline { grid-template-columns: 1fr; }
  .timeline-item { border-top: 0; border-left: 3px solid var(--border-strong);
    padding-top: 0; padding-left: var(--s-4); }
  .timeline-item::before { top: 2px; left: -8px; }
}

/* EU funding disclaimer (required visibility statement) */
.eu-disclaimer {
  grid-column: 1 / -1;  /* span the full footer grid width */
  border-top: 1px solid rgba(255,255,255,.15);
  margin: var(--s-4) 0 0; padding-top: var(--s-4);
  font-size: .76rem; line-height: 1.5; color: rgba(255,255,255,.6);
}

/* Partner / authority logos in the footer (white chips for dark background) */
.footer-logos { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; align-items: center; }
.footer-logos .chip {
  background: #fff; border-radius: var(--r-sm); padding: 7px 10px;
  display: inline-flex; align-items: center;
}
.footer-logos .chip img { max-height: 30px; max-width: 160px; width: auto; object-fit: contain; display: block; }

/* --- Confidentiality gate ------------------------------------------------- */
.consent-wrap { max-width: 720px; margin: var(--s-5) auto; }
.consent-card { border-top: 4px solid var(--gold-500); }
.consent-title { font-size: 1.5rem; margin: 0 0 var(--s-2); }
.consent-target { margin: 0 0 var(--s-4); }
.consent-notice {
  background: var(--warning-bg); border: 1px solid #f0d48a;
  border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-4);
}
.consent-notice p { margin: 0 0 var(--s-3); color: var(--text); }
.consent-notice p:last-child { margin-bottom: 0; }
.consent-check {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); cursor: pointer; margin-bottom: var(--s-4);
}
.consent-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.consent-actions { display: flex; gap: var(--s-3); justify-content: flex-end; }

/* --- Audit log tags ------------------------------------------------------- */
.tag {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 700; line-height: 1.6;
}
.tag-view { background: var(--info-bg); color: var(--navy-800); }
.tag-download { background: var(--warning-bg); color: var(--warning); }

/* =========================================================================
   Responsive — workspace layouts, mobile nav, small-screen safeguards
   ========================================================================= */

/* Two-column workspace layouts (replace per-template inline grids).
   minmax(0,1fr) lets a wide table inside a column shrink + scroll within its
   .table-wrap instead of blowing the column — and the page — out sideways. */
.split { display: grid; gap: var(--s-4); align-items: start; }
.split > * { min-width: 0; }                       /* allow children to shrink */
.split-toc   { grid-template-columns: 240px minmax(0, 1fr); }   /* form + TOC */
.split-main  { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } /* detail */
.split-aside { grid-template-columns: minmax(0, 1fr) 340px; }   /* list + panel */

@media (max-width: 860px) {
  .split-toc, .split-main, .split-aside { grid-template-columns: 1fr; }
  /* A sticky jump-nav makes no sense once it sits above the content. */
  .form-toc { position: static; top: auto; }
}

/* Mobile navigation: collapse the header links behind a toggle. JS-only — with
   no JS the toggle stays hidden and the links remain visible (they just wrap),
   so navigation is never trapped behind a script. */
.nav-toggle {
  display: none; margin-left: auto; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); color: var(--navy-900); cursor: pointer;
}
.nav-toggle svg { display: block; }

/* Toggle icon morphs to an "×" when the menu is open. */
.nav-toggle svg line {
  transition: transform .25s ease, opacity .18s ease;
  transform-origin: center; transform-box: view-box;
}
.nav-toggle[aria-expanded="true"] svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Many top-level links: switch to the toggle menu early enough that the full
   horizontal nav only shows when it comfortably fits on one line. */
@media (max-width: 1199.98px) {
  .topbar .container { min-height: 64px; }
  .brand-logo { height: 46px; }
  .nav-toggle { width: 40px; height: 40px; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav {
    display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0; white-space: normal;
    background: #fff; padding: var(--s-2) var(--s-3) var(--s-3);
    border-top: 1px solid var(--border); box-shadow: var(--shadow-3);
    max-height: calc(100dvh - 64px); overflow-y: auto;
  }
  .js .nav.open { display: flex; animation: nav-drop .26s cubic-bezier(.16, 1, .3, 1); }
  .js .nav a { padding: 11px var(--s-3); border-radius: var(--r-md); width: 100%; font-size: .95rem; border-bottom: 1px solid var(--surface-2); }
  .js .nav a:last-of-type { border-bottom: 0; }
  .js .nav a:hover { background: var(--surface-2); }
  .js .nav a.active { background: var(--blue-50); color: var(--navy-900); border-bottom-color: transparent; }
  /* The bell is icon-only in the horizontal bar; in the menu it becomes a
     normal row — surface its (already localized) aria-label as text. */
  .js .nav .bell::after { content: attr(aria-label); font-weight: 600; }
  .js .nav .bell .count { position: static; margin-left: auto; }
  /* Language switcher as a full-width segmented control. */
  .js .nav .langs { display: flex; width: 100%; margin: var(--s-2) 0; }
  .js .nav .langs button { flex: 1; padding: 10px; font-size: .9rem; }
  .js .nav form { width: 100%; }
  .js .nav form .btn { width: 100%; margin-top: var(--s-2); padding: 10px; font-size: .95rem; }
  /* Cascade each item in after the panel drops. */
  .js .nav.open > * { animation: nav-item .32s both ease; }
  .js .nav.open > *:nth-child(1) { animation-delay: .04s; }
  .js .nav.open > *:nth-child(2) { animation-delay: .08s; }
  .js .nav.open > *:nth-child(3) { animation-delay: .12s; }
  .js .nav.open > *:nth-child(4) { animation-delay: .16s; }
  .js .nav.open > *:nth-child(5) { animation-delay: .20s; }
  .js .nav.open > *:nth-child(6) { animation-delay: .24s; }
  .js .nav.open > *:nth-child(7) { animation-delay: .28s; }
  .js .nav.open > *:nth-child(8) { animation-delay: .32s; }
  .js .nav.open > *:nth-child(9) { animation-delay: .36s; }
}
@keyframes nav-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes nav-item { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .nav.open, .js .nav.open > * { animation: none !important; }
  .nav-toggle svg line { transition: none; }
}

/* ----- Scroll reveal (lightweight "AOS"; JS adds .is-visible) ------------
   Gated on .js so that without JavaScript (or if app.js fails to load) the
   content is never hidden — progressive enhancement, same as the nav. */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
/* Stagger cards within a row as they enter together. */
.js .grid > [data-reveal]:nth-child(2), .js .steps > [data-reveal]:nth-child(2) { transition-delay: .09s; }
.js .grid > [data-reveal]:nth-child(3), .js .steps > [data-reveal]:nth-child(3) { transition-delay: .18s; }
.js .grid > [data-reveal]:nth-child(4), .js .steps > [data-reveal]:nth-child(4) { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Small-screen safeguards */
.dropdown-panel { max-width: calc(100vw - 2 * var(--s-4)); }
.consent-actions { flex-wrap: wrap; }
@media (max-width: 640px) {
  .hero { padding: var(--s-7) 0; }
  .consent-actions .btn { flex: 1 1 auto; }
}

/* =========================================================================
   EUROBRIDGE Helpdesk — inline assistant window (home page only)
   The chat UI itself is a cross-origin iframe from app.emmi-agent.com, themed
   server-side to the programme navy. Everything here is the eurobridge livery
   *around* that iframe: the hero trigger, the framed window and its reveal.
   ========================================================================= */

/* Hero trigger — a gold-hairline pill that ties to the EU-flag gold accent,
   distinct from the solid-gold "Apply" and the plain ghost "Log in". */
.btn-helpdesk { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(232, 164, 0, .55); }
.btn-helpdesk:hover { background: rgba(232, 164, 0, .16); border-color: var(--gold-500); color: #fff; }
.btn-helpdesk svg { color: var(--gold-500); }

/* The band fades from a faint blue tint into the page background so the dark
   navy window reads as an elevated focal panel. */
.helpdesk-band { background: linear-gradient(180deg, #e9f0fb 0%, var(--bg) 72%); scroll-margin-top: var(--s-5); }
/* With JS the window starts collapsed and the hero button reveals it; without
   JS the <noscript> iframe stays visible (this rule never applies). */
.js .helpdesk-band { display: none; }
.js .helpdesk-band.is-open { display: block; animation: hd-reveal .42s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes hd-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .helpdesk-band.is-open { animation: none; } }

.helpdesk-head { text-align: center; max-width: 640px; margin: 0 auto var(--s-5); }
.helpdesk-eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700;
  color: var(--gold-600); margin: 0 0 var(--s-2);
}
.helpdesk-head h2 { margin: 0; }
.helpdesk-lead { color: var(--text-soft); margin: var(--s-3) auto 0; max-width: 58ch; }

/* The framed window. Navy background matches the iframe's themed --bg, so the
   panel reads as one surface before and after the chat document paints. A 3px
   gold top edge is the programme's signature accent. */
.helpdesk-window {
  max-width: 460px; margin: 0 auto;
  background: #0f1f45;
  border: 1px solid rgba(15, 31, 69, .14);
  border-top: 3px solid var(--gold-500);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.helpdesk-iframe {
  display: block; width: 100%; height: clamp(440px, 66vh, 600px);
  border: 0; background: #0f1f45;
}

@media (max-width: 520px) {
  .helpdesk-window { max-width: 100%; }
  .helpdesk-iframe { height: clamp(440px, 74vh, 600px); }
}