/* Hoftalblick: site-specific overrides */

/* Instagram logo link next to the "Angebote" menu item */

/* Desktop header navigation: keep logo inline and prevent it from behaving like a full menu item */
#header nav.dropmenu ul > li.nav-item-angebote {
  display: inline-flex;
  align-items: center;
}


#header nav.dropmenu ul > li.nav-item-angebote > a.instagram-menu-link {
  display: inline-flex;
  align-items: center;
  padding: 0 !important;
  margin-left: 0.35rem;
  line-height: 1;
  background: transparent !important;
}

#header nav.dropmenu ul > li.nav-item-angebote > a.instagram-menu-link:hover {
  opacity: 0.9;
}

/* Prevent the instagram link from showing the dropdown caret/pseudo-element */
#header nav.dropmenu ul > li.nav-item-angebote > a.instagram-menu-link::after,
#header nav.dropmenu ul > li.nav-item-angebote > a.instagram-menu-link::before {
  content: none !important;
  display: none !important;
}

#header nav.dropmenu ul > li.nav-item-angebote img.instagram-menu-logo {
  height: 11px;
  max-height: 13px;
  width: auto;
  display: block;
}

.mobile-container .overlay-menu li.nav-item-angebote {
  /* keep default treemenu/list behavior so indentation and toggler work the same
     as other items */
  display: list-item;
}

.mobile-container .overlay-menu li.nav-item-angebote > a.instagram-menu-link {
  display: block !important;
  padding: 0.25rem 0 !important;
  margin-left: 1.2rem; /* match .treemenu li a */
  line-height: 1;
}

.mobile-container .overlay-menu li.nav-item-angebote > a.instagram-menu-link::after,
.mobile-container .overlay-menu li.nav-item-angebote > a.instagram-menu-link::before {
  content: none !important;
  display: none !important;
}

.mobile-container .overlay-menu li.nav-item-angebote img.instagram-menu-logo {
  height: 22px;
  max-height: 24px;
  width: auto;
  display: block;
}

/* Footer Instagram logo: slightly larger and keep aspect ratio */
#footer img[alt="Instagram"] {
  height: 28px !important;
  max-height: 32px !important;
  width: auto !important;
  display: block;
}

@media (max-width: 640px) {
  #footer img[alt="Instagram"] {
    height: 22px !important;
    max-height: 24px !important;
  }
}

/* Mobile-only Instagram menu item */
.mobile-instagram-item {
  display: none;
}

@media (max-width: 900px) {
  .mobile-instagram-item {
    display: block;
    margin-top: 0.5rem;
  }
  .mobile-instagram-item > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem;
  }
  .mobile-instagram-item img.instagram-menu-logo {
    height: 42px;
    max-height: 45px;
    width: auto;
    display: block;
  }
}

/* When mobile nav is open, hide prominent hero/intro content behind the overlay */
/* When mobile nav is open: prevent page scroll and ensure overlay fully covers viewport
   so the hero remains in place beneath the overlay (no visual jump). */
body.mobile-nav-open {
  overflow: hidden;
}

/* Ensure the mobile overlay always covers the viewport and sits above hero content */
#overlay, .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 99999;
  background: rgba(0,0,0,0.95);
}

#overlay.open, .overlay.open, body.mobile-nav-open #overlay, body.mobile-nav-open .overlay {
  display: block;
}

/* Make sure overlay's inner menu can scroll if tall */
#overlay .overlay-menu, .overlay.open .overlay-menu {
  max-height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 100000;
}

/* While mobile nav is open, keep the hero visually and interactively underneath the overlay */
body.mobile-nav-open #startseite,
body.mobile-nav-open #startseite *,
body.mobile-nav-open .hero,
body.mobile-nav-open .hero * {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Standalone header custom logo (independent element) */
.header-custom-logo-wrapper {
  display: inline-flex;
  align-items: center;
  margin-left: 0.75rem;
}

.header-custom-logo-link {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem;
}

.header-custom-logo {
  height: 28px;
  max-height: 28px;
  width: auto;
  display: block;
}

@media (max-width: 640px) {
  .header-custom-logo {
    height: 16px;
    max-height: 18px;
  }
}

#header .navbar-brand img,
#header .navbar-brand img.site-logo {
  height: 54px;
  max-height: 60px;
  width: auto;
  display: block;
}

/* Center website logo in mobile header */
@media (max-width: 640px) {
  .mobile-container .mobile-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  .mobile-container .mobile-logo .navbar-brand {
    width: 100% !important;
    justify-content: center !important;
    margin-right: 0 !important;
    gap: 0 !important;
  }
  .mobile-container .mobile-logo img,
  .mobile-container .mobile-logo .header-custom-logo {
    margin: 0 !important;
    display: block !important;
  }
}

/* Force contact links to site green (including Instagram link in #kontakt) */
#kontakt a,
#kontakt a:visited,
.text-gray-600 a,
.text-gray-600 a:visited {
  color: #62b91e !important;
}
#kontakt a:hover,
#kontakt a:focus,
.text-gray-600 a:hover,
.text-gray-600 a:focus {
  color: #3da718 !important;
}