/* Global chrome: header + footer. Reads --vn-* tokens only — no literal colours,
   sizes or fonts below this line. Loaded by templates/layouts/base.hubl.html after
   base.css (so the token :root block and primitives are already in scope). */

/* ---------- Skip link ---------- */

.vn-skip-link {
  position: absolute;
  left: var(--vn-space-4);
  top: var(--vn-space-4);
  z-index: 100;
  padding: var(--vn-space-2) var(--vn-space-4);
  border-radius: var(--vn-radius-sm);
  background: var(--vn-accent);
  color: #fff;
  font-family: var(--vn-font-heading);
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform var(--vn-fast) var(--vn-ease);
}

.vn-skip-link:focus {
  transform: none;
  color: #fff;
}

/* ---------- Header ---------- */

/* Global partials render inside a wrapper <div data-global-resource-path>. That
   wrapper is only as tall as its contents, which would trap the sticky header inside
   a header-height box and let it scroll away. display:contents drops the wrapper's box
   so the header is a flow child of the page again and position:sticky can travel. */
[data-global-resource-path] {
  display: contents;
}

.vn-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: var(--vn-space-4);
  background: transparent;
}

.vn-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--vn-space-4);
}

/* Floating frosted-glass bar (logo + nav). Inset from the page edges by the
   container, translucent with a brand-tinted gradient + backdrop blur, so page
   content scrolls smoothly underneath it. */
.vn-header__bar {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vn-space-8);
  padding: var(--vn-space-3) var(--vn-space-6);
  border-radius: var(--vn-radius);
  /* Transparent at the top; a very subtle hairline fades in once scrolled (see below). */
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--vn-canvas-deep) 82%, transparent);
  box-shadow: var(--vn-shadow);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition: background var(--vn-slow) var(--vn-ease),
    border-color var(--vn-slow) var(--vn-ease);
}

/* Keep the same frosted canvas-deep tint at the top and once scrolled — a translucent
   fill (not solid) so the backdrop blur still reads as frosted glass. Add a very subtle
   light hairline once the page has scrolled, to lift the bar off the content beneath it. */
.vn-header[data-vn-scrolled] .vn-header__bar {
  background: color-mix(in srgb, var(--vn-canvas-deep) 82%, transparent);
  border-color: color-mix(in srgb, #ffffff 12%, transparent);
}

/* Contain full-bleed sections (e.g. the fund timeline's `margin: calc(50% - 50vw)`, which is 100vw
   incl. the scrollbar width) so they can't add a horizontal scrollbar to the whole page. `clip`
   (not `hidden`) keeps vertical overflow visible and doesn't create a scroll container, so it won't
   break the sticky header (which lives outside <main> anyway). */
.vn-main {
  overflow-x: clip;
}

/* Fund pages: the hero runs to the very top of the page so the (frosted, sticky) header floats
   over the image instead of sitting on the navy band above it. Pull the main content up under the
   header by the header's height (wrapper padding-block ×2 + bar padding ×2 + bar content). A touch
   of over-pull guarantees no seam between the top of the image and the viewport edge. */
.vn-page--fund-detail .vn-main,
.vn-page--event-detail .vn-main {
  margin-top: calc(-1 * (var(--vn-space-4) * 2 + var(--vn-space-3) * 2 + 3rem));
}

.vn-header__brand {
  display: inline-flex;
  align-items: center;
}

.vn-header__logo {
  display: block;
  height: 22px;
  width: auto;
}

.vn-header__wordmark {
  font-family: var(--vn-font-heading);
  font-weight: 700;
  font-size: var(--vn-text-xl);
  color: var(--vn-text);
  letter-spacing: -0.02em;
}

.vn-header__nav {
  display: flex;
  align-items: center;
  gap: var(--vn-space-8);
}

/* HubSpot menu-tag output: .hs-menu-wrapper > ul > li.hs-menu-item > a */
.vn-header__nav .hs-menu-wrapper > ul {
  display: flex;
  align-items: center;
  gap: var(--vn-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vn-header__nav .hs-menu-item {
  position: relative;
}

.vn-header__nav .hs-menu-item > a {
  position: relative;
  display: inline-block;
  padding: var(--vn-space-2) 0;
  font-family: var(--vn-font-body);
  font-size: var(--vn-text-sm);
  font-weight: 500;
  color: var(--vn-text);
}

/* Underline that grows in from the left on hover/active; text stays white. */
.vn-header__nav .hs-menu-item > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--vn-space-1);
  height: 1px;
  /* Frosted-blue gradient underline. */
  background: var(--vn-gradient-frost);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--vn-fast) var(--vn-ease);
}

