/* ================================
   NAVBAR
   Transparent over Hero -> solid navy on scroll.
   Center nav rendered as a floating pill.
   Register always visible as a distinct button.
================================ */
/* Mobile */

.navbar__mobile-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.menu-toggle{
    width:44px;
    height:44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
}

.menu-toggle span{
    width:24px;
    height:2px;
    background:#fff;
    border-radius:5px;
}

/* Desktop */

@media(min-width:900px){

    .navbar__mobile-actions{
        display:none;
    }

}
/* Mobile */

.navbar__mobile-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.menu-toggle{
    width:44px;
    height:44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
}

.menu-toggle span{
    width:24px;
    height:2px;
    background:#fff;
    border-radius:5px;
}

/* Desktop */

@media(min-width:900px){

    .navbar__mobile-actions{
        display:none;
    }

}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium),
    box-shadow 0.3s var(--ease-premium);
}

@media (min-width: 768px) {
  .navbar { height: 88px; }
}

.navbar.is-scrolled {
  background: rgba(6, 21, 45, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.navbar__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.navbar__logo img {
  height: 28px;
  width: auto;
}

/* ---------- Center: floating pill nav (desktop only) ---------- */
.navbar__center {
  flex: 1;
  display: none;
  justify-content: center;
  min-width: 0; /* allows the pill to shrink instead of forcing overflow */
}

@media (min-width: 900px) {
  .navbar__center { display: flex; }
}

.navbar__pill {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px 28px;
  border-radius: 999px;
  background: rgba(70, 70, 70, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  max-width: 100%;
}

/* Between 900-1100px, tighten the pill so five links never force
   it wider than the space between logo and Register button */
@media (min-width: 900px) and (max-width: 1100px) {
  .navbar__pill { gap: var(--space-3); padding: 12px 20px; }
  .nav-link { font-size: 13px; }
}

.nav-link {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  transition: color 0.25s var(--ease-premium);
}

.nav-link:hover {
  color: var(--yellow);
}

.nav-link[aria-current="page"] {
  color: var(--white);
}

/* ---------- Right side: Register + mobile trigger ---------- */
.navbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Register: bordered pill, distinct from plain links, always visible.
   Desktop version only -- the mobile version lives inside
   .navbar__mobile-actions so there is never a duplicate button. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
  padding: 10px 20px;
  white-space: nowrap;
  transition: border-color 0.25s var(--ease-premium), background 0.25s var(--ease-premium);
}

.nav-cta:hover {
  border-color: var(--yellow);
  background: rgba(255, 212, 71, 0.08);
}

.nav-cta--desktop {
  display: none;
}

@media (min-width: 900px) {
  .nav-cta--desktop { display: inline-flex; }
}

/* ======================================
   MOBILE NAVBAR
====================================== */

.navbar__mobile-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

@media (min-width:900px){
    .navbar__mobile-actions{
        display:none;
    }
}

/* Hide desktop elements on phones */
@media (max-width:899px){

    .navbar__center{
        display:none !important;
    }

    .nav-cta--desktop{
        display:none !important;
    }

    .navbar{
        height:72px;
    }

    .navbar__inner{
        justify-content:space-between;
        align-items:center;
    }

    .navbar__logo img{
        height:26px;
    }

}


/* ======================================
   MOBILE MENU
====================================== */

.mobile-menu{

    position:fixed;
    inset:0;

    z-index:9999;

    background:#06152d;

    display:flex;
    flex-direction:column;

    opacity:0;
    visibility:hidden;

    transform:translateX(100%);

    transition:
        transform .35s ease,
        opacity .35s ease,
        visibility .35s;

    overflow-y:auto;
}

.mobile-menu.is-open{

    opacity:1;
    visibility:visible;
    transform:translateX(0);

}

.mobile-menu__top{

    min-height:80px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.mobile-menu__close{

    background:none;
    border:none;

    color:#fff;

    font-size:32px;

    cursor:pointer;

}

.mobile-menu__links{

    flex:1;

    display:flex;
    flex-direction:column;

    justify-content:center;

    gap:28px;

    padding:50px 0;

}

.mobile-menu__links .nav-link{

    font-size:24px;

    font-family:var(--font-heading);

    color:#fff;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.mobile-menu__links .nav-link:hover{

    color:var(--yellow);

}

.mobile-menu__cta{

    width:100%;

    justify-content:center;

    margin-top:10px;

}

.mobile-menu__footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 0;

    border-top:1px solid rgba(255,255,255,.08);

}

.mobile-menu__lang,
.mobile-menu__social{

    display:flex;

    gap:18px;

}

.mobile-menu__footer a,
.mobile-menu__footer span{

    color:rgba(255,255,255,.65);

}

/* Push page content below the fixed navbar where needed */
.has-navbar-offset {
  padding-top: 72px;
}

@media (min-width: 768px) {
  .has-navbar-offset { padding-top: 88px; }
}
/* ===============================
   MOBILE FIX
=============================== */

@media (max-width:899px){

    .navbar__center{
        display:none !important;
    }

    .nav-cta--desktop{
        display:none !important;
    }

    .navbar__mobile-actions{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .mobile-menu{

        transform:translateX(100%);
        opacity:0;
        visibility:hidden;

    }

    .mobile-menu.is-open{

        transform:translateX(0);
        opacity:1;
        visibility:visible;

    }

}

@media (min-width:900px){

    .navbar__mobile-actions{
        display:none;
    }

}