/* ==========================================
   ULC – Navbar Styles
   ========================================== */

/* NAVBAR CONTAINER */
/* ---------------------------------
/* Bottom white line */
.navbar {
  /* Visuals */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: #00000080;
  border-bottom: 0.1px solid #585858;
  font-family: 'ProtoMono' !important;

  /* Animation tokens */
  --nav-pad-y: 10px;            /* default vertical padding */
  --nav-pad-y-shrink: 0px;      /* vertical padding when shrunk */
  --title-opacity: 1;           /* 1 → 0 as you scroll */
  --logo-scale: 1;              /* 1 → 0.82 as you scroll */

  padding-top: var(--nav-pad-y);
  padding-bottom: var(--nav-pad-y);
  transition: padding 220ms ease, background-color 180ms ease, backdrop-filter 180ms ease;
}

/* NAVBAR BRAND */
/* ---------------------------------
/* Spacing around logo and title */
.navbar-brand {
  margin: 0px 16px 0px 8px;
  }

/* NAVBAR TITLE */
/* ---------------------------------
        /* Title Font settings */
.navbar-brand h1 {
  /*font-weight: 700;*/
  color: white;
  font-size: var(--ulc-font-xl);
  opacity: var(--title-opacity);
  transition: opacity 220ms ease;
}

/* Brand logo image scales smoothly */
.navbar .navbar-logo {
  height: 34px; /* base fallback */
  transform: scale(var(--logo-scale));
  transform-origin: left center;
  transition: transform 220ms ease;
}

/* Title Size for small screens (consolidated in MEDIA QUERIES below) */

/* NAVBAR links */
/* ---------------------------------
        /* Navbar link text */
.navbar-nav .nav-link {
  color: #bababa;
  font-size: var(--ulc-font-md);
}

/* White on hover */
.navbar-nav .nav-link:hover {
  color: white;
}

/*To make the links smaller, you can use the .navbar-nav .nav-link selector along with the .text-truncate
         utility class to truncate the text on smaller screens:
         */
@media (max-width: 767.98px) {
  .navbar-nav .nav-link {
    font-size: var(--ulc-font-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ------------------------------------------
   NAVBAR – link sizing and truncation on small screens
   ------------------------------------------ */
/* To make the links smaller, use .navbar-nav .nav-link along with truncation on small screens */

/* Responsive right alignment for nav links on ≥ md */
@media (min-width: 768px) {
    .navbar-nav.ml-auto {
        margin-left: auto;
    }
}

.navbar-collapse{
    padding-left: 3rem !important;
}

/* ==========================================
   MEDIA QUERIES
   ========================================== */

@media (max-width: 767.98px) {
  .navbar-brand h1 {
    font-size: var(--ulc-font-lg);
  }
}

@media only screen and (max-width: 600px) {
  .navbar-brand {
    font-size: 0.9rem !important;
  }
}

@media only screen and (min-width: 600px) {
  .navbar-brand {
    font-size: 1.25rem !important;
  }
}

/* ==========================================
   toggler
   ========================================== */
.navbar-toggler {
  border-color: transparent !important;
  font-size: 16px !important;
  color: white !important;
}

.navbar-toggler:focus, .navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* ==========================================
   SHRINK STATE (applied after scrolling past hero)
   ========================================== */
nav.navbar.navbar--shrink {
  padding-top: var(--nav-pad-y-shrink);
  padding-bottom: var(--nav-pad-y-shrink);
}

/* Slightly reduce nav link size in shrink for balance */
nav.navbar.navbar--shrink .navbar-nav .nav-link {
  font-size: calc(var(--ulc-font-md) * 0.95);
}