/*
  The logged-in header, shared by the React header (NavigationView.tsx) and
  the Django header (feide/base.html). See docs/Frontend/header-concept.md.

  The file needs no other stylesheet, but it expects the browser's root font
  size: its sizes are in rem, and Bootstrap alone sets the root to 10px
  (feide-legacy.css sets it back).

  A selector under `.kp-header` outranks Bootstrap's rules for links, such
  as `a:hover`. The resets under `:where(.kp-header)` rank as an element
  rule, below every class.

  Values come from the SDS 3 Feide light theme where SDS 3 has one; the
  comment beside a value names its token, or says it is not SDS 3. They are
  copied, not read from SDS 3's `--sd3-*` variables, because the pages that
  show the header do not load SDS 3's stylesheet. The search and menu
  buttons copy the SDS 2 small neutral button instead, so they match the
  portal's other small buttons.

  The header's one breakpoint is 1200px: one row from there up, collapsed
  below it. `max-width: 1199.98px` leaves no zoomed width, such as 1199.5px,
  to neither layout; older Safari does not read range queries
  (`width < 1200px`).
*/

:root {
  --kp-header-padding-inline: 24px; /* space/component/600 */
  --kp-header-padding-inline-end: 48px; /* space/component/1200: the padding, and room for the user menu's dropdown */
  --kp-header-collapsed-padding: 16px; /* space/component/400 */
  --kp-header-gap-logo-navigation: 48px; /* space/component/1200 */
  --kp-header-gap-parts: 48px; /* space/component/1200, the least between the main navigation and the account area */
  --kp-header-gap-items: 32px; /* space/component/800 */
  --kp-header-logo-height: clamp(1.5rem, 8vw, 2rem); /* 32px, down to 24px on a narrow screen; not SDS 3 */

  --kp-header-font-family: Haffer, Arial, sans-serif; /* typography/font-family */
  --kp-header-font-size: 0.875rem; /* 14px, typography/size/text/body-sm */
  --kp-header-line-height: 1.375rem; /* 22px, typography/line-height/text/body-sm */

  --kp-header-color-background: #ffffff; /* color/surface/default-1 */
  --kp-header-color-text: #595959; /* color/text/secondary */
  --kp-header-color-text-strong: #000c26; /* color/text/primary */
  --kp-header-color-line-current: #1f4698; /* color/interaction/primary/default */
  --kp-header-color-line-hover: #547dbc; /* not SDS 3: lighter than the current page's line */
  --kp-header-color-divider: #e0e0e0; /* color/border/subtle */
  --kp-header-color-focus: #062356; /* not SDS 3: the portal's focus outline */
}

/* Decided: the header is set in SDS 3's font, Haffer
   (typography/font-family). SDS 3 names the font but does not load it, and
   the Django pages load no Haffer of their own, so the header brings it,
   in the two weights it uses. */
@font-face {
  font-family: Haffer;
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src:
    url("https://static.sikt.no/Haffer-Regular.woff2") format("woff2"),
    url("https://static.sikt.no/Haffer-Regular.woff") format("woff");
}

@font-face {
  font-family: Haffer;
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src:
    url("https://static.sikt.no/Haffer-SemiBold.woff2") format("woff2"),
    url("https://static.sikt.no/Haffer-SemiBold.woff") format("woff");
}

/* --- The header --- */

.kp-header {
  /* Typography */
  font-family: var(--kp-header-font-family);
  font-size: var(--kp-header-font-size);
  font-weight: 400;
  line-height: var(--kp-header-line-height);
  color: var(--kp-header-color-text);

  /* Appearance */
  background-color: var(--kp-header-color-background);
}

.kp-header,
.kp-header *,
.kp-header__search-row,
.kp-header__search-row * {
  /* Layout */
  box-sizing: border-box;
}

.kp-header__list,
.kp-header__dropdown-menu {
  /* Size & spacing */
  margin: 0;
  padding: 0;

  /* Content */
  list-style: none;
}

.kp-header a,
.kp-header a:hover,
.kp-header a:focus {
  /* Typography */
  text-decoration: none;
}

:where(.kp-header) button {
  /* Size & spacing */
  margin: 0;

  /* Typography */
  font: inherit;

  /* Interaction */
  cursor: pointer;
}

/* Bootstrap outlines a link on every focus, a click too; the header only on
   keyboard focus. */
.kp-header a:focus {
  /* Focus */
  outline: none;
}

.kp-header a:focus-visible,
.kp-header button:focus-visible {
  /* Focus */
  outline: 2px solid var(--kp-header-color-focus);
  outline-offset: 4px;
}

