/* =========================================================
   GCS TOP NAVIGATION (Reusable)
   Scoped ONLY to top banner/nav
   ========================================================= */

/* =========================
   VARIABLES
========================= */
:root{
  --brand-gold:#ffb700;
  --logo-gap:70px;
}


/* =========================
   TOP BANNER LAYOUT
========================= */
.top-banner-row{
  margin-left:0;
  margin-right:0;
}

.top-banner-row > [class*="col-"]{
  padding-left:0 !important;
  padding-right:0 !important;
}

.banner{
  padding:10px 0 25px;
  letter-spacing:0;
}

/* Wrapper */
.max-1320{
  width:100%;
  max-width:1440px;
  margin-left:auto;
  margin-right:auto;
  padding-left:4px;
  padding-right:4px;
}

/* Remove inner gutters */
.max-1320 .row{
  margin-left:0;
  margin-right:0;
}

/* Nav side spacing */
.banner .max-1320{
  padding-left:6px;
  padding-right:6px;
}

@media (min-width:768px){
  .banner .max-1320{
    padding-left:24px;
    padding-right:24px;
  }
}

@media (min-width:1200px){
  .banner .max-1320{
    padding-left:32px;
    padding-right:32px;
  }
}


/* =========================
   NAVBAR BASE
========================= */
.banner .navbar{
  padding:0.5rem 0 !important;
}

.banner .navbar-toggler{
  border:none !important;
  outline:none !important;
}

.banner .navbar-brand{
  margin-right:0;
}

.banner .navbar-brand img{
  width:140px;
  height:auto;
  display:block;
}

/* Nav links (mobile first) */
.banner .navbar .nav-link{
  text-transform:uppercase;
  font-size:0.75rem;
  line-height:1.2;
  letter-spacing:0.05em;
}


/* =========================
   LOGO RESPONSIVE SIZES (CLEAN)
========================= */

/* Desktop large */
@media (min-width:1200px){
  .banner .navbar-brand img{
    width:140px;
  }
}

/* Laptop / 1024px */
@media (min-width:992px) and (max-width:1199.98px){
  .banner .navbar-brand img{
    width:130px; /* your target */
  }
}

/* Tablet */
@media (max-width:991.98px){
  .banner .navbar-brand img{
    width:110px;
  }
}

/* Mobile */
@media (max-width:575.98px){
  .banner .navbar-brand img{
    width:90px;
  }
}
/* =========================
   NAV HEIGHT  MOBILE/TABLET
========================= */
@media (max-width:991.98px){
  .banner{
    padding:4px 0 8px; /* tighter */
  }
}


/* =========================
   NAV HEIGHT DESKTOP
========================= */
/* Desktop spacing */
@media (min-width:1200px){
  .banner{
    padding:14px 0 32px;
  }
}

/* 1024px spacing */
@media (min-width:992px) and (max-width:1199.98px){
  .banner{
    padding:16px 0 36px; /* slightly more top */
  }
}

/* =========================
   MOBILE NAV (991px)
========================= */
.banner .navbar-collapse{
  text-align:center;
}

.banner .navbar-nav{
  margin-top:10px;
}

.banner .navbar-nav .nav-item{
  padding:6px 0;
}

.banner .navbar-nav .nav-link{
  white-space:normal;
}

/* Layout control */
@media (max-width:991.98px){

  .banner .navbar .max-1320{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    width:100%;
  }

  /* Toggler LEFT */
  .banner .navbar-toggler{
    order:1;
    flex:0 0 auto;
  }

  /* Center logo */
  .banner .navbar-brand-centered{
    order:2;
    flex:1 1 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0;
    position:static;
    transform:none;
  }

  /* Spacer for perfect centering */
  .banner .nav-spacer{
    order:3;
    flex:0 0 auto;
    width:56px;
    height:1px;
  }

  /* Menu full width */
  .banner #navbarNav{
    order:4;
    flex:0 0 100%;
    width:100%;
  }
}


/* =========================
   DESKTOP NAV (≥992px)
========================= */
@media (min-width:992px){

  .banner .navbar .max-1320{
    position:relative;
  }

  /* Center logo absolute */
  .banner .navbar-brand-centered{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%) translateY(10px);
    z-index:10;
    margin:0;
  }

  /* Horizontal layout */
  .banner .navbar-collapse{
    display:flex !important;
    align-items:center;
    width:100%;
    text-align:left;
  }

  .banner .navbar-nav{
    margin-top:0;
  }

  .banner .navbar-nav .nav-item{
    padding:0;
    margin:0;
  }

   /* Nav links */
  .banner .navbar-nav .nav-link{
    font-size:0.60rem;
    letter-spacing:0.06em;
    white-space:nowrap;
    max-width:none;
    text-align:center;
    display:inline-block;
    padding-left:16px;
    padding-right:16px;
  }

  /* Split menus */
  .banner #navbarNav > .navbar-nav{
    flex:1 1 0;
    display:flex;
    align-items:center;
  }

  .banner #navbarNav > .navbar-nav.nav-left{
    justify-content:flex-start;
    padding-right:var(--logo-gap);
  }

  .banner #navbarNav > .navbar-nav.nav-right{
    justify-content:flex-end;
    padding-left:var(--logo-gap);
  }
}

/* =========================
   NAV 1024px TUNING
========================= */

/* Adjust gap first */
@media (min-width:992px) and (max-width:1199.98px){
  :root{
    --logo-gap:50px;
  }
}

/* Then nav behavior */
@media (min-width:992px) and (max-width:1199.98px){
  .banner .navbar-nav .nav-link{
    white-space:nowrap;
    max-width:none;
    font-size:0.48rem;
    letter-spacing:0.05em;
    padding-left:15px;
    padding-right:15px;
  }
}

/* =========================
   ULTRA-WIDE TWEAKS
========================= */
@media (min-width:1440px){
  .banner .navbar-nav .nav-link{
    padding-left:18px;
    padding-right:18px;
  }
}

@media (min-width:2560px){
  :root{
    --logo-gap:150px;
  }

  .banner .navbar .nav-link{
    font-size:0.70rem;
  }
}