/*
d8b   db  .d8b.  db    db d8888b.  .d8b.  d8888b. 
888o  88 d8' `8b 88    88 88  `8D d8' `8b 88  `8D 
88V8o 88 88ooo88 Y8    8P 88oooY' 88ooo88 88oobY' 
88 V8o88 88~~~88 `8b  d8' 88~~~b. 88~~~88 88`8b   
88  V888 88   88  `8bd8'  88   8D 88   88 88 `88. 
VP   V8P YP   YP    YP    Y8888P' YP   YP 88   YD 
*/

.navbar {
  display: flex;
  padding: 1rem;

  justify-content: space-between; /* Space between brand and nav links */
  align-items: center;

  .brand { /* Logo and site name */
    display: flex;
    flex-direction: column;

    color: inherit;
    font-size: 1.25rem;
    letter-spacing: -.03em;
    line-height: 1.1;
    text-decoration: none;

    .brand-sub {
      font-size: .8rem;
      letter-spacing: .05em;
      opacity: .7;
    }
  }

  .nav-links { /* Navigation links */
    display: flex;
    gap: 1.5rem;
    margin-left: 4rem;

    text-align: center;

    align-items: center;

    @media (max-width: 768px) {
      flex-direction: column;
      gap: 1rem;
      position: absolute;
      top: 100%;
      right: 0;
      padding: 1rem;

      background: var(--secondary-bg-color);
      border-bottom-left-radius: 12px;
      border: 2px solid var(--tertiary-bg-color);
      border-top: none;
      box-shadow: 0 10px 30px rgba(0,0,0,.15);
      opacity: 0; /* invisible */
      transition: opacity 0.3s ease;

      pointer-events: none;   /* prevent clicks when closed */

      align-items: flex-start;
      overflow: hidden;

      &.open {
        opacity: 1; /* visible */
        pointer-events: auto; /* allow clicks when open */
      }
    }

    .nav-link { /* Individual nav link */
      position: relative;

      color: inherit;
      text-decoration: none;
      font-weight: 500;

      &::after { /* underline effect */
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        height: 2px;
        transform: scaleX(0);

        background: currentColor;
        transition: transform .2s ease;
      }

      &:hover {
        &::after { /* show underline on hover */
          transform: scaleX(1);
        }
      }
    }

    .cta { /* Custom call-to-action button in nav */
      margin-top: 0;
      padding: 0.5rem 1.5rem;
    }
  }

  .nav-toggle { /* Hamburger menu button for mobile */
    display: none;

    font-size: 1.4rem;

    background: none;
    border: none;

    cursor: pointer;

    @media (max-width: 768px) {
      display: block;
    }
  }
}


/*
.d8888.  .o88b. d8888b.  .d88b.  db      db             d888888b  .d88b.         d888888b  .d88b.  d8888b. 
88'  YP d8P  Y8 88  `8D .8P  Y8. 88      88             `~~88~~' .8P  Y8.        `~~88~~' .8P  Y8. 88  `8D 
`8bo.   8P      88oobY' 88    88 88      88                88    88    88           88    88    88 88oodD' 
  `Y8b. 8b      88`8b   88    88 88      88      C8888D    88    88    88 C8888D    88    88    88 88~~~   
db   8D Y8b  d8 88 `88. `8b  d8' 88booo. 88booo.           88    `8b  d8'           88    `8b  d8' 88      
`8888Y'  `Y88P' 88   YD  `Y88P'  Y88888P Y88888P           YP     `Y88P'            YP     `Y88P'  88      
*/

button#scrollTopBtn {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 52px;
  height: 52px;
  transform: translateY(14px) scale(0.95);
  z-index: 1000;

  color: var(--primary-text-color);
  font-size: 1.25rem;
  font-weight: 600;

  opacity: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(
    135deg,
    rgba(100, 100, 100, 0.1),
    rgba(100, 100, 100, 0.35)
  );
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;

  cursor: pointer;
  pointer-events: none;

  &.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  &:hover {
    box-shadow:
      0 14px 35px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  &:active {
    transform: scale(0.96);
  }
}