/* ================================================
   Python Brasil — Custom CSS
   Styles that Tailwind CSS cannot handle natively
   ================================================ */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------
   Code block styling for Hugo syntax highlighting
   ------------------------------------------------ */

/* Hugo wraps highlighted code in .highlight > pre > code */
.highlight {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.highlight pre {
  margin: 0;
  padding: 1.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.7;
  tab-size: 4;
  -webkit-overflow-scrolling: touch;
}

.highlight pre code {
  font-family: "JetBrains Mono", "Fira Code", "Source Code Pro", "Cascadia Code",
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: transparent;
  padding: 0;
  border: none;
  font-size: inherit;
}

/* Inline code (not inside pre) */
:not(pre) > code {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  font-size: 0.85em;
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  background-color: #f1f5f9;
  color: #0f172a;
  word-break: break-word;
}

/* Dark mode inline code */
.dark :not(pre) > code {
  background-color: #334155;
  color: #e2e8f0;
}

/* Code copy button positioning */
.code-copy-btn {
  opacity: 0;
  transition: opacity 0.2s ease;
}

pre:hover .code-copy-btn {
  opacity: 1;
}

/* ------------------------------------------------
   Table of Contents (TOC) styling
   ------------------------------------------------ */

.toc {
  border-left: 3px solid #3b82f6;
  padding-left: 1rem;
}

.toc ul {
  list-style: none;
  padding-left: 0;
}

.toc ul ul {
  padding-left: 1rem;
}

.toc a {
  text-decoration: none;
  color: #64748b;
  transition: color 0.15s ease;
}

.toc a:hover {
  color: #3b82f6;
}

/* ------------------------------------------------
   Article content typography enhancements
   ------------------------------------------------ */

.prose table {
  font-size: 0.875rem;
}

.prose table th {
  white-space: nowrap;
}

.prose img {
  border-radius: 0.5rem;
}

/* ------------------------------------------------
   Skip to content (accessibility)
   ------------------------------------------------ */

.skip-to-content {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: #1e293b;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.skip-to-content:focus {
  top: 0;
}

/* ------------------------------------------------
   Print styles
   ------------------------------------------------ */

@media print {
  /* Hide non-essential elements */
  nav,
  footer,
  .code-copy-btn,
  .toc,
  [data-menu-toggle],
  [data-menu] {
    display: none !important;
  }

  /* Reset backgrounds and colors for printing */
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Ensure links are visible */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Don't show URL for internal links */
  a[href^="/"]::after,
  a[href^="#"]::after {
    content: "";
  }

  /* Code blocks */
  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid #ccc;
    padding: 0.5rem;
    page-break-inside: avoid;
  }

  /* Avoid breaking inside headings and images */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Tables */
  table {
    border-collapse: collapse;
  }

  table th,
  table td {
    border: 1px solid #ccc;
    padding: 0.25rem 0.5rem;
  }
}