/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 html {scroll-behavior: smooth;}

 /* Navigation custom styles */
@media (max-width: 767px) {
  .navicon {
      height: .125em;
      width: 1.125em;
  }
  .navicon::before,
  .navicon::after {
      background: #3D4852;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      transition: all .2s ease-out;
      width: 100%;
  }
  .navicon::before {
      top: 5px;
  }
  .navicon::after {
      top: -5px;
  }
  .menu-btn:not(:checked)~.menu {
      display: none;
  }
  .menu-btn:checked~.menu {
      display: block;
  }
  .menu-btn:checked~.menu-icon .navicon {
      background: transparent;
  }
  .menu-btn:checked~.menu-icon .navicon::before {
      transform: rotate(-45deg);
  }
  .menu-btn:checked~.menu-icon .navicon::after {
      transform: rotate(45deg);
  }
  .menu-btn:checked~.menu-icon .navicon::before,
  .menu-btn:checked~.menu-icon .navicon::after {
      top: 0;
  }
}

.bio-content .trix-content h1 {
  font-size: 1rem !important;
  font-weight: normal !important;
  color: #374151 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bio-content .trix-content div {
  margin: 0 !important;
  padding: 0 !important;
}
.bio-content .trix-content {
  color: #374151 !important;
  line-height: 1.5 !important;
}
.bio-content p {
  display: none;
}

mark {
    border-radius: 1.4em 0 2em;
    background: transparent;
    background-image: linear-gradient(-100deg, hsla(48, 94%, 68%, .3), hsla(48, 94%, 68%, .7) 95%, hsla(48, 94%, 68%, .1));
}

/* Target the scrollbar specifically for the nav element within the aside */
aside nav::-webkit-scrollbar {
width: 8px; /* Width of the vertical scrollbar */
}

aside nav::-webkit-scrollbar-track {
background: #1f2937; /* Match sidebar background (gray-800) */
}

aside nav::-webkit-scrollbar-thumb {
background-color: #4b5563; /* Tailwind gray-600 for the thumb */
border-radius: 4px; /* Rounded corners for the thumb */
border: 2px solid #1f2937; /* Creates padding around the thumb, matching track background */
}

/* Optional: Style scrollbar thumb on hover */
aside nav::-webkit-scrollbar-thumb:hover {
background-color: #6b7280; /* Tailwind gray-500 on hover */
}

/* Firefox scrollbar styles (more limited control) */
aside nav {
scrollbar-width: thin; /* "auto" or "none" or "thin" */
scrollbar-color: #4b5563 #1f2937; /* thumb color track color */
}