/* =========================================
   Astrobase Inner Header
   Glass / Radial / Mobile-first safe
   ========================================= */

.astro-header-theme{
  --bg0:#02030a;
  --bg1:#050711;
  --bg2:#151832;

  --text:#f4f5ff;
  --muted:rgba(244,245,255,0.72);

  --stroke:rgba(255,255,255,0.10);
  --stroke2:rgba(255,255,255,0.16);

  --accentA:rgba(98,150,255,0.55);
  --accentB:rgba(53,82,210,0.95);
  --hover:rgba(132,179,255,0.14);

  --radius:14px;
  --padX:14px;

  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
}

/* No iframe gaps */
html, body{
  margin:0 !important;
  padding:0 !important;
}

/* Predictable sizing everywhere */
.astro-inner-nav,
.astro-inner-nav *{
  box-sizing:border-box;
}

/* =========================================
   Sticky wrapper
   ========================================= */
.astro-inner-nav{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:50;

  background:linear-gradient(
    to bottom,
    rgba(5,7,17,0.98),
    rgba(5,7,17,0.84)
  );
  border-bottom:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* =========================================
   Inner bar
   ========================================= */
.astro-inner-nav-bar{
  max-width:1100px;
  margin:0 auto;
  padding:12px var(--padX);

  display:flex;
  align-items:center;
  gap:10px;

  border-radius:var(--radius);
  position:relative;

  background:radial-gradient(
    circle at top left,
    rgba(84,112,255,0.18),
    rgba(8,10,26,0.96)
  );

  border:1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.70),
    0 0 0 1px rgba(255,255,255,0.06);
}

/* =========================================
   Mobile current label (hidden on desktop)
   ========================================= */
.astro-inner-current{
  display:none;
  min-width:0;
  flex:1 1 auto;

  padding:0 4px;
  text-align:center;

  font-size:20px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;

  color:rgba(244,245,255,0.9);

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  user-select:none;
}

/* =========================================
   Tabs (desktop default)
   ========================================= */
.astro-inner-tabs{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.astro-inner-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:6px 12px;
  border-radius:999px;

  font-size:12px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;

  border:1px solid rgba(255,255,255,0.18);
  background:radial-gradient(
    circle at top,
    rgba(120,144,255,0.18),
    rgba(7,12,36,0.92)
  );

  color:rgba(244,245,255,0.82);
  text-decoration:none;
  cursor:pointer;

  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    transform 80ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.astro-inner-tab:hover{
  background:radial-gradient(
    circle at top,
    rgba(141,181,255,0.55),
    rgba(21,32,96,0.98)
  );
  border-color:rgba(179,206,255,0.75);
  box-shadow:
    0 0 0 1px rgba(132,179,255,0.55),
    0 10px 24px rgba(0,0,0,0.65);
  transform:translateY(-1px);
  color:#fff;
}

.astro-inner-tab.is-active{
  background:radial-gradient(
    circle at top,
    rgba(165,189,255,0.95),
    rgba(53,82,210,1)
  );
  color:#050711;
  border-color:rgba(205,220,255,0.9);
  box-shadow:
    0 0 0 1px rgba(205,220,255,0.85),
    0 12px 26px rgba(0,0,0,0.70);
}

.astro-inner-tab.is-active::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:-4px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(132,179,255,0.75),
    transparent
  );
}

/* =========================================
   Close button (X)
   ========================================= */
.astro-inner-close{
  margin-left:auto;
  width:40px;
  height:40px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  border:1px solid rgba(255,255,255,0.22);
  background:radial-gradient(
    circle at top,
    rgba(98,150,255,0.28),
    rgba(13,26,76,0.92)
  );

  color:#fff;
  font-size:20px;
  cursor:pointer;

  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    transform 80ms ease;
}

.astro-inner-close:hover{
  background:radial-gradient(
    circle at top,
    rgba(141,181,255,0.7),
    rgba(21,32,96,1)
  );
  box-shadow:
    0 0 0 1px rgba(132,179,255,0.75),
    0 10px 24px rgba(0,0,0,0.70);
  transform:translateY(-1px);
}

/* =========================================
   Burger button (hidden on desktop)
   ========================================= */
.astro-inner-burger{
  display:none;
  width:40px;
  height:40px;

  border-radius:999px;
  border:1px solid rgba(255,255,255,0.22);
  background:radial-gradient(
    circle at top,
    rgba(98,150,255,0.22),
    rgba(13,26,76,0.88)
  );

  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.astro-inner-burger img{
  width:18px;
  height:18px;
  display:block;
}

/* =========================================
   MOBILE: burger + center label + dropdown
   ========================================= */
@media (max-width:640px){

  .astro-inner-burger{
    display:inline-flex;
    flex:0 0 auto;
  }

  /* show current label between burger and X */
  .astro-inner-current{
    display:block;
  }

  /* Hide tabs by default */
  .astro-inner-tabs{
    display:none;
    position:absolute;
    left:10px;
    right:10px;
    top:calc(100% + 10px);

    flex-direction:column;
    gap:8px;
    padding:10px;

    background:linear-gradient(
      to bottom,
      rgba(5,7,17,0.98),
      rgba(8,10,26,0.96)
    );

    border:1px solid rgba(255,255,255,0.12);
    border-radius:14px;

    box-shadow:
      0 20px 48px rgba(0,0,0,0.75),
      0 0 0 1px rgba(255,255,255,0.06);
  }

  /* Open state */
  .astro-inner-nav.is-menu-open .astro-inner-tabs{
    display:flex;
  }

  /* Full-width list items */
  .astro-inner-tab{
    width:100%;
    justify-content: center; 
    padding:12px 14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* keep X pinned right */
  .astro-inner-close{
    margin-left:0;
    flex:0 0 auto;
  }
}


/* Adjust selector to match your header.php root element */
.astro-header,
.news-nav,
.inner-header,
.site-header{
  position: sticky;
  top: 0;
  z-index: 3200;
}


/* =========================================================
   FORCE header + dropdown above ALL page elements (news.php)
   ========================================================= */

/* Header wrapper must be on a very high layer */
.astro-inner-nav{
  position: sticky;   /* keep */
  top: 0;             /* keep */
  z-index: 5000;      /* was 50 -> too low vs other sticky elements */
}

/* Make sure the inner bar participates in the same high stacking layer */
.astro-inner-nav-bar{
  position: relative; /* creates a reliable stacking context */
  z-index: 5001;
}

/* Mobile dropdown panel must be above the news sticky nav and cards */
@media (max-width: 640px){
  .astro-inner-tabs{
    z-index: 5002;    /* dropdown panel */
  }
}


/* DESKTOP: make the header bar full width */
@media (min-width: 641px){
  .astro-inner-nav-bar{
    max-width: none;     /* remove the cap */
    width: 100%;
    margin: 0;           /* no centering gap */
    border-radius: 0;    /* optional: flush edges */
  }

  .astro-inner-nav{
    border-radius: 0;    /* optional */
  }
}