/*
  CUBE — Skill Browse Page Extras
  Additive only. Loaded LAST, after home.css / skills.css / people.css /
  cube-animation.css / particles.css / glass-overlay.css.
*/

/* ================================================
   TOP NAVBAR — remove opaque bar, keep avatar icon
   exactly where it is, just make the box transparent
   ================================================ */
.top-navbar,
.top-navbar .navbar-right,
.top-navbar .navbar-right * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* keep the avatar photo looking framed, not flat, since we stripped all borders above */
.top-navbar .navbar-avatar img {
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border-radius: 50%;
}

/* ================================================
   SKILL HEADING — glass card, matches home/profile
   ================================================ */
.skills-hero {
  background: var(--glass-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px 32px;
}

/* ================================================
   "VIEW PROFILE" BUTTONS — glass instead of solid
   ================================================ */
.view-profile-btn-full {
  background: var(--glass-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(150%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.view-profile-btn-full:hover {
  background: var(--primary) !important;
  color: #fff !important;
}