/* ============================================================
   Post-Your-Horse — zentrale Mobile-Navigation
   Wird auf ALLEN Seiten eingebunden.
   Greift bei <= 900px Breite und macht aus jedem Header-Typ
   (.nav / .topnav / .appbar) ein einheitliches Slide-In-Menü.
   ============================================================ */

/* Hamburger-Button — auf Desktop versteckt, auf Mobile sichtbar */
.mnav-burger{
  display:none;
  background:transparent;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  padding:0;
  color:inherit;
  margin-left:auto;
  position:relative;
  z-index:101;
}
.mnav-burger:hover{ background:rgba(0,0,0,.04) }
.mnav-burger svg{ width:22px;height:22px; display:block }
.mnav-burger .x{ display:none }
body.mnav-open .mnav-burger .h{ display:none }
body.mnav-open .mnav-burger .x{ display:block }

/* Drawer-Container (rechts reinslidet) */
.mnav-drawer{
  position:fixed;
  top:0;right:0;bottom:0;
  width:min(86vw, 360px);
  background:#fff;
  z-index:100;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  display:flex;flex-direction:column;
  overflow-y:auto;
  padding:80px 24px 32px;
  visibility:hidden;
}
body.mnav-open .mnav-drawer{
  transform:translateX(0);
  visibility:visible;
}

/* Backdrop */
.mnav-backdrop{
  position:fixed;inset:0;
  background:rgba(10,12,14,.45);
  z-index:99;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
body.mnav-open .mnav-backdrop{
  opacity:1;pointer-events:auto;
}

/* Drawer-Inhalt (Links + Buttons) */
.mnav-drawer .mnav-section{
  display:flex;flex-direction:column;gap:4px;
  padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.mnav-drawer .mnav-section:last-child{
  border-bottom:none;margin-bottom:0;
}
.mnav-drawer .mnav-section-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#888;
  margin-bottom:8px;
}
.mnav-drawer a, .mnav-drawer button{
  display:block;
  padding:14px 12px;
  font-size:16px;
  font-weight:500;
  color:#1a1a1a;
  text-decoration:none;
  border-radius:10px;
  text-align:left;
  background:transparent;
  border:none;
  width:100%;
  cursor:pointer;
}
.mnav-drawer a:hover, .mnav-drawer button:hover{
  background:rgba(0,0,0,.04);
}
.mnav-drawer .mnav-cta{
  background:#ff6a00 !important;
  color:#fff !important;
  font-weight:600;
  text-align:center;
  margin-top:8px;
}
.mnav-drawer .mnav-cta:hover{
  background:#e85f00 !important;
}
.mnav-drawer .mnav-ghost{
  border:1px solid rgba(0,0,0,.12) !important;
  text-align:center;
  margin-top:8px;
}

/* Sprache als Pille im Drawer */
.mnav-drawer .mnav-lang{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:4px;
}
.mnav-drawer .mnav-lang button{
  flex:1;min-width:54px;
  padding:8px 10px;
  font-size:13px;
  font-weight:600;
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  text-align:center;
}
.mnav-drawer .mnav-lang button[aria-pressed="true"]{
  background:#1a1a1a;
  color:#fff;
  border-color:#1a1a1a;
}

/* ====== Mobile-Breakpoint: Original-Nav verstecken, Burger zeigen ====== */
@media (max-width: 900px){
  /* Burger einblenden in jedem Header */
  .nav .mnav-burger,
  .topnav .mnav-burger,
  .appbar .mnav-burger{ display:inline-flex; }

  /* Original-Desktop-Navigation auf Mobile ausblenden */
  .nav .nav-links,
  .nav .nav-right,
  .topnav .topnav-links,
  .appbar .appbar-actions,
  .appbar .appbar-nav{ display:none !important; }

  /* Logo darf auf Mobile etwas kleiner sein */
  .nav .logo img,
  .topnav .topnav-logo img,
  .appbar .appbar-logo img{ height:32px !important }

  /* Header-Padding reduzieren */
  .nav-inner, .topnav-inner, .appbar-row{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* Body-Scroll-Lock wenn Drawer offen */
  body.mnav-open{ overflow:hidden }
}

/* ====== Allgemeine Mobile-Verbesserungen für alle Seiten ====== */
@media (max-width: 720px){
  /* Container-Padding */
  .wrap{ padding-left:16px !important; padding-right:16px !important }

  /* Buttons sollten auf Mobile mind. 44px hoch sein */
  .btn{ min-height:44px }

  /* Headlines kleiner */
  h1{ font-size:clamp(28px, 7vw, 44px) !important; line-height:1.15 !important }
  h2{ font-size:clamp(24px, 5.5vw, 36px) !important; line-height:1.2 !important }

  /* Pricing-Karten Stacking */
  .price-grid, .plans-grid{ grid-template-columns:1fr !important; gap:16px !important }

  /* Forms */
  input, select, textarea{ font-size:16px !important } /* iOS Zoom-Fix */
}

/* Sidenav (Dashboard) auf Mobile als oben-aufgeklappte Sektion */
@media (max-width: 900px){
  .sidenav{ position:static !important; width:100% !important; height:auto !important }
  .dash-grid{ grid-template-columns:1fr !important }
}

/* Admin-Sidebar auf Mobile als Drawer */
@media (max-width: 900px){
  .admin-shell{ grid-template-columns:1fr !important }
  .admin-sidebar{ display:none }
}