/*
  File role: the shared look of the VOGO product pages - the one first written for
  /ro/e-reg/ and asked for on /ro/e-gov/, /ro/e-biz/ and /ro/ecm/ as well, in both
  languages.

  What it holds: the dark hero over a scene, the menu that fills in as the page
  moves, the section rhythm, the two buttons, the questions list, the closing
  invitation and the DNSH note. Nothing about a single product is here; each page
  keeps its own stylesheet for what only it has.

  Identity comes from the site: the dark #001120 and the ember #E4812F are the
  ones /ro/ uses, and the typefaces are the global Inter Tight + Inter loaded by
  general/styles.css. There is no per-page palette.

  Every rule is scoped under body.vogo-pk, so a page that does not carry that
  class is untouched. The scene behind the hero and behind the filled menu is the
  one variable a page must set:

      body.vogo-pk { --pk-scene: url('img/scene.webp'); }

  /ro/e-reg/ and /en/e-reg/ still carry their own copy of these rules under
  body.ereg-pk and are deliberately left alone; they can move onto this file later,
  in one step, without changing how they look.

  @file_version 1.0.0
*/

body.vogo-pk {
  --pk-abyss:   #001120;   /* the dark of /ro/ */
  --pk-deep:    #04203c;   /* the band that sits under it */
  --pk-ember:   #E4812F;   /* the accent, on actions */
  --pk-green:   #0f7b65;   /* the VOGO green, used only to say "included" */
  --pk-ink:     #111317;
  --pk-muted:   #4d5562;
  --pk-line:    #d7dbe1;
  --pk-paper:   #ffffff;
  --pk-paper-2: #f5f7fb;
  --pk-premium: #011b34;   /* VOGO blue premium - the line on notes */

  /* A page with no scene of its own still gets a hero, on the dark alone. */
  --pk-scene: none;

  background: var(--pk-paper);
  color: var(--pk-ink);
}

body.vogo-pk .pk-wrap {
  width: min(1120px, 100vw - 32px);
  margin: 0 auto;
}

/* Screen-reader-only text. */
body.vogo-pk .pk-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- The menu over the scene ----
   Fixed, not sticky: header/header.php and general/styles.css set
   overflow-x:hidden on html and body, which makes body a scroll container and
   cancels position:sticky. Those two rules belong to the whole site.
   Transparent while the visitor is at the top; once the page moves, the bar takes
   the slice of the scene it showed on load, and background-attachment:fixed keeps
   that slice the top one however far the page scrolls. The colour underneath is
   the net: many mobile browsers ignore fixed attachment. */
body.vogo-pk .vogo-header {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: transparent;
  box-shadow: none;
  transition: background .25s ease, box-shadow .25s ease;
}
body.vogo-pk .vogo-header .vh-band-top {
  background: transparent;
  border-bottom-color: transparent;
}
body.vogo-pk .vogo-header.is-solid {
  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%),
    var(--pk-scene) center top / cover no-repeat fixed,
    var(--pk-abyss);
  box-shadow: 0 1px 0 rgba(0,0,0,.28);
}
body.vogo-pk .vogo-header.is-solid .vh-band-top {
  background: transparent;
  border-bottom-color: transparent;
}

/* ---- Hero: the scene, dark, with the name on it ---- */
body.vogo-pk .pk-hero {
  background:
    linear-gradient(90deg, rgba(0,17,32,.95) 0%, rgba(0,17,32,.88) 42%, rgba(4,32,60,.55) 72%, rgba(4,32,60,.35) 100%),
    var(--pk-scene) right center / cover no-repeat,
    var(--pk-abyss);
  color: #fff;
}
/* The copy starts at the container's left edge, in line with every section below
   it; only its measure is limited. */
body.vogo-pk .pk-hero__inner {
  padding: calc(clamp(56px, 9vw, 104px) + var(--vh-h, 57px)) 0 clamp(48px, 8vw, 88px);
  max-width: 640px;
  margin: 0;
}
body.vogo-pk .pk-kicker {
  font-family: Inter, system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pk-ember);
  margin: 0 0 10px;
}
body.vogo-pk .pk-hero h1 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: #fff;
}
body.vogo-pk .pk-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  margin: 0 0 28px;
  max-width: 52ch;
}
body.vogo-pk .pk-hero__note {
  font-size: .98rem;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  margin: -14px 0 26px;
  max-width: 54ch;
}

/* ---- Actions ---- */
body.vogo-pk .pk-actions { display: flex; flex-wrap: wrap; gap: 12px; }
body.vogo-pk .pk-actions--inline { margin-top: 20px; }

body.vogo-pk .pk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 6px;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: .96rem;
  line-height: 1.1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
body.vogo-pk .pk-btn i { font-size: 1.05rem; }

