/* =========================================================
   BAVARIA ROLEPLAY — WEBSITE RESPONSIVE V5
   Public website only. Loaded after responsive-v4.css.
   ========================================================= */

:root{--mobile-page-pad:clamp(16px,4vw,28px)}
html{scroll-padding-top:calc(var(--nav-h,72px) + 12px)}
body.mobile-menu-open{overflow:hidden;touch-action:none}

/* Public layout containment */
.page-main,.pg-subpage,main,.hero,.section,.pg-section,.footer{min-width:0;max-width:100%;overflow-x:clip}
.container,.pg-container,.nav-inner,.footer-inner,.hero-inner{
  width:min(1280px,100%);max-width:100%;min-width:0;
}
.nav-logo,.nav-actions,.hero-content,.server-card,.footer-grid>*{min-width:0}
.logo-main,.hero-sub,.pg-hero-sub,.fg-desc{overflow-wrap:anywhere}

/* Mobile menu becomes a reliable drawer below the navbar. */
.mobile-menu{
  position:fixed!important;z-index:990!important;
  top:var(--nav-h,72px)!important;left:0!important;right:0!important;
  width:100%!important;height:auto!important;
  max-height:calc(100dvh - var(--nav-h,72px))!important;
  visibility:hidden;opacity:0;pointer-events:none;
  transform:translateY(-8px);
  overflow-y:auto!important;overscroll-behavior:contain;
  background:rgba(11,12,16,.985)!important;
  border-bottom:1px solid var(--border2)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.42)!important;
  transition:opacity .18s ease,transform .18s ease,visibility .18s!important;
}
.mobile-menu.open{visibility:visible;opacity:1;pointer-events:auto;transform:none}
.mobile-menu-backdrop{
  position:fixed;z-index:980;inset:var(--nav-h,72px) 0 0;
  background:rgba(0,0,0,.58);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;pointer-events:none;transition:.18s ease;
}
.mobile-menu-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
.mm-link{min-height:48px;display:flex!important;align-items:center;padding:.8rem var(--mobile-page-pad)!important}
.nav-hamburger{min-width:44px;min-height:44px;align-items:center;justify-content:center}

/* Interactive elements remain finger-friendly. */
.btn,.nav-btn,.fg-discord,.filter-btn,.faq-q,.rw-card-toggle,button,input,select,textarea{min-height:44px}
input,select,textarea{font-size:16px} /* prevents iOS focus zoom */

@media (max-width:1024px){
  .nav{height:var(--nav-h,72px)}
  .nav-inner{padding-inline:0!important;width:calc(100% - 28px)!important}
  .nav-actions{gap:.45rem!important}
  .nav-btn--register{display:none!important}

  .hero{min-height:auto!important;padding-block:clamp(3rem,8vw,5rem)!important}
  .hero-inner,.hero-grid{grid-template-columns:minmax(0,1fr)!important;gap:2rem!important}
  .hero-content{max-width:760px!important}
  .server-card{width:100%!important;max-width:620px!important;margin:0!important}

  .about-grid,.server-grid,.support-grid,.stats-grid,.features-grid,
  .rw-layout,.faq-layout{grid-template-columns:1fr!important}
  .rw-sidebar{position:static!important;max-height:none!important;width:100%!important}

  /* Inline two-column page layouts */
  .pg-container[style*="grid-template-columns:260px 1fr"],
  .pg-container[style*="grid-template-columns: 260px 1fr"]{
    grid-template-columns:1fr!important;gap:1.5rem!important;
  }

  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2rem!important}
  .fg-brand{grid-column:1/-1!important}
}

