/* HYGH custom site-wide overrides.
   Injected via <link rel="stylesheet" href="/hygh-custom.css"> on every page. */

/* =========================================================================
   Slim header — collapse the 3-row Elementor header (logo / actions / nav)
   into a single horizontal bar on tablet + desktop.
   ========================================================================= */
@media (min-width: 768px) {
  header.elementor-element-24aaf73 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 28px !important;
    padding: 6px 28px !important;
    min-height: 56px !important;
    height: 56px !important;
  }

  header.elementor-element-24aaf73 > .e-con-full {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    min-height: 0 !important;
    align-items: center !important;
  }

  /* Logo on the far left */
  header.elementor-element-24aaf73 > .elementor-element-9463954 {
    order: 1 !important;
    flex: 0 0 auto !important;
  }
  /* Logo: height ≈ header_height / 3 → safespace top = safespace bottom = logo height */
  header.elementor-element-24aaf73 .elementor-element-172723d img {
    height: 18px !important;
    width: auto !important;
  }

  /* Main nav in the middle (only visible from desktop ≥1025px) */
  header.elementor-element-24aaf73 > .elementor-element-a90f2ce {
    order: 2 !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
  }
  header.elementor-element-24aaf73 .elementor-nav-menu--main .elementor-nav-menu {
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  header.elementor-element-24aaf73 .elementor-nav-menu .elementor-item {
    padding: 8px 10px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Right cluster — only EN switcher remains. Kontakt + Anmelden + "|" removed. */
  header.elementor-element-24aaf73 > .elementor-element-1f94c79 {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    gap: 10px !important;
  }
  header.elementor-element-24aaf73 .elementor-element-0e22675,   /* Kontakt button */
  header.elementor-element-24aaf73 .elementor-element-ced7d82,   /* Anmelden button */
  header.elementor-element-24aaf73 .elementor-element-500a47a {  /* "|" separator */
    display: none !important;
  }

  /* Reveal buttons immediately — defeat Elementor's invisible-until-animation guard */
  header.elementor-element-24aaf73 .elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

/* On tablet (768–1024px) there is no desktop nav widget shown anyway —
   keep logo on the left and Kontakt/Anmelden/EN on the right. */
@media (min-width: 768px) and (max-width: 1024px) {
  header.elementor-element-24aaf73 > .elementor-element-1f94c79 {
    margin-left: auto !important;
  }
}

/* =========================================================================
   /werben/ — hide the "Content is King" hero (Elementor section 96e070a,
   an empty container whose background image carries the rasterized text).
   ========================================================================= */
.elementor-element-96e070a {
  display: none !important;
}

/* =========================================================================
   Homepage hero — full-bleed looping background video.
   The fixed slim header floats transparently on top while the user is at
   the top of the page; once scrolled past the hero, the header gets its
   solid black background back (toggled by inline JS in index.html).
   ========================================================================= */
.hygh-video-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  /* WP/Elementor leaves a ~29px line-box spacer above the page wrapper on
     home — pull the hero up so the video starts flush at viewport top. */
  margin-top: -29px;
}

.hygh-video-hero > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Headline overlay — large white type, one word per line, left-anchored
   roughly at the vertical midpoint of the hero (matches the original
   "For Brands that Turn Cities into Stories." placement). */
.hygh-hero-headline {
  position: absolute;
  left: clamp(20px, 4vw, 80px);
  top: 12%;
  z-index: 3;
  color: #fff;
  font-family: "HYGH Sans", "hello-elementor", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  pointer-events: none;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hygh-hero-headline span {
  display: block;
}

/* Subtle top-down darkening so the white logo + menu stay legible
   no matter what frame of the video is showing. */
.hygh-video-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0,
    rgba(0, 0, 0, 0) 240px
  );
  pointer-events: none;
  z-index: 1;
}

/* When the .home page is at the top, make the slim header transparent
   so the video shows through it (the gradient above handles legibility). */
body.home header.elementor-element-24aaf73.hygh-header-on-hero {
  background: transparent !important;
}

/* Collapse the Elementor "location-header" outer wrapper on the homepage,
   otherwise it occupies ~28px of layout above the hero (the inner header
   is position:fixed so the wrapper just becomes a useless spacer). */
body.home > header.elementor.elementor-location-header {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}