/* Felles nettside-chrome for byggvekst.no (forside, undersider og /app).
   Meny, primærknapp, tekstlenke og lyst tema. Hentet fra /app og flyttet hit så alle sider deler én kilde.
   Knapper er .btn fra components.css (håndbok §8). Kort og felt følger tokens.css. */

/* ---------- Bare lyst tema ----------
   Hele nettsiden er lys, som /app. Låsen i <head> holder data-theme="light". */
html.bv-home.bv-site,
body.bv-homepage.bv-site {
  background-color: var(--color-bg);
  background-image: none;
  color: var(--color-text);
  color-scheme: light;
}

/* Flatene følger håndboken (tokens.css §3): grå side, hvite kort, grå brønner.
   Overstyrer homepage.css sin gamle hvite side / grå kort. */
html.bv-home.bv-site[data-theme="light"] {
  --color-bg: #F0F0F0;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F0F0F0;
  --color-grouped-card: #FFFFFF;
  --color-grouped-nested: #F0F0F0;
  --color-text: #1C1C1E;
  --color-text-secondary: rgba(28, 28, 30, 0.7);
  --color-text-tertiary: rgba(28, 28, 30, 0.45);
  --color-text-inverse: #FFFFFF;
}


/* ---------- Menyhøyde ---------- */
/* Menyen er en flytende boks øverst. Ankere stopper under den. */
html.bv-home.bv-site {
  /* 12px luft over + 64px boks + 2px kant + 12px luft under = 90px. */
  --bv-lp-bar-h: 90px;
  --bv-home-nav-offset: var(--bv-lp-bar-h);
}

/* ---------- Skala for salgssiden: det gylne snitt ----------
   Tekst: grunnlinje 16px, hvert hele trinn × 1,618 (φ), halve trinn × 1,272 (√φ).
     16 brødtekst · 20 ingress/kapittel · 26 påstand · 33 seksjonstittel · 42 hovedtittel · 68 hero
   Luft: Fibonacci, rundet til håndbokens 4px-rutenett. Jo mer ting hører sammen, jo tettere.
     8 kapittel→tittel · 12 tittel→ingress · 20 ingress→innhold · 32 mellom blokker · 56 tittel→seksjonsinnhold · 88 seksjonspadding
   Appen beholder håndbokens tettere skala; dette gjelder hele nettsiden. */
.bv-site {
  --bv-lp-type-body: 1rem;
  --bv-lp-type-lead: clamp(1.125rem, 1.6vw, 1.25rem);
  --bv-lp-type-statement: clamp(1.375rem, 2.2vw, 1.625rem);
  --bv-lp-heading-sub-size: clamp(1.75rem, 2.9vw, 2.0625rem);
  --bv-lp-heading-main-size: clamp(2.125rem, 3.8vw, 2.625rem);
  --bv-lp-heading-hero-size: clamp(2.625rem, 5vw, 4.25rem);

  --bv-lp-gap-chapter: var(--space-2);
  --bv-lp-gap-tight: var(--space-3);
  --bv-lp-gap-near: var(--space-5);
  --bv-lp-gap-block: var(--space-8);
  --bv-lp-gap-group: calc(var(--space-10) + var(--space-4));
  --bv-lp-section-pad: clamp(3.5rem, 7.8vw, 5.5rem);
}

/* Toppteksten får samme typografi som /app: stor, tett tittel og balansert ingress.
   /vsl beholder sin egen, mindre tittel så filmen får plass i første skjermbilde. */
body.bv-homepage.bv-site:not(.bv-vsl-page) main > .bv-hero .bv-hero__title {
  max-width: 15em;
  font-size: var(--bv-lp-heading-hero-size);
  line-height: 1.05;
  text-wrap: balance;
}

body.bv-homepage.bv-site:not(.bv-vsl-page) main > .bv-hero .bv-hero__subtitle {
  max-width: 36rem;
  font-size: var(--bv-lp-type-lead);
  line-height: 1.5;
  text-wrap: balance;
}

/* ---------- Hero uten foto ----------
   Ren grå flate bak toppteksten, som /app. */
body.bv-homepage.bv-site main > .bv-hero {
  background-image: none;
}

body.bv-homepage.bv-site main > .bv-hero::before {
  content: none;
}

/* «Se hvordan det funker»: tekstlenke med understrek, samme høyde som knappen ved siden av. */
.bv-site .bv-lp-hero__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--page-header-control-height, 34px);
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.bv-site .bv-lp-hero__link:hover {
  color: var(--color-primary-text);
}

