/* ==========================================================================
   CityFoundry AG — Site header

   Dark navbar taken from the client's Figma frame `startseite-v2 > navbar`:
   80px tall, ground #004045, 1px bottom hairline #BCD8DA @ 30%, logo 208x32,
   nav links DM Sans 13px uppercase, cyan pill CTA.

   The nav dropdowns and mobile drawer are OURS — the Figma has neither.
   The wide mega panel was replaced on 2026-08-31 with one plain dropdown per
   pillar (client: "simple dropdown jaise hota hai"). The pages inside each
   dropdown are the ones grouped under that pillar in sitemap.html.

   Requires: tokens.css
   Hooks used by js/header.js — do not rename:
     data-header data-nav data-dropdown data-dropdown-trigger
     data-dropdown-panel data-dropdown-close data-burger data-drawer
   ========================================================================== */

.cf-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cf-teal);
  border-bottom: 1px solid var(--cf-line-sky-30);
}

.cf-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: calc(var(--cf-shell) + var(--cf-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--cf-gutter);
  height: 80px;
}

/* --- Logo -------------------------------------------------------------- */

.cf-header__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  line-height: 0;
  border-radius: var(--cf-r-btn);
}

.cf-header__logo img {
  width: 208px;
  height: auto;
  display: block;
}

/* --- Navigation --------------------------------------------------------
   Five items. `HR professionalisieren` and `Administration reduzieren` were
   merged into `Personalprozesse verbessern` — the client's restructure.
   Kontakt sits in the right-hand group, separated from the four topic links
   exactly as the Figma does.                                              */

.cf-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

/* A pillar link plus its dropdown. `position: relative` is what the panel
   anchors to, so the panel follows the link rather than the whole navbar. */
.cf-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-nav__link {
  font-family: var(--cf-font-body);
  font-weight: 500;
  font-size: var(--cf-fs-nav);
  line-height: var(--cf-lh-nav);
  letter-spacing: var(--cf-ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cf-sky);
  white-space: nowrap;
  transition: color .2s var(--cf-ease);
}

.cf-nav__link:hover,
.cf-nav__link:focus-visible { color: var(--cf-cyan); }

/* The trigger is a flex row so the chevron sits on the text baseline. */
.cf-nav__item > .cf-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cf-nav__chev {
  flex: 0 0 auto;
  transition: transform .2s var(--cf-ease);
}

.cf-nav__item.is-open .cf-nav__chev { transform: rotate(180deg); }

/* Current page: cyan and heavier, matching the Figma's active treatment. */
.cf-nav__link[aria-current='page'] {
  font-weight: 700;
  color: var(--cf-cyan);
}

/* --- Right-hand group: Kontakt + CTA ------------------------------------ */

.cf-header__end {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 0 auto;
}

.cf-header__end .cf-nav__link { font-weight: 700; }

.cf-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 24px;
  border-radius: var(--cf-r-btn);
  background: var(--cf-cyan);
  color: var(--cf-teal);
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-label);
  line-height: var(--cf-lh-label);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s var(--cf-ease), transform .2s var(--cf-ease);
}

.cf-header__cta:hover {
  background: var(--cf-cyan-hover);
  transform: translateY(-1px);
}

.cf-header__cta-icon {
  font-size: 15px;
  transition: transform .2s var(--cf-ease);
}

.cf-header__cta:hover .cf-header__cta-icon { transform: translateX(3px); }

/* --- Burger (mobile only) ---------------------------------------------- */

.cf-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--cf-line-sky-30);
  border-radius: var(--cf-r-btn);
  background: transparent;
  color: var(--cf-sky);
  cursor: pointer;
}

.cf-header__burger:hover { color: var(--cf-cyan); border-color: var(--cf-cyan); }

.cf-header__burger-close { display: none; }
.cf-header__burger[aria-expanded='true'] .cf-header__burger-open { display: none; }
.cf-header__burger[aria-expanded='true'] .cf-header__burger-close { display: block; }
.cf-header__burger[aria-expanded='true'] { color: var(--cf-cyan); border-color: var(--cf-cyan); }

