@charset "UTF-8";
/*
 * HeaderGlobal component
 */
/*
 * Shared header patterns
 *
 * Mixins shared by the header variants (`pkt-header-service` and
 * `pkt-header-global`). The service header is the source of truth — these
 * mixins are extracted from it so the global header stays aligned.
 *
 * This file only defines mixins; it emits no CSS on its own and therefore
 * is not `@forward`ed from the component index.
 */
/**
 * Header chrome shared by every variant: base positioning plus the
 * `--fixed`, `--sticky`, `--scroll-to-hide` and `--hidden` modifier states.
 *
 * Call inside a header base block; `&` resolves to the calling class
 * (`.pkt-header-service` or `.pkt-header-global`).
 */
/**
 * Mobile user area shared by every variant: on small screens the user
 * button becomes a full-width bar with top/bottom borders and the user
 * menu renders in flow directly below it (rather than as a floating
 * dropdown). Placement of the user area into its own row is left to the
 * caller (grid row for the service header, a flex row for the global
 * header).
 *
 * `$base` is the variant's BEM block, e.g. `pkt-header-service`.
 */
/**
 * Shared header grid. Logo (col 1), a flexible content cell (col 2,
 * right-aligned) and the user cell (col 3). Row height follows
 * `--pkt-header-height`, which steps down at the tablet and mobile
 * breakpoints. On mobile the grid collapses to two columns and the user
 * cell drops to a full-width second row — the same layout the service
 * header uses.
 *
 * Call inside a header base block. `$base` is the variant's BEM block.
 * `$mobile-height` lets a variant keep a taller bar on mobile (the service
 * header drops to 64px, the global header stays at 88px).
 */
/**
 * Standalone Oslo logo sizing shared by header variants: 64px on
 * desktop/tablet, shrinking to 32px on mobile (the same sizes the service
 * header uses for its logo without a service name).
 *
 * Call inside a header base block; `&` resolves to the calling class.
 * `$mobile-height` is the logo height on mobile (the service header drops to
 * 32px, the global header to 3.2rem).
 */
pkt-header-global {
  display: block;
}

.pkt-header-global-spacer {
  height: 6.5rem;
}
.pkt-header-global-spacer--tablet {
  height: 5.5rem;
}
.pkt-header-global-spacer--mobile {
  height: 5.5rem;
}
.pkt-header-global-spacer--mobile.pkt-header-global-spacer--has-user {
  height: calc(5.5rem + 3.5rem);
}

