/*-- scss:defaults --*/

$theme: "drwater" !default;

//
// Color system
//

$white: #ffffff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #373a3c !default;
$gray-900: #212529 !default;
$black: #000000 !default;

$blue: #2780e3 !default;
$indigo: #6610f2 !default;
$purple: #170c3a !default;
$pink: #a52c60 !default;
$red: #cf4446 !default;
$orange: #ee6a24 !default;
$light-orange: #fb9e07 !default;
$yellow: #f6d645 !default;
$green: #118230 !default;
$teal: #20c997 !default;
$cyan: #3093cf !default;

$primary: $pink !default;
$secondary: $gray-700 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $orange !default;
$danger: $red !default;
$light: $gray-400 !default;
$dark: $black !default;

// Fonts

$font-family-sans-serif: "Libre Franklin" !default;

$headings-font-family: "Jost" !default;
$headings-font-weight: 600 !default;

$navbar-font-family: "Jost" !default;
$toc-font-family: "Jost" !default;
$footer-font-family: "Jost" !default;

// Body
$body-color: $gray-900 !default;

// Links
$link-color: $orange !default;
$link-decoration: none !default;
$link-hover-color: $red !default;
$link-hover-decoration: underline !default;

// Inline code
$code-bg: $gray-200 !default;
$code-color: $gray-900 !default;

// Code copy
$btn-code-copy-color-active: $orange !default;

// TOC
$toc-color: $orange;
$toc-font-size: 1em;

// Navbar
$navbar-bg: $purple !default;
$navbar-fg: $white !default;
$navbar-hl: $light-orange !default;

// Footer
$footer-bg: $gray-900 !default;
$footer-fg: $gray-300 !default;

/*-- scss:rules --*/

$web-font-path: "https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap" !default;

