/* main navbar color */
.navbar{
  background-color: #9a0000 !important; 
}

/* default links */
a {
  color: #9a0000 !important; 
}
a:hover {
  color: #333333 !important;
}

/* navbar links & brand */
.navbar .navbar-nav .nav-link,
.navbar .navbar-brand,
.navbar a {
  font-size: 20px !important; 
  color: #ffffff !important;  
}

/* text selection highlight */
::selection {
  background: #9a0000;
  color: #ffffff;
}

/* hover text color */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-brand:hover {
  color: #f0f0f0 !important;
}

/* toggler button (mobile) */
.navbar-toggler {
  border-color: transparent !important;
}

.navbar-toggler-icon {
  background-image: none !important;
}

.navbar-toggler-icon::before {
  content: "\2630"; 
  font-size: 2rem;
  color: #ffffff !important;
}

/* detail boxes */
details{
 padding: 10px;
 border-radius: 4px;
}
details > summary{
 padding: 3px;
 border-radius: 4px;
}
details[open]{
  background-color: #f4f4f4;
}
details[open] > summary{
  color: #333333;
}

/* icons inside navbar */
.navbar .bi,
.navbar svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: #ffffff !important;
}

.navbar .quarto-search-icon {
  color: #ffffff !important;
}

/* about-links */
.about-link {
  transition: 
    background 0.5s ease,
    box-shadow 0.4s ease;
}
.about-link:hover {
  color: black !important;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}


/* =========================================================
   NAVBAR FEATURES
   ========================================================= */


.navbar .navbar-nav .nav-link {
  padding: 6px 16px;
  border-radius: 4px;
  position: relative;
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
}

.navbar .navbar-nav .nav-link:hover {
  color: #ffffff;
  box-shadow: 0 15px 30px rgba(255,255,255,0.2);
}

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:focus {
  background-color: rgba(255,255,255,0.15);
  color: #ffffff;
  box-shadow: 4px 8px 12px rgba(0,0,0,0.3);
}

.navbar .navbar-nav .nav-link.active:hover {
  background-color: rgba(255,255,255,0.03);
  
}

/* mobile: adjust elements */
@media (max-width: 1000px) {
  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link.active,
  .navbar .navbar-nav .nav-link.active:hover,
  .navbar .navbar-nav .nav-link:focus {
    box-shadow: none !important;
  }

}

/* =========================================================
   GLOW EFFECTS FOR NAVBAR LINKS (ring-only glow)
   ========================================================= */

.navbar .navbar-nav .nav-link {
  z-index: 0;
  overflow: visible;
}

/* ring glow layer */
.navbar .navbar-nav .nav-link::before {
  content: '';
  position: absolute;
  inset: 0px;              /* how far the glow extends */
  border-radius: 8px;

  background: linear-gradient(
    45deg,
    #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000 
  );
  background-size: 300%;
  animation: navbar-glow 20s linear infinite;

  filter: blur(0px);        /* softness of the glow */
  opacity: 0;
  transition: opacity .35s ease-in-out;
  z-index: -1;

  /* punch a hole so the glow is ONLY around the border */
  padding: 2px; /* thickness */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}


/* show ring on hover */
.navbar .navbar-nav .nav-link:hover::before {
  opacity: 1;
}

/* keep your choice: no glow for active/focus */
.navbar .navbar-nav .nav-link.active::before,
.navbar .navbar-nav .nav-link:focus::before {
  opacity: 0;
}

@keyframes navbar-glow {
  0%   { background-position: 0 0; }
  50%  { background-position: 400% 0; }
  100% { background-position: 0 0; }
}



/* =========================================================
   EXPLOSION EFFECTS FOR WEBSITE LOGO
   ========================================================= */

.navbar-brand-logo{
  position: relative;
  display: inline-block;
  overflow: visible;
}

/* LOGO BASE */
.navbar-logo{
  height: 48px;
  display: block;
  transition: filter .25s ease, opacity .25s ease;
}

/* CLONE ANIMATO */
.navbar-brand-logo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/power-rangers/red-contour.png") center / contain no-repeat;
  pointer-events: none;

  transform: scale(1);
  opacity: 0;
}

/* HOVER */
.navbar-brand-logo:hover .navbar-logo{
  filter: brightness(1.5);
}

.navbar-brand-logo:hover::after{
  animation: explode-logo .35s ease-out forwards;
}

/* ANIMAZIONE */
@keyframes explode-logo{
  0%{transform: scale(1); opacity: 1; }
  50%{transform: scale(4); opacity: 0.33; }
  100%{transform: scale(8);opacity: 0;}
}