/* Navbar Component */

.navbar-slot {
     position: relative;
     padding-right: 20px;
}

.navbar {
     position: sticky;
     top: 12px;
     width: min(96%, 720px);
     margin: 0 auto 14px;
     background: linear-gradient(140deg, hsla(224, 30%, 12%, 0.93), hsla(229, 28%, 16%, 0.88));
     backdrop-filter: blur(16px);
     border: 1px solid hsla(42, 96%, 62%, 0.25);
     border-radius: 16px;
     box-shadow:
          0 14px 34px hsla(0, 0%, 0%, 0.4),
          inset 0 1px 0 hsla(0, 0%, 100%, 0.06);
     z-index: 60;
     transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

html[data-theme="light"] .navbar {
     background: linear-gradient(140deg, hsla(0, 0%, 100%, 0.93), hsla(48, 100%, 97%, 0.9));
     border-color: hsla(42, 65%, 46%, 0.26);
     box-shadow:
          0 12px 30px hsla(214, 23%, 22%, 0.16),
          inset 0 1px 0 hsla(0, 0%, 100%, 0.68);
}

.navbar-list {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 6px;
     padding: 6px;
}

.navbar-link {
     color: var(--light-gray);
     font-size: var(--fs-8);
     font-weight: var(--fw-500);
     padding: 10px 12px;
     border-radius: 10px;
     transition: color var(--transition-1), background-color var(--transition-1);
     position: relative;
}

html[data-theme="light"] .navbar-link {
     color: var(--white-2);
}

.navbar-link::before {
     content: "";
     position: absolute;
     bottom: 5px;
     left: 50%;
     transform: translateX(-50%) scaleX(0);
     width: calc(100% - 20px);
     height: 2px;
     background: var(--text-gradient-yellow);
     transition: transform var(--transition-1);
}

.navbar-link:hover,
.navbar-link:focus {
     color: var(--orange-yellow-crayola);
     background: hsla(42, 96%, 62%, 0.08);
}

.navbar-link.active {
     color: var(--orange-yellow-crayola);
     background: hsla(42, 96%, 62%, 0.12);
}

.navbar-link.active::before {
     transform: translateX(-50%) scaleX(1);
}

/* Responsive */
@media (min-width: 580px) {
     .navbar {
          width: min(94%, 780px);
     }

     .navbar-list {
          gap: 8px;
     }

     .navbar-link {
          font-size: 14px;
          padding: 11px 14px;
     }
}

@media (min-width: 768px) {
     .navbar-link {
          font-size: 15px;
     }
}

/* Desktop: fixed top-right bar */
@media (min-width: 1024px) {
     .navbar-slot {
          position: sticky;
          top: 20px;
          z-index: 100;
          margin-bottom: 18px;
     }

     .navbar {
          position: sticky;
          top: 0;
          width: max-content;
          border-radius: 14px;
          padding: 3px;
          z-index: 0;
          margin: 0 0 0 auto;
          /* Softer shadow for top-bar style */
          box-shadow:
               0 8px 24px hsla(0, 0%, 0%, 0.3),
               inset 0 1px 0 hsla(0, 0%, 100%, 0.06);
     }

     html[data-theme="light"] .navbar {
          box-shadow:
               0 8px 24px hsla(214, 23%, 22%, 0.14),
               inset 0 1px 0 hsla(0, 0%, 100%, 0.7);
     }

     .navbar-list {
          gap: 4px;
          padding: 4px 8px;
     }

     .navbar-link {
          font-size: 13px;
          padding: 9px 12px;
     }
}

@media (min-width: 1250px) {
     .navbar-slot {
          top: 24px;
     }

     .navbar-link {
          font-size: 14px;
          padding: 10px 14px;
     }
}