.vn-header__nav .hs-menu-item > a:hover::after,
.vn-header__nav .hs-menu-item.active > a::after,
.vn-header__nav .hs-menu-item.active-branch > a::after {
  transform: scaleX(1);
}

/* Flyout submenus (depth 2) */
.vn-header__nav .hs-menu-children-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: var(--vn-space-2);
  list-style: none;
  background: var(--vn-surface);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-sm);
  box-shadow: var(--vn-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--vn-fast) var(--vn-ease),
    transform var(--vn-fast) var(--vn-ease);
}

.vn-header__nav
  .hs-menu-item.hs-item-has-children:hover
  > .hs-menu-children-wrapper,
.vn-header__nav
  .hs-menu-item.hs-item-has-children:focus-within
  > .hs-menu-children-wrapper {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.vn-header__nav .hs-menu-children-wrapper .hs-menu-item > a {
  padding: var(--vn-space-2) var(--vn-space-3);
}

/* Nav item whose mega panel is open reads as active — same underline. */
.vn-header__nav .hs-menu-item[data-vn-mega-active] > a::after {
  transform: scaleX(1);
}

/* A top-level item with a mega panel drops its own flyout (the mega replaces it). */
.vn-header__nav .hs-menu-item[data-vn-has-mega] > .hs-menu-children-wrapper {
  display: none;
}

/* ---------- Mega menu (desktop) ---------- */

/* A compact panel anchored under the hovered nav item (its left is set in JS, clamped to the bar).
   The transparent padding-top is a hover bridge so the pointer can cross from item to panel. */
.vn-mega {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  padding-top: var(--vn-space-3);
  pointer-events: none;
}

.vn-mega[hidden] {
  display: none;
}

.vn-mega[data-vn-open] {
  pointer-events: auto;
}

/* The whole panel — frosted box AND its content — animates as ONE unit, so nothing
   transitions separately (box and text open/close together). The opacity/transform live on
   .vn-mega__panel itself; the inner content just rides along. Tradeoff: an element with
   opacity < 1 or a non-identity transform disables its own backdrop-filter, so the blur is
   inactive for the ~160ms transition and engages in the resting open state — imperceptible
   against the slide, and far less jarring than the box and text moving out of sync. */
.vn-mega__inner {
  opacity: 1;
}

.vn-mega__panel {
  width: min(312px, 92vw);
  padding: var(--vn-space-4);
  border-radius: calc(var(--vn-radius) - 2px);
  border: 1px solid color-mix(in srgb, var(--vn-text) 12%, transparent);
  background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--vn-text) 5%, transparent),
      transparent 42%
    ),
    color-mix(in srgb, var(--vn-canvas-deep) 72%, transparent);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 24px 56px -28px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--vn-fast) var(--vn-ease),
    transform var(--vn-fast) var(--vn-ease);
}

.vn-mega[data-vn-open] .vn-mega__panel {
  opacity: 1;
  transform: none;
}

.vn-mega__panel[hidden] {
  display: none;
}

/* Quiet section label above the fund list. */
.vn-mega__caption {
  display: block;
  font-size: var(--vn-text-xs);
  font-weight: 500;
  color: var(--vn-text-muted);
  margin: 0 var(--vn-space-2) var(--vn-space-2);
}

.vn-mega__cards {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Each fund is a two-column row: name + return on the top line, meta beneath. */
.vn-mega__card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--vn-space-3);
  row-gap: 2px;
  padding: var(--vn-space-2) var(--vn-space-2);
  border-radius: var(--vn-radius-sm);
  transition: background var(--vn-fast) var(--vn-ease);
}

.vn-mega__card:hover {
  background: color-mix(in srgb, var(--vn-text) 6%, transparent);
}

