@charset "UTF-8";
/*
 * HeaderService component
 *
 * Layout breakpoints are driven by the `mobileBreakpoint` /
 * `tabletBreakpoint` props on <PktHeader>; the component measures its
 * own width via ResizeObserver and toggles `--mobile` / `--tablet`
 * modifier classes on the root accordingly. The SCSS below keys off
 * those classes — never off a fixed media/container threshold — so the
 * breakpoints follow the JS configuration.
 *
 * Class semantics (set by JS):
 *   --mobile : header width < mobileBreakpoint
 *   --tablet : header width < tabletBreakpoint
 *              (always also true when --mobile is true)
 *   neither  : header width ≥ tabletBreakpoint ("laptop" state)
 *
 * The "laptop" state is the default in the SCSS; --tablet and --mobile
 * override downward. --mobile blocks come after --tablet so they win on
 * source order when both are present.
 */
/*
 * 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 {
  display: block;
}

.pkt-header-service-spacer {
  height: 6.5rem;
}
.pkt-header-service-spacer--tablet {
  height: 5.5rem;
}
.pkt-header-service-spacer--mobile {
  height: 5rem;
}
.pkt-header-service-spacer--has-user {
  height: 6.5rem;
}
.pkt-header-service-spacer--has-user.pkt-header-service-spacer--tablet {
  height: 5.5rem;
}
.pkt-header-service-spacer--has-user.pkt-header-service-spacer--mobile {
  height: 7.5rem;
}
.pkt-header-service-spacer--compact {
  height: 4.5rem;
}
.pkt-header-service-spacer--compact.pkt-header-service-spacer--tablet {
  height: 4rem;
}
.pkt-header-service-spacer--compact.pkt-header-service-spacer--mobile {
  height: 4rem;
}
.pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user {
  height: 4.5rem;
}
.pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user.pkt-header-service-spacer--tablet {
  height: 4rem;
}
.pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user.pkt-header-service-spacer--mobile {
  height: 104px;
}

.pkt-header-service {
  --pkt-header-height: 6.5rem;
}
.pkt-header-service--tablet {
  --pkt-header-height: 5.5rem;
}
.pkt-header-service--mobile {
  --pkt-header-height: 4rem;
}
@media screen and (min-width: 80rem) {
  .pkt-header-service--mobile {
    --pkt-header-height: 4.5rem;
  }
}
.pkt-header-service--compact {
  --pkt-header-height: 4.5rem;
}
.pkt-header-service--compact.pkt-header-service--tablet {
  --pkt-header-height: 4rem;
}
.pkt-header-service {
  position: relative;
  z-index: 10;
  background-color: var(--pkt-color-background-default);
  border-bottom: 1px solid var(--pkt-color-border-subtle);
}
.pkt-header-service--fixed {
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
}
.pkt-header-service--sticky {
  position: sticky;
  top: 0;
}
.pkt-header-service--scroll-to-hide {
  transform: translate3d(0, 0, 0);
  transition: 0.5s transform ease-in-out;
}
.pkt-header-service--hidden {
  transform: translate3d(0, -100%, 0);
}
.pkt-header-service {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: 6.5rem auto;
  column-gap: 2rem;
}
.pkt-header-service--tablet {
  grid-template-rows: 5.5rem auto;
  column-gap: 1.5rem;
}
.pkt-header-service--mobile {
  grid-template-rows: 4.5rem auto;
  column-gap: 0.5rem;
}
.pkt-header-service--compact {
  grid-template-rows: 4.5rem auto;
}
.pkt-header-service__logo-area, .pkt-header-service__content, .pkt-header-service__user {
  display: inline-flex;
  column-gap: 2rem;
  min-width: 0;
}
.pkt-header-service--tablet .pkt-header-service__logo-area, .pkt-header-service--tablet .pkt-header-service__content, .pkt-header-service--tablet .pkt-header-service__user {
  column-gap: 1.5rem;
}
.pkt-header-service--mobile .pkt-header-service__logo-area, .pkt-header-service--mobile .pkt-header-service__content, .pkt-header-service--mobile .pkt-header-service__user {
  column-gap: 0.25rem;
}
.pkt-header-service__logo-area {
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  display: inline-flex;
  padding-inline-start: 2rem;
}
.pkt-header-service--tablet .pkt-header-service__logo-area {
  padding-inline-start: 1rem;
}
.pkt-header-service--mobile .pkt-header-service__logo-area {
  padding-inline-start: 0.5rem;
}
.pkt-header-service__content, .pkt-header-service__user {
  grid-row: 1;
  align-items: center;
}
.pkt-header-service__content .pkt-header-service__user-button .pkt-btn__text, .pkt-header-service__user .pkt-header-service__user-button .pkt-btn__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pkt-header-service__content .pkt-link, .pkt-header-service__user .pkt-link {
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.pkt-header-service__content {
  grid-column: 2;
}
.pkt-header-service__user {
  grid-column: 3;
  justify-self: end;
  padding-inline-end: 2rem;
}
.pkt-header-service--tablet .pkt-header-service__user {
  padding-inline-end: 1rem;
}
.pkt-header-service__logo {
  --fg-color: var(--pkt-color-text-body-default);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pkt-header-service__logo a,
.pkt-header-service__logo button {
  display: flex;
  align-items: center;
}
.pkt-header-service__logo svg {
  aspect-ratio: 6/3;
  height: 2.5rem;
}
.pkt-header-service__logo-area--without-service .pkt-header-service__logo svg {
  height: 4rem;
}
.pkt-header-service__service-name {
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 2.125rem;
  padding-block-start: 4px;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-wrap: balance;
}
.pkt-header-service__service-link {
  color: var(--pkt-color-text-body-default);
}
.pkt-header-service__service-link .pkt-link {
  text-decoration: none;
}
.pkt-header-service .pkt-link {
  text-decoration: none;
}
.pkt-header-service .pkt-link--active {
  text-decoration: underline;
  text-underline-position: from-font;
}
.pkt-header-service .pkt-link:active {
  text-decoration: underline;
  text-underline-position: from-font;
}
.pkt-header-service .pkt-link:hover {
  text-decoration: underline;
  text-underline-position: from-font;
}
.pkt-header-service .pkt-link.pkt-header-service--mobile {
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
}
.pkt-header-service__search-input {
  background-color: var(--pkt-color-background-default);
}
.pkt-header-service__search-input .pkt-input-icon:not(button) svg {
  margin-inline-start: 0;
}
.pkt-header-service__slot-container, .pkt-header-service__search-container {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.pkt-header-service__slot-container, .pkt-header-service__slot-container .pkt-contents {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.pkt-header-service__slot-container > * + *, .pkt-header-service__slot-container .pkt-contents > * + * {
  margin-inline-start: 2rem;
}
.pkt-header-service__slot-container > .pkt-link + .pkt-link,
.pkt-header-service__slot-container > pkt-link + pkt-link,
.pkt-header-service__slot-container > a + a, .pkt-header-service__slot-container .pkt-contents > .pkt-link + .pkt-link,
.pkt-header-service__slot-container .pkt-contents > pkt-link + pkt-link,
.pkt-header-service__slot-container .pkt-contents > a + a {
  margin-inline-start: 1.5rem;
}
.pkt-header-service__user-container.is-open, .pkt-header-service__search-container.is-open, .pkt-header-service__slot-container.is-open, .pkt-header-service__user-menu.is-open, .pkt-header-service__mobile-menu.is-open {
  z-index: 100;
}
.pkt-header-service__user-container {
  position: relative;
}
.pkt-header-service__user-button {
  max-width: 22.5rem;
}
.pkt-header-service__user-button .pkt-btn__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.pkt-header-service__user-menu, .pkt-header-service__slot-menu {
  position: absolute;
  right: 0;
  width: max(15.5rem, 100%);
  max-width: min(32rem, 90vw);
}
.pkt-header-service__logout-button {
  flex: 0 0 auto;
}
.pkt-header-service__mobile-menu-container {
  grid-column: 1/-1;
  grid-row: 2;
}
.pkt-header-service__mobile-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 200ms ease, opacity 150ms ease, transform 200ms ease;
  will-change: max-height, transform;
  pointer-events: none;
}
.pkt-header-service__mobile-menu.is-open {
  max-height: calc(100dvh - var(--pkt-header-height) - 3.5rem);
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.pkt-header-service__mobile-menu.is-open > * {
  max-height: calc(100dvh - var(--pkt-header-height) - 3.5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (prefers-reduced-motion: reduce) {
  .pkt-header-service__mobile-menu {
    transition: none;
    transform: none;
  }
}