/* === Extracted from nav.html === */
:root{
    --nav-gap: 18px;      /* spacing between links */
    --logo-gap: 16px;     /* space between logo and first link */
    --nav-pad-x: 20px;    /* horizontal padding */
  }

  .sca-nav{
    position: sticky; top: 0; z-index: 100000;
    height: 100px; width: 100%;
    display: flex; align-items: center; justify-content: flex-start;
    padding: 0 var(--nav-pad-x); box-sizing: border-box;
    gap: var(--logo-gap);
    background: linear-gradient(90deg,#000 0,#000 10%,#F0115F 60%,#EF7616 100%);
    font-family: 'Tilt Warp', sans-serif;
    font-size: clamp(16px, 1.2vw + 12px, 32px);
  }

  .sca-nav .logo{ width:81px; height:73px; background:url('../images/logo.png') center/cover no-repeat; margin-right: 10px; }
  .sca-nav .logo-link{ display:inline-block; line-height:0; }

  /* Keep links LEFT of the bar, right next to the logo */
  .sca-nav #site-nav{
    display:flex !important;               /* ← force visible even if a page hides it */
    align-items:center;
    gap: var(--nav-gap);
    margin-left:0;
  }
  .sca-nav #site-nav a{
    color:#FFFFFF; text-decoration:none; font-weight: 1000 !important; white-space:nowrap; line-height:1.2;
    letter-spacing:.02em;
  }
  .sca-nav #site-nav a:hover{ opacity:.8; }

  /* Tablet */
  @media (max-width: 900px){
    .sca-nav{ height:80px; --nav-pad-x:16px; --logo-gap:12px; font-size: clamp(14px, 1.4vw + 10px, 22px); }
    .sca-nav .logo{ width:60px; height:54px; }
    .sca-nav #site-nav{ gap:14px; }
  }

  /* Phone: smaller text + allow wrapping instead of hiding */
  
/* --- enforce consistent link positioning across all pages --- */
@media (min-width: 901px){
  .sca-nav__menu {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    gap: 20px !important;   /* adjust gap for consistency */
  }
  .sca-nav__menu a {
    display: inline-block;
    text-align: center;
    padding: 0 4px;          /* keeps clickable area neat */
  }
}
/* === SCA: lock nav link alignment & spacing site-wide === */
@media (min-width: 901px){
  .sca-nav #site-nav{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 12.5px !important;
    margin-right: 12.5px !important;
    gap: 40px !important;   /* unified link spacing */
  }
}

/* --- Hard alignment reset so every page matches (especially Projects) --- */
@media (min-width: 901px){
  .sca-nav #site-nav{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 12.5px !important;
    margin-right: 12.5px !important;
    gap: var(--nav-gap) !important;
    flex: 0 0 auto !important;
  }
  .sca-nav #site-nav > a{
    margin-left: 12.5px !important;
    margin-right: 12.5px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* === Mobile (<=600px): hamburger + right-side dropdown === */
@media (max-width: 600px){
  .sca-nav{
    height: 64px;
    --nav-pad-x: 12px;
    --logo-gap: 10px;
    font-size: clamp(12px, 2.2vw + 8px, 18px);
    justify-content: flex-start;
  }
  .sca-nav .logo{ width:50px; height:45px; }

  /* Show hamburger on mobile */
  .nav-toggle{
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    padding: 0; border: 0; background: transparent;
    cursor: pointer;
    margin-left: auto;
  }
  .nav-toggle .bar{
    display: block;
    width: 24px; height: 3px;
    border-radius: 2px;
    background: #fff;
  }

  /* Compact dropdown box aligned to the right */
  .sca-nav #site-nav{
    position: fixed;
    top: var(--sca-nav-bottom, 64px);
    right: 12px;
    width: 240px;
    max-width: 80vw;
    display: none !important;            /* collapsed by default */
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(0,0,0,.95);
    box-shadow: 0 12px 30px rgba(0,0,0,.4);
    z-index: 100010;
  }
  .sca-nav #site-nav.open{ display: flex !important; }

  /* Backdrop and scroll lock */
  .nav-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(1px);
    z-index: 100000;
  }
  .nav-backdrop[hidden]{ display:none; pointer-events:none; }
  body.menu-open{ overflow: hidden; }
}


/* === Safety: remove any stray bullets or markers in nav === */
.sca-nav #site-nav, .sca-nav #site-nav *{
  list-style: none !important;
}
.sca-nav #site-nav::before,
.sca-nav #site-nav a::before,
.sca-nav #site-nav a::marker{
  content: none !important;
}
.sca-nav #site-nav a{ display: inline-block; }

/* Desktop/Tablet (>600px): hide hamburger explicitly */
@media (min-width: 601px){
  .nav-toggle{ display: none !important; }
}

/* Safety: the button can never render a bullet */
.nav-toggle, .nav-toggle *{ list-style: none !important; }
.nav-toggle::marker{ content: "" !important; }

#site-nav a {
  margin-right: 12.5px !important; /* space between links */
  font-weight: 1000 !important;
}
#site-nav a:last-child {
  margin-right: 0; /* optional: remove last gap */
}

.sca-nav #site-nav a {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 1000 !important;
}