/* ==========================================================================
   NAV DROPDOWN — ours, not in the Figma.
   One plain panel per pillar, holding the pages that pillar groups in
   sitemap.html. Replaced the three-column mega panel on 2026-08-31.

   Visibility is driven by `.is-open` from js/header.js rather than by
   :hover alone, for two reasons: aria-expanded has to track it, and a
   keyboard user has to be able to Tab into the panel — which a
   hover-only panel never allows.
   ========================================================================== */

.cf-dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: -14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 268px;
  padding: 8px;
  border: 1px solid var(--cf-line-sky-30);
  border-radius: var(--cf-r-card);
  background: var(--cf-teal-2);
  box-shadow: 0 18px 40px rgb(var(--cf-teal-rgb) / .32);
  /* Closed state. `visibility` (not `display`) keeps the transition, and it
     also takes the links out of the tab order — the bug the drawer had. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s var(--cf-ease), transform .18s var(--cf-ease),
              visibility .18s var(--cf-ease);
}

/* The gap between the link and the panel would drop the hover; this bridges
   it so a diagonal mouse move does not close the panel. */
.cf-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}

.cf-nav__item.is-open .cf-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.cf-dropdown__link {
  padding: 11px 14px;
  border-radius: var(--cf-r-inner);
  font-family: var(--cf-font-body);
  font-weight: 500;
  font-size: var(--cf-fs-body-sm);
  line-height: var(--cf-lh-label);
  color: var(--cf-white);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s var(--cf-ease), color .18s var(--cf-ease);
}

.cf-dropdown__link:hover,
.cf-dropdown__link:focus-visible {
  background: rgb(var(--cf-white-rgb) / .07);
  color: var(--cf-cyan);
}

.cf-dropdown__link[aria-current='page'] {
  font-weight: 700;
  color: var(--cf-cyan);
}

/* ==========================================================================
   MOBILE DRAWER — ours. The Figma has no mobile design at all.
   ========================================================================== */

/* ==========================================================================
   OFF-CANVAS PANEL
   The previous drawer expanded inside the header, which pushed the whole page
   down. This one is fixed above the page and slides in from the right, so
   nothing below it moves.

   `hidden` is kept for the no-JS case; JS marks the document (js-drawer) and
   toggles .is-open so the panel can transition.
   ========================================================================== */

.cf-drawer__scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgb(var(--cf-ink-rgb) / .55);
  backdrop-filter: blur(2px);
}

.cf-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 80;
  width: min(370px, 88vw);
  height: 100dvh;
  /* The panel is its own scroll container: header pinned, links scroll,
     CTA pinned at the bottom. */
  display: none;
  flex-direction: column;
  background: var(--cf-teal);
  border-left: 1px solid var(--cf-line-sky-30);
  box-shadow: -24px 0 60px rgb(var(--cf-ink-rgb) / .35);
}

html.js-drawer .cf-drawer,
html.js-drawer .cf-drawer__scrim { display: flex; }

html.js-drawer .cf-drawer[hidden] {
  display: flex !important;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .38s var(--cf-ease), visibility 0s linear .38s;
}

html.js-drawer .cf-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .38s var(--cf-ease), visibility 0s;
}

html.js-drawer .cf-drawer__scrim[hidden] {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--cf-ease), visibility 0s linear .3s;
}

html.js-drawer .cf-drawer__scrim.is-open {
  display: block !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s var(--cf-ease), visibility 0s;
}

/* The page must not scroll behind an open panel. */
html.is-drawer-open,
html.is-drawer-open body { overflow: hidden; }

/* --- Panel top: logo + close ------------------------------------------- */

.cf-drawer__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--cf-gutter-sm);
  border-bottom: 1px solid var(--cf-line-sky-30);
}

.cf-drawer__logo { width: 164px; height: auto; display: block; }

.cf-drawer__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--cf-line-sky-30);
  border-radius: var(--cf-r-btn);
  background: transparent;
  color: var(--cf-sky);
  cursor: pointer;
  transition: color .2s var(--cf-ease), border-color .2s var(--cf-ease);
}

.cf-drawer__close:hover { color: var(--cf-cyan); border-color: var(--cf-cyan); }

