/* ---------------------------------------------------------
   Shared site header — StageNexa-Tohidul (TI)
   One file controls the logo, navigation and mobile menu on
   EVERY page. Edit here once.
   Loaded AFTER each page stylesheet so it always wins.
   --------------------------------------------------------- */

:root{
  --ti-ink:#08170F;
  --ti-mint:#8FEFC0;
  --ti-aqua:#3DDCC6;
  --ti-teal:#17A2B8;
  --ti-emerald:#22B573;
  --ti-display:"Archivo Black","Archivo",system-ui,sans-serif;
  --ti-ui:"Archivo",system-ui,-apple-system,sans-serif;
  --ti-wrap:1120px;
}

/* ---------- header shell ---------- */
header.ti-header{
  width:100%;z-index:60;
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:0;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
header.ti-header-transparent{
  position:absolute;top:0;left:0;
}
header.ti-header.ti-scrolled{
  background:rgba(8,23,15,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:rgba(143,239,192,.18);
}

/* make sure the hero/phero content clears the floating header */
header + .hero,
header + .page > .hero,
header + .page > .phero,
header + .phero{
  padding-top:110px;
}
header.ti-header .bar,
header.ti-header > .wrap,
header.ti-header .wrap.nav{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  width:100%;max-width:var(--ti-wrap);min-height:90px;margin:0 auto;padding:14px 24px;
  flex-wrap:nowrap;box-sizing:border-box;
}

/* ---------- brand lockup ---------- */
header.ti-header .brand{display:block;text-decoration:none;color:#fff;max-width:445px;min-width:0;margin-right:24px;line-height:1}
header.ti-header .brand b{display:block;font-family:var(--ti-display);font-size:19px;font-weight:800;letter-spacing:.02em;line-height:1;color:inherit}
header.ti-header .brand span{
  display:block;font-family:var(--ti-ui);font-size:9px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#9CC4AE;border-top:1px solid rgba(255,255,255,.28);
  margin-top:7px;padding-top:6px;line-height:1.55;white-space:normal;max-width:none;
}

/* ---------- navigation ---------- */
header.ti-header nav{display:flex;gap:2px;flex-wrap:nowrap;align-items:center;line-height:1}
header nav#ti-nav a{
  font-family:var(--ti-ui);font-size:12px;font-weight:600;letter-spacing:.1em;
  line-height:1.4;text-transform:uppercase;color:#C7D8CD;text-decoration:none;padding:9px 11px;
  border-radius:3px;white-space:nowrap;background:none;border:0;
}
header nav#ti-nav a:hover{color:#fff;background:rgba(143,239,192,.12)}
header nav#ti-nav a.on,
header nav#ti-nav a.active{color:var(--ti-ink);background:var(--ti-mint)}
header nav#ti-nav a.pill{
  background:linear-gradient(90deg,var(--ti-emerald),var(--ti-teal));color:#fff;
  border-radius:3px;padding:11px 22px;margin-left:8px;
}
header nav#ti-nav a.pill:hover{background:linear-gradient(90deg,var(--ti-mint),var(--ti-aqua));color:var(--ti-ink)}
header nav#ti-nav a.pill.on,
header nav#ti-nav a.pill.active{color:var(--ti-ink);background:linear-gradient(90deg,var(--ti-mint),var(--ti-aqua))}

/* extra buttons that used to sit in the header are hidden — the pill is the CTA */
header > .wrap > .btn,header .bar > .btn,header .nav > .btn{display:none}

/* ---------- mobile menu ---------- */
.ti-burger,.burger{
  display:none;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;
  border-radius:4px;padding:8px 12px;font-family:var(--ti-ui);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
}
@media (max-width:1180px){
  .ti-burger,.burger{display:inline-block;flex:0 0 auto;align-self:center;margin-left:auto}
  header.ti-header .bar,header.ti-header > .wrap,header.ti-header .wrap.nav{flex-wrap:wrap}
  header.ti-header .brand{flex:1 1 auto;min-width:0;max-width:calc(100% - 110px);margin-right:0}
  header nav#ti-nav{
    display:none;width:100%;margin-left:0;flex-direction:column;align-items:stretch;
    flex-wrap:wrap;gap:2px;padding:12px 0 6px;
  }
  header nav#ti-nav.open{display:flex}
  header nav#ti-nav a{width:100%;padding:11px 12px}
  header nav#ti-nav a.pill{margin-left:0;margin-top:8px;text-align:center}
}
@media (max-width:520px){
  header.ti-header .brand b{font-size:16px}
  header.ti-header .brand span{font-size:8.5px}
}

/* keep the lockup on one block and push the nav to the right */
header .brand{flex:0 0 auto}
header .brand b{white-space:nowrap}
header nav#ti-nav{margin-left:auto}
header nav#ti-nav a.on,
header nav#ti-nav a.active{border-bottom:0}

/* ---------------------------------------------------------
   All pages — transparent header floats over the hero/phero
   background. Gains a dark blurred backing on scroll.
   --------------------------------------------------------- */
body.ti-home header .brand,
body.ti-home header .brand b{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55)}
body.ti-home header .brand span{color:#CFE3D8;text-shadow:0 1px 10px rgba(0,0,0,.5)}
body.ti-home header nav#ti-nav a{text-shadow:0 1px 10px rgba(0,0,0,.5)}
@media (max-width:1180px){
  /* the open drop-down still needs a readable backing on every page */
  header nav#ti-nav.open,
  body.ti-home header nav#ti-nav.open{
    background:rgba(8,23,15,.94);backdrop-filter:blur(12px);
    border-radius:6px;padding:12px 10px;margin-bottom:10px;
  }
}

/* TI: social icons */
.ti-ico{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;margin-right:6px;flex:none}
a:has(> .ti-ico){display:inline-flex;align-items:center}

/* ---------------------------------------------------------
   The only two header variants (markup lives in /partials/):
   .ti-header-transparent  is a transparent overlay above the hero
   .ti-header-sticky       always-dark bar pinned to the top
   --------------------------------------------------------- */
header.ti-header-sticky{
  position:sticky;top:0;margin-bottom:0;
  background:rgba(8,23,15,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:rgba(143,239,192,.18);
}
header.ti-header-sticky + .hero,
header.ti-header-sticky + .page > .hero,
header.ti-header-sticky + .page > .phero,
header.ti-header-sticky + .phero{padding-top:0}

/* keep the full nav on medium desktops instead of collapsing to the burger */
@media (min-width:1181px) and (max-width:1360px){
  header nav#ti-nav a{font-size:11px;padding:8px 8px;letter-spacing:.07em}
  header nav#ti-nav a.pill{padding:10px 16px;margin-left:6px}
  header.ti-header .brand{max-width:360px;margin-right:14px}
  header.ti-header .bar,header.ti-header > .wrap,header.ti-header .wrap.nav{gap:14px;padding:14px 18px}
}