/*
 * Site header for every page: the Next.js pages (Header in app/components/shell.tsx)
 * and the server-rendered article editions (lib/render.ts) emit the same kb-* markup.
 * Keep all header styling here. The kb- prefix and the defensive resets keep it clear
 * of the authored CSS inside HTML editions.
 */

/* A dedicated face, so weights render the same even where an edition declares other Hanken cuts. */
@font-face {
  font-family: "KB Header Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/edition-10.woff2") format("woff2");
}
.kb-header {
  position: relative;
  z-index: 20;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: none;
  height: 64px;
  margin: 0;
  padding: 0 2.2%;
  border: 0;
  background: #ff6200;
  color: #11130f !important;
  font:
    400 16px/normal "KB Header Grotesk",
    "DM Sans",
    Arial,
    sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
.kb-header a {
  color: inherit;
  text-decoration: none;
}
.kb-header a:focus-visible,
.kb-header summary:focus-visible {
  outline: 2px solid #11130f;
  outline-offset: 5px;
}
.kb-header .kb-brand {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2vw, 38px);
  font-size: clamp(20px, 1.65vw, 32px);
  font-weight: 700;
  letter-spacing: -0.6px;
  white-space: nowrap;
}
.kb-header .kb-brand:hover {
  opacity: 0.78;
}
.kb-header .kb-monogram {
  display: block;
  height: 38px;
  padding: 0 clamp(25px, 2vw, 38px) 0 0;
  border-right: 1px solid #1117;
  font:
    700 clamp(39px, 2.7vw, 52px) / 34px "DM Sans",
    Arial,
    sans-serif;
  letter-spacing: -4px;
}
.kb-header-links {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.2vw, 62px);
  font-size: clamp(13px, 1.05vw, 20px);
  font-weight: 600;
}
.kb-header-links a:hover,
.kb-header-links a[aria-current="page"],
.kb-menu-links a:hover,
.kb-menu-links a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.kb-header-x {
  display: flex;
  align-items: center;
}
.kb-header-x svg {
  display: block;
  flex-shrink: 0;
}

/* Phones: a native disclosure menu that works before and without JavaScript. */
.kb-menu {
  display: none;
}
@media (max-width: 1000px) {
  .kb-header-links {
    gap: 24px;
  }
}
@media (max-width: 600px) {
  .kb-header {
    z-index: 30;
    gap: 12px;
    padding: 0 20px;
    overflow-x: clip;
  }
  .kb-header .kb-brand {
    gap: 18px;
    font-size: 17px;
  }
  .kb-header .kb-monogram {
    height: 29px;
    padding-right: 20px;
    font-size: 30px;
    line-height: 30px;
    letter-spacing: -3px;
  }
  .kb-header-links {
    display: none;
  }
  .kb-menu {
    display: block;
    flex: 0 0 44px;
  }
  .kb-menu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
  }
  .kb-menu summary::-webkit-details-marker {
    display: none;
  }
  .kb-menu-lines {
    position: relative;
    display: block;
    width: 18px;
    height: 12px;
    border-top: 2px solid;
    border-bottom: 2px solid;
    box-sizing: border-box;
  }
  .kb-menu-lines::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 18px;
    border-top: 2px solid;
  }
  .kb-menu[open] .kb-menu-lines {
    height: 18px;
    border: 0;
  }
  .kb-menu[open] .kb-menu-lines::before,
  .kb-menu[open] .kb-menu-lines::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 18px;
    border-top: 2px solid;
    transform: rotate(45deg);
  }
  .kb-menu[open] .kb-menu-lines::after {
    transform: rotate(-45deg);
  }
  .kb-menu-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 20px 16px;
    border-top: 1px solid #11130f30;
    background: #ff6200;
    box-shadow: 0 12px 18px #0002;
    font:
      600 15px/1.4 "DM Sans",
      Arial,
      sans-serif;
  }
  .kb-menu-links a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 12px 0;
    box-sizing: border-box;
  }
}
@media print {
  .kb-header {
    display: none !important;
  }
}