/*
Theme Name: Elementra Child
Template: elementra
Version: 1.0.0
*/

/* =========================================================
   ELEMENTRA / TRX ADDONS MENU NOTFALL FIX
   Sorgt dafür, dass zwischen 1024–1280px kein Menü verschwindet
   und das Mobile/Burger-Menü zuverlässig angezeigt wird
   ========================================================= */

/* ---------- 1. Hamburger-Menü bis 1280px sichtbar machen ---------- */
@media (max-width: 1280px) {

  .trx-addons-hamburger-toggle.trx-addons-mobile-menu-icon{
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 32px;
    height: 32px;
  }

  .trx-addons-hamburger-toggle.trx-addons-mobile-menu-icon::before,
  .trx-addons-hamburger-toggle.trx-addons-mobile-menu-icon .trx-addons-toggle-text,
  .trx-addons-hamburger-toggle.trx-addons-mobile-menu-icon .trx-addons-toggle-close{
    content: "" !important;
    display: block !important;
    width: 28px;
    height: 3px;
    background: #111; /* Bei dunklem Header: #fff */
    border-radius: 2px;
  }

  .trx-addons-hamburger-toggle.trx-addons-mobile-menu-icon .trx-addons-toggle-text,
  .trx-addons-hamburger-toggle.trx-addons-mobile-menu-icon .trx-addons-toggle-close{
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ---------- 2. Mobile Menü Panel im Tablet-Modus erzwingen ---------- */
body[data-elementor-device-mode="tablet"] .trx_addons_menu_mobile,
body[data-elementor-device-mode="tablet"] .sc_layouts_menu_mobile {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ---------- 3. Verhindern, dass Desktop-Menü im Tablet doppelt erscheint ---------- */
@media (min-width: 1024px) and (max-width: 1280px){
  .sc_layouts_menu,
  .sc_layouts_menu_nav,
  .trx_addons_menu,
  .trx_addons_menu_nav {
    display: none !important;
  }
}


/* Blog/News Übersicht: Abstand oben zum Beitragsbild – nur Mobil */
@media (max-width: 1024px){
  .posts_container .post_item .post_featured{
    margin-top: 25px;
  }
}

/* ---------- 4. Elementor Flex-Container Fix (Menü wurde abgeschnitten) ---------- */
.e-con.e-flex > .e-con-inner {
  flex-basis: auto !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  align-content: var(--align-content) !important;
}

/* ---------- 5. Falls Mobile-Menü zu kurz ist: Scroll erlauben ---------- */
.trx_addons_menu_mobile,
.trx_addons_menu_mobile_inner,
.sc_layouts_menu_mobile,
.sc_layouts_menu_mobile_panel {
  max-height: 100vh;
  overflow-y: auto;
}


/* =========================================================
   TRX Slide Mobile Menu: Close (X) wieder sichtbar machen
   Ziel: .trx-addons-mobile-menu-close (ist im HTML leer)
   ========================================================= */

/* =========================================================
   HARD FIX: Close (X) IMMER sichtbar machen
   (Button ist klickbar aber Icon unsichtbar)
   ========================================================= */

/* Nur wenn das Slide-Menü offen ist (bei dir: .trx-addons-vertical-toggle-open) */
.trx-addons-mobile-menu-outer-container.trx-addons-vertical-toggle-open .trx-addons-mobile-menu-close{
  position: fixed !important;          /* fixed -> unabhängig von z-index Chaos */
  top: 18px !important;
  right: 18px !important;
  width: 44px !important;
  height: 44px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2147483647 !important;      /* maximal */
  pointer-events: auto !important;
  cursor: pointer !important;

  /* optional: klickfläche sichtbar machen (kannst du später entfernen) */
  /* background: rgba(255,255,255,0.35) !important; */
  /* border-radius: 10px !important; */
}

/* X zeichnen */
.trx-addons-mobile-menu-outer-container.trx-addons-vertical-toggle-open .trx-addons-mobile-menu-close::before,
.trx-addons-mobile-menu-outer-container.trx-addons-vertical-toggle-open .trx-addons-mobile-menu-close::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 28px !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: #fff !important;         /* Standard: weiß fürs Overlay */
  transform-origin: center !important;
}

.trx-addons-mobile-menu-outer-container.trx-addons-vertical-toggle-open .trx-addons-mobile-menu-close::before{
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.trx-addons-mobile-menu-outer-container.trx-addons-vertical-toggle-open .trx-addons-mobile-menu-close::after{
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Falls dein Menü-Overlay hell ist, nimm stattdessen schwarz:
   -> ändere #fff zu #111
*/