/**
 * Global CSS styles
 * Combines Infima (Docusaurus default) and custom styles
 */

/* Typography - Inter font configuration */
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/Inter_28pt-Light.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  font-weight: 500;
  font-style: normal;
  src: url('/fonts/Inter_28pt-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-style: normal;
  src: url('/fonts/Inter_28pt-Medium.ttf') format('truetype');
  font-display: swap;
}

/* Custom animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Navigation styles */
.navbar__logo {
  display: flex;
  align-items: center;
  height: 100%;
  transition: opacity var(--transition-fast);
}

.navbar__logo:hover {
  opacity: 0.9;
}

.navbar__logo img {
  max-width: 150px;
  height: auto;
}

.navbar__item {
  display: flex;
  align-items: center;
}

.navbar__link {
  padding: 0.75rem 1rem;
  transition: color var(--transition-fast);
  position: relative;
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--ifm-color-primary);
  transition: all var(--transition-normal);
  transform: translateX(-50%);
}

.navbar__link:hover::after {
  width: 100%;
}

/* Global typography and spacing */
body {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  background-color: #131213;
  color: #ffffff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Modern heading styles with fluid typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 3vw, 2rem); }
h4 { font-size: clamp(1rem, 2vw, 1.5rem); }

/* Enhanced paragraph styles */
p {
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5em;
}

/* Enhanced theme variables with modern color palette */
:root {
  --ifm-color-primary: #2e83ff;
  --ifm-color-primary-dark: #1a75ff;
  --ifm-color-primary-darker: #0066ff;
  --ifm-color-primary-darkest: #0052cc;
  --ifm-color-primary-light: #4791ff;
  --ifm-color-primary-lighter: #61a0ff;
  --ifm-color-primary-lightest: #7ab3ff;
  --ifm-background-color: #131213;
  --ifm-navbar-background-color: rgba(19, 18, 19, 0.8);
  --ifm-footer-background-color: #131213;
  --ifm-color-content: #ffffff;
  --ifm-menu-color: #ffffff;
  --ifm-toc-link-color: #ffffff;
  --ifm-breadcrumb-color-active: #2e83ff;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
  
  /* Custom shadow variables */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Custom transition variables */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode overrides */
[data-theme='dark'] {
  --ifm-background-color: #131213;
  --ifm-navbar-background-color: rgba(19, 18, 19, 0.8);
  --ifm-footer-background-color: #131213;
  --ifm-color-content: #ffffff;
  --ifm-menu-color: #ffffff;
  --ifm-toc-link-color: #ffffff;
  --ifm-link-color: #2e83ff;
  --ifm-breadcrumb-color-active: #2e83ff;
}

/* Enhanced layout elements with modern styling */
.footer {
  background-color: #131213;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3rem 0;
}

.footer a,
.footer p,
.footer span,
.footer div {
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--transition-fast);
}

.footer a:hover {
  color: var(--ifm-color-primary);
  text-decoration: none;
}

/* .navbar {
  background-color: var(--ifm-navbar-background-color);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color var(--transition-normal);
} */

.navbar__link {
  color: #ffffff;
}
/* 
.menu {
  background-color: #131213;
  padding: 1rem;
}

.menu__link {
  color: #ffffff;
  transition: all var(--transition-fast);
  border-radius: 6px;
}

.menu__link:hover {
  color: #2e83ff;
  background-color: rgba(46, 131, 255, 0.1);
}

.menu__link--active {
  color: #2e83ff;
  background-color: rgba(46, 131, 255, 0.15);
} */

.table-of-contents {
  background-color: #131213;
  padding: 1rem;
}

.table-of-contents__link {
  color: rgba(255, 255, 255, 0.8);
  transition: all var(--transition-fast);
}

.table-of-contents__link:hover,
.table-of-contents__link--active {
  color: #2e83ff;
  text-decoration: none;
}

/* Main content area */
.main-wrapper {
  background-color: #131213;
}

aside.theme-doc-sidebar-container {
  background-color: #131213;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-doc-sidebar-menu {
  background-color: #131213;
}

.theme-doc-toc-desktop {
  background-color: #131213;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navigation elements */
.breadcrumbs__link {
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--transition-fast);
}

.breadcrumbs__link:hover {
  color: #2e83ff;
  text-decoration: none;
}

/* Search */
.navbar__search-input {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  transition: all var(--transition-fast);
}

.navbar__search-input:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

/* Enhanced Mobile Responsiveness */
@media screen and (max-width: 768px) {
  /* Improved typography for mobile */
  body {
    font-size: 16px;
    line-height: 1.5;
  }

  h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  h3 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  h4 { font-size: clamp(1rem, 4vw, 1.5rem); }

  /* Better spacing on mobile */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Improved table handling */
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Better image handling */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Enhanced touch targets */
  .navbar__item,
  .menu__link,
  .table-of-contents__link,
  .navbar__toggle,
  button {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
}

/* Mobile Navigation */
@media (max-width: 996px) {
  .navbar__toggle {
    display: block;
  }

}

/* Prevent body scroll when menu is open */
/* body.menu-open {
  overflow: hidden;
} */

/* Enhanced touch feedback */
/* @media (hover: none) {
  .navbar__item:active,
  .menu__link:active,
  .table-of-contents__link:active {
    background-color: rgba(255, 255, 255, 0.1);
  }
} */

/* Enhanced code blocks with modern styling */
.theme-code-block {
  background-color: rgba(26, 26, 26, 0.95) !important;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  margin: 1.5rem 0;
}

/* Markdown content */
.markdown {
  color: rgba(255, 255, 255, 0.9);
  animation: fadeIn var(--transition-normal);
}

.markdown > * {
  animation: slideIn var(--transition-normal);
}

/* Links */
.markdown a {
  color: #2e83ff;
  transition: all var(--transition-fast);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.markdown a:hover {
  color: var(--ifm-color-primary-lighter);
  text-decoration-thickness: 2px;
}

/* Tables */
.markdown table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 2rem 0;
  width: 100%;
  border: none;
}

.markdown table * {
  border: none;
  border-bottom: none;
  border-color: transparent;
}

.markdown table tr {
  background-color: transparent;
  transition: background-color var(--transition-fast);
  border: none;
}

.markdown table tr:nth-child(2n) {
  background-color: rgba(255, 255, 255, 0.02);
}

.markdown table tr:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.markdown table th,
.markdown table td {
  padding: 0.75rem 1rem;
  text-align: left;
}

.markdown table th {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  background-color: rgba(255, 255, 255, 0.03);
}

.markdown table td {
  color: rgba(255, 255, 255, 0.8);
}

/* Override any Docusaurus table styles */
:root {
  --ifm-table-border-width: 0;
  --ifm-table-border-color: transparent;
  --ifm-table-stripe-background: transparent;
  --ifm-table-head-background: transparent;
  --ifm-table-head-color: rgba(255, 255, 255, 0.95);
  --ifm-table-head-font-weight: 600;
  --ifm-table-cell-padding: 0.75rem 1rem;
}

/* Additional table overrides */
.markdown table thead {
  border: none;
  background: none;
}

.markdown table thead tr {
  border: none;
  border-bottom: none;
  background-color: rgba(255, 255, 255, 0.03);
}

.markdown table thead th {
  border: none;
  border-bottom: none;
  background: none;
}

/* Blockquotes */
.markdown blockquote {
  border-left: 4px solid #2e83ff;
  background-color: rgba(46, 131, 255, 0.1);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}

/* Horizontal rules */
.markdown hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
  margin: 2rem 0;
}

/* Enhanced blog styles with mobile optimization */
.blog-post-title,
.blog-list-title,
.blog-list-page article header h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 1rem;
  transition: color var(--transition-fast);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Mobile-optimized blog images */
@media screen and (max-width: 768px) {
  .blog-post img,
  article.blog-list-item img {
    margin: 1.5rem 0;
    border-radius: 8px;
  }

  .blog-post-title,
  .blog-list-title {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
  }

  article.margin-bottom--xl {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
}

.blog-post-title:hover,
.blog-list-title:hover {
  color: var(--ifm-color-primary);
}

/* Enhanced blog images with modern styling */
.blog-post img,
article.blog-list-item img {
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
  border-radius: 12px;
  display: block;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-normal);
}

.blog-post img:hover,
article.blog-list-item img:hover {
  transform: scale(1.02);
}

/* Blog list customization */
article.margin-bottom--xl {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hide author info on blog list */
.avatar__photo,
.avatar__intro {
  display: none;
}

/* Show blog list images */
article header + div img:first-child {
  display: block;
  margin: 1.5rem 0;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

.homepage main {
  max-width: 100%;
  margin: 0;
  padding: 0;
}