.vn-mega__card-name {
  font-family: var(--vn-font-heading);
  font-weight: 600;
  font-size: var(--vn-text-sm);
  color: var(--vn-text);
}

.vn-mega__card-return {
  font-size: var(--vn-text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--vn-performance-positive);
}

.vn-mega__card-meta {
  grid-column: 1 / -1;
  font-size: var(--vn-text-xs);
  color: var(--vn-text-muted);
}

/* "Se alle fonde →" footer link. */
.vn-mega__lead {
  display: flex;
  align-items: center;
  gap: var(--vn-space-2);
  padding: var(--vn-space-2) var(--vn-space-2) 0;
  margin-top: var(--vn-space-2);
  border-top: 1px solid var(--vn-border);
  font-size: var(--vn-text-sm);
  font-weight: 500;
  color: var(--vn-text-muted);
  transition: color var(--vn-fast) var(--vn-ease);
}

.vn-mega__lead svg {
  transition: transform var(--vn-fast) var(--vn-ease);
}

.vn-mega__lead:hover {
  color: var(--vn-text);
}

.vn-mega__lead:hover svg {
  transform: translateX(3px);
}

@media (max-width: 767px) {
  .vn-mega {
    display: none;
  }
}

/* NB: the "Få adgang" CTA module's hs_cos_wrapper is collapsed with display:contents so the <a> is
   the flex child again — that rule lives in the HeaderCta module (components/modules/HeaderCta),
   not here, because the dev-server proxy loads this theme CSS from the deployed CDN and would only
   reflect a change after deploy, whereas the module's own output is served locally. */
.vn-header__cta {
  white-space: nowrap;
  flex: 0 0 auto;
  padding-block: var(--vn-space-2);
}

/* Desktop: CTA is a separate floating pill beside the bar. Mobile: it drops into
   the menu panel (the desktop one is hidden). */
.vn-header__cta--mobile {
  display: none;
}

/* Desktop actions cluster — login + access grouped as ONE right-hand slot so the
   space-between bar keeps them adjacent instead of spreading them apart. Hidden
   on mobile, where both buttons drop into the nav dropdown. */
.vn-header__actions {
  display: flex;
  align-items: center;
  gap: var(--vn-space-4);
  flex: 0 0 auto;
}

/* "Log ind" — the ghost sibling to the access CTA. Same placement behaviour: a
   button beside the bar on desktop, dropped into the menu panel on mobile. */
.vn-header__login {
  white-space: nowrap;
  flex: 0 0 auto;
  padding-block: var(--vn-space-2);
}

.vn-header__login--mobile {
  display: none;
}

/* Hamburger toggle — mobile only */
.vn-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.vn-header__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  background: var(--vn-text);
  transition: transform var(--vn-fast) var(--vn-ease),
    opacity var(--vn-fast) var(--vn-ease);
}

@media (max-width: 767px) {
  .vn-header__toggle {
    display: flex;
  }

  .vn-header__actions,
  .vn-header__cta--desktop,
  .vn-header__login--desktop {
    display: none;
  }

  .vn-header__cta--mobile {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: var(--vn-space-2);
  }

  .vn-header__login--mobile {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }

  /* Frosted dropdown panel, aligned under the bar. */
  .vn-header__nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + var(--vn-space-2));
    flex-direction: column;
    align-items: stretch;
    gap: var(--vn-space-4);
    padding: var(--vn-space-6);
    border-radius: var(--vn-radius);
    border: 1px solid color-mix(in srgb, var(--vn-text) 14%, transparent);
    background: color-mix(in srgb, var(--vn-canvas-deep) 92%, transparent);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--vn-shadow);
  }

  .vn-header[data-vn-open] .vn-header__nav {
    display: flex;
  }

  .vn-header__nav .hs-menu-wrapper > ul {
    flex-direction: column;
    align-items: stretch;
    gap: var(--vn-space-2);
  }

  .vn-header__nav .hs-menu-children-wrapper {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-left: var(--vn-space-4);
  }

  .vn-header[data-vn-open] .vn-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .vn-header[data-vn-open] .vn-header__toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .vn-header[data-vn-open] .vn-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ---------- Footer ---------- */

