@charset "UTF-8";
/*
 * 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-service.pkt-header-service--mobile {
  grid-template-rows: 4rem auto;
  grid-template-columns: 1fr auto;
}
@media screen and (min-width: 80rem) {
  .pkt-header-service.pkt-header-service--mobile {
    grid-template-rows: 4.5rem auto;
  }
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-container {
  background-color: var(--pkt-color-background-default);
  height: 3.5rem;
  width: 100%;
  z-index: 99;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:is(button), .pkt-header-service.pkt-header-service--mobile .pkt-header-service__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-service.pkt-header-service--mobile .pkt-header-service__user-button:not(button) {
  display: contents;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-menu {
  max-width: 100%;
  position: unset;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service--compact {
  grid-template-rows: 4rem auto;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__logo-area, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__content, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user {
  column-gap: 0.5rem;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__logo-area {
  grid-column: 1;
  grid-row: 1;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__content {
  grid-column: 2;
  grid-row: 1;
  padding-inline-end: 0.5rem;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user {
  grid-column: 1/-1;
  grid-row: 2;
  justify-self: stretch;
  padding: 0;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__logo svg {
  height: 2rem;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__service-name {
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__mobile-menu {
  background-color: var(--pkt-color-background-default);
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-content {
  display: none;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content {
  position: absolute;
  top: 4rem;
  left: 0;
  right: 0;
  max-width: 100vw;
}
@media screen and (min-width: 80rem) {
  .pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content {
    top: 4.5rem;
  }
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu {
  position: absolute;
  top: 4rem;
  left: 0;
  right: 0;
}
@media screen and (min-width: 80rem) {
  .pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu {
    top: 4.5rem;
  }
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-input {
  padding: 1rem;
}

.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__mobile-menu.is-open,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__mobile-menu.is-open {
  background-color: var(--pkt-color-background-default);
  z-index: 100;
  border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
  border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content::after, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu::after, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__mobile-menu.is-open::after,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content::after,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu::after,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__mobile-menu.is-open::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.25rem;
  pointer-events: none;
  background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.06));
  transform: translateY(100%);
  z-index: 101;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content {
  height: max-content;
  max-height: calc(100dvh - var(--pkt-header-height));
  overflow: visible;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > ul, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents,
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents > ul,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > ul,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents > ul {
  margin-inline-start: 0;
  gap: 1.5rem;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > *,
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > ul > *, .pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents > *,
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents > ul > *,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > *,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > ul > *,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents > *,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content > .pkt-contents > ul > * {
  margin-inline-start: 0;
}
.pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content .pkt-contents,
.pkt-header-service.pkt-header-service--tablet .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content .pkt-contents {
  padding: 2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-content {
  display: none;
}
.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container, .pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container {
  position: relative;
}
.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content,
.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container.is-open .pkt-header-service__mobile-menu, .pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container.is-open .pkt-header-service__slot-content,
.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 19rem;
  width: fit-content;
  max-width: 100%;
  right: auto;
  border: 2px solid var(--pkt-color-border-subtle);
}
.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container.is-open .pkt-header-service__slot-content.align-right,
.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__slot-container.is-open .pkt-header-service__mobile-menu.align-right, .pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container.is-open .pkt-header-service__slot-content.align-right,
.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-container.is-open .pkt-header-service__mobile-menu.align-right {
  left: auto;
  right: 0;
}
.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) .pkt-header-service__search-input {
  padding: 1rem;
}