.kp-header__icon {
  /* Layout */
  display: block;

  /* Size & spacing */
  width: 1em;
  height: 1em;

  /* Appearance */
  fill: currentColor;
}

/* --- The logo --- */

.kp-header__logo {
  /* Layout */
  display: flex;
}

/* The logo keeps its size however tight the row is. Page styles that cap
   every image at its container's width (`img { max-width: 100% }`, as the
   React pages load) would otherwise let a tight row squeeze it. */
.kp-header__logo-image {
  /* Layout */
  display: block;
  flex-shrink: 0;

  /* Size & spacing */
  height: var(--kp-header-logo-height);
  max-width: none;
}

/* --- Navigation links and names --- */

.kp-header__link {
  /* Layout */
  display: block;

  /* Typography */
  color: var(--kp-header-color-text);
}

.kp-header__link:is(:hover, :focus),
.kp-header__link.active {
  /* Typography */
  color: var(--kp-header-color-text-strong);
}

/* A link's label and a dropdown's name are underlined on hover, and with the
   current page's line when they are the current page or their menu is open. */
.kp-header__link > span,
.kp-header__dropdown-toggle > .kp-header__name {
  /* Typography */
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.kp-header__link:hover > span,
.kp-header__dropdown-toggle:hover > .kp-header__name {
  /* Typography */
  text-decoration-line: underline;
  text-decoration-color: var(--kp-header-color-line-hover);
  color: var(--kp-header-color-text-strong);
}

.kp-header__link.active > span,
.kp-header__dropdown-toggle[aria-expanded="true"] > .kp-header__name {
  /* Typography */
  text-decoration-line: underline;
  text-decoration-color: var(--kp-header-color-line-current);
  color: var(--kp-header-color-text-strong);
}

/* A long name is cut with "…"; the full name is in its title. `overflow-x`
   alone, so the underline below the text is not cut too. */
.kp-header__name {
  /* Layout */
  display: inline-block;

  /* Size & spacing */
  max-width: 15rem; /* 240px, not SDS 3 */

  /* Typography */
  white-space: nowrap;
  text-overflow: ellipsis;

  /* Content */
  overflow-x: clip;
}

/* --- The organization switcher and the user menu --- */

.kp-header__dropdown {
  /* Layout */
  position: relative;
}

.kp-header__dropdown-toggle {
  /* Layout */
  display: inline-flex;
  align-items: center;
  gap: 4px; /* space/component/100 */

  /* Size & spacing */
  padding: 0;

  /* Typography */
  white-space: nowrap;
  color: var(--kp-header-color-text);

  /* Appearance */
  border: 0;
  background: none;
}

.kp-header__chevron {
  /* Layout */
  flex-shrink: 0;
}

.kp-header__dropdown-menu {
  /* Layout */
  display: none;
}

.kp-header__dropdown-toggle[aria-expanded="true"] + .kp-header__dropdown-menu {
  /* Layout */
  display: block;
}

.kp-header__dropdown-menu > li:not(:last-child) {
  /* Appearance */
  border-bottom: 1px solid var(--kp-header-color-divider);
}

/* A link, or a button for an action such as React's "Change language". */
.kp-header__dropdown-item {
  /* Layout */
  display: block;

  /* Size & spacing */
  width: 100%;
  padding: 0 16px; /* space/component/400 */

  /* Typography */
  line-height: 2.5rem;
  white-space: nowrap;
  text-align: left;
  color: var(--kp-header-color-text);

  /* Appearance */
  border: 0;
  background: none;
}

.kp-header__dropdown-item:is(:hover, :focus) {
  /* Typography */
  color: var(--kp-header-color-text-strong);
}

.kp-header .kp-header__dropdown-item:focus-visible {
  /* Appearance */
  background-color: #f5f5f5; /* not SDS 3 */

  /* Focus */
  outline-offset: 0;
}

/* While a superuser imitates another user, the user menu is a red box, so it
   cannot be missed. The name stays white without an underline: dark text and
   the blue line have too little contrast on the red, so the box darkens
   instead. Not SDS 3: the legacy header's red. */
.kp-header__dropdown-toggle--impersonated {
  /* Size & spacing */
  padding: 4px 12px; /* space/component/100, space/component/300 */

  /* Typography */
  color: #ffffff;

  /* Appearance */
  background-color: #ba353d;
}

.kp-header__dropdown-toggle--impersonated:is(:hover, [aria-expanded="true"]) {
  /* Appearance */
  background-color: #8e1515;
}

.kp-header .kp-header__dropdown-toggle--impersonated > .kp-header__name {
  /* Typography */
  text-decoration-line: none;
  color: inherit;
}

/* --- The search and menu buttons: the SDS 2 small neutral button --- */

.kp-header .kp-header__button {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Size & spacing */
  padding: 4px 12px; /* space/component/100, space/component/300 */

  /* Typography */
  line-height: 160%;
  color: #ffffff;

  /* Appearance */
  border: 0;
  border-radius: 4px;
  background-color: #1f4698;
}

.kp-header .kp-header__button:is(:hover, :focus-visible) {
  /* Typography */
  color: #0a0132;

  /* Appearance */
  background-color: #e3f2ff;
}

.kp-header .kp-header__button:active {
  /* Typography */
  color: #0a0132;

  /* Appearance */
  background-color: #b3dcff;
}

.kp-header .kp-header__button:focus-visible {
  /* Focus */
  outline: 4px dashed #004fcf;
  outline-offset: 0;
}

/* SDS pulls the icon 4px towards the edge, to balance it against the label. */
.kp-header__button-icon {
  /* Layout */
  display: flex;

  /* Size & spacing */
  margin-left: -4px;

  /* Typography */
  font-size: 1rem;
}

.kp-header__button-label {
  /* Size & spacing */
  padding: 0 4px;
}

/* Both icons are in the markup; the button's aria-expanded picks one. */
.kp-header__button:not([aria-expanded="true"]) .kp-header__icon--open,
.kp-header__button[aria-expanded="true"] .kp-header__icon--closed {
  /* Layout */
  display: none;
}

/* --- The search row, below the header --- */

.kp-header__search-row {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Size & spacing */
  min-height: 48px; /* space/component/1200 */
  padding: 0 var(--kp-header-padding-inline);

  /* Typography */
  font-family: var(--kp-header-font-family);
  font-size: var(--kp-header-font-size);
  line-height: var(--kp-header-line-height);

  /* Appearance */
  background-color: var(--kp-header-color-background);
}

.kp-header__search-row[hidden] {
  /* Layout */
  display: none;
}

/* The field and its button are joined into one field, in the colors of
   Bootstrap's input group, like the portal's other search fields. */
.kp-header__search {
  /* Layout */
  display: flex;

  /* Size & spacing */
  width: 100%;
  max-width: 25rem; /* 400px, not SDS 3 */
  margin: 0;
}

.kp-header__search-input {
  /* Layout */
  flex: 1;

  /* Size & spacing */
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 6px 12px;

  /* Typography */
  font: inherit;
  color: #555555;

  /* Appearance */
  border: 1px solid #cccccc;
  border-radius: 4px 0 0 4px;
  background-color: #ffffff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.kp-header__search-submit {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Size & spacing */
  width: 40px;
  height: 32px;
  margin: 0 0 0 -1px;
  padding: 0;

  /* Typography */
  color: #333333;

  /* Appearance */
  border: 1px solid #cccccc;
  border-radius: 0 4px 4px 0;
  background-color: #ffffff;

  /* Interaction */
  cursor: pointer;
}

.kp-header__search-submit:hover {
  /* Appearance */
  border-color: #adadad;
  background-color: #e6e6e6;
}

.kp-header__search-input:focus,
.kp-header__search-submit:focus {
  /* Layout */
  position: relative;
  z-index: 1;

  /* Focus */
  outline: 0;
  box-shadow: 0 0 0 2px var(--kp-header-color-focus);
}

/* --- Collapsed, below 1200px: the logo and the buttons, and a menu --- */

@media (max-width: 1199.98px) {
  .kp-header__bar {
    /* Layout */
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "logo search menu";
    align-items: center;
    column-gap: 8px; /* space/component/200 */

    /* Size & spacing */
    padding: var(--kp-header-collapsed-padding);
  }

  .kp-header__logo {
    /* Layout */
    grid-area: logo;
    justify-self: start;
  }

  .kp-header__search-toggle--collapsed {
    /* Layout */
    grid-area: search;
  }

  .kp-header__menu-toggle {
    /* Layout */
    grid-area: menu;
  }

  /* The search button for the one-row header. */
  .kp-header__search-item {
    /* Layout */
    display: none;
  }

  .kp-header__menu:not([data-open]) {
    /* Layout */
    display: none;
  }

  .kp-header__menu {
    /* Size & spacing */
    padding: var(--kp-header-collapsed-padding) var(--kp-header-padding-inline);

    /* Appearance */
    box-shadow: inset 2px 2px 5px 0 rgba(0, 0, 0, 0.05);
  }

  /* Every text in the menu starts on one left edge. */
  .kp-header__list {
    /* Layout */
    display: flex;
    flex-direction: column;
    gap: 8px; /* space/component/200 */

    /* Size & spacing */
    padding: 16px 8px; /* space/component/400, space/component/200 */
  }

  /* The line between the main navigation and the account area starts where
     the text starts. */
  .kp-header__account {
    /* Size & spacing */
    margin: 0 8px;
    padding-inline: 0;

    /* Appearance */
    border-top: 1px solid var(--kp-header-color-divider);
  }

  .kp-header__link,
  .kp-header__name {
    /* Typography */
    line-height: 2rem;
  }

  /* The menu is as wide as the page, so a name is cut only at its edge. */
  .kp-header__name,
  .kp-header__dropdown-toggle {
    /* Size & spacing */
    max-width: 100%;
  }

  /* An open dropdown is part of the menu: its items are indented below the
     name, as its sub-items. */
  .kp-header__dropdown-menu {
    /* Size & spacing */
    padding-left: 1.5em;
  }

  .kp-header__dropdown-item {
    /* Size & spacing */
    padding: 0;
  }

  /* The red box reaches out, so the name keeps the menu's left edge. */
  .kp-header__dropdown-toggle--impersonated {
    /* Size & spacing */
    margin-left: -12px;
  }

  .kp-header__search-row {
    /* Size & spacing */
    padding: 0 var(--kp-header-collapsed-padding);
  }
}

/* --- One row, from 1200px --- */

@media (min-width: 1200px) {
  /* Four columns: the logo, the main navigation with the free space after it,
     the account area, and the search button for users who can search. */
  .kp-header {
    /* Layout */
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;

    /* Size & spacing */
    min-height: 56px; /* space/component/1400 */
    padding: 8px var(--kp-header-padding-inline-end) 8px var(--kp-header-padding-inline); /* space/component/200 */
  }

  .kp-header__bar {
    /* Layout */
    display: flex;

    /* Size & spacing */
    margin-right: var(--kp-header-gap-logo-navigation);
  }

  .kp-header .kp-header__search-toggle--collapsed,
  .kp-header .kp-header__menu-toggle {
    /* Layout */
    display: none;
  }

  /* The menu's two lists become parts of the header's row. */
  .kp-header .kp-header__menu {
    /* Layout */
    display: contents;
  }

  .kp-header__list {
    /* Layout */
    display: flex;
    align-items: center;
    gap: var(--kp-header-gap-items);
  }

  /* Links keep their labels on one line, so a row that is too narrow
     overflows, which is what tells the header it is full. */
  .kp-header__navigation {
    /* Layout */
    justify-self: start;

    /* Typography */
    white-space: nowrap;
  }

  .kp-header__navigation > li {
    /* Layout */
    flex-shrink: 0;
  }

  .kp-header__account {
    /* Size & spacing */
    margin-left: var(--kp-header-gap-parts);
  }

  .kp-header__search-item {
    /* Layout */
    display: flex;

    /* Size & spacing */
    margin-left: var(--kp-header-gap-items);
  }

  /* The letters "Feide" are 3.91 of the image's 39 units below its middle;
     drawn up by as much, they are on the row's center line with the text. */
  .kp-header__logo-image {
    /* Layout */
    position: relative;
    top: calc(var(--kp-header-logo-height) * -3.91 / 39);
  }

  .kp-header__dropdown-menu {
    /* Layout */
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;

    /* Size & spacing */
    min-width: 10rem; /* 160px, not SDS 3 */
    padding: 0 8px; /* space/component/200 */

    /* Appearance */
    border-radius: 0 0 4px 4px;
    background-color: var(--kp-header-color-background);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }

  /* The search field ends where the header's last part ends. */
  .kp-header__search-row {
    /* Layout */
    justify-content: flex-end;

    /* Size & spacing */
    padding-right: var(--kp-header-padding-inline-end);
  }

  /* Full: set by useFullRow in React and kp-header.js in Django when the
     parts no longer fit at the gaps above. The gaps step down the scale, and
     the account area stacks. */
  .kp-header--full {
    --kp-header-gap-logo-navigation: 32px; /* space/component/800 */
    --kp-header-gap-parts: 32px; /* space/component/800 */
    --kp-header-gap-items: 24px; /* space/component/600 */
  }

  .kp-header--full .kp-header__account {
    /* Layout */
    flex-direction: column;
    align-items: flex-end;
    gap: 4px; /* space/component/100 */
  }

  /* The search button shows only its icon; "Søk" stays its name for screen
     readers. */
  .kp-header--full .kp-header__search-toggle {
    /* Size & spacing */
    padding: 7px;
  }

  .kp-header--full .kp-header__search-toggle .kp-header__button-icon {
    /* Size & spacing */
    margin-left: 0;
  }

  .kp-header--full .kp-header__search-toggle .kp-header__button-label {
    /* Accessibility */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}