/* ============================================================
   Visiopipe — jaettu navigaatio (px-pohjainen, itsenäinen).
   Käytetään ETUSIVULLA jotta nav bar on identtinen alasivujen
   vp-headerin kanssa. Ei riipu vilp-landing.css:stä eikä 62.5%
   root-fontista → kaikki mitat px, ei clobberoi Bricks-sivua.
   ============================================================ */

.vp-header, .vp-header *, .vp-menu, .vp-menu * { box-sizing: border-box; }

.vp-header {
  --vp-gold: #c18228;
  --vp-gold-deep: #a96f1d;
  --vp-gold-cta: linear-gradient(128deg, #dcab5e 0%, #cd9333 24%, #bd8126 50%, #ac7018 74%, #c98f34 100%);
  --vp-gold-cta-hover: linear-gradient(128deg, #e8bc6c 0%, #d89e3d 24%, #c68a2c 50%, #b67c22 74%, #d59d3c 100%);
  --vp-paper: #ffffff;
  --vp-hair: #e7e7e9;
  --vp-hair-strong: #d9d9dc;
  --vp-ink: #201d19;
  --vp-ink-soft: #6b645b;
  --vp-ink-mute: #8a8278;
  --vp-shadow-sm: 0 1px 2px rgba(32,29,25,.05), 0 2px 8px rgba(32,29,25,.06);
  --vp-shadow: 0 6px 18px -8px rgba(32,29,25,.14), 0 18px 40px -24px rgba(32,29,25,.20);
  --vp-shadow-gold: 0 10px 26px -12px rgba(150,100,26,.42);
  --vp-maxw: 1180px;
  --vp-ease: cubic-bezier(.2,.7,.2,1);

  position: sticky; top: 0; z-index: 100;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--vp-ink); line-height: 1.6;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--vp-hair);
  box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 8px 24px -18px rgba(32,29,25,.35);
}
.vp-header a { color: inherit; text-decoration: none; }
.vp-header img { max-width: 100%; display: block; }
.vp-header .vp-wrap, .vp-menu .vp-wrap {
  width: 100%; max-width: var(--vp-maxw); margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 50px);
}
/* Ylärivin sisältö saa hieman enemmän leveyttä kuin sivun runko, jotta
   koko navigaatio (ml. pidempi "Kustannus- ja säästölaskurit") mahtuu
   yhdelle riville isoilla näytöillä. Mobiilipaneeli pysyy 1180:ssa. */
.vp-header .vp-wrap { max-width: 1320px; padding-left: 28px; padding-right: 28px; }
.vp-header ul { margin: 0; padding: 0; list-style: none; }

.vp-header__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; }
.vp-header__logo { flex-shrink: 0; }
.vp-header__logo img { height: 40px; width: auto; }
.vp-header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* Painike */
.vp-header .vp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11.5px 22px;
  font: 600 15px/1 "Poppins", sans-serif; letter-spacing: .005em; color: #fff;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform .18s var(--vp-ease), box-shadow .25s var(--vp-ease), background .3s ease, color .3s ease, border-color .3s ease;
}
.vp-header .vp-btn svg { width: 19px; height: 19px; flex: none; }
/* Korkeampi tarkkuus: etusivun ACSS-reset [class*="btn--"] muuten voittaa taustan */
.vp-header .vp-btn--gold, .vp-menu .vp-btn--gold { background: #bd8126; background: var(--vp-gold-cta); box-shadow: var(--vp-shadow-gold); border-color: rgba(140,94,24,.5); }
.vp-header .vp-btn--gold:hover, .vp-menu .vp-btn--gold:hover { background: var(--vp-gold-cta-hover); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(150,100,26,.55); }
.vp-header .vp-btn--gold:active, .vp-menu .vp-btn--gold:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(150,100,26,.4); }
@media (max-width: 620px) { .vp-header .vp-btn { padding-inline: 18px; } }