.bv-site .bv-lp-hero__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------- Meny (alltid synlig) ----------
   En flytende boks etter håndboken (§6 hovedboks): hvit flate, 1px --color-border, --radius-md og
   --shadow-card. Like bred som produktseksjonene (66rem) og sentrert, 12px under toppen. Logo til venstre, seksjonslenkene høyrestilt før prøve-knappen.
   Lenken til seksjonen du står i får aria-current og grå bakgrunn.
   Ankerne og heroen tar høyde for boksen via --bv-lp-bar-h. Lenkene skjules på smal skjerm. */
.bv-lp-stickybar {
  position: fixed;
  inset: var(--space-3) 0 auto;
  z-index: 90;
  pointer-events: none;
}

.bv-container.bv-lp-stickybar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
  /* Like bred som produktseksjonene (66rem), sentrert, og alltid minst 16px fra skjermkanten. */
  width: min(66rem, calc(100% - 2 * var(--space-4)));
  margin-inline: auto;
  padding-inline: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  pointer-events: auto;
}

.bv-lp-stickybar__brand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin-right: auto;
}

.bv-lp-stickybar__brand img {
  display: block;
  width: auto;
  height: 24px;
}

.bv-lp-stickybar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Samme størrelse som prøve-knappen (§8 trinn A: 34px høy, 12px sidepadding, --radius-sm),
   så den grå hover-flaten har samme form som knappen. */
