/* =========================================================================
   JWH Mobile Improvements  –  just-whisky-hamburg.de
   Lädt NACH Elementor. Greift nur auf Mobil/Tablet (<=1024px).
   Reversibel: mu-plugins/jwh-mobile-loader.php + mu-plugins/jwh-mobile/ löschen.
   ========================================================================= */

/* Marken-Farben (aus Elementor-Kit):
   navy #004070 · rot #E52D35 · papier #EBE9DA · weiß #FFFFFF            */

/* =========================================================================
   A) SOCIAL-ICONS im Header überall entfernen (Widget bleibt im Backend)
   ------------------------------------------------------------------------- */
.elementor-location-header .elementor-widget-social-icons,
.elementor-location-header .elementor-element-dcb168e {   /* auch die leere Hülle entfernen */
  display: none !important;
}

/* =========================================================================
   B) MOBILER KOPFBEREICH – kompakte Top-Bar (<=1024px)
   -------------------------------------------------------------------------
   Struktur:  #78aa152 [ #1554ee5=Logo | #3b5d64c[ #4a6cc77(Datum,Button) |
              #d1f2424=Burger ] ]
   Ziel:      Logo klein links · Burger oben rechts · Datum+Button kompakt.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Top-Container als Bezugsrahmen, kompaktere Ränder */
  .elementor-location-header .elementor-element-78aa152 {
    position: relative !important;
    padding-top: 14px !important;
    padding-bottom: 10px !important;
  }

  /* --- Logo: klein & linksbündig --- */
  .elementor-location-header .elementor-element-1554ee5 {
    text-align: left !important;
    padding-left: 18px !important;
    margin-bottom: 2px !important;
    max-width: 68% !important;          /* Platz für den Burger rechts */
    align-self: flex-start !important;
  }
  .elementor-location-header .elementor-element-e00d7d5 img {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
  }

  /* Zwischencontainer NICHT als Positionsrahmen nutzen, damit der Burger
     sich auf #78aa152 (Top-Container) bezieht statt auf #3b5d64c */
  .elementor-location-header .elementor-element-3b5d64c {
    position: static !important;
    margin-top: 0 !important;
  }

  /* --- Burger: absolut oben rechts, auf Logo-Höhe zentriert --- */
  .elementor-location-header .elementor-element-d1f2424 {
    position: absolute !important;
    top: 40px !important;              /* vertikal mittig zum ~108px hohen Logo */
    right: 10px !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 50 !important;
  }
  /* Burger innerhalb seines Containers bündig nach rechts */
  .elementor-location-header .elementor-element-d1f2424 .elementor-nav-menu__container,
  .elementor-location-header .elementor-element-d1f2424 .elementor-menu-toggle {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  .elementor-location-header .elementor-element-4a6cc77 { gap: 8px !important; }

  /* Datum kleiner & ruhiger */
  .elementor-location-header .elementor-element-c89209b,
  .elementor-location-header .elementor-element-c89209b .elementor-heading-title {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    margin: 2px 0 !important;
  }
  .elementor-location-header .elementor-element-8407ef8 { padding: 0 16px !important; }

  /* Tickets-Button kompakt */
  .elementor-location-header .elementor-element-2312b26 { margin-top: 4px !important; }
  .elementor-location-header .elementor-element-06af0f6 .elementor-button {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* evtl. leerer Abschluss-Container: keinen Leerraum erzeugen */
  .elementor-location-header .elementor-element-431d430 {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* FIX: „Tickets bestellen"-Button über den nach oben überlappenden
     Seiteninhalt (Countdown/Timer, negativer margin-top) heben, damit
     Klicks/Taps den Button erreichen und nicht der Inhalt darüber. */
  .elementor-location-header .elementor-element-2312b26,
  .elementor-location-header .elementor-element-06af0f6,
  .elementor-location-header .elementor-element-1554ee5 {
    position: relative !important;
    z-index: 30 !important;
  }
}

/* -------------------------------------------------------------------------
   0) Grundlegendes: kein horizontales Scrollen, Medien nie über den Rand
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
  img, iframe, video { max-width: 100%; height: auto; }
}

/* =========================================================================
   1) HINTERGRUND-TEXTUR  – Fix gegen Verpixelung auf Mobil
   -------------------------------------------------------------------------
   Problem: Kit setzt background-size:cover; auf <body>. Auf dem Desktop ist
   der Hintergrund per background-attachment:fixed an den Viewport gepinnt
   (scharf). Auf Mobil ist "fixed" deaktiviert -> das 1500px-Bild wird über
   die gesamte (sehr lange) Seitenhöhe gestreckt und dadurch verpixelt.
   Lösung: eigenes, an den Viewport fixiertes Textur-Layer (position:fixed),
   das iOS/Android zuverlässig unterstützen -> scharf wie auf dem Desktop.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body.elementor-kit-6 {
    background-image: none !important;      /* gestreckten Body-Hintergrund entfernen */
    background-color: #EBE9DA !important;    /* Papier-Fallback */
  }
  body.elementor-kit-6::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;                             /* hinter dem Inhalt */
    background-image: url("https://www.just-whisky-hamburg.de/wp-content/uploads/2023/05/altespapier-hintergrund-whisky-hamburg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;                  /* deckt den VIEWPORT, nicht die ganze Seite -> scharf */
    pointer-events: none;
  }
}

