/* ============================================================
   Component: Header & Navigation (header.css)
   BEM Notation: block_element--modifier
   Matched to Figma Aufait UX Header (height: 92px, padding: 12px 68px)
   ============================================================ */

.header {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  z-index: 10;
  background-color: transparent;
}

.header_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px 16px;
}

@media (min-width: 768px) {
  .header_container {
    min-height: var(--header-height);
    padding: 12px 24px;
  }
}

@media (min-width: 992px) {
  .header_container {
    padding: 12px 68px;
  }
}


/* Header outside hero card (Desktop for Embedding & Self-org pages) */
@media (min-width: 768px) {
  main > .header,
  .page_wrapper > .header {
    width: calc(100% - 24px);
    max-width: 1414px;
    margin: 13px auto 0;
    box-sizing: border-box;
  }
}



/* Brand / Logo */
.header_brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.header_logo {
  width: 76px;
  height: 48px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .header_logo {
    width: 109px;
    height: 68px;
  }
}

/* Desktop Navigation Menu */
.header_nav {
  display: none;
}

@media (min-width: 900px) {
  .header_nav {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 32px;
  }
}

.header_menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header_link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 16px;
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out-smooth);
}

.header_link:hover {
  color: var(--color-primary);
}

.header_link.is-active,
.header_link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* Header Actions & CTA Pill Button */
.header_actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 900px) {
  .header_actions {
    gap: 16px;
  }
}

.header_actions .header_cta {
  display: none;
}

@media (min-width: 900px) {
  .header_actions .header_cta {
    display: inline-flex;
  }
}

/* ============================================================
   Language Selector Component
   ============================================================ */
.header_lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header_lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: var(--radius-full, 9999px);
  padding: 4px;
  padding-right: 8px;
  color: #000000AB;
  font-family: var(--font-family-base, 'Google Sans', sans-serif);
  font-size: 14px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color var(--duration-fast, 180ms) ease,
              box-shadow var(--duration-fast, 180ms) ease;
}

.header_lang-btn:hover {
  border-color: #BDBDBD;
}

.header_lang-btn:focus-visible {
  outline: 2px solid var(--color-primary, #834AE0);
  outline-offset: 2px;
}

/* Instant Zero-Flash Language Pairs */
.header_lang-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.header_lang-current--en {
  display: inline-flex;
}

.header_lang-current--nl {
  display: none;
}

html[data-lang="nl"] .header_lang-current--en {
  display: none;
}

html[data-lang="nl"] .header_lang-current--nl {
  display: inline-flex;
}

.header_lang-flag {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  pointer-events: none;
}

.header_lang-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: var(--font-weight-medium, 500);
  color: #000000AB;
  line-height: 1;
  pointer-events: none;
}

/* Dropdown Menu */
.header_lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 104px;
  background-color: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 4px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: var(--z-modal, 200);
}

.header_lang-menu.is-open {
  display: flex;
  animation: headerLangFadeIn 150ms ease-out forwards;
}

@keyframes headerLangFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header_lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #000000AB;
  font-family: var(--font-family-base, 'Google Sans', sans-serif);
  font-size: 14px;
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--duration-fast, 180ms) ease;
}

.header_lang-option:hover {
  background-color: #F5F5F7;
  color: var(--color-text-primary, #020101);
}

/* Dropdown active states synced with html[data-lang] */
html:not([data-lang="nl"]) .header_lang-option[data-lang="en"],
html[data-lang="en"] .header_lang-option[data-lang="en"],
html[data-lang="nl"] .header_lang-option[data-lang="nl"] {
  background-color: #F1ECFC;
  color: var(--color-primary, #834AE0);
  font-weight: var(--font-weight-semibold, 600);
}

html[data-lang="nl"] .header_lang-option[data-lang="en"] {
  background-color: transparent;
  color: #000000AB;
  font-weight: var(--font-weight-medium, 500);
}

.header_lang-option-flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  pointer-events: none;
}



.header_cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  min-width: 186px;
  padding: 12px 24px;
  font-size: var(--font-size-nav-btn);
  font-weight: var(--font-weight-medium);
  color: var(--color-surface);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-out-smooth),
    transform var(--duration-fast) var(--ease-out-smooth);
}

.header_cta:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
}

.header_cta:active {
  transform: translateY(0);
}

/* Mobile Menu Toggle Button */
.header_toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  z-index: var(--z-modal);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: opacity var(--duration-fast) var(--ease-out-smooth);
}

.header_toggle:hover {
  opacity: 0.8;
}

@media (min-width: 900px) {
  .header_toggle {
    display: none;
  }
}

.header_toggle-icon,
.header_toggle-close {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out-smooth),
    opacity var(--duration-base) var(--ease-out-smooth);
}

.header_toggle-close {
  display: none;
}

.header_toggle--active .header_toggle-icon {
  display: none;
}

.header_toggle--active .header_toggle-close {
  display: block;
}

/* Mobile Drawer Overlay */
.header_overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out-smooth),
    visibility var(--duration-base) var(--ease-out-smooth);
}

.header_overlay--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (min-width: 900px) {
  .header_overlay {
    display: none;
  }
}

/* ============================================================
   Mobile Drawer Navigation (Slide-in from Right)
   ============================================================ */
.header_drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: var(--color-surface, #FFFFFF);
  z-index: var(--z-modal, 200);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header_drawer--open {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

@media (min-width: 900px) {
  .header_drawer {
    display: none;
  }
}

/* Header bar inside full-screen drawer — matches page header: padding 12px 16px, min-height 72px */
.header_drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 72px;
  padding: 12px 16px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.header_drawer-header .header_brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.header_drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: var(--space-xs);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-primary, #020101);
  border-radius: var(--radius-sm);
  transition: opacity var(--duration-fast) var(--ease-out-smooth);
}

.header_drawer-close svg {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.header_drawer-close:hover {
  opacity: 0.7;
}

/* Body with nav links positioned at top */
.header_drawer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 36px 24px 0 24px;
  box-sizing: border-box;
}

.header_drawer-nav {
  width: 100%;
}

.header_drawer-menu {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header_drawer-item {
  margin: 0;
  padding: 0;
}

.header_drawer-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading, 'Google Sans', sans-serif);
  font-size: 20px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.3;
  color: var(--color-text-primary, #020101);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-smooth);
}

.header_drawer-link:hover,
.header_drawer-link:focus-visible {
  color: var(--color-primary);
}

.header_drawer-link.is-active,
.header_drawer-link[aria-current="page"] {
  color: var(--color-primary, #7B4CE4);
  font-weight: var(--font-weight-semibold, 600);
}

/* Bottom CTA inside drawer */
.header_drawer-actions {
  display: flex;
  flex-direction: column;
  padding: 16px 20px calc(28px + env(safe-area-inset-bottom, 16px));
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.header_drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 24px;
  font-family: var(--font-heading, 'Google Sans', sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-surface, #FFFFFF);
  background-color: var(--color-primary, #7B4CE4);
  border-radius: var(--radius-full, 9999px);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out-smooth);
}

.header_drawer-cta:hover {
  background-color: var(--color-primary-hover, #693bc9);
}