/* l3e.org fixes: keep desktop navbar original; add mobile inline 3 links; ensure hamburger is clickable */

/* Decorative header layers must not intercept taps */
header > div.absolute,
header::before,
header::after { pointer-events: none; z-index: 0; }

/* Keep desktop nav centered */
nav.lg\:block #js-clone-nav { justify-content: center; }

/* Mobile: hide desktop separators if any are created via ::after tricks */
@media (max-width: 1023px) {
  nav.lg\:block li::after { display: none; content: none; }
}

/* Ensure mobile inline nav has no overflow issues */
#mobile-inline-nav ul { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
#mobile-inline-nav ul::-webkit-scrollbar { display: none; }


/* Mobile inline nav uses the same gradient as desktop */
#mobile-inline-nav {
  background-image: linear-gradient(to bottom, #757575, #2E42BF);
}

/* Preserve desktop nav exactly; only center its list */
nav.lg\:block #js-clone-nav { justify-content: center; }

/* Ensure hamburger floats above hero content that may create stacking contexts */
#js-navbar-open {
  position: fixed;
  top: 1.25rem;   /* 20px ~ top-5 */
  right: 1.25rem; /* 20px ~ right-5 */
  z-index: 9999;
  pointer-events: auto;
}

/* Hero decorative layers must not intercept taps */
header > div.absolute,
header::before,
header::after { pointer-events: none; }

/* Slight shadow to separate mobile nav from hero */
/* Normalize drawer item indentation across all entries */
#js-mobile-navbar ul, #js-navbar-body ul { padding-left: 0 !important; padding-right: 0 !important; }
#js-mobile-navbar li, #js-navbar-body li { margin: 0 !important; padding: 0 !important; list-style: none; }
#js-mobile-navbar li > *, #js-navbar-body li > * { margin-left: 0 !important; padding-left: 0 !important; }
#js-mobile-navbar a, #js-navbar-body a { display: flex; align-items: center; gap: 0.75rem; margin: 0 !important; padding: 0.25rem 0 !important; }
#js-mobile-navbar a svg, #js-navbar-body a svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin-right: 0; }

/* Vertical rhythm for all items uniformly */
#js-mobile-navbar li + li, #js-navbar-body li + li { margin-top: 1rem !important; }


/* Remove the per-item house icons on mobile nav + drawer (keep hamburger/close icons) */
#mobile-inline-nav a svg,
#js-navbar-body a svg,
#js-mobile-navbar a svg { display: none !important; }

/* Collapse the gap reserved for the icons */
#mobile-inline-nav a,
#js-navbar-body a,
#js-mobile-navbar a { gap: 0 !important; }


/* Mobile inline nav: evenly spaced and centered */
#mobile-inline-nav ul {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.25rem !important; /* ~gap-5 */
}

#mobile-inline-nav li { display: flex !important; }
#mobile-inline-nav a { display: inline-block !important; padding: 0.5rem 0.75rem !important; }


/* --- Mobile inline navbar visual parity with desktop --- */
#mobile-inline-nav {
  /* Force the gray→blue gradient explicitly */
  background: linear-gradient(to bottom, #757575 0%, #2E42BF 100%) !important;
  position: sticky; /* keeps it nicely attached under the hero as you scroll */
  top: 0; /* only applies when it reaches the top */
  z-index: 40;
}

/* Constrain inner width to line up with content card and spread items */
#mobile-inline-nav ul {
  width: min(calc(100vw - 2.5rem), 64rem); /* match px-5 side padding; cap at ~max-w-5xl (64rem) */
  margin-left: auto;
  margin-right: auto;
  justify-content: center !important;
  gap: 1rem !important;
  padding-left: 1.25rem;  /* px-5 */
  padding-right: 1.25rem; /* px-5 */
  padding-top: 0.75rem;   /* py-3 */
  padding-bottom: 0.75rem;
}

/* Make each item easier to tap */
#mobile-inline-nav li a {
  padding: 0.5rem 0.75rem !important;
}

/* Ensure the hero area can't layer above the hamburger on mobile */
header { isolation: isolate; }
#js-navbar-open { position: fixed; z-index: 9999; pointer-events: auto; }


/* Distribute the 3 mobile nav items evenly across the same width as the body content */
#mobile-inline-nav ul {
  width: min(calc(100vw - 2.5rem), 64rem); /* match content width w/ px-5 padding, cap at ~max-w-5xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  justify-content: space-between !important;
  gap: 1.25rem !important; /* moderate space */
}

#mobile-inline-nav li {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
}

#mobile-inline-nav li a {
  display: inline-block;
  padding: 0.5rem 0.75rem !important;
  text-align: center;
}

/* Responsive iframe wrapper */
.responsive-embed { width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .responsive-embed { aspect-ratio: 3 / 2; } }
.responsive-embed iframe { width: 100%; height: 100%; display: block; border: 0; border-radius: .5rem; }


/* --- Remove hero/header gradient overlay on index --- */
/* Kill the ::after gradient that was applied on <header> */
header::after { 
  background: none !important; 
  display: none !important;
}

