/* =============================================================
   FIMAS — Progetto finanziato dall'Unione europea (scoped .ue26)
   Pagina di pubblicita' dell'operazione PR FSE+ Sicilia 2021-2027,
   Avviso 14/2024 (Reg. UE 2021/1060, allegato IX).

   Stesso linguaggio delle altre pagine istituzionali (Merriweather +
   Montserrat, card chiare, angoli morbidi), ma con l'accento in blu
   europeo invece dell'arancio: qui comanda l'identita' del programma.
   ============================================================= */

.ue26 {
  --ue-blue: #003399;          /* Reflex Blue: solo dentro l'emblema e i marchi */
  --ue-gold: #FFCC00;
  --ue-ink: #1b1b1b;
  --ue-soft: #5c5a55;
  --ue-muted: #8f8b83;
  --ue-line: #e6e3dc;
  --ue-acc: #E87722;           /* arancio Fimas: l'accento della pagina */
  --ue-acc-ink: #B95900;
  --ue-acc-soft: #FFF1E6;
  --ue-sand: #faf9f6;
  --ue-ui: 'Montserrat', system-ui, sans-serif;
  --ue-serif: 'Merriweather', Georgia, serif;
  --ue-radius: 18px;
  --ue-ease: cubic-bezier(.2, .7, .2, 1);
  font-family: var(--ue-ui);
  color: var(--ue-ink);
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 20px 30px;
  text-align: left;
}
.ue26 * { box-sizing: border-box; }
.ue26 img { max-width: 100%; display: block; }

@keyframes ue26rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ue26-bar, .ue26-head, .ue26-lead, .ue26-cards, .ue26-refs, .ue26-foot {
  animation: ue26rise .55s var(--ue-ease) both;
}
.ue26-head  { animation-delay: .06s; }
.ue26-lead  { animation-delay: .12s; }
.ue26-cards { animation-delay: .18s; }
.ue26-refs  { animation-delay: .24s; }
.ue26-foot  { animation-delay: .3s; }

/* ---------- barra istituzionale dei loghi ---------- */
.ue26-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--ue-line);
  border-radius: var(--ue-radius);
  padding: 26px 18px;
  margin: 18px 0 0;
  box-shadow: 0 24px 50px -36px rgba(25, 20, 15, .4);
}
.ue26-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 2px 20px;
  min-height: 92px;
  text-align: center;
  border-right: 1px solid var(--ue-line);
}
.ue26-bar .ue26-mark:last-child { border-right: 0; }

/* bandiere: altezza uguale per tutte, bordo sottile per staccarle dal bianco */
.ue26-flag {
  width: 72px;
  height: 48px;
  border-radius: 3px;
  border: 1px solid rgba(25, 20, 15, .14);
  overflow: hidden;
  flex: 0 0 auto;
}
.ue26-flag img { width: 100%; height: 100%; }
.ue26-mark .ue26-cap {
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ue-soft);
  max-width: 17ch;
}

/* marchi tipografici (Coesione Italia / Regione Siciliana), come nel documento ufficiale */
.ue26-word { display: block; text-align: center; }
.ue26-word .l1 {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ue-blue);
  line-height: 1.22;
}
.ue26-word .l2 {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ue-muted);
  margin-top: 4px;
}

/* ---------- testata ---------- */
.ue26-head { text-align: center; padding: 40px 0 0; }
.ue26-head .ue26-badge {
  display: inline-block;
  background: var(--ue-acc-soft);
  color: var(--ue-acc-ink);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* fimasWebSiteRev012.css impone Montserrat a tutti i titoli con !important:
   qui serve piu' forza per riportare il serif delle altre pagine 2026 */
.ue26-head h1 {
  font-family: var(--ue-serif) !important;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ue-ink);
  margin: 18px 0 0;
}
.ue26-head .ue26-sub {
  margin: 14px auto 0;
  max-width: 54ch;
  color: var(--ue-soft);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ue26-rule {
  width: 64px;
  height: 3px;
  margin: 26px auto 0;
  border-radius: 3px;
  background: var(--ue-acc);
}

/* ---------- paragrafo di apertura ---------- */
.ue26-lead {
  background: #fff;
  border: 1px solid var(--ue-line);
  border-left: 4px solid var(--ue-acc);
  border-radius: var(--ue-radius);
  padding: 32px 38px;
  margin: 34px auto 0;
  max-width: 920px;
}
.ue26-lead p {
  margin: 0;
  color: var(--ue-soft);
  font-size: 16.5px;
  line-height: 1.85;
}
.ue26-lead p b { color: var(--ue-ink); font-weight: 700; }

/* ---------- finalita' e risultati ---------- */
.ue26-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 22px 0 0;
}
.ue26-card {
  background: #fff;
  border: 1px solid var(--ue-line);
  border-radius: var(--ue-radius);
  padding: 30px 32px;
  transition: transform .4s var(--ue-ease), box-shadow .4s var(--ue-ease), border-color .3s var(--ue-ease);
}
.ue26-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 119, 34, .5);
  box-shadow: 0 26px 48px -26px rgba(25, 20, 15, .32);
}
.ue26-card .ue26-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ue-acc-soft);
  color: var(--ue-acc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.ue26-card .ue26-ico svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ue26-card h2 {
  font-family: var(--ue-serif) !important;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ue-ink);
  margin: 0 0 12px;
}
.ue26-card p {
  margin: 0;
  color: var(--ue-soft);
  font-size: 15.5px;
  line-height: 1.8;
}