/* --- Panel body: the links -------------------------------------------- */

.cf-drawer__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 8px var(--cf-gutter-sm);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cf-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cf-line-light-10);
  font-family: var(--cf-font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  color: var(--cf-white);
  text-decoration: none;
  transition: color .2s var(--cf-ease);
}

.cf-drawer__link:last-child { border-bottom: 0; }

.cf-drawer__link:hover,
.cf-drawer__link:focus-visible { color: var(--cf-cyan); }

.cf-drawer__chev {
  flex: 0 0 auto;
  color: var(--cf-sky);
  font-size: 15px;
  transition: transform .2s var(--cf-ease), color .2s var(--cf-ease);
}

.cf-drawer__link:hover .cf-drawer__chev {
  color: var(--cf-cyan);
  transform: translateX(4px);
}

/* --- Panel foot: CTA -------------------------------------------------- */

.cf-drawer__foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px var(--cf-gutter-sm) 28px;
  border-top: 1px solid var(--cf-line-sky-30);
}

.cf-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: var(--cf-r-btn);
  background: var(--cf-cyan);
  color: var(--cf-teal);
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-label);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.cf-drawer__mail {
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-nav);
  color: var(--cf-sky);
  text-decoration: none;
}

.cf-drawer__mail:hover { color: var(--cf-cyan); }

@media (prefers-reduced-motion: reduce) {
  html.js-drawer .cf-drawer,
  html.js-drawer .cf-drawer[hidden],
  html.js-drawer .cf-drawer.is-open,
  html.js-drawer .cf-drawer__scrim,
  html.js-drawer .cf-drawer__scrim[hidden],
  html.js-drawer .cf-drawer__scrim.is-open,
  .cf-drawer__chev,
  .cf-drawer__link,
  .cf-drawer__close { transition: none; }

  .cf-drawer__link:hover .cf-drawer__chev { transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   The German labels are long — `PERSONALPROZESSE VERBESSERN` is 27
   characters — so the horizontal nav is dropped earlier than usual.
   ========================================================================== */

@media (max-width: 1439px) {
  .cf-header__inner { padding-left: var(--cf-gutter-md); padding-right: var(--cf-gutter-md); }
}

@media (max-width: 1319px) {
  .cf-nav { gap: 20px; }
  .cf-header__inner { gap: 20px; }
}

/* The horizontal nav has to go earlier than usual. Five uppercase German
   labels — `PERSONALPROZESSE VERBESSERN` alone is 27 characters — stop fitting
   alongside the logo and the CTA at about 1250px, and because the links are
   nowrap they push the CTA off the edge rather than wrapping. Measured, not
   guessed: at 1024px the end group overflowed by 76px. */
@media (max-width: 1249px) {
  .cf-nav,
  .cf-header__end .cf-nav__link { display: none; }
  .cf-header__burger { display: inline-flex; }
  /* The off-canvas panel is fixed and only reachable from the burger, so it
     never needs to appear above this breakpoint. */
  .cf-header__inner { gap: 16px; justify-content: space-between; }
  .cf-header__end { margin-left: auto; }
  /* The dropdowns sit inside .cf-nav, which is hidden here, so they need no
     rule of their own — the drawer covers the same ground on a phone. */
}

@media (max-width: 767px) {
  .cf-header__inner { padding: 0 var(--cf-gutter-sm); height: 68px; gap: 12px; }
  .cf-header__logo img { width: 150px; }
  .cf-header__end { gap: 10px; }
  /* The booking pill moves into the drawer, where it is the first item —
     three controls in a 320px bar was too tight. */
  .cf-header__cta { display: none; }
}

@media (max-width: 359px) {
  .cf-header__logo img { width: 128px; }
}

@media (prefers-reduced-motion: reduce) {

  .cf-header__cta,
  .cf-header__cta-icon,
  .cf-nav__chev,
  .cf-dropdown,
  .cf-dropdown__link,
  .cf-nav__link { transition: none; }

  .cf-header__cta:hover { transform: none; }
  .cf-nav__item.is-open .cf-dropdown { transform: none; }
}