/* Hide the extra gradient DIV overlay inside the header (mobile fade) */
header > div.bg-gradient-to-t.from-background { 
  display: none !important; 
}


/* === Remove ALL gradients from the header (keep only the tiled image + navbar gradients) === */
header::before,
header::after {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Any gradient utility used inside the header gets nuked */
header .bg-gradient-to-t,
header .bg-gradient-to-b,
header .bg-gradient-to-r,
header .bg-gradient-to-l {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  display: none !important; /* most of these are decorative overlays */
}

/* Keep the navbar gradients */
nav, #mobile-inline-nav { display: block; } /* (no-op, just specificity anchor) */


/* --- Common fixes --- */
html, body { overflow-x: hidden; }

/* Header decorative layers should not block clicks */
header > div.absolute, header::before, header::after { pointer-events: none; }

/* Mobile inline nav gradient + layout */
#mobile-inline-nav { background: linear-gradient(to bottom, #757575 0%, #2E42BF 100%) !important; position: sticky; top: 0; z-index: 40; }
#mobile-inline-nav ul { width: min(calc(100vw - 2.5rem), 64rem); margin: 0 auto; justify-content: space-between !important; gap: 1rem !important; padding: .75rem 1.25rem; }
#mobile-inline-nav li { flex: 1 1 0; display: flex; justify-content: center; }
#mobile-inline-nav a { display: inline-block; padding: .5rem .75rem; text-align: center; }

/* Hide per-item icons on mobile nav + drawer */
#mobile-inline-nav a svg, #js-navbar-body a svg { display: none !important; }

/* Hamburger layering */
#js-navbar-open { position: fixed; z-index: 9999; pointer-events: auto; }

/* Responsive iframe wrapper */
.responsive-embed { width: 100%; aspect-ratio: 3 / 2; }
@media (min-width: 1024px) { .responsive-embed { aspect-ratio: 16 / 9; } }
.responsive-embed iframe { width: 100%; height: 100%; display: block; border: 0; }


/* Centered separators for mobile inline navbar */
@media (max-width:1023px){
  /* remove any inherited borders that create full-height lines */
  #mobile-inline-nav li + li{ border-left: none !important; }

  /* vertically centered separator like desktop */
  #mobile-inline-nav li{ position: relative; display: flex; align-items: center; }
  #mobile-inline-nav /* keep items centered in the bar */
  #mobile-inline-nav ul{ align-items: center; }
}


/* Remove top/bottom inset lines from navs */
nav, #mobile-inline-nav {
  box-shadow: none !important;
  border-top: none !important;
  border-bottom: none !important;
}





/* Drawer z-index only when open */
#js-mobile-navbar{ position:fixed !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; }
#js-mobile-navbar.active{ z-index:1000 !important; pointer-events:auto !important; }
#js-mobile-navbar.active > #js-navbar-backdrop{ z-index:1000 !important; }
#js-mobile-navbar.active > div:not(#js-navbar-backdrop){ z-index:1010 !important; }


/* Keep drawer panel fixed to the right when open */
#js-mobile-navbar.active > div.fixed.right-0.top-0{ position:fixed !important; right:0 !important; top:0 !important; }


/* Mobile inline navbar — visible only on mobile */
@media (max-width:1023px){
  #mobile-inline-nav{ display:block !important; }
}
@media (min-width:1024px){
  #mobile-inline-nav{ display:none !important; }
}


/* Desktop navbar — ensure visible on lg+ */
@media (min-width:1024px){
  nav.lg\:block{ display:block !important; visibility:visible !important; opacity:1 !important; }
}


/* Desktop navbar gradient (strong override) */
@media (min-width:1024px){
  nav.lg\:block{
    background-image: linear-gradient(to bottom, #757575, #2E42BF) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }
}

#dynmap-frame-mobile{width:100%;aspect-ratio:1/1!important;height:auto!important;display:block;border:0;}


/* Make responsive-embed containers square on mobile; ensure iframe fills */
@media (max-width:1023px){
  .responsive-embed{ aspect-ratio: 1 / 1 !important; }
  .responsive-embed iframe{ width:100% !important; height:100% !important; display:block !important; }
}


/* Single, centered separators on the mobile inline navbar */
@media (max-width:1023px){
  /* Nuke any borders that could add a 2nd line */
  #mobile-inline-nav a, #mobile-inline-nav li{ border-left: none !important; border-right: none !important; }
  /* Keep our single centered separator */
  #mobile-inline-nav li{ position:relative; display:flex; align-items:center; }
  #mobile-inline-nav }

@media (max-width:1023px){
  #mobile-inline-nav li{ position:relative; display:flex; align-items:center; }
  #mobile-inline-nav li + li::before{
    content:""; position:absolute; left:-0.75rem; top:50%; transform:translateY(-50%);
    width:1px; height:60%; background:rgba(255,255,255,.35); pointer-events:none;
  }
}


@media (max-width:1023px){
  #mobile-inline-nav a::after{ content:none !important; display:none !important; }
}