/*
 * Bali Otthon – Mobile Navigation via Mobil-Navi Plugin
 * Nutzt das Plugin-Shortcode-Markup und damit die dort gepflegten Bilder,
 * Subtexte, Unterpunkte und Links.
 */

.bo-plugin-mobile-navi{
  display:none;
}

/* Desktop bleibt bei der normalen Headless-Navigation. */
@media (max-width: 1180px), (max-height: 760px) and (max-width: 1366px){
  .bo-primary-nav,
  .bo-nav-toggle{
    display:none !important;
  }

  .bo-plugin-mobile-navi{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:44px;
  }

  .bo-header-main{
    grid-template-rows:1fr auto;
  }
}

/* Plugin Button */
.bo-plugin-mobile-navi .mobil-navi-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:42px;
  padding:0 28px;
  min-width:min(340px, calc(100vw - 32px));
  border:0;
  border-radius:999px;
  background:#111;
  color:#fff;
  cursor:pointer;
  font:800 12px/1 "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}

.bo-plugin-mobile-navi .mobil-navi-toggle__icon{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.bo-plugin-mobile-navi .mobil-navi-toggle__icon::after{
  content:"Menü";
  font:800 12px/1 "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* Fullscreen Overlay */
.mobil-navi-overlay[hidden]{
  display:none !important;
}

.mobil-navi-overlay{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  z-index:999999;
  background:#fff;
  color:#111;
  overflow:hidden;
}

.mobil-navi-panel-front{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
}

.mobil-navi-topbar{
  flex:0 0 auto;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.mobil-navi-title{
  color:#111;
  font-family:"Playfair Display", Georgia, serif;
  font-size:28px;
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
}

.mobil-navi-close{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:#111;
  color:#fff;
  font:400 30px/1 Arial, sans-serif;
  cursor:pointer;
}

.mobil-navi-level{
  display:none;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.mobil-navi-level.is-active{
  display:block;
}

.mobil-navi-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-content:start;
  min-height:100%;
  background:#fff;
}

.mobil-navi-card{
  position:relative;
  aspect-ratio:1/1;
  min-height:0;
  overflow:hidden;
  background:linear-gradient(135deg, #d8d0bd 0%, #8f7d55 100%) center/cover no-repeat;
  border-right:1px solid rgba(0,0,0,.08);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.mobil-navi-card:nth-child(2n){
  border-right:0;
}

.mobil-navi-card__overlay{
  display:none;
}

.mobil-navi-card__inner{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:5px;
  padding:18px 16px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  text-decoration:none;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
  cursor:pointer;
}

.mobil-navi-card:not([style]) .mobil-navi-card__inner{
  color:#fff;
}

.mobil-navi-card__main{
  display:block;
  max-width:100%;
  font:800 clamp(18px, 5vw, 24px)/1.03 "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing:.02em;
  text-transform:none;
}

.mobil-navi-card__sub{
  display:block;
  max-width:95%;
  font:600 clamp(12px, 3vw, 15px)/1.24 "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing:0;
  text-transform:none;
  opacity:1;
}

.mobil-navi-card.has-children .mobil-navi-card__main::after{
  content:" →";
  color:inherit;
}

.mobil-navi-subhead{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 18px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.mobil-navi-back{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:#111;
  color:#fff;
  font:700 22px/1 "Manrope", system-ui, sans-serif;
  cursor:pointer;
}

.mobil-navi-subtitle{
  font:700 24px/1 "Playfair Display", Georgia, serif;
  color:#111;
}

body.bo-mobile-menu-is-open{
  overflow:hidden;
}

@media (max-width: 520px){
  .mobil-navi-topbar{
    min-height:64px;
    padding:10px 14px;
  }

  .mobil-navi-title{
    font-size:24px;
  }

  .mobil-navi-close{
    width:40px;
    height:40px;
    font-size:28px;
  }

  .mobil-navi-card__inner{
    padding:16px 14px;
  }

  .mobil-navi-card__main{
    font-size:18px;
    letter-spacing:.01em;
  }

  .mobil-navi-card__sub{
    font-size:12px;
  }
}


/* v9: gegen .bo-shell a { color: inherit; } aus bali-otthon-home.css */
.bo-shell .bo-plugin-mobile-navi .mobil-navi-overlay a,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-overlay a:link,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-overlay a:visited,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-overlay a:hover,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-overlay a:focus,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-overlay a:active,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-card__inner,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-card__inner:link,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-card__inner:visited,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-card__inner:hover,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-card__inner:focus,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-card__inner:active,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-card__inner *,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-card__main,
.bo-shell .bo-plugin-mobile-navi .mobil-navi-card__sub{
  color:#ffffff !important;
}

/* Fallback, falls das Plugin-Overlay außerhalb des Wrappers gerendert/verschoben wird */
.bo-shell .mobil-navi-overlay .mobil-navi-card__inner,
.bo-shell .mobil-navi-overlay .mobil-navi-card__inner:link,
.bo-shell .mobil-navi-overlay .mobil-navi-card__inner:visited,
.bo-shell .mobil-navi-overlay .mobil-navi-card__inner:hover,
.bo-shell .mobil-navi-overlay .mobil-navi-card__inner:focus,
.bo-shell .mobil-navi-overlay .mobil-navi-card__inner:active,
.bo-shell .mobil-navi-overlay .mobil-navi-card__inner *,
.bo-shell .mobil-navi-overlay .mobil-navi-card__main,
.bo-shell .mobil-navi-overlay .mobil-navi-card__sub{
  color:#ffffff !important;
}


/* v10 skeleton/contact: Mobile Plugin Navigation auch für bo-skel-nav */
@media (max-width: 1180px), (max-height: 760px) and (max-width: 1366px){
  .bo-skel-nav{
    display:none !important;
  }

  .bo-skel-header{
    grid-template-columns:minmax(120px, 180px) 1fr;
  }

  .bo-skel-header .bo-plugin-mobile-navi{
    justify-content:flex-end;
  }
}

@media (max-width: 620px){
  .bo-skel-header{
    grid-template-columns:1fr;
  }

  .bo-skel-header .bo-plugin-mobile-navi{
    justify-content:center;
  }
}


/* v2 hard override: mobile menu text always white on skeleton/contact pages */
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-overlay a,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-overlay a:link,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-overlay a:visited,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-overlay a:hover,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-overlay a:focus,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-overlay a:active,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-card__inner,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-card__inner:link,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-card__inner:visited,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-card__inner:hover,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-card__inner:focus,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-card__inner:active,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-card__inner *,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-card__main,
.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-card__sub{
  color:#ffffff !important;
}

/* Fallback if the plugin markup is outside .bo-plugin-mobile-navi but still inside page wrapper */
.bo-skeleton-page .mobil-navi-overlay .mobil-navi-card__inner,
.bo-skeleton-page .mobil-navi-overlay .mobil-navi-card__inner:link,
.bo-skeleton-page .mobil-navi-overlay .mobil-navi-card__inner:visited,
.bo-skeleton-page .mobil-navi-overlay .mobil-navi-card__inner:hover,
.bo-skeleton-page .mobil-navi-overlay .mobil-navi-card__inner:focus,
.bo-skeleton-page .mobil-navi-overlay .mobil-navi-card__inner:active,
.bo-skeleton-page .mobil-navi-overlay .mobil-navi-card__inner *,
.bo-skeleton-page .mobil-navi-overlay .mobil-navi-card__main,
.bo-skeleton-page .mobil-navi-overlay .mobil-navi-card__sub{
  color:#ffffff !important;
}

.bo-skeleton-page .bo-plugin-mobile-navi .mobil-navi-card__inner,
.bo-skeleton-page .mobil-navi-overlay .mobil-navi-card__inner{
  text-shadow:0 2px 8px rgba(0,0,0,.48) !important;
}