@if $web-font-path {
  @import url($web-font-path);
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Logo 悬停效果 */
.navbar-brand img {
  transition: all 0.3s ease;
  filter: brightness(0) invert(1);
  
  &:hover {
    filter: brightness(0) invert(0.55) sepia(1) saturate(2000%) hue-rotate(-8deg) brightness(1.05) contrast(1.2);
    transform: scale(1.05);
  }
}

// =============================================
// 桌面端样式 - 使用悬停展开下拉菜单
// =============================================
@media (min-width: 992px) {
  /* 导航栏主菜单项样式 */
  .navbar-nav .nav-item {
    position: relative;
    margin: 0 0.2rem;
    
    .nav-link {
      position: relative;
      color: $navbar-fg !important;
      font-weight: 500;
      padding: 0.75rem 1rem !important;
      border-radius: 8px;
      transition: all 0.3s ease;
      z-index: 1;
      
      /* 玻璃效果背景 */
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba($white, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 8px;
        opacity: 0;
        transition: all 0.3s ease;
        z-index: -1;
        border: 1px solid rgba($white, 0.2);
      }
      
      &:hover {
        color: $light-orange !important;
        transform: translateY(-2px);
        
        &::before {
          opacity: 1;
          background: rgba($white, 0.15);
          backdrop-filter: blur(15px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
      }
      
      /* 激活状态 */
      &.active {
        color: $light-orange !important;
        font-weight: 600;
        
        &::before {
          opacity: 1;
          background: rgba($light-orange, 0.2);
          backdrop-filter: blur(15px);
          border: 1px solid rgba($light-orange, 0.3);
        }
      }
    }
  }

  /* 有下拉菜单的主菜单项特殊样式 */
  .navbar-nav .nav-item.dropdown {
    .nav-link {
      padding-right: 2rem !important;
      
      &::after {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.3s ease;
      }
    }
    
    &:hover .nav-link::before {
      opacity: 1;
      background: rgba($white, 0.2);
      backdrop-filter: blur(20px);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    
    &:hover .nav-link::after {
      transform: translateY(-50%) rotate(-180deg);
      border-top-color: $light-orange;
    }
  }

  /* 桌面端下拉菜单悬停效果 */
  .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    background: rgba($purple, 0.98) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba($white, 0.1);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    margin-top: -1px;
    padding: 0.5rem 0;
    
    &.show {
      display: block;
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }

  .dropdown-item {
    color: $white !important;
    font-family: $navbar-font-family;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
    position: relative;
    
    /* 下拉菜单项的玻璃效果 */
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba($white, 0.05);
      border-radius: 4px;
      opacity: 0;
      transition: all 0.2s ease;
      z-index: -1;
    }
    
    &:hover, &:focus {
      color: $light-orange !important;
      transform: translateX(5px);
      background: transparent !important;
      
      &::before {
        opacity: 1;
        background: rgba($white, 0.1);
      }
    }
  }

  /* 确保下拉菜单与主菜单视觉上连接 */
  .navbar-nav .nav-item.dropdown:hover .nav-link {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

// =============================================
// 移动端样式 - 使用点击展开下拉菜单
// =============================================
@media (max-width: 991.98px) {
  /* 完全重置移动端导航样式，使用 Bootstrap 默认行为 */
  .navbar-collapse {
    background: rgba($purple, 0.98);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba($white, 0.1);
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    
    .navbar-nav {
      .nav-item {
        margin: 0;
        
        .nav-link {
          color: $navbar-fg !important;
          padding: 1rem 1.5rem !important;
          border-radius: 0;
          transition: all 0.2s ease;
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          &:hover {
            color: $light-orange !important;
            background: rgba($white, 0.1);
          }
          
          &.active {
            color: $light-orange !important;
            background: rgba($light-orange, 0.1);
            font-weight: 600;
          }
        }
        
        /* 下拉菜单项样式 */
        &.dropdown {
          .dropdown-toggle::after {
            transition: transform 0.3s ease;
          }
          
          &.show {
            .dropdown-toggle {
              color: $light-orange !important;
              background: rgba($white, 0.15);
              
              &::after {
                transform: rotate(-180deg);
              }
            }
          }
          
          .dropdown-menu {
            background: rgba(darken($purple, 5%), 0.95) !important;
            border: none;
            border-radius: 0;
            padding: 0;
            margin: 0;
            position: static;
            float: none;
            display: none;
            
            &.show {
              display: block !important;
            }
          }
        }
      }
    }
  }

  /* 移动端下拉菜单项 */
  .dropdown-item {
    color: $navbar-fg !important;
    padding: 0.875rem 1.5rem 0.875rem 2.5rem !important;
    border-radius: 0;
    transition: all 0.2s ease;
    
    &:hover, &:focus {
      color: $light-orange !important;
      background: rgba($white, 0.1) !important;
      transform: none;
    }
    
    &.active {
      color: $light-orange !important;
      background: rgba($light-orange, 0.1) !important;
      font-weight: 600;
    }
  }

  /* 移动端导航栏折叠按钮 */
  .navbar-toggler {
    border: 1px solid rgba($white, 0.2);
    padding: 0.5rem 0.75rem;
    
    &:focus {
      box-shadow: 0 0 0 0.2rem rgba($light-orange, 0.25);
    }
    
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
  }
  
  /* 禁用桌面端的悬停效果 */
  .navbar-nav .nav-item .nav-link::before {
    display: none;
  }
  
  .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    display: none !important;
  }
}

// =============================================
// 通用样式
// =============================================

/* 导航栏整体样式 */
.navbar {
  backdrop-filter: blur(10px);
  background: rgba($purple, 0.95) !important;
  border-bottom: 1px solid rgba($white, 0.1);
}

/* 为有下拉菜单的导航项添加视觉指示 */
.navbar-nav .nav-item.dropdown > .nav-link::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

/* 确保 Bootstrap 的 JavaScript 交互正常工作 */
.navbar-nav .dropdown-toggle::after {
  display: inline-block !important;
}

/* 修复移动端点击事件 */
.navbar-nav .nav-item.dropdown .nav-link {
  cursor: pointer;
}