@media (max-width:768px){
  :root{--nav-h:64px}
  .container,.pg-container,.hero-inner,.footer-inner{
    padding-left:var(--mobile-page-pad)!important;
    padding-right:var(--mobile-page-pad)!important;
  }
  .section,.pg-section{padding-block:clamp(2.75rem,10vw,4.5rem)!important}
  .pg-hero{padding-block:clamp(3rem,12vw,5rem)!important;min-height:auto!important}
  .pg-hero-title,.hero-h1{font-size:clamp(2.6rem,14vw,5rem)!important;line-height:.92!important}
  .hero-sub,.pg-hero-sub{font-size:.96rem!important;line-height:1.65!important}

  .hero-actions,.sc-join{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .hero-actions .btn,.sc-join .btn{width:100%!important;justify-content:center!important;text-align:center!important}
  .server-card{max-width:none!important}
  .sc-meta,.sc-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sc-stats .sc-stat:last-child:nth-child(odd){grid-column:1/-1}
  .sc-ip{align-items:flex-start!important;gap:.5rem!important}
  .sc-ip>span{white-space:normal!important;overflow-wrap:anywhere}

  /* All inline auto-fill grids must fit a narrow viewport. */
  [style*="grid-template-columns:repeat(auto-fill,minmax(300px"],
  [style*="grid-template-columns: repeat(auto-fill, minmax(300px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(300px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(300px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(260px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(260px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(220px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(200px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(180px"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .frak-grid,.team-page-grid,.event-grid,.support-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rule-row{grid-template-columns:40px minmax(0,1fr)!important}
  .rr-ver{display:none!important}
  .cl-ep-header{align-items:flex-start!important}
  .cl-ep-title{min-width:0!important;flex-basis:calc(100% - 90px)!important}
  .cl-ep-date{margin-left:0!important}

  .footer-grid{gap:1.75rem 1.25rem!important}
  .footer-bottom{align-items:flex-start!important}
  .footer-legal-links{flex-wrap:wrap!important;gap:.65rem 1rem!important}
}

@media (max-width:540px){
  .nav-inner{width:calc(100% - 24px)!important}
  .logo-img{width:38px!important;height:38px!important}
  .logo-main{font-size:.9rem!important;white-space:nowrap}
  .nav-btn--login{display:none!important}

  .hero{padding-top:2.75rem!important}
  .hero-badge{max-width:100%;white-space:normal!important;line-height:1.4!important}
  .hero-h1{font-size:clamp(2.65rem,17vw,4.25rem)!important}
  .sc-top{align-items:flex-start!important;gap:.75rem!important}
  .sc-meta,.sc-stats{grid-template-columns:1fr!important}
  .sc-stats .sc-stat:last-child:nth-child(odd){grid-column:auto}

  [style*="grid-template-columns:repeat(auto-fill"],
  [style*="grid-template-columns: repeat(auto-fill"],
  [style*="grid-template-columns:repeat(auto-fit"],
  [style*="grid-template-columns: repeat(auto-fit"]{
    grid-template-columns:1fr!important;
  }
  .frak-grid,.team-page-grid,.event-grid,.support-grid{grid-template-columns:1fr!important}

  .rw-card-toggle{grid-template-columns:40px minmax(0,1fr) auto!important;gap:.7rem!important}
  .rule-row{padding:.9rem!important}
  .faq-q{padding:.9rem 1rem!important;align-items:flex-start!important}
  .faq-a{padding:0 1rem 1rem!important}
  .cl-ep-header{padding:1rem!important}
  .cl-ep-body{padding:.8rem 1rem 1rem!important}

  .footer-grid{grid-template-columns:1fr!important}
  .fg-brand{grid-column:auto!important}
  .fg-desc{max-width:none!important}
  .footer-bottom{flex-direction:column!important;gap:.75rem!important}

  /* Floating website bot/dialogs may never cover the whole usable width. */
  [class*="bot-window"],[class*="chat-window"],[class*="widget-panel"]{
    left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;
    width:auto!important;max-width:none!important;max-height:calc(100dvh - 90px)!important;
  }
}

@media (max-width:360px){
  .logo-main{font-size:.78rem!important}
  .hero-h1{font-size:2.7rem!important}
  .container,.pg-container,.hero-inner,.footer-inner{padding-inline:14px!important}
}

@media (hover:none){
  .frak-card:hover,.tpg-card:hover,.fg-discord:hover{transform:none!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}