.pkt-header-global {
  position: relative;
  z-index: 10;
  background-color: var(--pkt-color-background-default);
  border-bottom: 1px solid var(--pkt-color-border-subtle);
}
.pkt-header-global--fixed {
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
}
.pkt-header-global--sticky {
  position: sticky;
  top: 0;
}
.pkt-header-global--scroll-to-hide {
  transform: translate3d(0, 0, 0);
  transition: 0.5s transform ease-in-out;
}
.pkt-header-global--hidden {
  transform: translate3d(0, -100%, 0);
}
.pkt-header-global {
  --pkt-header-height: 6.5rem;
}
.pkt-header-global--tablet {
  --pkt-header-height: 5.5rem;
}
.pkt-header-global--mobile {
  --pkt-header-height: 5.5rem;
}
.pkt-header-global {
  display: grid;
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: var(--pkt-header-height) auto;
  column-gap: 1.5rem;
}
.pkt-header-global--tablet {
  column-gap: 1rem;
}
.pkt-header-global--mobile {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.5rem;
}
.pkt-header-global__logo-area {
  grid-column: 1;
  grid-row: 1;
}
.pkt-header-global__content {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  max-width: 100%;
}
.pkt-header-global__user {
  grid-column: 3;
  grid-row: 1;
}
.pkt-header-global--mobile .pkt-header-global__user {
  grid-column: 1/-1;
  grid-row: 2;
  justify-self: stretch;
  padding: 0;
}
.pkt-header-global__logo-area {
  align-items: center;
  display: inline-flex;
  padding-inline-start: 2rem;
}
.pkt-header-global--tablet .pkt-header-global__logo-area {
  padding-inline-start: 1rem;
}
.pkt-header-global--mobile .pkt-header-global__logo-area {
  padding-inline-start: 0.5rem;
}
.pkt-header-global__content, .pkt-header-global__user {
  align-items: center;
  display: inline-flex;
  min-width: 0;
}
.pkt-header-global__content {
  column-gap: 1.5rem;
}
.pkt-header-global--tablet .pkt-header-global__content {
  column-gap: 0.5rem;
}
.pkt-header-global--mobile .pkt-header-global__content {
  column-gap: 0.5rem;
  padding-inline-end: 0.5rem;
}
.pkt-header-global__menu-toggle, .pkt-header-global__contact {
  flex: 0 0 auto;
}
.pkt-header-global__user {
  justify-self: end;
  padding-inline-end: 2rem;
}
.pkt-header-global--tablet:not(.pkt-header-global--mobile) .pkt-header-global__user {
  padding-inline-end: 1rem;
}
.pkt-header-global__user-container {
  position: relative;
  flex: 0 0 auto;
}
.pkt-header-global__user-container.is-open {
  z-index: 100;
}
.pkt-header-global__logo {
  --fg-color: var(--pkt-color-text-body-default);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.pkt-header-global__logo a,
.pkt-header-global__logo button {
  display: flex;
  align-items: center;
}
.pkt-header-global__logo svg {
  aspect-ratio: 6/3;
  height: 4rem;
}
.pkt-header-global--mobile .pkt-header-global__logo svg {
  height: 3.2rem;
}
.pkt-header-global__search {
  flex: 0 1 auto;
  width: 22rem;
  max-width: 100%;
  min-width: 0;
}
.pkt-header-global__search .pkt-searchinput,
.pkt-header-global__search .pkt-searchinput__field {
  width: 100%;
}
.pkt-header-global__contact {
  flex: 0 0 auto;
  white-space: nowrap;
}
.pkt-header-global__user-button {
  max-width: 20rem;
}
.pkt-header-global__user-button .pkt-btn__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.pkt-header-global__user-menu {
  position: absolute;
  right: 0;
  width: max(15.5rem, 100%);
  max-width: min(32rem, 90vw);
}
.pkt-header-global__user-menu.is-open {
  z-index: 100;
}
.pkt-header-global__search-toggle, .pkt-header-global__search-toggle button {
  flex: 0 0 auto;
  border-radius: 50%;
}
.pkt-header-global--mobile .pkt-header-global__menu-toggle, .pkt-header-global--mobile .pkt-header-global__menu-toggle button {
  border-radius: 50%;
}
.pkt-header-global__menu, .pkt-header-global__search-panel {
  position: fixed;
  top: max(0px, var(--pkt-header-global-top, 0px) + 6.5rem);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background-color: rgba(0, 0, 0, 0.55);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.pkt-header-global__menu--tablet, .pkt-header-global__menu--mobile, .pkt-header-global__search-panel--tablet, .pkt-header-global__search-panel--mobile {
  top: max(0px, var(--pkt-header-global-top, 0px) + 5.5rem);
}
.pkt-header-global__menu .pkt-header-menu {
  width: min(var(--pkt-header-global-width, 100%), 75rem);
  margin: 0 0 0 calc(var(--pkt-header-global-left, 0px) + max(0px, (var(--pkt-header-global-width, 100%) - 75rem) / 2));
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.pkt-header-global__search-panel-inner {
  margin-inline-start: var(--pkt-header-global-left, 0px);
  width: var(--pkt-header-global-width, 100%);
  background-color: var(--pkt-color-background-default);
  border-bottom: 1px solid var(--pkt-color-border-subtle);
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}
.pkt-header-global__search-panel-inner .pkt-searchinput,
.pkt-header-global__search-panel-inner .pkt-searchinput__field {
  width: 100%;
}

.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-container {
  background-color: var(--pkt-color-background-default);
  height: 3.5rem;
  width: 100%;
  z-index: 99;
}
.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button:is(button), .pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button button {
  height: 100%;
  padding: 0 1.5rem;
  width: 100%;
  max-width: 100%;
  border: none;
  border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
  border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
}
.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button:not(button) {
  display: contents;
}
.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-menu {
  max-width: 100%;
  position: unset;
}