/* ==========================================================================
   Via Europa — brand.css (RUNDA 25 · identitate vizuală nouă)
   Strat de brand încărcat DUPĂ style.css: galben predominant (#FFC107),
   albastru UE (#003399), accente tricolor (albastru–galben–roșu).
   Mobile-first, respectă prefers-reduced-motion și tema dark existentă.
   ========================================================================== */

:root {
  /* --- paleta oficială de brand --- */
  --galben: #FFC107;
  --galben-deschis: #FFD54F;
  --galben-pal: #FFF3C4;
  --galben-gradient: linear-gradient(120deg, #FFC107 0%, #FFD54F 55%, #FFE082 100%);
  --albastru-ue: #003399;
  --albastru-ue-2: #0f4bd8;
  --rosu: #CE1126;
  --tricolor: linear-gradient(90deg, #002B7F 0 33.3%, #FCD116 33.3% 66.6%, #CE1126 66.6% 100%);
  /* --- re-mapare: aurul vechi devine galbenul de brand --- */
  --eu-gold: #FFC107;
  /* --- fonturi --- */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Tipografie: titlurile folosesc Manrope (încărcat din base.html)
   -------------------------------------------------------------------------- */
h1, h2, h3, .pagetitle, .brand-name, .hero h1, .page-hero h1,
.sectiune > h2, .card h2, .card h3 {
  font-family: var(--font-head);
  letter-spacing: -.02em;
}

/* --------------------------------------------------------------------------
   HEADER — nav sticky, logo mare, bandă tricolor
   -------------------------------------------------------------------------- */
.site-header {
  background: linear-gradient(100deg, #071a3d 0%, var(--albastru-ue) 55%, #0a1f44 100%);
  padding: 8px 22px;
  gap: 22px;
}
.site-header::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tricolor);
}
.site-header .logo {
  height: 58px; width: auto; padding: 5px 10px; border-radius: 12px;
  box-shadow: 0 3px 12px rgba(255, 193, 7, .35), 0 0 0 2px rgba(255, 193, 7, .55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.site-header .brand:hover .logo {
  transform: scale(1.04);
  box-shadow: 0 5px 18px rgba(255, 193, 7, .5), 0 0 0 2px rgba(255, 193, 7, .8);
}
.brand-name { font-size: 1.45rem; font-weight: 800; }
.brand-slogan { color: var(--galben); font-weight: 700; }
.site-nav a { border-radius: 10px; transition: background .15s, color .15s, transform .15s; }
.site-nav a:hover { transform: translateY(-1px); }
.site-nav a.activ { color: var(--galben); background: rgba(255, 193, 7, .12); }
.nav-cta {
  background: var(--galben-gradient); color: #0a1f44 !important;
  box-shadow: 0 3px 14px rgba(255, 193, 7, .45);
}
.nav-cta:hover { background: linear-gradient(120deg, #ffca28, #ffe082) !important; }
.hdr-search input {
  border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1); color: #fff; padding: 8px 14px; width: 170px;
}
.hdr-search input::placeholder { color: rgba(255, 255, 255, .65); }
.hdr-search input:focus { background: rgba(255, 255, 255, .18); border-color: var(--galben); box-shadow: 0 0 0 3px rgba(255, 193, 7, .3); }

/* --------------------------------------------------------------------------
   HERO homepage — galben predominant, statement mare, logo vizibil
   -------------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(700px 300px at 92% -20%, rgba(0, 51, 153, .14), transparent 60%),
    radial-gradient(500px 260px at -8% 110%, rgba(206, 17, 38, .10), transparent 55%),
    var(--galben-gradient);
  color: #17203a;
  border-radius: 26px;
  padding: 56px 48px;
  position: relative; overflow: hidden;
  box-shadow: 0 20px 50px rgba(255, 193, 7, .35), 0 4px 14px rgba(10, 31, 68, .12);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--tricolor);
}
.hero > div { position: relative; z-index: 1; }
.hero h1 {
  color: #0a1f44; font-size: clamp(2.1rem, 4.6vw, 3.2rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -.03em;
}
.hero .tagline {
  color: #0a1f44; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800;
  margin-top: 6px;
}
.hero .tagline::before { content: "„"; color: var(--albastru-ue); }
.hero .tagline::after { content: "”"; color: var(--albastru-ue); }
.hero p.sub { color: #2a3355; font-size: 1.05rem; max-width: 620px; }
.hero img.hero-logo {
  height: auto; width: min(240px, 40vw); background: #fff; border-radius: 22px;
  padding: 16px 20px; box-shadow: 0 16px 40px rgba(10, 31, 68, .22);
  border: 3px solid #fff;
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  background: #0a1f44; color: var(--galben); font-weight: 700; font-size: .82rem;
  padding: 6px 14px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase;
}
.hero .btn {
  background: #0a1f44; color: #fff; box-shadow: 0 8px 22px rgba(10, 31, 68, .35);
  animation: none;
}
.hero .btn:hover { background: var(--albastru-ue); box-shadow: 0 10px 26px rgba(0, 51, 153, .4); }
.hero .btn-ghost { border-color: #0a1f44; color: #0a1f44; }
.hero .btn-ghost:hover { background: rgba(10, 31, 68, .08); }

/* --------------------------------------------------------------------------
   Secțiuni + titluri cu accent tricolor
   -------------------------------------------------------------------------- */
.sectiune > h2, h2.pagetitle {
  position: relative; padding-left: 16px;
}
.sectiune > h2::before, h2.pagetitle::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px;
  border-radius: 4px; background: var(--tricolor); background-size: 100% 300%;
  background: linear-gradient(180deg, #002B7F 0 33.3%, #FCD116 33.3% 66.6%, #CE1126 66.6% 100%);
}

/* --------------------------------------------------------------------------
   Carduri / butoane — hover pronunțat, colțuri moderne
   -------------------------------------------------------------------------- */
.card {
  border-radius: 18px; border: 1px solid var(--line);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
a.card:hover, .card.lift:hover {
  transform: translateY(-4px); box-shadow: 0 16px 34px rgba(10, 31, 68, .14);
  border-color: rgba(255, 193, 7, .7); text-decoration: none;
}
.btn {
  background: var(--galben-gradient); color: #0a1f44; border-radius: 14px;
  font-family: var(--font-head); letter-spacing: -.01em;
  box-shadow: 0 4px 14px rgba(255, 193, 7, .4);
}
.btn:hover { filter: brightness(1.03); box-shadow: 0 8px 22px rgba(255, 193, 7, .5); }
.btn-blue { background: linear-gradient(120deg, var(--albastru-ue), var(--albastru-ue-2)); color: #fff; }

/* --------------------------------------------------------------------------
   Badge-uri — statusuri programe/apeluri + categorii știri colorate
   -------------------------------------------------------------------------- */
.badge { border-radius: 999px; font-weight: 700; }
.badge.activ, .badge.deschis { background: #dcf5e3; color: #116329; border: 1px solid #9fdcb9; }
.badge.viitor, .badge.programat { background: var(--galben-pal); color: #7a5b00; border: 1px solid #ffe08a; }
.badge.istoric, .badge.inchis { background: #eef1f7; color: #5a6478; border: 1px solid #d5dbe8; }
.badge.galben { background: var(--galben); color: #0a1f44; border: 1px solid #e0a800; }
/* categorii știri */
.badge.cat-fonduri-europene, .badge.cat-finantare, .badge.cat-apeluri {
  background: var(--galben); color: #0a1f44; border: 1px solid #e0a800;
}
.badge.cat-investitii, .badge.cat-proiecte { background: #dcf5e3; color: #116329; border: 1px solid #9fdcb9; }
.badge.cat-legislatie { background: #fde3e7; color: var(--rosu); border: 1px solid #f2b8c1; }
.badge.cat-regional { background: #e3ecff; color: var(--albastru-ue); border: 1px solid #b9cdf5; }
.badge.cat-general { background: #eef1f7; color: #5a6478; border: 1px solid #d5dbe8; }

/* --------------------------------------------------------------------------
   Bandă statistici — „live", cifre mari aurii pe navy
   -------------------------------------------------------------------------- */
.stats-band {
  background:
    radial-gradient(500px 200px at 90% 0%, rgba(255, 193, 7, .16), transparent 60%),
    linear-gradient(110deg, #071a3d, var(--albastru-ue) 70%, #0a1f44);
  border-radius: 22px; padding: 30px 26px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px;
  position: relative; overflow: hidden;
}
.stats-band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--tricolor);
}
.stats-band .nr {
  font-family: var(--font-head); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800;
  color: var(--galben);
}
.stats-band .stat-dark { padding: 6px 4px; border-radius: 12px; transition: background .2s; }
.stats-band .stat-dark:hover { background: rgba(255, 255, 255, .06); }

/* --------------------------------------------------------------------------
   Carduri programe (catalog)
   -------------------------------------------------------------------------- */
.prog-card {
  border-radius: 18px; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.prog-card:hover {
  transform: translateY(-5px); box-shadow: 0 18px 38px rgba(10, 31, 68, .16);
  border-color: rgba(255, 193, 7, .8);
}
.prog-card-img { position: relative; }
.prog-card-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 31, 68, .28));
  pointer-events: none;
}
.prog-card-link { color: var(--albastru-ue); }
.filters {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px; box-shadow: var(--shadow-1);
}

/* --------------------------------------------------------------------------
   Carduri știri
   -------------------------------------------------------------------------- */
.stire-card { border-radius: 18px; transition: transform .22s ease, box-shadow .22s ease; }
.stire-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(10, 31, 68, .15); }
.stire-img { border-bottom: 3px solid var(--galben); }
.stire-citeste { color: var(--albastru-ue); font-weight: 700; }

/* --------------------------------------------------------------------------
   Page-hero (pagini interne) — bandă tricolor + gradient UE
   -------------------------------------------------------------------------- */
.page-hero {
  background:
    radial-gradient(600px 220px at 95% -30%, rgba(255, 193, 7, .22), transparent 60%),
    linear-gradient(115deg, var(--albastru-ue) 0%, #0a1f44 85%);
  border-radius: 22px;
}
.page-hero::after { background: var(--tricolor); height: 5px; opacity: 1; }
.page-hero h1 { font-weight: 800; }
.page-hero .btn { background: var(--galben-gradient); color: #0a1f44; }
.page-hero .btn-blue { background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .5); }
.page-hero .btn-ghost { border-color: var(--galben); color: var(--galben); }

/* --------------------------------------------------------------------------
   CTA final — navy cu galben
   -------------------------------------------------------------------------- */
.cta-final {
  background:
    radial-gradient(500px 200px at 10% 0%, rgba(255, 193, 7, .18), transparent 55%),
    linear-gradient(115deg, #071a3d, var(--albastru-ue) 80%);
  border-radius: 22px;
}
.cta-final::after { background: var(--tricolor); height: 5px; opacity: 1; }
.cta-final h2 { color: #fff; }
.cta-final .btn { background: var(--galben-gradient); color: #0a1f44; }

/* --------------------------------------------------------------------------
   FOOTER — navy bogat, bandă tricolor, linkuri clare
   -------------------------------------------------------------------------- */
.site-footer {
  background: linear-gradient(180deg, #0a1f44, #071a3d);
  color: #d7e0fb; padding: 40px 22px 0;
}
.site-footer::before { background: var(--tricolor); height: 5px; }
.foot-grid a { color: #c3cfF2; }
.foot-grid a:hover { color: var(--galben); }
.foot-brand { color: #fff; font-family: var(--font-head); }
.foot-h { color: var(--galben); }
.foot-note { color: #9fb3e8; }
.foot-grid p { color: #c3cff2; }
.foot-bottom { color: #9fb3e8; border-top: 1px solid rgba(255, 255, 255, .12); }
.foot-contact {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  padding: 14px 0; margin-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .9rem;
}
.foot-contact a { color: var(--galben); font-weight: 600; }

/* --------------------------------------------------------------------------
   Flow cofinanțare — noduri cu brand, săgeți aurii
   -------------------------------------------------------------------------- */
.flow .nod {
  border: 2px solid #d5dbe8; border-radius: 16px;
  box-shadow: var(--shadow-1);
}
.flow .nod.auriu { border-color: var(--galben); background: linear-gradient(160deg, #fffbe8, #fff3c4); }
.flow .sageata { color: var(--galben); text-shadow: 0 1px 0 rgba(10, 31, 68, .2); }
.cifre { background: linear-gradient(110deg, #071a3d, var(--albastru-ue)); border-radius: 20px; }
.cifre .cifra .v { color: var(--galben); }
.cifre .cifra.total { background: var(--galben); border-color: var(--galben); }
.pasi .pas-l { border-left-color: var(--galben); border-radius: 14px; box-shadow: var(--shadow-1); }
.pasi .pas-l::before { background: var(--albastru-ue); }

/* --------------------------------------------------------------------------
   Hărți (Leaflet) — skin: toolbar, butoane metrică, legendă, containere
   -------------------------------------------------------------------------- */
.harta-toolbar {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 14px 16px; box-shadow: var(--shadow-1);
}
.metrica-btn {
  border-radius: 999px; border: 2px solid var(--albastru-ue); color: var(--albastru-ue);
  font-weight: 700; transition: all .15s;
}
.metrica-btn.activ { background: var(--albastru-ue); color: #fff; box-shadow: 0 3px 10px rgba(0, 51, 153, .3); }
.harta-box {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.leg-t { font-family: var(--font-head); font-weight: 800; color: var(--navy); }
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-tip { box-shadow: none; }

/* --------------------------------------------------------------------------
   Diverse: crumbs, ticker, toast, back-top, cookie
   -------------------------------------------------------------------------- */
.crumbs { font-weight: 500; }
.ticker {
  border-radius: 14px; border: 1px solid var(--line); background: var(--card);
  box-shadow: var(--shadow-1);
}
.ticker-lbl { color: var(--navy); font-weight: 800; }
.back-top {
  background: var(--galben); color: #0a1f44; border: none; border-radius: 12px;
  font-weight: 900; box-shadow: 0 6px 18px rgba(255, 193, 7, .45);
}
#cookie-banner {
  border-radius: 16px; border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
}
.ve-toast { background: #0a1f44; color: #fff; border-radius: 12px; }

/* --------------------------------------------------------------------------
   Componente noi R25 (folosite în index.html / cofinantare)
   -------------------------------------------------------------------------- */
.ve-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ve-chip {
  display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(10, 31, 68, .18); color: #0a1f44; font-weight: 700; font-size: .86rem;
  padding: 7px 14px; border-radius: 999px; backdrop-filter: blur(4px);
}
.ve-chip svg { flex: 0 0 auto; }

.ve-flow-mini { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; justify-content: center; }
.ve-flow-mini .nod {
  flex: 1; min-width: 130px; max-width: 210px; background: var(--card);
  border: 2px solid var(--line); border-radius: 16px; padding: 16px 12px; text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ve-flow-mini .nod:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--galben); }
.ve-flow-mini .nod .pct { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--albastru-ue); }
.ve-flow-mini .nod.auriu { border-color: var(--galben); background: linear-gradient(160deg, #fffbe8, #fff3c4); }
.ve-flow-mini .nod.auriu .pct { color: #7a5b00; }
.ve-flow-mini .nod strong { display: block; color: var(--navy); font-size: .92rem; margin: 4px 0 2px; }
.ve-flow-mini .nod span { font-size: .8rem; color: var(--muted); }
.ve-flow-mini .sageata {
  align-self: center; color: var(--galben); font-size: 1.5rem; font-weight: 900; padding: 0 5px; flex: 0 0 auto;
}
@media (max-width: 720px) { .ve-flow-mini .sageata { transform: rotate(90deg); } }

.ve-trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
}
.ve-trust .item {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow-1);
}
.ve-trust .item h3 { color: var(--navy); font-size: 1rem; margin-bottom: 6px; }
.ve-trust .item p { color: var(--muted); font-size: .9rem; margin: 0; }

.ve-hero-logo-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 0 0 auto;
}
.ve-hero-logo-badge {
  background: rgba(10, 31, 68, .85); color: #fff; font-size: .82rem; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; text-align: center; max-width: 240px;
}

/* reveal: conținutul e VIZIBIL implicit; animația se „armează" doar din JS */
.reveal { opacity: 1; transform: none; }
.reveal.reveal-armat { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.reveal-armat.vizibil { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Tema dark — ajustări pentru componentele noi / suprascrieri
   -------------------------------------------------------------------------- */
[data-theme="dark"] .hero { color: #17203a; }
[data-theme="dark"] .hero h1, [data-theme="dark"] .hero .tagline { color: #0a1f44; }
[data-theme="dark"] .ve-chip { background: rgba(255, 255, 255, .85); color: #0a1f44; }
[data-theme="dark"] .badge.galben { color: #0a1f44; }

/* --------------------------------------------------------------------------
   Responsive + mișcare redusă
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .site-header .logo { height: 48px; }
  .hero { padding: 38px 26px; }
  .hero img.hero-logo { width: min(190px, 52vw); }
}
@media (max-width: 520px) {
  .site-header { padding: 8px 14px; }
  .brand-name { font-size: 1.2rem; }
  .foot-contact { gap: 6px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .prog-card, .stire-card, .flow .nod, .ve-flow-mini .nod,
  .site-nav a, .site-header .logo { transition: none !important; }
  .card:hover, .prog-card:hover, .stire-card:hover { transform: none !important; }
}


/* R25-fix: search box header — nu se mai suprapune cu meniul pe ecrane medii/mici */
@media (max-width: 1280px) {
  .hdr-search input { width: 130px; }
}
@media (max-width: 1080px) {
  .hdr-search { display: none; }  /* cautarea ramane disponibila pe /cautare */
}