.bv-site .bv-lp-stickybar__nav :is(a, button) {
  position: relative;
  white-space: nowrap;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: var(--page-header-control-height, 34px);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.bv-site .bv-lp-stickybar__nav :is(a, button):hover,
.bv-site .bv-lp-stickybar__nav a:is([aria-current="true"], [aria-current="page"]) {
  color: var(--color-text);
}

/* Hover og aktiv seksjon: sidens grå (--color-surface-muted) på den hvite menyboksen,
   som muted hover ellers i appen. Ingen strek under. */
.bv-site .bv-lp-stickybar__nav :is(a, button):hover,
.bv-site .bv-lp-stickybar__nav a:is([aria-current="true"], [aria-current="page"]) {
  background: var(--color-surface-muted);
}

.bv-site .bv-lp-stickybar__nav :is(a, button):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* /app har fire seksjonslenker og skjuler dem på smal skjerm. Resten av nettsiden har tre
   (Se hvordan, Appen, Bli en av oss), og bare Se hvordan skjules på smal telefon. */
@media (max-width: 860px) {
  .bv-app-site .bv-lp-stickybar__nav {
    display: none;
  }
}

/* Logoen: ordmerket på bred skjerm, bare huset på telefon så menyen får plass. */
.bv-lp-stickybar__brand .bv-lp-stickybar__brand-icon {
  display: none;
}

/* Telefon: smalere boks, tettere luft og bare huset som logo, så menylenkene,
   Logg inn og Ta kontakt står på én linje. */
@media (max-width: 600px) {
  .bv-site:not(.bv-app-site) .bv-container.bv-lp-stickybar__inner {
    width: calc(100% - 2 * var(--space-2));
    gap: var(--space-1);
    padding-inline: var(--space-2);
  }

  .bv-site:not(.bv-app-site) .bv-lp-stickybar__brand .bv-lp-stickybar__brand-word {
    display: none;
  }

  .bv-site:not(.bv-app-site) .bv-lp-stickybar__brand .bv-lp-stickybar__brand-icon {
    display: block;
    height: 24px;
  }

  .bv-site:not(.bv-app-site) .bv-lp-stickybar__nav :is(a, button) {
    padding: 0 var(--space-1);
  }

  .bv-site:not(.bv-app-site) .bv-lp-stickybar .btn.btn-primary {
    padding-inline: var(--space-2);
    white-space: nowrap;
  }

  .bv-site:not(.bv-app-site) .bv-lp-stickybar__nav {
    gap: 0;
  }
}

/* Smal telefon: Se hvordan, Appen og Bli en av oss får ikke plass sammen med Logg inn og
   Ta kontakt. Se hvordan skjules her; forsiden har den samme lenken rett under overskriften. */
@media (max-width: 480px) {
  .bv-site:not(.bv-app-site) .bv-lp-stickybar__nav [data-bv-video-lead-open] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bv-lp-stickybar,
  .bv-site .bv-lp-stickybar__nav :is(a, button) {
    transition: none;
  }
}

/* ---------- Primærknapper: glød og forstørring ved hover ---------- */
/* Samme effekt som «Oppdater betalingskort» i sidemenyen (sidebar.css, .sidebar-trial-banner):
   roterende konisk kant, glød og scale(1.04). Gjelder alle primærknapper på /app. */
@property --bv-cta-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes bv-cta-glow-rotate {
  to { --bv-cta-glow-angle: 360deg; }
}

.bv-site .btn.btn-primary {
  --bv-cta-glow-deep: var(--color-primary);
  --bv-cta-glow-mid: color-mix(in srgb, var(--color-primary) 72%, #fff);
  --bv-cta-glow-soft: color-mix(in srgb, var(--color-primary) 52%, #fff);
  --bv-cta-glow-pale: color-mix(in srgb, var(--color-primary) 18%, #fff);
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition:
    background 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Kanten: konisk gradient maskert til en 2px ring. */
.bv-site .btn.btn-primary::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  animation: bv-cta-glow-rotate 3.6s linear infinite;
  background: conic-gradient(
    from var(--bv-cta-glow-angle),
    var(--bv-cta-glow-deep),
    var(--bv-cta-glow-mid),
    var(--bv-cta-glow-pale),
    var(--bv-cta-glow-soft),
    var(--bv-cta-glow-deep)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Fyllet: svak konisk tone over primærfargen, under teksten. */
.bv-site .btn.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  animation: bv-cta-glow-rotate 3.6s linear infinite;
  background: conic-gradient(
    from var(--bv-cta-glow-angle),
    color-mix(in srgb, var(--bv-cta-glow-deep) 28%, var(--color-primary)),
    color-mix(in srgb, var(--bv-cta-glow-mid) 18%, var(--color-primary)),
    color-mix(in srgb, var(--bv-cta-glow-pale) 14%, var(--color-primary)),
    color-mix(in srgb, var(--bv-cta-glow-soft) 20%, var(--color-primary)),
    color-mix(in srgb, var(--bv-cta-glow-deep) 28%, var(--color-primary))
  );
}

@media (hover: hover) {
  .bv-site .btn.btn-primary:is(:hover, :focus-visible) {
    background: var(--color-primary);
    box-shadow:
      var(--shadow-lg),
      0 0 14px color-mix(in srgb, var(--bv-cta-glow-mid) 28%, transparent),
      0 0 26px color-mix(in srgb, var(--bv-cta-glow-deep) 16%, transparent);
    transform: scale(1.04);
  }

  .bv-site .btn.btn-primary:is(:hover, :focus-visible)::before {
    opacity: 0.85;
  }

  .bv-site .btn.btn-primary:is(:hover, :focus-visible)::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bv-site .btn.btn-primary::before,
  .bv-site .btn.btn-primary::after {
    animation: none;
    transition-duration: 0.2s;
  }

  .bv-site .btn.btn-primary:is(:hover, :focus-visible) {
    transform: none;
  }
}


/* ---------- Bånd og kort ----------
   Som /app: grå side, og seksjonene som skal skille seg ut står i et hvitt bånd uten gradient eller kantlinjer.
   Kort inni et hvitt bånd er grå brønner uten skygge (håndbok §9: nested innhold er flatt). */
.bv-site main > :is(.bv-steps, .bv-lonnsomhetsgaranti) {
  background: var(--color-surface);
  border-block: 0;
}

.bv-site main > :is(.bv-steps, .bv-lonnsomhetsgaranti)::before {
  content: none;
}

.bv-site main > .bv-steps .bv-step-card,
.bv-site main > .bv-lonnsomhetsgaranti .bv-lonnsomhetsgaranti__panel {
  background: var(--color-surface-muted);
  border-color: transparent;
  box-shadow: none;
}

/* Kort rett på den grå siden er hvite hovedbokser (håndbok §9: --color-surface + --shadow-card). */
.bv-site main .bv-video-card,
.bv-site main .bv-faq details {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
}

/* Bunnteksten står rett på den grå siden, med én kantlinje over. */
.bv-site .bv-footer {
  background: none;
}

/* Logg inn-ikonet i menyen: .icon-btn + .hint (håndbok §8), samme 34px-høyde som lenkene ved siden av. */
.bv-site .bv-lp-stickybar .icon-btn {
  width: var(--page-header-control-height, 34px);
  height: var(--page-header-control-height, 34px);
}

/* ---------- Modaler uten glød ----------
   Kontakt- og søknadsmodalen er vanlige dialoger (håndbok §7): hvit flate, 1px kant, --shadow-card.
   Ingen regnbuekant fra .bv-shine-frame, og primærknappen inni får ikke /app-gløden. */
.bv-site .bv-lead-modal__dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.bv-site .bv-lead-modal .bv-shine-frame {
  padding: 0;
  border-radius: var(--radius-md);
}

.bv-site .bv-lead-modal .bv-shine-frame__border {
  display: none;
}

.bv-site .bv-lead-modal .bv-shine-frame__inner {
  background: var(--color-surface);
  border-radius: inherit;
}

.bv-site .bv-lead-modal .btn.btn-primary::before,
.bv-site .bv-lead-modal .btn.btn-primary::after {
  content: none;
}

.bv-site .bv-lead-modal .btn.btn-primary:is(:hover, :focus-visible) {
  box-shadow: none;
  transform: none;
}