/* Hampurilaispainike */
.vp-menu-btn {
  width: 46px; height: 46px; flex: none; display: grid; place-content: center; gap: 5.5px;
  background: var(--vp-paper); border: 1px solid var(--vp-hair-strong); border-radius: 12px;
  box-shadow: var(--vp-shadow-sm); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
}
.vp-menu-btn:hover { border-color: var(--vp-gold-deep); box-shadow: var(--vp-shadow); }
.vp-menu-btn span { display: block; width: 21px; height: 2px; border-radius: 2px; background: var(--vp-ink); transition: transform .25s var(--vp-ease), opacity .2s ease; }
.vp-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.vp-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vp-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobiilipaneeli */
.vp-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--vp-hair); box-shadow: var(--vp-shadow);
  animation: vpMenuIn .22s var(--vp-ease);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--vp-ink);
}
.vp-menu a { color: inherit; text-decoration: none; }
@keyframes vpMenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.vp-menu__inner { display: grid; gap: 4px; padding-block: 16px 24px; }
.vp-menu__inner > a { padding: 13.5px 4px; font-weight: 600; font-size: 17.5px; border-bottom: 1px solid var(--vp-hair); transition: color .2s ease, padding-left .2s ease; }
.vp-menu__inner > a:hover { color: var(--vp-gold-deep); padding-left: 10px; }
.vp-menu__inner > a.vp-menu__cta { border-bottom: 0; margin-top: 14px; }
.vp-menu__cta.vp-btn { padding-left: 28px; }
.vp-menu__cta.vp-btn:hover { padding-left: 28px; color: #fff; }
body.vp-menu-open { overflow: hidden; }

.vp-menu__acc { border-bottom: 1px solid var(--vp-hair); }
.vp-menu__sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; }
.vp-menu__sum::-webkit-details-marker { display: none; }
.vp-menu__sum > a, .vp-menu__sum > span:not(.vp-menu__chev) { flex: 1; padding: 13.5px 4px; font-weight: 600; font-size: 17.5px; color: var(--vp-ink); transition: color .2s ease, padding-left .2s ease; }
.vp-menu__sum > a:hover { color: var(--vp-gold-deep); padding-left: 10px; }
.vp-menu__chev { display: inline-flex; align-items: center; padding: 13.5px 6px; color: var(--vp-ink-mute); transition: transform .25s var(--vp-ease); }
.vp-menu__chev svg { width: 14px; height: 14px; }
.vp-menu__acc[open] .vp-menu__chev { transform: rotate(180deg); }
.vp-menu__sub { list-style: none; margin: 0; padding: 2px 0 11px; display: grid; gap: 1px; }
.vp-menu__sub a { display: block; padding: 8px 4px 8px 14px; font-weight: 500; font-size: 15px; color: var(--vp-ink-mute); transition: color .2s ease, padding-left .2s ease; }
.vp-menu__sub a:hover { color: var(--vp-gold-deep); padding-left: 19px; }

/* Desktop-navigaatio */
.vp-nav { display: none; }
.vp-nav__list { display: flex; align-items: center; gap: 1px; list-style: none; margin: 0; padding: 0; }
.vp-nav__item { position: relative; display: flex; align-items: center; }
.vp-nav__item > a {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 8px 10px; border-radius: 10px;
  font-weight: 600; font-size: 13.5px; color: var(--vp-ink);
  transition: color .2s ease, background .2s ease;
}
.vp-has-sub > a { padding-right: 5px; }
.vp-nav__item > a:hover { color: var(--vp-gold-deep); background: rgba(193,130,40,.09); }
.vp-caret { display: inline-flex; color: var(--vp-ink-mute); transition: transform .2s var(--vp-ease); }
.vp-caret svg { width: 10px; height: 10px; }
.vp-has-sub:hover .vp-caret, .vp-has-sub:focus-within .vp-caret { transform: rotate(180deg); }
.vp-subnav {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px;
  list-style: none; margin: 0; padding: 8px;
  background: #fff; border: 1px solid var(--vp-hair); border-radius: 14px; box-shadow: var(--vp-shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s var(--vp-ease), transform .2s var(--vp-ease), visibility .2s; z-index: 60;
}
.vp-subnav::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 6px; }
.vp-has-sub:hover .vp-subnav, .vp-has-sub:focus-within .vp-subnav { opacity: 1; visibility: visible; transform: none; }
.vp-subnav a {
  display: block; padding: 8.5px 12px; border-radius: 8px; white-space: nowrap;
  font-size: 14px; font-weight: 500; color: var(--vp-ink);
  transition: color .2s ease, background .2s ease;
}
.vp-subnav a:hover { color: var(--vp-gold-deep); background: rgba(193,130,40,.09); }
@media (min-width: 1340px) {
  .vp-nav { display: block; }
  .vp-header__row .vp-menu-btn { display: none; }
}

