/*
 * Nav bar — SD-57
 * Figma: Startseite closed state (node 6309-80199 → instance 6309:80212),
 * full spec sheet node 6361-114332 ("Nav Bar"), Menü (node 7105-64997).
 * Closed state is a white pill (service/language links + search trigger)
 * with a separate solid-black "Menü" button inset at its end, plus an
 * optional CTA pill (.dk-navbar-cta, same visual as menu.css .dk-menu__cta)
 * to its left — at most one CTA active at a time (SD-120 revision).
 * Every row (pill + button + CTA) is a fixed 44px tall, centered by flex —
 * not padding-driven — per the spec sheet.
 * Below M (1024px) the service/language/search pill and the CTA disappear
 * entirely; only the black "Menü" button remains (those controls only
 * reappear inside the open menu, see menu.php).
 */

/* Header stays visible while scrolling (Figma: closed pill is always
   reachable, not just at page top). `fixed`, not `sticky` — `html, body`
   carry `overflow-x: hidden` (basic.css) which breaks `position: sticky`
   (body never scrolls itself once overflow is propagated to the viewport,
   so it never counts as "stuck"). It floats over content (no reserved
   layout space) — same as the fixed logo — rather than pushing the page
   down, since the menu it controls is a full-screen overlay whether the
   header is on top of a hero image or plain content. */
.dk-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 90;
}

/* Distance to the browser edge (Figma "Abstände Browserrand" note frame):
   16px/1rem at S/M, 20px/1.25rem at L — plus safe-area inset so the pill
   never sits under a notch/rounded corner. */
.dk-navbar {
  display: flex;
  align-items: center;
  gap: var(--dk-space-03);
  justify-content: flex-end;
  padding-block-start: calc(1rem + env(safe-area-inset-top, 0px));
  padding-inline-end: calc(1rem + env(safe-area-inset-right, 0px));
}

@media (min-width: 1280px) {
  .dk-navbar {
    padding-block-start: calc(1.25rem + env(safe-area-inset-top, 0px));
    padding-inline-end: calc(1.25rem + env(safe-area-inset-right, 0px));
  }
}

.dk-navbar-pill {
  display: flex;
  align-items: center;
  gap: var(--dk-space-03);
  border-radius: 999px;
  background-color: var(--dk-color-white);
  border: 1px solid var(--dk-color-black);
  color: var(--dk-color-black);
  padding-inline-start: var(--dk-space-01);
}

.dk-navbar-items {
  display: none;
  align-items: center;
}

@media (min-width: 64rem) {
  .dk-navbar-items {
    display: flex;
  }
}

/* Optional CTA — same visual component as the open menu's primary CTA
   (menu.css .dk-menu__cta). Hidden below M, same breakpoint as
   .dk-navbar-items — below that it only appears in the open menu. */
.dk-navbar-cta {
  display: none;
  align-items: center;
  block-size: 2.75rem;
  padding-inline: var(--dk-space-04);
  border: 1px solid var(--dk-color-black);
  border-radius: 999px;
  background-color: var(--dk-color-brand-primary);
  color: var(--dk-color-black);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

@media (min-width: 64rem) {
  .dk-navbar-cta {
    display: inline-flex;
  }
}

.dk-navbar-cta-text {
  line-height: 1.2;
}

.dk-navbar-cta:hover,
.dk-navbar-cta:active {
  background-color: var(--dk-color-white);
}

.dk-navbar-cta:hover .dk-navbar-cta-text,
.dk-navbar-cta:active .dk-navbar-cta-text {
  text-decoration: underline;
}

.dk-navbar-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dk-color-black), 0 0 0 4px var(--dk-color-white), 0 0 0 8px var(--dk-color-focus);
}

/* Below S (1024px): only the black "Menü" button remains — the white service pill
   has nothing left to wrap, so its own background/border must go too. */
@media (max-width: 63.9375rem) {
  .dk-navbar-pill {
    background-color: transparent;
    border: none;
    padding-inline-start: 0;
  }

  .dk-navbar-pill .dk-search-button:hover,
  .dk-navbar-pill .dk-search-button:active {
    background-color: var(--dk-color-black);
  }
}

/* Menu toggle button — own solid-black pill inset in the white bar. Fixed
   block-size (not min + padding-block), centered by flex, per Figma. */
.dk-navbar-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 2.75rem;   /* 44px */
  inline-size: 145px;    /* fixed width — matches Schließen button so nav doesn't shift */
  padding-inline: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background-color: var(--dk-color-black);
  color: var(--dk-color-white);
  font-weight: var(--dk-font-weight-bold, 700);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dk-navbar-menu-label { line-height: 1.2; }

.dk-navbar-menu:hover,
.dk-navbar-menu:active,
.dk-navbar-menu[aria-expanded="true"] {
  background-color: var(--dk-color-brand-secondary-01);
  color: var(--dk-color-black);
}

.dk-navbar-menu:hover {
  border-color: var(--dk-color-black);
}

.dk-navbar-menu:focus-visible,
.dk-navbar-service:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--dk-color-black),
    0 0 0 4px var(--dk-color-white),
    0 0 0 8px var(--dk-color-focus);
}

/* Service / language link — plain text on the shared pill background */
.dk-navbar-service {
  display: inline-flex;
  align-items: center;
  block-size: 2.75rem;
  padding-inline: var(--dk-space-02);
  border-radius: 999px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.2s ease;
}

.dk-navbar-service:hover,
.dk-navbar-service:active {
  text-decoration-color: currentColor;
}

/* The search trigger sits inside the merged pill: strip its own pill look */
.dk-navbar-pill .dk-search-button {
  block-size: 2.75rem;
  padding-inline: var(--dk-space-02);
  background-color: transparent;
  color: inherit;
}

.dk-navbar-pill .dk-search-button {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.2s ease;
}

.dk-navbar-pill .dk-search-button:hover,
.dk-navbar-pill .dk-search-button:active {
  background-color: transparent;
  text-decoration-color: currentColor;
}

/* The shared search-button component defaults its label to UI M — both here
   and in the open menu's bar (menu.css .dk-menu__services) Figma specifies
   UI S, matching the other service/language links next to it. */
.dk-navbar-pill .dk-search-button-text {
  font-size: var(--dk-text-ui-s-size);
  font-weight: var(--dk-text-ui-s-weight);
}

@media (prefers-reduced-motion: reduce) {
  .dk-navbar-menu,
  .dk-navbar-cta {
    transition: none;
  }
}