/* =====================================================================
   GUREXA GLOBAL RESPONSIVE SYSTEM V5.0
   Mobile-first safety layer for site-wide content, navbar and sidebars.
   ===================================================================== */

:root{
  --gx-mobile-breakpoint:900px;
  --gx-nav-bg:#062d52;
  --gx-nav-fg:#ffffff;
  --gx-nav-border:rgba(255,255,255,.18);
  --gx-overlay:rgba(2,18,34,.48);
}

/* General responsive safety */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html,body{
  max-width:100%;
  overflow-x:hidden;
}
img,svg,video,canvas,iframe{
  max-width:100%;
  height:auto;
}
table{
  max-width:100%;
}
input,select,textarea,button{
  max-width:100%;
}
pre,code{
  max-width:100%;
  overflow-x:auto;
}
.gx-responsive-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* JS-applied semantic roles */
.gx-responsive-nav-host{
  position:relative;
}
.gx-responsive-nav{
  transition:opacity .18s ease,transform .18s ease;
}
.gx-responsive-sidebar{
  transition:transform .22s ease,visibility .22s ease;
}

/* Global toggle buttons */
.gx-mobile-nav-toggle,
.gx-mobile-sidebar-toggle{
  display:none;
  appearance:none;
  border:1px solid var(--gx-nav-border);
  background:transparent;
  color:var(--gx-nav-fg);
  width:42px;
  height:42px;
  border-radius:8px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font:inherit;
  z-index:10002;
}
.gx-mobile-nav-toggle{
  margin-left:auto;
}
.gx-mobile-sidebar-toggle{
  position:fixed;
  left:12px;
  bottom:16px;
  background:var(--gx-nav-bg);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.gx-hamburger-lines{
  width:21px;
  height:15px;
  position:relative;
  display:block;
}
.gx-hamburger-lines::before,
.gx-hamburger-lines::after,
.gx-hamburger-lines span{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:2px;
  background:currentColor;
}
.gx-hamburger-lines::before{top:0}
.gx-hamburger-lines span{top:6px}
.gx-hamburger-lines::after{top:12px}

.gx-mobile-overlay{
  display:none;
}

/* Desktop content stays untouched as much as possible */
@media (min-width:901px){
  .gx-responsive-nav{
    display:flex !important;
  }
  .gx-responsive-sidebar{
    transform:none !important;
    visibility:visible !important;
  }
}

/* MOBILE / TABLET */
@media (max-width:900px){

  /* Common container protection */
  .container,.wrap,.wrapper,.content,.main-content,.page-content,
  main,section,article{
    max-width:100%;
  }

  /* Fluid gutters without destroying local widths */
  .container,.wrap,.wrapper{
    width:min(100% - 24px,100%) !important;
  }

  /* Common multi-column layouts collapse safely */
  .row,
  .grid,
  .cards,
  .card-grid,
  .feature-grid,
  .features-grid,
  .dashboard-grid,
  .content-grid,
  .two-column,
  .two-columns,
  .three-column,
  .three-columns,
  .four-column,
  .four-columns{
    max-width:100%;
  }

  /* Keep text readable */
  body{
    min-width:0 !important;
  }

  /* NAVBAR */
  .gx-mobile-nav-toggle{
    display:inline-flex !important;
  }

  .gx-responsive-nav{
    display:none !important;
    position:absolute !important;
    top:calc(100% + 1px) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-height:calc(100vh - 70px) !important;
    overflow-y:auto !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:8px !important;
    margin:0 !important;
    background:var(--gx-nav-bg) !important;
    color:var(--gx-nav-fg) !important;
    border-top:1px solid var(--gx-nav-border) !important;
    box-shadow:0 16px 32px rgba(0,0,0,.18) !important;
    z-index:10001 !important;
  }

  .gx-responsive-nav.gx-open{
    display:flex !important;
  }

  .gx-responsive-nav > *,
  .gx-responsive-nav li,
  .gx-responsive-nav a{
    width:100%;
    max-width:100%;
  }

  .gx-responsive-nav ul{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
  }

  .gx-responsive-nav li{
    list-style:none !important;
    margin:0 !important;
  }

  .gx-responsive-nav a,
  .gx-responsive-nav button:not(.gx-mobile-nav-toggle){
    display:flex !important;
    align-items:center !important;
    min-height:44px !important;
    padding:10px 12px !important;
    text-decoration:none !important;
    border-radius:6px !important;
    color:inherit !important;
    white-space:normal !important;
  }

  /* Existing desktop-only nav selectors are neutralized after JS marks them */
  .gx-responsive-nav .dropdown-menu,
  .gx-responsive-nav [class*="dropdown"]{
    position:static !important;
    transform:none !important;
    width:100% !important;
    box-shadow:none !important;
  }

  /* SIDEBARS become off-canvas */
  .gx-responsive-sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:min(84vw,320px) !important;
    max-width:320px !important;
    height:100dvh !important;
    overflow-y:auto !important;
    z-index:10004 !important;
    transform:translateX(-105%) !important;
    visibility:hidden !important;
    background:#fff !important;
    box-shadow:10px 0 30px rgba(0,0,0,.18) !important;
    padding-top:max(12px,env(safe-area-inset-top)) !important;
  }

  .gx-responsive-sidebar.gx-open{
    transform:translateX(0) !important;
    visibility:visible !important;
  }

  .gx-mobile-sidebar-toggle{
    display:inline-flex !important;
  }

  .gx-mobile-overlay{
    position:fixed;
    inset:0;
    background:var(--gx-overlay);
    z-index:10003;
  }

  .gx-mobile-overlay.gx-open{
    display:block;
  }

  .gx-responsive-sidebar a,
  .gx-responsive-sidebar button{
    min-height:44px;
  }

  /* Remove desktop content displacement when sidebar becomes off-canvas */
  body.gx-has-mobile-sidebar main,
  body.gx-has-mobile-sidebar .main-content,
  body.gx-has-mobile-sidebar .content,
  body.gx-has-mobile-sidebar .page-content{
    margin-left:0 !important;
    padding-left:min(4vw,20px);
    padding-right:min(4vw,20px);
    width:auto !important;
    max-width:100% !important;
  }

  /* Tables */
  table{
    width:max-content;
    min-width:100%;
  }

  /* Forms */
  form{
    max-width:100%;
  }

  input,select,textarea{
    font-size:16px; /* prevents unwanted iOS zoom */
  }
}

/* Small phones */
@media (max-width:520px){
  .container,.wrap,.wrapper{
    width:calc(100% - 18px) !important;
  }
  .gx-responsive-sidebar{
    width:min(90vw,310px) !important;
  }
}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  .gx-responsive-nav,
  .gx-responsive-sidebar{
    transition:none !important;
  }
}

/* =====================================================================
   GUREXA — MOBILE MENU INITIAL STATE FIX V5.1
   Mobile navbar is closed on first paint and opens only after user action.
   ===================================================================== */
@media (max-width:900px){
  body:not(.gx-mobile-nav-open) .gx-responsive-nav{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateY(-6px) !important;
  }

  body.gx-mobile-nav-open .gx-responsive-nav.gx-open{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  .gx-responsive-nav-host{
    overflow:visible !important;
  }
}