/* Piilota alkuperäinen Bricks-header — korvattu vp-headerilla */
#brx-header { display: none !important; }

/* ============================================================
   Yhtenäinen kultainen pill-CTA myös Bricks-/WordPress-napeille
   (alasivut ilman vp-btn-luokkaa). Sama pyöristetty "Pyydä
   tarjous" -nappi joka sivulla ja paikassa kuin vp-headerissa.
   ============================================================ */
.brxe-button.btn--primary,
.brxe-button.bricks-background-primary,
.brxe-button.bricks-background-btn--primary,
.wp-block-button__link.wp-element-button {
  display: inline-flex !important;
  align-items: center; justify-content: center; gap: 10px;
  padding: 12px 26px !important;
  font: 600 15px/1 "Poppins", system-ui, -apple-system, sans-serif !important;
  letter-spacing: .005em;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  border: 1px solid rgba(140,94,24,.5) !important;
  background: linear-gradient(128deg, #dcab5e 0%, #cd9333 24%, #bd8126 50%, #ac7018 74%, #c98f34 100%) !important;
  box-shadow: 0 10px 26px -12px rgba(150,100,26,.42) !important;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .3s ease !important;
}
.brxe-button.btn--primary:hover,
.brxe-button.bricks-background-primary:hover,
.brxe-button.bricks-background-btn--primary:hover,
.wp-block-button__link.wp-element-button:hover {
  background: linear-gradient(128deg, #e8bc6c 0%, #d89e3d 24%, #c68a2c 50%, #b67c22 74%, #d59d3c 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(150,100,26,.55) !important;
  color: #fff !important;
}
.brxe-button.btn--primary:active,
.brxe-button.bricks-background-primary:active,
.brxe-button.bricks-background-btn--primary:active,
.wp-block-button__link.wp-element-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(150,100,26,.4) !important;
}
/* Outline-variantti: pyöristetään pillereiksi, mutta kevyt tyyli säilyy */
.brxe-button.btn--outline.btn--primary {
  border-radius: 999px !important;
}

/* ============================================================
   Lomake- ja widget-painikkeet pyöreiksi kultapillereiksi
   (FluentForm, Trustmary-survey, "Näytä lisää"). Etusivulla &
   alasivuilla oli edelleen suorakulmaisia CTA-nappeja.
   ============================================================ */
.ff-btn.ff-btn-submit,
.survey-form-submit-button,
.tm-showmore-button {
  border-radius: 999px !important;
  border: 1px solid rgba(140,94,24,.5) !important;
  background: linear-gradient(128deg, #dcab5e 0%, #cd9333 24%, #bd8126 50%, #ac7018 74%, #c98f34 100%) !important;
  color: #fff !important;
  font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .005em;
  box-shadow: 0 10px 26px -12px rgba(150,100,26,.42) !important;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .3s ease !important;
}
.ff-btn.ff-btn-submit:hover,
.survey-form-submit-button:hover,
.tm-showmore-button:hover {
  background: linear-gradient(128deg, #e8bc6c 0%, #d89e3d 24%, #c68a2c 50%, #b67c22 74%, #d59d3c 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(150,100,26,.55) !important;
  color: #fff !important;
}
.ff-btn.ff-btn-submit:active,
.survey-form-submit-button:active,
.tm-showmore-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(150,100,26,.4) !important;
}