/* ==========================================================================
   GLOBAL HEADER + NAV MENU
   Fixed, tranparent header that overlays whatever section sits at the
   top of the page (usually the hero). The full-page menu overlay it
   triggers lives in this same file since the two share state (JS toggles
   `is-menu-open` on <body>). Built on the tokens in global-styles.css —
   no new colors/type introduced here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADER BAR
   -------------------------------------------------------------------------- */

.site-header {
  /* Header padding lives in variables so the fixed actions (below) can
     line up exactly with where they'd sit inside the bar. */
  --header-pad-block: 32px; /* slimmer than the 160px section padding — adjust once confirmed */
  --header-pad-inline: 50px;

  /* Mobile: the whole header (logo, dots, bar) stays fixed on top. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* stays above .site-menu so the trigger button remains clickable to close it */
  background: transparent; /* seamless — sits on top of whatever section is behind it */
  padding-block: var(--header-pad-block);
  padding-inline: var(--header-pad-inline);
}

/* Desktop: the logo slides out of view while scrolling down and slides
   back in while scrolling up. assets/js/header-scroll.js toggles
   .is-logo-hidden on the header. The dots + pill always stay visible. */
@media (min-width: 769px) {
  /* The header box spans the full width, so let clicks pass through its
     empty area to the page below; only the logo and actions catch them. */
  .site-header {
    pointer-events: none;
  }

  .site-header__logo img,
  .site-header__actions {
    pointer-events: auto;
  }

  .site-header__logo img {
    transition: transform 0.4s ease, opacity 0.4s ease;
  }

  .site-header.is-logo-hidden .site-header__logo img {
    transform: translateY(calc(-100% - var(--header-pad-block)));
    opacity: 0;
    pointer-events: none;
  }

  /* While the menu overlay is open the logo (= home link) is always
     visible, no matter how the page was scrolled. */
  body.is-menu-open .site-header.is-logo-hidden .site-header__logo img {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}

.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.site-header__logo img {
  display: block;
  max-width: 360px; /* placeholder — adjust to real logo proportions */
  width: 100%;
  height: auto;
}

.site-header__actions {
  /* Sticky part of the header: always visible while scrolling. */
  position: fixed;
  top: var(--header-pad-block);
  right: var(--header-pad-inline);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.site-menu__list .sub-menu {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-menu__list .sub-menu a {
  padding-left: 60px;
}

.site-menu__list .sub-menu a:hover {
  opacity: 1;
  color: var(--color-blue);
  transition: 0.7s;
}

.site-header__logo{
  display: contents;
}


/* --------------------------------------------------------------------------
   2. MENU TRIGGER (three dots <-> close)
   -------------------------------------------------------------------------- */

.menu-trigger {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-trigger__dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s ease;
}

.menu-trigger__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-red);
  box-shadow: 2px 1px 4px var(--color-bordeaux);
}


body.is-menu-open .menu-trigger__dots {
  opacity: 1;
}

body.is-menu-open .menu-trigger__close {
  opacity: 0;
}

/* Menu overlay already provides its own solid background (.site-menu),
   so the header's mobile background-color would just double up behind
   it — drop it back to transparent while the overlay is open. */
body.is-menu-open .site-header {
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   3. PILL BUTTON ("Mitglied werden")
   Shared between the header and the menu overlay.
   -------------------------------------------------------------------------- */

.btn--pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  border: 1.5px solid currentColor;
  padding: 5px 10px;
  font-family: var(--font-body);
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
  transform: translateX(10px) translatey(-45px) rotate(-90deg);
  font-size: 18px;
  transform-origin: right bottom;
}

.btn--pill2{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  border: 1.5px solid currentColor;
  padding: 5px 25px;
  font-family: var(--font-body);
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-size: 26px;
  font-style: italic;
  background: none;

}

.btn--pill2:hover {
  color: var(--color-blue);
  transition: 0.3s;
}

.btn--pill:hover {
  color: var(--color-blue);
  transition: 0.3s;
}

/* --------------------------------------------------------------------------
   4. MENU OVERLAY
   -------------------------------------------------------------------------- */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  background-color: var(--color-flieder);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

body.is-menu-open .site-menu {
  opacity: 1;
  visibility: visible;
}

.site-menu__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  width: 100%;
  padding-inline: var(--container-padding-inline);
  padding-block: var(--container-padding-block);
  transition: opacity 0.7s ease; /* language switch: dim while the page reloads */
}

html.is-translating .site-menu__row {
  opacity: 0.3;
}

.site-menu__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.site-menu__links{
  padding-left: 20vh;
}

.site-menu__col.site-menu__meta{
  align-items: baseline;
}

/* Left column: nav links (7 items, editable in Appearance > Menus) */

.site-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-menu__list a {
  font-family: var(--font-body);
  font-size: var(--text-menu-size);
  line-height: var(--text-menu-line-height);
  font-weight: var(--text-menu-weight);
  color: var(--color-white);
  text-decoration: none;
}

.site-menu__list a:hover {
  color: var(--color-blue);
  transition: 0.7s;
}

/* Right column: CTA, LinkedIn, language switch */

.site-menu__meta {
  align-items: flex-end;
  gap: 32px;
}

.site-menu__linkedin {
  color: var(--color-white);
  line-height: 0;
}

.site-menu__linkedin svg {
  width: 60px;
  height: 60px;
  display: block;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  color: var(--color-white);
}

.lang-switch__item {
  color: var(--color-white);
  text-decoration: none;
  opacity: 0.6;
  font-family: var(--font-body);
  font-size: var(--text-p-size);
}

.lang-switch__item.is-active {
  opacity: 1;
  font-weight: 400;
  font-family: var(--font-body);
  font-size: var(--text-p-size);
}

.lang-switch__sep {
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE (mobile defaults — confirm exact breakpoint/values later)
   -------------------------------------------------------------------------- */
@media (max-width: 1140px){
  .site-menu__links{
    padding-left:0;
  }
}
@media (max-width: 768px) {
  .site-header {
    --header-pad-inline: var(--container-padding-inline-mobile);
    --header-pad-block: 10px;
    background-color: var(--color-bordeaux);
  }

  .site-header__logo img {
    max-width: 210px;
    margin-left: -5px;
  }

  /* Push the page's first section down clear of the fixed header, now
     that it has a solid mobile background instead of sitting transparent
     over the content. Hero sections are excluded — the header is meant
     to overlay them, same as on desktop. */
  main > .section:first-of-type:not(.section--hero),
  body > .firmen-grid:first-of-type,
  body > section.container:first-of-type {
    margin-top: 60px; /* approx. mobile header height — adjust if the logo/padding changes */
  }


  .btn--pill{
    display: none;
  }
  .btn--pill2{
   padding: 5px 25px; 
   font-size: 18px;

  } 

  .site-menu__links{
   padding: 20vh 0 0 0;
  }


  .site-menu__row {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-inline: var(--container-padding-inline-mobile);
    padding-block: var(--container-padding-block-mobile);
  }

  .site-menu__meta {
    align-items: flex-start;
  }
}