/* 
  © 2025 datsforge 
  Proprietary – See LICENSE for details. 
*/

/* === Logo Styles === */
.logo,
.app-logo {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-md);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.logo img,
.app-logo img {
  width: auto;
  max-height: 3.7rem;
  height: 100%;
  transition: var(--md-sys-motion-medium);
}

.logo span,
.app-logo span {
  font-size: var(--md-sys-typescale-headline-medium);
  color: var(--md-sys-color-on-surface);
  transition: var(--md-sys-motion-medium);
}


/* === Sticky Navbar === */
#navbar {
  height: var(--navbar-height);
  position: sticky;
  top: 0;
  z-index: var(--md-sys-z-index-navbar);
  transition: transform var(--md-sys-motion-medium);
}

#navbar.hide-on-scroll {
  transform: translateY(-100%);
}

/* === Navbar Content === */
.navbar-base,
.navbar-main,
.navbar-legal,
.navbar-tp,
.navbar-f-phase {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 var(--md-sys-spacing-xl);

  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-container);

  /* border-bottom: var(--md-sys-border-thin) solid var(--md-sys-color-outline-variant); */
  box-shadow: var(--md-sys-elevation-3);
  font-family: var(--md-sys-typescale-font-family);
  box-sizing: border-box;
  border-bottom: var(--color-red) 1px solid;
}

/* === Navigation Links === */
.nav-links {
  display: flex;
  list-style: none;
  gap: var(--md-sys-spacing-3xl);
  margin: 0;
  padding: 0;
}

.nav-links a {
  position: relative;
  font-size: var(--md-sys-typescale-title-large);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  transition: color var(--md-sys-motion-short);
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 0;
  height: 4px;
  background-color: var(--md-sys-color-secondary);
  border-radius: var(--md-sys-shape-extra-small);
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:hover::after,
.nav-links a:focus::after,
.nav-links a:active::after {
  width: 100%;
}

.nav-links a.active {
  font-weight: bold;
  color: var(--md-sys-color-secondary);
}

.nav-links a:hover,
.nav-links a:focus {
  color: var(--md-sys-color-secondary);
}

.app-logo:hover span,
.app-logo:focus span,
.logo:hover span,
.logo:focus span {
  color: var(--color-red);
}

/*  Hide Navigation Menu for mobile */
.mobile-nav-menu,
.mobile-nav-menu~.toggle-button-label {
  display: none;
}