/* =========================================================================
   2) ABSTÄNDE  – dezente, sichere Harmonisierung auf Mobil
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* verlässliche seitliche Ränder, damit Text nicht am Displayrand klebt */
  .elementor-section.elementor-section-boxed > .elementor-container,
  .e-con > .e-con-inner {
    padding-left: 18px;
    padding-right: 18px;
  }
  /* etwas Luft unter Überschriften */
  .elementor-widget-heading:not(:last-child) { margin-bottom: 14px; }
  /* Überschriften ruhiger umbrechen */
  h1, h2 { line-height: 1.18; overflow-wrap: break-word; }
  /* Buttons komfortabel & voll greifbar */
  .elementor-button { min-height: 48px; }
}

/* =========================================================================
   3) MOBILE NAVIGATION  – modernes Fullscreen-Overlay
   -------------------------------------------------------------------------
   Elementor-Burger-Menü (Widget f933f21): Toggle = .elementor-menu-toggle,
   ausklappendes Menü = .elementor-nav-menu--dropdown (direkter Nachbar).
   Wir verwandeln das schlichte Dropdown in ein bildschirmfüllendes Menü.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* --- Burger-/Schließen-Button immer sichtbar über dem Overlay --- */
  .elementor-menu-toggle {
    position: relative;
    z-index: 100001;
    transition: transform .2s ease;
  }
  .elementor-menu-toggle svg { width: 30px; height: 30px; }

  /* im geöffneten Zustand: Button fixiert oben rechts, weißes X --- */
  .elementor-menu-toggle[aria-expanded="true"] {
    position: fixed !important;
    top: 22px;
    right: 20px;
    z-index: 100002 !important;
  }
  .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--close,
  .elementor-menu-toggle[aria-expanded="true"] svg { color: #ffffff !important; fill: #ffffff !important; }

  /* --- das Overlay selbst (nur wenn geöffnet) --- */
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100vw !important;
    height: 100vh;
    max-height: 100vh !important;          /* Elementor-Inline-max-height überschreiben */
    margin: 0 !important;
    padding: 96px 22px calc(40px + env(safe-area-inset-bottom)) !important;
    background:
      linear-gradient(160deg, rgba(1, 30, 50, 0.985) 0%, rgba(0, 64, 112, 0.985) 100%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 0 !important;
    z-index: 100000 !important;
    overflow-y: auto;
    animation: jwhMenuFade .28s ease both;
  }

  /* Menü-Liste zentriert */
  .elementor-nav-menu--dropdown .elementor-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 440px;
    margin: auto;
  }

  /* jeder Menüpunkt: große, mittige Tap-Fläche */
  .elementor-nav-menu--dropdown .elementor-item {
    display: block !important;
    color: #ffffff !important;
    font-family: "Roboto Slab", serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .3px;
    text-align: center;
    padding: 20px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: transparent !important;
    line-height: 1.1;
    transition: color .18s ease, background .18s ease, transform .18s ease;
  }
  .elementor-nav-menu--dropdown .elementor-nav-menu li:last-child .elementor-item {
    border-bottom: 0 !important;
  }

  /* aktiver / angetippter Punkt in Markenrot hervorgehoben */
  .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
  .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-nav-menu--dropdown .elementor-item:focus,
  .elementor-nav-menu--dropdown .elementor-item:active {
    color: #ffffff !important;
    background: rgba(229, 45, 53, 0.92) !important;   /* Marken-Rot */
    border-radius: 10px;
    border-bottom-color: transparent !important;
    transform: scale(1.02);
  }

  /* sanftes, gestaffeltes Einblenden der Punkte */
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown .menu-item {
    animation: jwhItemIn .4s ease both;
  }
  .elementor-nav-menu--dropdown .menu-item:nth-child(1) { animation-delay: .05s; }
  .elementor-nav-menu--dropdown .menu-item:nth-child(2) { animation-delay: .10s; }
  .elementor-nav-menu--dropdown .menu-item:nth-child(3) { animation-delay: .15s; }
  .elementor-nav-menu--dropdown .menu-item:nth-child(4) { animation-delay: .20s; }
  .elementor-nav-menu--dropdown .menu-item:nth-child(5) { animation-delay: .25s; }
  .elementor-nav-menu--dropdown .menu-item:nth-child(6) { animation-delay: .30s; }
}

@keyframes jwhMenuFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes jwhItemIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown,
  .elementor-nav-menu--dropdown .menu-item { animation: none !important; }
}