/* ---------- riferimenti dell'operazione ---------- */
.ue26-refs {
  background: var(--ue-sand);
  border: 1px solid var(--ue-line);
  border-radius: var(--ue-radius);
  padding: 34px 38px;
  margin: 22px 0 0;
}
.ue26-refs h2 {
  font-family: var(--ue-serif) !important;
  font-weight: 400;
  font-size: 22px;
  color: var(--ue-ink);
  margin: 0 0 4px;
}
.ue26-refs .ue26-refs-note {
  font-size: 13px;
  color: var(--ue-muted);
  margin: 0 0 24px;
  letter-spacing: .04em;
}
.ue26-refs dl {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 0;
  margin: 0;
}
.ue26-refs dt,
.ue26-refs dd {
  padding: 14px 0;
  border-top: 1px solid var(--ue-line);
  margin: 0;
}
.ue26-refs dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ue-acc-ink);
  padding-right: 18px;
}
.ue26-refs dd {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ue-ink);
  word-break: break-word;
}
.ue26-refs dd.mono {
  font-family: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--ue-soft);
}

/* ---------- chiusura: nota ufficiale e scarica il documento ---------- */
.ue26-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px 34px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ue-line);
  border-radius: var(--ue-radius);
  padding: 28px 32px;
  margin: 22px 0 0;
}
.ue26-foot p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ue-soft);
}
.ue26-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ue-acc);
  color: #fff !important;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background .25s var(--ue-ease), transform .25s var(--ue-ease);
  box-shadow: 0 14px 30px -16px rgba(232, 119, 34, .75);
}
.ue26-btn:hover { background: #d3691a; transform: translateY(-2px); color: #fff !important; }
.ue26-btn svg {
  width: 17px; height: 17px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- schermi stretti ---------- */
@media (max-width: 980px) {
  .ue26-bar { grid-template-columns: repeat(2, 1fr); gap: 4px 0; padding: 22px 12px; }
  .ue26-mark { padding: 16px 12px; min-height: 84px; }
  .ue26-bar .ue26-mark:nth-child(2) { border-right: 0; }
  .ue26-bar .ue26-mark:nth-child(1),
  .ue26-bar .ue26-mark:nth-child(2) { border-bottom: 1px solid var(--ue-line); padding-bottom: 20px; }
  .ue26-cards { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ue26 { padding: 10px 16px 24px; }
  .ue26-head { padding-top: 30px; }
  .ue26-lead { padding: 26px 22px; }
  .ue26-lead p { font-size: 15.5px; }
  .ue26-card { padding: 24px 22px; }
  .ue26-refs { padding: 28px 22px; }
  .ue26-refs dl { grid-template-columns: 1fr; }
  .ue26-refs dt { padding: 14px 0 2px; }
  .ue26-refs dd { padding: 0 0 14px; border-top: 0; }
  .ue26-refs dd.mono { font-size: 13px; }
  .ue26-foot { grid-template-columns: 1fr; text-align: center; padding: 24px 20px; }
  .ue26-foot .ue26-btn { justify-self: center; }
}
@media (max-width: 420px) {
  .ue26-bar { grid-template-columns: 1fr; }
  .ue26-mark { border-right: 0 !important; border-bottom: 1px solid var(--ue-line); }
  .ue26-bar .ue26-mark:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ue26-bar, .ue26-head, .ue26-lead, .ue26-cards, .ue26-refs, .ue26-foot { animation: none; }
  .ue26-card:hover { transform: none; }
}

/* ---------- stampa (queste pagine finiscono nei fascicoli di rendicontazione) ---------- */
@media print {
  .ue26 { max-width: none; padding: 0; }
  .ue26-bar, .ue26-head, .ue26-lead, .ue26-cards, .ue26-refs, .ue26-foot { animation: none; }
  .ue26-bar, .ue26-lead, .ue26-card, .ue26-foot { box-shadow: none; }
  .ue26-refs { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ue26-btn { display: none; }
}