body.vogo-pk .pk-btn--accent {
  background: var(--pk-ember);
  color: #fff;
}
body.vogo-pk .pk-btn--accent:hover { background: #cf7120; color: #fff; }

body.vogo-pk .pk-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.42);
}
body.vogo-pk .pk-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* On a light section the ghost button needs ink, not white. */
body.vogo-pk .pk-section:not(.pk-section--dark) .pk-btn--ghost {
  color: var(--pk-ink);
  border-color: var(--pk-line);
}
body.vogo-pk .pk-section:not(.pk-section--dark) .pk-btn--ghost:hover {
  background: var(--pk-paper-2);
  color: var(--pk-ink);
}

/* ---- Sections ---- */
body.vogo-pk .pk-section { padding: clamp(48px, 7vw, 88px) 0; }
body.vogo-pk .pk-section--soft { background: var(--pk-paper-2); }
body.vogo-pk .pk-section--dark {
  background: linear-gradient(180deg, var(--pk-abyss) 0%, var(--pk-deep) 100%);
  color: #fff;
}

body.vogo-pk .pk-h2 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 12px;
}
body.vogo-pk .pk-sub {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--pk-muted);
  margin: 0 0 32px;
  max-width: 68ch;
}
body.vogo-pk .pk-section--dark .pk-sub { color: rgba(255,255,255,.78); }

/* The few things a decision maker checks, on one line under the actions. */
body.vogo-pk .pk-args {
  list-style: none;
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: .9rem;
  color: rgba(255,255,255,.82);
}
body.vogo-pk .pk-args li { display: flex; align-items: center; gap: 9px; }
body.vogo-pk .pk-args li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pk-ember);
}

/* ---- A block set apart on a light section ---- */
body.vogo-pk .pk-buy {
  margin-top: 26px;
  padding: 26px 28px;
  background: var(--pk-paper);
  border: 1px solid var(--pk-line);
  border-left: 3px solid var(--pk-ember);
  border-radius: 14px;
}
body.vogo-pk .pk-buy h3 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 12px;
}
body.vogo-pk .pk-buy p {
  margin: 0 0 10px;
  line-height: 1.65;
  color: var(--pk-muted);
  max-width: 76ch;
}

/* ---- The closing invitation ---- */
body.vogo-pk .pk-final__lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  margin: 0 0 26px;
  max-width: 62ch;
}
body.vogo-pk .pk-fine {
  margin: 28px 0 0;
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(255,255,255,.62);
}
body.vogo-pk .pk-fine strong { color: rgba(255,255,255,.88); }

/* ---- Questions ---- */
body.vogo-pk .pk-faq { background: var(--pk-paper); }
body.vogo-pk .pk-faq__list {
  margin-top: 26px;
  border-top: 1px solid var(--pk-line);
  max-width: 900px;
}
body.vogo-pk .pk-faq__item { border-bottom: 1px solid var(--pk-line); }
body.vogo-pk .pk-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 44px 18px 0;
  position: relative;
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--pk-ink);
}
body.vogo-pk .pk-faq__item summary::-webkit-details-marker { display: none; }
/* The sign says what the click does: a plus that becomes a minus. */
body.vogo-pk .pk-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--pk-ember);
}
body.vogo-pk .pk-faq__item[open] summary::after { content: "\2212"; }
body.vogo-pk .pk-faq__item summary:focus-visible { outline: 2px solid var(--pk-ember); outline-offset: 3px; }
body.vogo-pk .pk-faq__item p {
  margin: 0 0 20px;
  padding-right: 44px;
  line-height: 1.7;
  color: var(--pk-muted);
  max-width: 78ch;
}

/* ---- The DNSH note ----
   Set apart by the VOGO premium line on its left, not by a coloured panel.
   Square corners on purpose: it is a note, not a card. The same block on every
   page that carries it. */
body.vogo-pk .dnsh-section { padding-top: clamp(30px, 4vw, 44px); padding-bottom: clamp(38px, 5vw, 56px); }
body.vogo-pk .dnsh-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 22px;
  background: #ffffff;
  border: 0;
  border-left: 3px solid var(--pk-premium);
  border-radius: 0;
}
body.vogo-pk .dnsh-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 0;
  background: transparent;
  color: var(--pk-premium);
  font-size: 1.05rem;
}
body.vogo-pk .dnsh-note p {
  margin: 0;
  font-size: .88rem;
  font-style: italic;
  line-height: 1.65;
  color: #56638a;
}
body.vogo-pk .dnsh-note strong { color: var(--pk-premium); font-style: italic; }

@media (max-width: 720px) {
  body.vogo-pk .pk-args { gap: 10px 18px; font-size: .86rem; }
  body.vogo-pk .pk-buy { padding: 22px 20px; }
  body.vogo-pk .dnsh-note { padding: 16px 18px; gap: 12px; }
}