.vn-footer {
  background: var(--vn-canvas-deep);
  border-top: 1px solid var(--vn-border);
}

.vn-footer__inner {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: var(--vn-space-12);
  align-items: start;
  padding-block: var(--vn-space-24) var(--vn-space-16);
}

/* Footer copy is three embedded, in-app-editable modules (FooterBrand / FooterContact /
   FooterLegal). Drop HubSpot's module wrapper so each module's own root (.vn-footer__brand,
   .vn-footer__col, and the legal .vn-footer__legal + .vn-footer__legal-links) is a direct grid /
   flex child — keeping every footer layout selector below working unchanged. */
.vn-footer__inner > .hs_cos_wrapper_type_module,
.vn-footer__bar-inner > .hs_cos_wrapper_type_module {
  display: contents;
}

.vn-footer__logo {
  display: block;
  height: 38px;
  width: auto;
  margin-bottom: var(--vn-space-6);
}

.vn-footer__tagline {
  color: color-mix(in srgb, var(--vn-text-muted) 60%, transparent);
  max-width: 42ch;
  line-height: var(--vn-leading-normal);
}

.vn-footer__heading {
  font-family: var(--vn-font-heading);
  font-size: var(--vn-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--vn-text-muted) 80%, transparent);
  margin: 0 0 var(--vn-space-6);
}

/* Extra top gap when Support / Følg os sit under Kontakt in the same column. */
.vn-footer__heading--spaced {
  margin-top: var(--vn-space-8);
}

.vn-footer__nav .hs-menu-wrapper > ul,
.vn-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--vn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Neutralise HubSpot's default menu item spacing so item-to-item gap = the flex gap above,
   staying smaller than the heading's bottom margin (correct hierarchy). */
.vn-footer__nav .hs-menu-item {
  margin: 0;
  padding: 0;
}

.vn-footer__nav .hs-menu-item > a,
.vn-footer__list a {
  display: inline-block;
  padding: 0;
  line-height: 1.35;
  color: var(--vn-text-muted);
  transition: color var(--vn-fast) var(--vn-ease);
}

.vn-footer__list li {
  color: var(--vn-text-muted);
  line-height: 1.35;
}

.vn-footer__nav .hs-menu-item > a:hover,
.vn-footer__list a:hover {
  color: var(--vn-text);
}

/* Keep the footer menu flat — no flyouts here. */
.vn-footer__nav .hs-menu-children-wrapper {
  display: none;
}

/* Social: plain monochrome icon that warms to the accent on hover. */
.vn-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vn-text-muted);
  transition: color var(--vn-fast) var(--vn-ease);
}

.vn-footer__social:hover {
  color: var(--vn-text);
}

/* ---------- Bottom legal bar ---------- */

.vn-footer__bar {
  border-top: 1px solid var(--vn-border);
}

.vn-footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--vn-space-4) var(--vn-space-8);
  padding-block: var(--vn-space-6);
}

.vn-footer__legal {
  margin: 0;
  color: color-mix(in srgb, var(--vn-text-muted) 78%, transparent);
  font-size: var(--vn-text-sm);
}

.vn-footer__sep {
  margin-inline: var(--vn-space-2);
  color: color-mix(in srgb, var(--vn-text-muted) 45%, transparent);
}

.vn-footer__legal-links {
  display: flex;
  align-items: center;
  gap: var(--vn-space-6);
  font-size: var(--vn-text-sm);
}

.vn-footer__legal-links a {
  color: var(--vn-text-muted);
  transition: color var(--vn-fast) var(--vn-ease);
}

.vn-footer__legal-links a:hover {
  color: var(--vn-text);
}

.vn-footer__privacy-toggle {
  color: color-mix(in srgb, var(--vn-accent) 70%, var(--vn-text-muted));
}

.vn-footer__privacy-toggle:hover {
  color: var(--vn-accent);
}

@media (max-width: 991px) {
  .vn-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--vn-space-12) var(--vn-space-8);
  }
  .vn-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575px) {
  .vn-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--vn-space-8);
    padding-block: var(--vn-space-16) var(--vn-space-12);
  }
  .vn-footer__bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}