/*
  File role: page-own stylesheet for https://vogo.me/ro/ebs-roadmap/.

  The four bands on this page - versions, history, public roadmap, backlog and the
  EUIPO trademark - are styled by /ro/ecm-sections.css, the same file the Romanian
  home page uses; the body carries .ro-ecm so those rules apply unchanged. What is
  left for this file is the page's own opening band and the anchor offsets, since
  the site header is fixed and would otherwise cover a heading jumped to.

  @file_version 1.0.1
*/

/* ---- The opening band ----
   Same darkness as the hero of /ro/ and of /ro/aiao/ (#001120), so the three
   pages read as one product. The prefix keeps every rule inside this page. */
body.rm-pg .rm-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.06), transparent 46%),
    linear-gradient(135deg, #001120 0%, #04203c 56%, #001120 100%);
  color: #fff;
  border-bottom: 1px solid rgba(228,129,47,.22);
}
body.rm-pg .rm-hero__inner {
  /* var(--vh-h) is the fixed header's height, published by the header itself. */
  padding: calc(clamp(52px, 8vw, 92px) + var(--vh-h, 57px)) 0 clamp(44px, 6vw, 72px);
  max-width: 62ch;
}
body.rm-pg .rm-kicker {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vogo-orange, #E4812F);
  margin: 0 0 14px;
}
body.rm-pg .rm-hero h1 {
  font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0 0 18px;
}
body.rm-pg .rm-lead {
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.5;
  color: rgba(226,233,250,.82);
  margin: 0;
}

/* The five stops of the page, as links, so the band is also its table of contents. */
body.rm-pg .rm-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
body.rm-pg .rm-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.9);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
body.rm-pg .rm-jump a:hover,
body.rm-pg .rm-jump a:focus-visible {
  background: rgba(255,255,255,.06);
  border-color: var(--vogo-orange, #E4812F);
  color: #fff;
}

/* ---- Menu background as on /ro/ (27.09.2026) ----
   The header comes from header/header.php (whole site); here it keeps permanently the
   home page's scrolled look. Colours only: this page has no hero image to sit under. */
body.rm-pg .vogo-header {
  background:
    linear-gradient(90deg, rgba(0,17,32,.94) 0%, rgba(0,17,32,.78) 42%, rgba(0,17,32,.34) 70%, rgba(0,17,32,.24) 100%),
    url('/ro/img/bk-image-hero.webp') center top / cover no-repeat fixed,
    #001120;
  box-shadow: 0 1px 0 rgba(0,0,0,.28);
}
body.rm-pg .vogo-header .vh-band-top {
  background: transparent;
  border-bottom-color: transparent;
}

/* ---- The history timeline on the blue band ----
   The band itself comes from /ro/ecm-sections.css; the timeline was drawn for a light
   background, so its cards, line and texts switch to light-on-dark here. */
body.rm-pg .rm-hist-band .ecm-hist-head { margin-top: 0; }
body.rm-pg .ecm-blue-band .ecm-timeline::before { background: rgba(255,255,255,.13); }
body.rm-pg .ecm-blue-band .ecm-tl::before { background: #E4812F; box-shadow: 0 0 0 4px rgba(228,129,47,.18); }
body.rm-pg .ecm-blue-band .ecm-tl__date { color: rgba(255,255,255,.72); }
body.rm-pg .ecm-blue-band .ecm-tl__date i,
body.rm-pg .ecm-blue-band .ecm-tl__tag { color: #E4812F; }
body.rm-pg .ecm-blue-band .ecm-tl__card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.13);
  box-shadow: none;
}
body.rm-pg .ecm-blue-band .ecm-tl__card > p { color: rgba(255,255,255,.86); }
body.rm-pg .ecm-blue-band .ecm-tl__cols h3 { color: #fff; }
body.rm-pg .ecm-blue-band .ecm-tl__cols li { color: rgba(255,255,255,.72); }
/* The ghost button was white on white paper; on the band it becomes an outline. */
body.rm-pg .ecm-blue-band .ecm-tl__btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.35);
}

/* ---- The backlog cards on the blue band: translucent, icons in the orange ---- */
body.rm-pg .ecm-blue-band .ecm-bl {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.13);
}
body.rm-pg .ecm-blue-band .ecm-bl i { color: #E4812F; }

/* ---- Footer as on /ro/ (27.09.2026) ----
   The footer comes from general/styles.css (whole site), so the rules are scoped to this
   page: the #001120 dark of the hero, white logo text, translucent white links, orange hover.
   This page does not load general/index.css, so there is no 100px body padding to cancel. */
body.rm-pg .site-footer,
body.rm-pg .site-footer.vogo-footer { background: #001120; }
body.rm-pg .site-footer .logo img { width: auto; height: 42px; }
body.rm-pg .site-footer .logo span { color: #fff; }
body.rm-pg .site-footer h4 {
  color: #fff; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
body.rm-pg .site-footer,
body.rm-pg .site-footer p { color: rgba(255,255,255,.72); }
body.rm-pg .site-footer a { color: rgba(255,255,255,.72); transition: color .2s ease; }
body.rm-pg .site-footer a:hover { color: #E4812F; }
/* The separators had the greenish tint of the old identity. */
body.rm-pg .site-footer .vf-line { background: rgba(255,255,255,.12); }
body.rm-pg .site-footer .vf-bottom { border-top-color: rgba(255,255,255,.12); }
body.rm-pg .site-footer .vf-social a { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.72); }
body.rm-pg .site-footer .vf-social a:hover { border-color: #E4812F; color: #E4812F; }

/* ---- Anchors clear the fixed header ---- */
body.rm-pg #versiuni,
body.rm-pg #istoric,
body.rm-pg #roadmap,
body.rm-pg #backlog,
body.rm-pg #marca,
body.rm-pg #contact { scroll-margin-top: calc(var(--vh-h, 57px) + 18px); }

@media (max-width: 720px) {
  body.rm-pg .rm-hero__inner { max-width: none; }
  body.rm-pg .rm-jump a { padding: 8px 13px; font-size: .88rem; }
}