/* Iosevka Regular */
@font-face {
  font-family: "Iosevka";
  src: url("/fonts/aesthetic-iosevka-original-regular.woff2") format("woff2"),
       url("/fonts/aesthetic-iosevka-original-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Iosevka Italic */
@font-face {
  font-family: "Iosevka";
  src: url("/fonts/aesthetic-iosevka-original-italic.woff2") format("woff2"),
       url("/fonts/aesthetic-iosevka-original-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Iosevka Bold */
@font-face {
  font-family: "Iosevka";
  src: url("/fonts/aesthetic-iosevka-original-bold.woff2") format("woff2"),
       url("/fonts/aesthetic-iosevka-original-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Roboto Regular */
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Regular.woff2") format("woff2"),
       url("/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Roboto Italic */
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Italic.woff2") format("woff2"),
       url("/fonts/Roboto-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Roboto Bold */
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Bold.woff2") format("woff2"),
       url("/fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Iosevka Mono */
@font-face {
  font-family: "Iosevka Mono";
  src: url("/fonts/font-complete-mono.woff2") format("woff2"),
       url("/fonts/font-complete-mono.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-variant: common-ligatures tabular-nums;
  font-display: swap;
}

.mermaid {
  cursor: grab; /* Indica que el elemento se puede mover */
}

.mermaid:active {
  cursor: grabbing; /* Cambia al hacer click */
}

/* Contenedor general para las fórmulas en bloque */
.katex-container {
  display: block;
  margin: 1rem 0; /* Espaciado superior e inferior */
  padding: 0.8rem 1rem; /* Espaciado interno */
  background-color: #1d1f30; /* Fondo marrón oscuro */
  border: 1px solid #8aacf4; /* Borde azul claro */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra sutil */
  max-width: 100%; /* Ajusta el ancho máximo del bloque */
  text-align: left; /* Alinea todo el contenido a la izquierda */
  overflow-x: auto; /* Scroll horizontal si el contenido es muy ancho */
}

/* Ajuste para las fórmulas en display mode */
.katex-display {
  display: block; /* Asegura que sea un bloque */
  text-align: left; /* Alinea el contenido a la izquierda */
  margin: 0; /* Elimina márgenes extra */
}

/* Ajuste para fórmulas inline */
.katex-inline {
  display: inline; /* Flujo natural con el texto */
  background: none; /* Sin fondo */
  border: none; /* Sin borde */
  padding: 0; /* Sin espaciado */
  margin: 0 0.2rem; /* Espaciado horizontal ligero */
  color: #8caaee; /* Azul claro */
  font-size: 0.95rem; /* Tamaño ajustado */
  line-height: 1.2;
  vertical-align: baseline; /* Ajuste vertical */
}

/* Mejorar el texto general de las fórmulas */
.katex {
  font-size: 1rem; /* Tamaño base */
  line-height: 1.4;
  color: #8caaee; /* Azul claro */
  display: inline-block;
  max-width: 100%;
}

/* Responsividad: ajustar tamaño en pantallas pequeñas */
@media (max-width: 768px) {
  .katex-container {
    padding: 0.6rem 0.8rem;
  }

  .katex,
  .katex-display {
    font-size: 0.9rem; /* Reducir tamaño en dispositivos pequeños */
    line-height: 1.3;
  }
}

.zoomable-image {
    cursor: zoom-in;
    transition: transform 0.2s ease, filter 0.2s ease;
    max-width: 100%;
    border-radius: 4px;
}

.zoomable-image:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}

/* ============================================
   Callout/Admonition Styles
   ============================================ */

.callout {
  margin: 1.5rem 0;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid;
  background-color: rgba(138, 172, 244, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.callout:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.callout-title {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.callout-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.callout-title-text {
  color: #c6d0f5;
}

.callout-content {
  color: #bac2de;
  line-height: 1.6;
  margin-top: 0.5rem;
}

.callout-content p:last-child {
  margin-bottom: 0;
}

/* Callout type-specific colors */
.callout-note {
  border-left-color: #8caaee;
  background-color: rgba(140, 170, 238, 0.1);
}

.callout-tip {
  border-left-color: #a6d189;
  background-color: rgba(166, 209, 137, 0.1);
}

.callout-info {
  border-left-color: #81c8be;
  background-color: rgba(129, 200, 190, 0.1);
}

.callout-warning {
  border-left-color: #ef9f76;
  background-color: rgba(239, 159, 118, 0.1);
}

.callout-danger {
  border-left-color: #e78284;
  background-color: rgba(231, 130, 132, 0.1);
}

.callout-success {
  border-left-color: #a6d189;
  background-color: rgba(166, 209, 137, 0.1);
}

.callout-important {
  border-left-color: #ca9ee6;
  background-color: rgba(202, 158, 230, 0.1);
}

.callout-question {
  border-left-color: #85c1dc;
  background-color: rgba(133, 193, 220, 0.1);
}

/* Error states for content processing */
.math-error,
.mermaid-error {
  color: #e78284;
  background-color: rgba(231, 130, 132, 0.1);
  padding: 0.5rem;
  border-radius: 4px;
  border-left: 3px solid #e78284;
  font-family: monospace;
  font-size: 0.9rem;
  display: inline-block;
  margin: 0.5rem 0;
}

/* Responsive adjustments for callouts */
@media (max-width: 768px) {
  .callout {
    margin: 1rem 0;
    padding: 0.8rem;
  }

  .callout-title {
    font-size: 1rem;
  }

  .callout-icon {
    font-size: 1.1rem;
  }
}

/* ============================================
   Latte Theme Improvements (Light Mode)
   ============================================ */

/* Latte theme - Better contrast for mocha-card elements */
html.latte .mocha-card {
  background-color: #7287fd !important; /* Latte blue - same as navbar logo text */
  color: #ffffff !important; /* White text for better contrast */
  border-color: #7287fd !important; /* Latte blue */
  box-shadow: 0 2px 8px rgba(114, 135, 253, 0.35) !important; /* Blue-tinted shadow for depth */
}

/* Latte theme - Hero sections with better contrast */
html.latte .hero-section,
html.latte .hero-section.bg-base {
  background-color: #ffffff !important; /* White background like the rest of the page */
  box-shadow: none !important;
}

/* Mocha/Frappe theme - Hero sections without background for consistency */
html.mocha .hero-section,
html.mocha .hero-section.bg-base,
html.frappe .hero-section,
html.frappe .hero-section.bg-base {
  background-color: transparent !important; /* Transparent background to match body */
  box-shadow: none !important;
}

/* Latte theme - Text colors for better readability */
html.latte .text-blue {
  color: #7287fd !important; /* Latte blue - lighter blue like navbar logo */
}

html.latte .text-blue-200 {
  color: #04a5e5 !important; /* Latte sapphire - vivid blue */
}

html.latte .text-blue-300 {
  color: #209fb5 !important; /* Latte sky - teal blue */
}

html.latte .text-white {
  color: #4c4f69 !important; /* Latte text - dark gray instead of white */
}

/* Exception for hero badge - keep white text */
html.latte .hero-section .text-white {
  color: #ffffff !important; /* Force white for badge */
}

/* Newsletter "Join the Community" icon - white in Latte theme */
html.latte .mocha-card .bg-blue.bg-opacity-20 .text-blue {
  color: #ffffff !important; /* Force white for newsletter community icon */
}

html.latte .text-red,
html.latte .hover\:text-red:hover {
  color: #d20f39 !important; /* Latte red - vivid red */
}

/* Latte theme - Borders */
html.latte .border-blue,
html.latte .border-blue-200 {
  border-color: #7287fd !important; /* Latte blue */
}

/* Latte theme - Backgrounds */
html.latte .bg-blue {
  background-color: #7287fd !important; /* Latte blue */
}

html.latte .bg-base {
  background-color: #ffffff !important; /* White background - clean and modern */
}

/* Body background - ensure it's white */
html.latte body {
  background-color: #ffffff !important; /* White background for body */
}

/* Override for hero sections and cards specifically */
html.latte .hero-section.bg-base {
  background-color: #ffffff !important; /* White background for hero sections */
}

html.latte .mocha-card.bg-base {
  background-color: #7287fd !important; /* Latte blue - same as navbar logo text */
}

/* Stats boxes in hero - use light blue background instead of gray */
html.latte .hero-section .border.border-blue.bg-base.bg-opacity-50 {
  background-color: #7287fd !important; /* Blue background for stats */
  border-color: #7287fd !important;
  color: #ffffff !important;
}

html.latte .hero-section .border.border-blue.bg-base.bg-opacity-50 .text-blue {
  color: #ffffff !important; /* White text for stats numbers */
}

html.latte .hero-section .border.border-blue.bg-base.bg-opacity-50 .text-blue-200 {
  color: #e6e9ef !important; /* Light gray for stats labels */
}

/* Improved text contrast on gray-blue backgrounds */
html.latte .hero-section .text-blue {
  color: #04a5e5 !important; /* Latte sapphire - brighter blue for better contrast */
}

html.latte .mocha-card .text-blue {
  color: #ffffff !important; /* White text on cyan background */
}

html.latte .hero-section .text-blue-200 {
  color: #3a3d4f !important; /* Much darker for readability */
}

html.latte .mocha-card .text-blue-200 {
  color: #e6e9ef !important; /* Light gray for secondary text on cyan cards */
}

html.latte .hero-section .text-blue-300 {
  color: #4c4f69 !important; /* Darker gray for better contrast */
}

html.latte .mocha-card .text-blue-300 {
  color: #dce0e8 !important; /* Slightly darker light gray on cyan cards */
}

/* Hero section headings - make them stand out */
html.latte .hero-section h1.text-blue,
html.latte .hero-section h1,
html.latte .hero-section h2,
html.latte .hero-section h3 {
  color: #7287fd !important; /* Lighter blue matching navbar logo */
  font-weight: 700 !important;
}

/* Card titles */
html.latte .mocha-card h2,
html.latte .mocha-card h3 {
  color: #ffffff !important; /* White text on cyan background */
}

/* Stats numbers in hero sections */
html.latte .hero-section .text-3xl,
html.latte .hero-section .text-2xl {
  color: #1e66f5 !important; /* Darker blue for numbers */
}

/* Bottom bar in series cards (Begin Journey, Dive In, etc.) */
html.latte .mocha-card .bg-base.bg-opacity-50 {
  background-color: #a8b3ca !important; /* Slightly darker gray-blue for bottom bar */
  opacity: 1 !important; /* Override opacity class */
}

/* Latte theme - Code and technical elements */
/* Only apply to non-Shiki pre elements */
html.latte pre:not(.astro-code) {
  background-color: #ffffff !important; /* White background */
  /* color removed to allow Shiki syntax highlighting */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid #e3e8ef !important; /* Subtle border for definition */
}

/* Shiki code blocks - only border and shadow, let Shiki handle colors */
html.latte pre.astro-code {
  background-color: #ffffff !important; /* White background instead of gray */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid #e3e8ef !important;
  /* Let Shiki's inline styles handle text colors */
}

html.latte code {
  background-color: #ffffff !important; /* White background for inline code */
  color: #263238 !important; /* Material dark gray */
  border: 1px solid #d6dce5 !important; /* Subtle border */
  padding: 0.2em 0.4em !important;
  border-radius: 3px !important;
}

/* Remove styling from code inside pre blocks to allow syntax highlighting */
html.latte pre:not(.astro-code) code {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  /* color: inherit removed to allow syntax highlighting */
}

/* Shiki code - completely hands-off */
html.latte pre.astro-code code {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  /* No color rules - let Shiki's inline styles work */
}

/* Latte theme - TOC container */
html.latte .toc-container {
  background-color: #ffffff !important; /* White background */
  border: 2px solid #7287fd !important; /* Blue border */
  box-shadow: 0 4px 12px rgba(114, 135, 253, 0.15) !important; /* Softer shadow */
}

html.latte .toc-title {
  color: #7287fd !important; /* Blue text */
  font-weight: 700 !important;
}

html.latte .toc-title svg {
  color: #7287fd !important; /* Blue icons */
}

html.latte .toc-title:hover {
  color: #d20f39 !important; /* Red on hover */
}

html.latte .toc-title:hover svg {
  color: #d20f39 !important; /* Red icons on hover */
}

/* H1 links in TOC */
html.latte .toc-list > li > a {
  color: #7287fd !important; /* Blue for H1 links - bold primary headings */
  font-weight: 600 !important;
}

html.latte .toc-list > li > a:hover {
  color: #d20f39 !important; /* Red on hover */
  background-color: rgba(114, 135, 253, 0.12) !important;
  border-radius: 6px !important;
}

/* H2 links in TOC */
html.latte .toc-list > li > ul > li > a {
  color: #4c4f69 !important; /* Dark gray for H2 - good hierarchy and readability */
  font-weight: 500 !important;
}

html.latte .toc-list > li > ul > li > a:hover {
  color: #d20f39 !important; /* Red on hover */
  background-color: rgba(114, 135, 253, 0.1) !important;
  border-radius: 6px !important;
}

/* H3 links in TOC */
html.latte .toc-list > li > ul > li > ul > li > a {
  color: #5c5f77 !important; /* Light gray for H3 - maintains hierarchy */
  font-weight: 400 !important;
}

html.latte .toc-list > li > ul > li > ul > li > a:hover {
  color: #d20f39 !important; /* Red on hover */
  background-color: rgba(114, 135, 253, 0.08) !important;
  border-radius: 6px !important;
  opacity: 1 !important;
}

/* Latte theme - Details/Accordions */
html.latte details {
  background-color: #ffffff !important; /* White background */
  color: #263238 !important; /* Material dark gray */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid #e3e8ef !important;
}

html.latte summary {
  color: #1e66f5 !important; /* Latte blue */
}

html.latte summary:hover {
  background-color: rgba(114, 135, 253, 0.15) !important;
  color: #04a5e5 !important; /* Latte sapphire */
}

/* Latte theme - Tables */
html.latte table {
  background-color: #ffffff !important;
  color: #263238 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid #e3e8ef !important;
}

html.latte th {
  background-color: #7287fd !important;
  color: #eff1f5 !important; /* Latte base - light text on blue */
}

html.latte td {
  border-color: #acb0be !important; /* Latte surface2 for borders */
}

/* Latte theme - Callouts */
html.latte .callout {
  background-color: rgba(114, 135, 253, 0.15) !important; /* Latte blue with opacity */
}

html.latte .callout-title-text {
  color: #1e66f5 !important; /* Latte blue */
}

html.latte .callout-content {
  color: #5c5f77 !important; /* Latte subtext0 */
}

/* Latte theme - Article content text improvements */
html.latte .post p {
  color: #4c4f69 !important; /* Latte text - dark gray for body text */
}

html.latte .post li {
  color: #4c4f69 !important; /* Latte text - dark gray for lists */
}

html.latte .post h1 {
  color: #1e66f5 !important; /* Latte blue - dark blue for h1 */
  border-bottom-color: #7287fd !important; /* Latte blue for border */
}

html.latte .post h2 {
  color: #1e66f5 !important; /* Latte blue - dark blue for h2 */
  border-bottom-color: #7287fd !important; /* Latte blue for border */
}

html.latte .post h3 {
  color: #04a5e5 !important; /* Latte sapphire */
}

html.latte .post h4 {
  color: #209fb5 !important; /* Latte sky */
}

html.latte .post strong {
  color: #1e66f5 !important; /* Latte blue for bold text */
}

html.latte .post p a,
html.latte .post li a {
  color: #04a5e5 !important; /* Latte sapphire for links */
}

html.latte .post p a:hover,
html.latte .post li a:hover {
  color: #d20f39 !important; /* Latte red on hover */
}

html.latte .post blockquote {
  color: #5c5f77 !important; /* Latte subtext0 */
  border-left-color: #7287fd !important; /* Latte blue */
  background-color: rgba(114, 135, 253, 0.1) !important;
}

html.latte .post figcaption {
  color: #5c5f77 !important; /* Latte subtext0 */
}

/* Latte theme - Inline code */
html.latte .post p code,
html.latte .post li code {
  background-color: #ffffff !important; /* White background */
  color: #c7254e !important; /* Pink-red for code (Material inspired) */
  border: 1px solid #d6dce5 !important; /* Subtle border */
  font-weight: 600 !important; /* Make it bolder */
  padding: 0.2em 0.4em !important;
  border-radius: 3px !important;
}

/* Latte theme - Code blocks */
/* Only apply to non-Shiki pre elements */
html.latte .post pre:not(.astro-code) {
  background-color: #ffffff !important; /* White background for code blocks */
  /* color removed to allow Shiki syntax highlighting */
  border: 1px solid #e3e8ef !important; /* Subtle border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* Shiki code blocks in posts - only border and shadow */
html.latte .post pre.astro-code {
  background-color: #ffffff !important; /* White background instead of gray */
  border: 1px solid #e3e8ef !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  /* Let Shiki's inline styles handle text colors */
}

html.latte .post pre:not(.astro-code) code {
  /* color removed to allow Shiki syntax highlighting to work */
  background-color: transparent !important;
  border: none !important; /* Remove border from code blocks */
  padding: 0 !important; /* Remove padding from code blocks */
}

/* Shiki code elements - no overrides at all */
html.latte .post pre.astro-code code,
html.latte .post pre.astro-code code span {
  /* Let Shiki's inline styles work naturally */
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Latte theme - Mermaid diagrams */
html.latte .post .mermaid {
  background-color: #ffffff !important;
  border: 1px solid #e3e8ef !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* Latte theme - KaTeX math */
html.latte .katex-container {
  background-color: #ffffff !important; /* White background for consistency */
  border: 1px solid #e3e8ef !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* Latte theme - Images in articles */
html.latte .post img {
  border-color: #7287fd !important;
  box-shadow: 0 4px 12px rgba(76, 79, 105, 0.2) !important;
}

html.latte .katex,
html.latte .katex-inline {
  color: #2d3142 !important; /* Very dark for better contrast */
}

/* ============================================
   Coffee Button Styles (Buy Me a Coffee)
   ============================================ */

/* Latte theme (light mode) - Blue colors matching the theme */
/* Using .mocha-card .coffee-cta selector for higher specificity to override mocha-card's white text */
html.latte .mocha-card .coffee-cta {
  border-color: #7287fd !important; /* Latte blue - matching cards */
  color: #7287fd !important; /* Latte blue */
  background-color: transparent !important; /* Transparent background by default */
}

/* All icons inside coffee-cta - visible by default */
html.latte .mocha-card .coffee-cta svg,
html.latte .mocha-card .coffee-cta .w-12.h-12 {
  color: #7287fd !important; /* Blue icon */
}

/* All text elements inside coffee-cta - visible by default */
html.latte .mocha-card .coffee-cta span,
html.latte .mocha-card .coffee-cta span.text-lg,
html.latte .mocha-card .coffee-cta span.text-sm,
html.latte .mocha-card .coffee-cta .coffee-cta-text {
  color: #7287fd !important; /* Blue text */
}

html.latte .mocha-card .coffee-cta:hover {
  background-color: #7287fd !important; /* Latte blue background */
  color: white !important;
  border-color: #7287fd !important;
}

html.latte .mocha-card .coffee-cta:hover svg,
html.latte .mocha-card .coffee-cta:hover .w-12.h-12 {
  color: white !important; /* White icon on hover */
}

html.latte .mocha-card .coffee-cta:hover span,
html.latte .mocha-card .coffee-cta:hover span.text-lg,
html.latte .mocha-card .coffee-cta:hover span.text-sm,
html.latte .mocha-card .coffee-cta:hover .coffee-cta-text {
  color: white !important; /* White text on hover */
}

/* Frappe/Mocha themes (dark mode) - Yellow colors */
html.frappe .coffee-cta,
html.mocha .coffee-cta {
  border-color: rgb(234 179 8) !important; /* yellow-500 */
  color: rgb(253 224 71) !important; /* yellow-300 */
}

html.frappe .coffee-cta:hover,
html.mocha .coffee-cta:hover {
  background-color: rgb(245 158 11) !important; /* amber-500 */
  color: black !important;
}

html.frappe .coffee-cta-text,
html.mocha .coffee-cta-text {
  color: rgb(253 224 71) !important; /* yellow-300 */
}

html.frappe .coffee-cta:hover .coffee-cta-text,
html.mocha .coffee-cta:hover .coffee-cta-text {
  color: black !important;
}

/* ============================================
   Search/Pagefind Styles - Latte Theme
   ============================================ */

/* Search modal and search page - Latte theme overrides */
html.latte #modal-search .pagefind-ui__search-input,
html.latte .pagefind-ui__search-input {
  background: #ffffff !important; /* White background */
  border: 1px solid #d6dce5 !important; /* Subtle border like code blocks */
  color: #263238 !important; /* Material dark gray */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

html.latte #modal-search .pagefind-ui__search-input::placeholder,
html.latte .pagefind-ui__search-input::placeholder {
  color: #90a4ae !important; /* Material gray for placeholder */
  opacity: 1 !important;
}

html.latte #modal-search .pagefind-ui__search-input:focus,
html.latte .pagefind-ui__search-input:focus {
  border-color: #3F51B5 !important; /* Material blue */
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.1) !important;
  outline: none !important;
}

/* Search results - Latte theme */
html.latte #modal-search .pagefind-ui__result,
html.latte .pagefind-ui__result {
  border: 1px solid #e3e8ef !important; /* Light border */
  background: #ffffff !important; /* White background */
  color: #263238 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border-radius: 4px !important;
  margin-bottom: 0.5rem !important;
}

html.latte #modal-search .pagefind-ui__result:hover,
html.latte .pagefind-ui__result:hover {
  border-color: #3F51B5 !important; /* Material blue */
  background: #f8f9fa !important; /* Very light gray on hover */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
}

/* Result titles - Latte theme */
html.latte #modal-search .pagefind-ui__result-title,
html.latte .pagefind-ui__result-title {
  color: #3F51B5 !important; /* Material blue */
  font-weight: 600 !important;
}

html.latte #modal-search .pagefind-ui__result-title:hover,
html.latte .pagefind-ui__result-title:hover {
  color: #9C27B0 !important; /* Material purple on hover */
}

/* Result excerpts - Latte theme */
html.latte #modal-search .pagefind-ui__result-excerpt,
html.latte .pagefind-ui__result-excerpt {
  color: #546e7a !important; /* Material blue-gray */
}

/* Search matches/highlights - Latte theme */
html.latte #modal-search .pagefind-ui__result-excerpt mark,
html.latte .pagefind-ui__result-excerpt mark {
  background: #FFF9C4 !important; /* Material yellow light */
  color: #263238 !important; /* Material dark gray for contrast */
  font-weight: 700 !important;
  padding: 0.125rem 0.25rem !important;
  border-radius: 2px !important;
  border: none !important;
}

/* Search messages - Latte theme */
html.latte #modal-search .pagefind-ui__message,
html.latte .pagefind-ui__message {
  color: #546e7a !important; /* Material blue-gray */
}

/* Clear button - Latte theme */
html.latte #modal-search .pagefind-ui__search-clear,
html.latte .pagefind-ui__search-clear {
  background: #ffffff !important;
  color: #546e7a !important;
  border: 1px solid #d6dce5 !important;
  border-radius: 4px !important;
}

html.latte #modal-search .pagefind-ui__search-clear:hover,
html.latte .pagefind-ui__search-clear:hover {
  background: #e8eaed !important;
  border-color: #3F51B5 !important;
  color: #3F51B5 !important;
}

/* Search result tags - Latte theme */
html.latte #modal-search .pagefind-ui__result-tag,
html.latte .pagefind-ui__result-tag {
  background: #ffffff !important;
  color: #3F51B5 !important;
  border: 1px solid #d6dce5 !important;
  border-radius: 12px !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 0.875rem !important;
}

/* Search buttons - Latte theme */
html.latte #modal-search .pagefind-ui__button,
html.latte .pagefind-ui__button {
  background: #3F51B5 !important; /* Material blue */
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.latte #modal-search .pagefind-ui__button:hover,
html.latte .pagefind-ui__button:hover {
  background: #303F9F !important; /* Darker Material blue */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}

/* Scrollbar - Latte theme */
html.latte #modal-search .pagefind-ui__results-area::-webkit-scrollbar-track,
html.latte .pagefind-ui__results-area::-webkit-scrollbar-track {
  background: #ffffff !important;
}

html.latte #modal-search .pagefind-ui__results-area::-webkit-scrollbar-thumb,
html.latte .pagefind-ui__results-area::-webkit-scrollbar-thumb {
  background: #d6dce5 !important;
  border-radius: 4px !important;
}

html.latte #modal-search .pagefind-ui__results-area::-webkit-scrollbar-thumb:hover,
html.latte .pagefind-ui__results-area::-webkit-scrollbar-thumb:hover {
  background: #b0b8c4 !important;
}

/* Search Modal Container - Latte theme */
html.latte #search-modal .bg-base {
  background: #ffffff !important;
}

html.latte #search-modal .border-blue {
  border-color: #e3e8ef !important;
}

/* Close button - Latte theme */
html.latte #search-modal button[aria-label="Close search"] {
  background: #ffffff !important;
  border-color: #e3e8ef !important;
  color: #546e7a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.latte #search-modal button[aria-label="Close search"]:hover {
  border-color: #D32F2F !important; /* Material red */
  color: #D32F2F !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}

/* Keyboard shortcuts footer - Latte theme */
html.latte #search-modal .text-blue-200 {
  color: #546e7a !important; /* Material blue-gray */
}

html.latte #search-modal kbd {
  background: #ffffff !important;
  border-color: #d6dce5 !important;
  color: #3F51B5 !important; /* Material blue */
  font-weight: 600 !important;
}

html.latte #search-modal kbd.text-blue {
  color: #3F51B5 !important;
}

html.latte #search-modal span.font-iosevka {
  color: #546e7a !important;
}

/* ============================================
   Navigation Buttons (Previous/Next Chapter) - Latte Theme
   ============================================ */

/* Previous/Next chapter cards in posts and newsletter */
html.latte a.mocha-card[href*="/post/"],
html.latte a.mocha-card[href*="/newsletter/"] {
  background-color: #ffffff !important; /* White background */
  border-color: #e3e8ef !important; /* Subtle border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.latte a.mocha-card[href*="/post/"]:hover,
html.latte a.mocha-card[href*="/newsletter/"]:hover {
  border-color: #3F51B5 !important; /* Material blue */
  background-color: #f8f9fa !important; /* Very light gray on hover */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}

/* Text colors in navigation cards */
html.latte a.mocha-card[href*="/post/"] .text-blue,
html.latte a.mocha-card[href*="/newsletter/"] .text-blue {
  color: #3F51B5 !important; /* Material blue */
}

html.latte a.mocha-card[href*="/post/"]:hover .text-blue,
html.latte a.mocha-card[href*="/newsletter/"]:hover .text-blue {
  color: #9C27B0 !important; /* Material purple on hover */
}

html.latte a.mocha-card[href*="/post/"] .text-blue-200,
html.latte a.mocha-card[href*="/newsletter/"] .text-blue-200 {
  color: #546e7a !important; /* Material blue-gray */
}

/* Series card at the top of posts */
html.latte a.mocha-card[href*="/series/"] {
  background-color: #ffffff !important;
  border-color: #e3e8ef !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.latte a.mocha-card[href*="/series/"]:hover {
  border-color: #3F51B5 !important;
  background-color: #f8f9fa !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}

html.latte a.mocha-card[href*="/series/"] .text-blue {
  color: #3F51B5 !important;
}

html.latte a.mocha-card[href*="/series/"]:hover .text-blue {
  color: #9C27B0 !important;
}

/* ============================================
   Homepage - Latte Theme (Material MkDocs Style)
   ============================================ */

/* Hero section stats boxes */
html.latte .hero-section .border.border-blue.bg-base.bg-opacity-50 {
  background-color: #ffffff !important; /* White background */
  border-color: #e3e8ef !important; /* Subtle border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.latte .hero-section .border.border-blue.bg-base.bg-opacity-50:hover {
  border-color: #3F51B5 !important; /* Material blue on hover */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}

html.latte .hero-section .border.border-blue.bg-base.bg-opacity-50 .text-blue {
  color: #3F51B5 !important; /* Material blue for numbers */
}

html.latte .hero-section .border.border-blue.bg-base.bg-opacity-50 .text-blue-200 {
  color: #546e7a !important; /* Material blue-gray for labels */
}

/* CTA Buttons in Hero */
html.latte .hero-section a.bg-blue {
  background-color: #3F51B5 !important; /* Material blue */
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}

html.latte .hero-section a.bg-blue:hover {
  background-color: #303F9F !important; /* Darker Material blue */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24) !important;
}

html.latte .hero-section a.border-2.border-blue {
  background-color: #ffffff !important;
  border-color: #3F51B5 !important;
  color: #3F51B5 !important;
}

html.latte .hero-section a.border-2.border-blue:hover {
  background-color: #f8f9fa !important;
  border-color: #303F9F !important;
  color: #303F9F !important;
}

/* Badge in Hero */
html.latte .hero-section .bg-blue.bg-opacity-20.border.border-blue.rounded-full {
  background-color: rgba(63, 81, 181, 0.08) !important;
  border-color: #3F51B5 !important;
  color: #3F51B5 !important;
}

html.latte .hero-section .bg-blue.bg-opacity-20.border.border-blue.rounded-full:hover {
  background-color: rgba(63, 81, 181, 0.12) !important;
}

/* Badge text (Learning Paths, Learning Series) - ensure visibility */
html.latte .hero-section .bg-blue.bg-opacity-20.border.border-blue.rounded-full.text-blue-200 {
  color: #3F51B5 !important; /* Material blue for badge text */
}

html.latte .hero-section .bg-blue.bg-opacity-20.border.border-blue.rounded-full span {
  color: #3F51B5 !important; /* Material blue for all span text in badges */
}

/* Icons inside Learning Paths/Series badges */
html.latte .hero-section .bg-blue.bg-opacity-20.border.border-blue.rounded-full .w-5.h-5 {
  color: #3F51B5 !important; /* Material blue for icons */
}

/* Hero text colors */
html.latte .hero-section h1.text-blue {
  color: #1a1a1a !important; /* Almost black for main title */
}

html.latte .hero-section p.text-blue-200 {
  color: #424242 !important; /* Dark gray for subtitle */
}

html.latte .hero-section p.text-blue-300 {
  color: #616161 !important; /* Medium gray for description */
}

html.latte .hero-section .text-blue-200 span.font-semibold {
  color: #263238 !important; /* Darker for emphasis */
}

/* Blog Posts - Featured Post */
html.latte .mocha-card.border-2.border-blue {
  background-color: #ffffff !important;
  border-color: #e3e8ef !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.latte .mocha-card.border-2.border-blue:hover {
  border-color: #3F51B5 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}

/* Post titles - Featured and Grid - MORE SPECIFIC to override general mocha-card rules */
html.latte .mocha-card.border-2.border-blue h2.text-blue,
html.latte .mocha-card.border-2.border-blue h3.text-blue,
html.latte .mocha-card.border-2.border-blue h2,
html.latte .mocha-card.border-2.border-blue h3 {
  color: #3F51B5 !important; /* Material blue - matches other article titles */
}

/* Hover state for blog post cards */
html.latte .mocha-card.border-2.border-blue:hover h2.text-blue,
html.latte .mocha-card.border-2.border-blue:hover h3.text-blue,
html.latte .mocha-card.border-2.border-blue:hover h2,
html.latte .mocha-card.border-2.border-blue:hover h3 {
  color: #3F51B5 !important; /* Keep Material blue on hover for grid posts */
}

/* Hover state specifically for featured post title with group-hover class */
html.latte .mocha-card.border-2.border-blue.group:hover h2.group-hover\:text-red {
  color: #D32F2F !important; /* Material red on hover for featured */
}

/* Post excerpts and secondary text - specific for blog cards */
html.latte .mocha-card.border-2.border-blue p.text-blue-200 {
  color: #546e7a !important; /* Material blue-gray for body text */
}

/* Read Article / Read More links - specific for blog cards */
html.latte .mocha-card.border-2.border-blue div.text-blue-200.font-semibold,
html.latte .mocha-card.border-2.border-blue .text-blue-200.font-semibold {
  color: #3F51B5 !important; /* Material blue for links */
}

html.latte .mocha-card.border-2.border-blue:hover div.text-blue-200.font-semibold,
html.latte .mocha-card.border-2.border-blue:hover .text-blue-200.font-semibold {
  color: #9C27B0 !important; /* Material purple on hover for grid posts */
}

/* Override hover to red for featured article "Read Article" link */
html.latte .mocha-card.border-2.border-blue.group:hover div.group-hover\:text-red {
  color: #D32F2F !important; /* Material red for featured */
}

/* Post tags/badges - specific for blog cards */
html.latte .mocha-card.border-2.border-blue span.bg-blue.rounded-full,
html.latte .mocha-card.border-2.border-blue .bg-blue.rounded-full {
  background-color: rgba(63, 81, 181, 0.1) !important;
  color: #3F51B5 !important;
}

/* Tag badge text-base override - specific for blog cards */
html.latte .mocha-card.border-2.border-blue span.bg-blue.rounded-full.text-base {
  color: #3F51B5 !important;
}

/* Featured badge - specific for blog cards */
html.latte .mocha-card.border-2.border-blue .bg-red.text-base {
  background-color: #D32F2F !important; /* Material red */
  color: #ffffff !important;
}

/* View All Series button at bottom */
html.latte a.border-2.border-blue.text-blue-200 {
  background-color: #ffffff !important;
  border-color: #3F51B5 !important;
  color: #3F51B5 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.latte a.border-2.border-blue.text-blue-200:hover {
  background-color: #f8f9fa !important;
  border-color: #303F9F !important;
  color: #303F9F !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}

/* Section titles (Latest Content) */
html.latte h2.text-blue {
  color: #1a1a1a !important; /* Almost black for section titles */
}

html.latte h2.text-blue + p.text-blue-200 {
  color: #424242 !important; /* Dark gray for descriptions */
}

/* ============================================
   Projects Page - Latte Theme Improvements
   ============================================ */

/* Tech Stack badges - White text on colored background for Latte theme */
html.latte .mocha-card .bg-blue.bg-opacity-20.border.border-blue.rounded-full {
  background-color: #1e66f5 !important; /* Latte blue solid */
  border-color: #1e66f5 !important;
  color: #eff1f5 !important; /* White text */
  opacity: 1 !important;
}

/* Active Development badge - Green with better contrast */
html.latte .bg-green-500.bg-opacity-20.border.border-green-500 {
  background-color: #40a02b !important; /* Latte green solid */
  border-color: #40a02b !important;
  color: #eff1f5 !important; /* White text */
  opacity: 1 !important;
}

/* Archived badge - Orange/Yellow with better contrast */
html.latte .bg-yellow-500.bg-opacity-20.border.border-yellow-500 {
  background-color: #df8e1d !important; /* Latte yellow/orange solid */
  border-color: #df8e1d !important;
  color: #eff1f5 !important; /* White text */
  opacity: 1 !important;
}

/* Posts count badge on series cards - light blue for contrast with card background */
html.latte .mocha-card .bg-blue.rounded-full {
  background-color: #e3f2fd !important; /* Light blue - contrasts well with #7287fd card background */
  color: #1e66f5 !important; /* Dark blue text for readability */
}

/* ============================================
   Author Page - Latte Theme Text Colors
   ============================================ */

/* All text on mocha-cards should be white for contrast with blue background */
html.latte .mocha-card .text-white,
html.latte .mocha-card p.text-white {
  color: #ffffff !important; /* White text on blue background for readability */
}

/* Card subtitles and headers - white for contrast */
html.latte .mocha-card h3.text-blue-200 {
  color: #ffffff !important; /* White for card subtitles on blue background */
}

/* Stats and secondary text - light gray for hierarchy */
html.latte .mocha-card .text-blue-200.font-semibold,
html.latte .mocha-card div.text-blue-200 {
  color: #e6e9ef !important; /* Light gray for secondary text on blue cards */
}

/* Generic gray-700 text - dark gray for Latte theme */
html.latte .text-gray-700 {
  color: #4c4f69 !important; /* Latte text color */
}

/* Generic gray-600 text - medium gray for Latte theme */
html.latte .text-gray-600 {
  color: #5c5f77 !important; /* Latte subtext0 */
}

/* Generic blue-600 text - darker blue for Latte theme */
html.latte .text-blue-600 {
  color: #1e66f5 !important; /* Latte blue - darker shade */
}

/* Generic gray-300 borders - light gray for Latte theme */
html.latte .border-gray-300 {
  border-color: #ccd0da !important; /* Latte surface1 */
}

/* Social media icons in author page - white on hover when background is blue */
html.latte a.hover\:bg-blue:hover .text-blue-600 {
  color: #ffffff !important; /* White icons on blue background */
}

/* Social media icons in author page - ensure visibility on blue hover background */
html.latte a.hover\:bg-blue:hover svg {
  color: #ffffff !important; /* White SVG icons on blue background */
}

/* ============================================
   Projects Page - Latte Theme Text Colors
   ============================================ */

/* Project descriptions and feature text - white for contrast */
html.latte .mocha-card span.text-blue-200,
html.latte .mocha-card p.text-blue-200 {
  color: #ffffff !important; /* White text on blue background */
}

/* Project titles and stats numbers - white for visibility */
html.latte .mocha-card .text-blue.font-bold,
html.latte .mocha-card div.text-blue {
  color: #ffffff !important; /* White for numbers and titles on blue cards */
}

/* Tech stack badges - light blue for contrast */
html.latte .mocha-card span.bg-blue.bg-opacity-20 {
  background-color: #e3f2fd !important; /* Light blue background */
  border-color: #90caf9 !important; /* Medium blue border */
  color: #1e66f5 !important; /* Dark blue text */
}

/* Strong text within descriptions - keep white */
html.latte .mocha-card strong.text-blue {
  color: #ffffff !important; /* White for emphasis on blue background */
}

/* Icons within mocha-cards - white for visibility */
html.latte .mocha-card .text-blue svg {
  color: #ffffff !important; /* White icons on blue background */
}

/* Primary buttons (View on GitHub, Visit My GitHub) - add visible border */
html.latte .mocha-card a.bg-blue.text-base {
  background-color: #e3f2fd !important; /* Light blue background */
  color: #1e66f5 !important; /* Dark blue text */
  border: 2px solid #90caf9 !important; /* Medium blue border */
}

html.latte .mocha-card a.bg-blue.text-base:hover {
  background-color: #bbdefb !important; /* Slightly darker on hover */
  border-color: #64b5f6 !important; /* Darker blue border on hover */
}

/* Secondary buttons (Documentation) - enhance border visibility */
html.latte .mocha-card a.border-2.border-blue {
  background-color: rgba(227, 242, 253, 0.2) !important; /* Semi-transparent light blue */
  border-color: #ffffff !important; /* White border for contrast on blue background */
  color: #ffffff !important; /* White text */
}

html.latte .mocha-card a.border-2.border-blue:hover {
  background-color: rgba(227, 242, 253, 0.4) !important; /* More opaque on hover */
  border-color: #e3f2fd !important; /* Light blue border on hover */
}

/* ============================================
   Newsletter Page - Latte Theme Icon Colors
   ============================================ */

/* Icons in newsletter cards - white on blue background */
html.latte .mocha-card .w-12.h-12 svg,
html.latte .mocha-card .w-12.h-12 .text-blue {
  color: #ffffff !important; /* White icons */
}

/* Icon backgrounds in newsletter - solid blue circles */
html.latte .mocha-card .w-12.h-12.bg-blue {
  background-color: #1e66f5 !important; /* Darker blue for icon circles */
}

/* Newsletter icon in header - white on blue background */
html.latte .mocha-card .w-24.h-24 svg,
html.latte .mocha-card .w-24.h-24 .text-blue {
  color: #ffffff !important; /* White newsletter icon */
}

/* Newsletter icon background - solid blue circle */
html.latte .mocha-card .w-24.h-24.bg-blue.bg-opacity-20 {
  background-color: #1e66f5 !important; /* Darker blue for icon circle */
}

/* Shield check icon and other small icons - white */
html.latte .mocha-card .w-5.h-5 svg {
  color: #ffffff !important; /* White small icons */
}

/* Feature icons (Security, Tools, Web, Bell) - white on blue background */
html.latte .mocha-card .w-6.h-6 svg,
html.latte .mocha-card .w-6.h-6.text-base,
html.latte .mocha-card .w-6.h-6.text-base svg {
  color: #ffffff !important; /* White icons */
}

/* Feature icons inside bg-blue circles - more specific selector */
html.latte .mocha-card .bg-blue .w-6.h-6 svg,
html.latte .mocha-card .bg-blue .w-6.h-6.text-base,
html.latte .mocha-card .rounded-full.bg-blue .w-6.h-6 {
  color: #ffffff !important; /* White icons inside blue circles */
}

/* Override text-base color for icons in newsletter specifically */
html.latte .mocha-card .w-12.h-12.rounded-full.bg-blue svg,
html.latte .mocha-card .w-12.h-12.bg-blue svg {
  color: #ffffff !important; /* Force white for all SVG icons in blue circles */
  fill: currentColor !important; /* Use currentColor for fill */
}

/* ============================================
   Keyboard Shortcuts (kbd elements) - Latte Theme
   ============================================ */

/* kbd elements with bg-blue background - darker blue for Latte theme */
html.latte kbd.bg-blue,
html.latte kbd.bg-blue-600 {
  background-color: #1e66f5 !important; /* Darker blue for better contrast */
  color: #ffffff !important; /* White text */
  border-color: #1e66f5 !important; /* Same border color */
}

/* kbd elements in mocha-card - darker blue for Latte theme */
html.latte .mocha-card kbd {
  background-color: #1e66f5 !important; /* Darker blue background */
  color: #ffffff !important; /* White text for readability */
  border-color: #1e66f5 !important; /* Same border color */
}

/* Series icon/logo background - Latte theme */
html.latte .hero-section img[alt*="Grimoire"],
html.latte .hero-section img[alt*="Series Icon"] {
  background-color: #3F51B5 !important; /* Material blue - same as Browse All Series button */
  box-shadow: 0 8px 24px rgba(63, 81, 181, 0.5) !important; /* Stronger blue shadow */
}

/* About page logo (Cyberfrontier dragon) - Latte theme - MORE SPECIFIC */
html.latte .mocha-card.rounded-full.w-48,
html.latte img.mocha-card[alt*="Cyberfrontier logo"] {
  background-color: #3F51B5 !important; /* Material blue for about logo */
  box-shadow: 0 8px 24px rgba(63, 81, 181, 0.5) !important; /* Stronger blue shadow */
}

/* Author page logo (wizard) - Latte theme - MORE SPECIFIC */
html.latte .mocha-card.rounded-full.w-64,
html.latte .mocha-card.rounded-full.lg\:w-80,
html.latte img.mocha-card[alt*="Rubén Santos García"] {
  background-color: #3F51B5 !important; /* Material blue for author logo */
  box-shadow: 0 8px 24px rgba(63, 81, 181, 0.5) !important; /* Stronger blue shadow */
  border-color: #3F51B5 !important; /* Blue border for author logo */
}

/* Glow effect for all logos - Latte theme */
html.latte .hero-section .bg-blue.rounded-full.blur-3xl,
html.latte .bg-blue.rounded-full.blur-2xl {
  background-color: #3F51B5 !important; /* Material blue - matches button */
  opacity: 0.3 !important; /* More visible glow */
}

/* Navbar background - Latte theme */
html.latte header,
html.latte header.mocha,
html.latte header.latte {
  background-color: #ffffff !important; /* White background for navbar */
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid #e3e8ef !important; /* Subtle border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.latte header nav {
  background-color: transparent !important;
}

/* Navbar navigation links - Latte theme */
html.latte header a.text-blue-200 {
  color: #4c4f69 !important; /* Latte text - dark gray for better contrast */
}

html.latte header a.text-blue-200:hover {
  color: #d20f39 !important; /* Latte red on hover */
}

/* Active navbar link - white text on blue background */
html.latte header a.text-blue.bg-blue.bg-opacity-20 {
  color: #ffffff !important; /* White text for active page */
  background-color: #7287fd !important; /* Solid blue background */
  opacity: 1 !important;
}

/* Active navbar link in mobile menu */
html.latte header a.text-blue.bg-blue.bg-opacity-20 span,
html.latte header a.text-blue.bg-blue.bg-opacity-20 svg {
  color: #ffffff !important; /* White text and icons for active page in mobile */
}

/* Navbar buttons - Latte theme */
html.latte header button.text-blue-200 {
  color: #4c4f69 !important;
}

html.latte header button.text-blue-200:hover {
  color: #d20f39 !important;
}

/* Navbar all icons - Latte theme */
html.latte header a.text-blue-200 svg,
html.latte header button.text-blue-200 svg {
  color: #4c4f69 !important; /* Dark gray for all icons */
}

html.latte header a.text-blue-200:hover svg,
html.latte header button.text-blue-200:hover svg {
  color: #d20f39 !important; /* Red for hovered icons */
}

/* ============================================
   Home Page Waves - Latte Theme
   ============================================ */

/* Hero section waves background for Latte theme */
html.latte .hero-section.bg-wave,
html.latte div.bg-wave {
  background-image: url('/waves-light.svg') !important;
  background-repeat: no-repeat !important;
  background-position: bottom center !important;
  background-size: cover !important;
}

/* ============================================
   Social Media Icons - Latte Theme (Post CTA)
   ============================================ */

/* Social media icons in post CTA section - lighter blue background */
html.latte .mocha-card .w-10.h-10.rounded-full.bg-blue.bg-opacity-20 {
  background-color: rgba(255, 255, 255, 0.2) !important; /* Semi-transparent white on cyan */
  opacity: 1 !important;
}

html.latte .mocha-card .w-10.h-10.rounded-full.bg-blue.bg-opacity-20:hover {
  background-color: rgba(255, 255, 255, 0.3) !important; /* Slightly more opaque on hover */
}

/* Social media icon colors - white for Latte theme */
html.latte .mocha-card .w-10.h-10.rounded-full .text-blue-200 {
  color: #ffffff !important; /* White icons */
}

/* "Enjoyed the article?" badge - lighter blue background for Latte theme */
html.latte .mocha-card .bg-blue.bg-opacity-20.border.border-blue.rounded-full {
  background-color: rgba(255, 255, 255, 0.25) !important; /* Semi-transparent white on cyan */
  border-color: #ffffff !important; /* White border */
  opacity: 1 !important;
}

/* Text inside the badge - white for better contrast */
html.latte .mocha-card .bg-blue.bg-opacity-20.border.border-blue.rounded-full span {
  color: #ffffff !important; /* White text */
}

/* ============================================
   Post Metadata - Latte Theme (Reading Time & Date)
   ============================================ */

/* Reading time and publish date badges - white text for Latte theme */
html.latte .bg-blue.px-2.py-1.rounded-full {
  color: #ffffff !important; /* White text for reading time and date */
}

/* ============================================
   Post CTA Section - Latte Theme (Enjoyed the article?)
   ============================================ */

/* CTA Section - Use same approach as blog cards with specific selectors */
/* Main title in CTA section */
html.latte .mocha-card.border-2.border-blue h3.text-blue {
  color: #263238 !important; /* Material dark gray for title */
}

/* Paragraph text in CTA section */
html.latte .mocha-card.border-2.border-blue p.text-blue-200 {
  color: #546e7a !important; /* Material blue-gray for body text */
}

/* Strong text within CTA paragraphs */
html.latte .mocha-card.border-2.border-blue p strong.text-blue {
  color: #3F51B5 !important; /* Material blue for emphasis */
}

/* "Enjoyed the article?" badge in CTA section */
html.latte .mocha-card.border-2.border-blue .bg-blue.bg-opacity-20.border.border-blue.rounded-full {
  background-color: rgba(63, 81, 181, 0.08) !important;
  border-color: #3F51B5 !important;
}

html.latte .mocha-card.border-2.border-blue .bg-blue.bg-opacity-20.border.border-blue.rounded-full span {
  color: #3F51B5 !important; /* Material blue for badge text */
}

/* Newsletter and Coffee CTA buttons */
html.latte .mocha-card.border-2.border-blue a.border-2.border-blue.text-blue-200 {
  background-color: #ffffff !important;
  border-color: #3F51B5 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.latte .mocha-card.border-2.border-blue a.border-2.border-blue.text-blue-200:hover {
  background-color: #f8f9fa !important;
  border-color: #303F9F !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}

/* Button text and spans */
html.latte .mocha-card.border-2.border-blue a.border-2.border-blue span {
  color: #263238 !important; /* Dark gray for button text */
}

html.latte .mocha-card.border-2.border-blue a.border-2.border-blue span.text-blue-200 {
  color: #546e7a !important; /* Material blue-gray for secondary text */
}

html.latte .mocha-card.border-2.border-blue a.border-2.border-blue:hover span {
  color: #263238 !important; /* Keep dark on hover */
}

/* Icons in CTA buttons */
html.latte .mocha-card.border-2.border-blue a.border-2.border-blue .text-blue {
  color: #3F51B5 !important; /* Material blue for icons */
}

html.latte .mocha-card.border-2.border-blue a.border-2.border-blue:hover .text-blue {
  color: #D32F2F !important; /* Material red on hover */
}

/* Social media links in CTA section */
html.latte .mocha-card.border-2.border-blue .w-10.h-10.rounded-full.bg-blue.bg-opacity-20 {
  background-color: rgba(63, 81, 181, 0.1) !important;
  border-color: #3F51B5 !important;
}

html.latte .mocha-card.border-2.border-blue .w-10.h-10.rounded-full.bg-blue.bg-opacity-20:hover {
  background-color: rgba(63, 81, 181, 0.15) !important;
  border-color: #303F9F !important;
}

html.latte .mocha-card.border-2.border-blue .w-10.h-10.rounded-full .text-blue-200 {
  color: #3F51B5 !important; /* Material blue for social icons */
}

html.latte .mocha-card.border-2.border-blue .w-10.h-10.rounded-full:hover .text-blue-200 {
  color: #303F9F !important; /* Darker Material blue on hover */
}

/* "Follow me on social media" text */
html.latte .mocha-card.border-2.border-blue .border-t.border-blue-200 {
  border-color: #e3e8ef !important;
}

html.latte .mocha-card.border-2.border-blue .border-t.border-blue-200 p.text-blue-200 {
  color: #546e7a !important; /* Material blue-gray */
}

/* ============================================
   Article Components - Additional Latte Theme Fixes
   ============================================ */

/* Article title (h1 outside of .post class) */
html.latte .max-w-3xl > .post > h1:first-child {
  color: #1e66f5 !important; /* Material blue for main article title */
}

/* "Chapters" title (h1 within article content) */
html.latte .post > h1 {
  color: #1e66f5 !important; /* Material blue for section titles */
  border-bottom-color: #e3e8ef !important; /* Light border */
}

/* Scroll to top button */
html.latte button.bg-blue.text-white {
  background-color: #3F51B5 !important;
  color: #ffffff !important;
}

html.latte button.bg-blue.text-white:hover {
  background-color: #D32F2F !important; /* Material red on hover */
}

/* ============================================
   Article Content - Complete Latte Theme Coverage
   ============================================ */

/* Bookmark cards (Ghost CMS feature) */
html.latte .post .kg-bookmark-container {
  background-color: #ffffff !important;
  border: 1px solid #e3e8ef !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.latte .post .kg-bookmark-title {
  color: #3F51B5 !important; /* Material blue for bookmark titles */
}

html.latte .post .kg-bookmark-description {
  color: #546e7a !important; /* Material blue-gray */
}

/* Callout cards */
html.latte .post .kg-callout-card {
  background-color: rgba(63, 81, 181, 0.08) !important;
  border-color: #3F51B5 !important;
}

html.latte .post .kg-callout-card {
  color: #263238 !important; /* Material dark gray for callout text */
}

html.latte .post .kg-callout-card a {
  color: #3F51B5 !important;
}

html.latte .post .kg-callout-card a:hover {
  color: #D32F2F !important;
}

/* Embed cards */
html.latte .post .kg-embed-card {
  background-color: #ffffff !important;
  border: 1px solid #e3e8ef !important;
}

/* List markers */
html.latte .post ul,
html.latte .post ol {
  color: #4c4f69 !important; /* Material dark gray for list text */
}

html.latte .post ul li::marker,
html.latte .post ol li::marker {
  color: #3F51B5 !important; /* Material blue for markers */
}

/* Strong text in lists */
html.latte .post li strong {
  color: #1e66f5 !important; /* Material darker blue for emphasis */
}

/* ============================================
   Series Pages - Latte Theme (Material MkDocs)
   ============================================ */

/* Series Hero Section - Page titles and descriptions */
html.latte .hero-section h1 span.text-red {
  color: #D32F2F !important; /* Material red for emphasis in title */
}

html.latte .hero-section strong.text-blue-200 {
  color: #3F51B5 !important; /* Material blue for strong text in descriptions */
}

/* Features list checkmarks */
html.latte .hero-section .w-6.h-6.rounded-full.bg-blue {
  background-color: #3F51B5 !important;
}

html.latte .hero-section .w-6.h-6.rounded-full.bg-blue .text-base {
  color: #ffffff !important;
}

/* Browse All Series / Start Learning buttons */
html.latte .hero-section a.bg-blue.text-base,
html.latte a.bg-blue.text-base {
  background-color: #3F51B5 !important;
  color: #ffffff !important;
}

html.latte .hero-section a.bg-blue.text-base:hover,
html.latte a.bg-blue.text-base:hover {
  background-color: #D32F2F !important; /* Material red on hover */
}

/* Stats boxes in series hero - separator line more visible */
html.latte .hero-section .border-t.border-blue-200 {
  border-color: #9399a8 !important; /* Darker gray for better visibility */
}

html.latte .hero-section .text-3xl.font-bold.text-blue {
  color: #3F51B5 !important; /* Material blue for numbers */
}

/* Stats badges with icons */
html.latte .hero-section .w-10.h-10.rounded-full.bg-blue {
  background-color: #3F51B5 !important;
}

html.latte .hero-section .w-10.h-10.rounded-full.bg-blue .text-base {
  color: #ffffff !important;
}

html.latte .hero-section .text-2xl.font-bold.text-blue {
  color: #3F51B5 !important; /* Material blue for stat numbers */
}

/* ============================================
   Series Cards Grid - Latte Theme
   ============================================ */

/* Series cards - similar to blog cards */
html.latte .mocha-card.border-2.border-blue {
  background-color: #ffffff !important;
  border-color: #e3e8ef !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.latte .mocha-card.border-2.border-blue:hover {
  border-color: #3F51B5 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}

/* Series card titles */
html.latte .mocha-card.border-2.border-blue h3.text-blue {
  color: #3F51B5 !important; /* Material blue for series titles */
}

html.latte .mocha-card.border-2.border-blue:hover h3.text-blue {
  color: #D32F2F !important; /* Material red on hover */
}

/* Series card descriptions and meta */
html.latte .mocha-card.border-2.border-blue p.text-blue-200 {
  color: #546e7a !important; /* Material blue-gray */
}

/* "Explore Series" / "Read More" links in cards */
html.latte .mocha-card.border-2.border-blue .text-blue-200.font-semibold {
  color: #3F51B5 !important;
}

html.latte .mocha-card.border-2.border-blue:hover .text-blue-200.font-semibold {
  color: #D32F2F !important;
}

/* Posts count badge on series cards */
html.latte .mocha-card.border-2.border-blue .bg-blue.rounded-full.text-base {
  background-color: rgba(63, 81, 181, 0.9) !important;
  color: #ffffff !important;
}

/* Chapter number badge on post cards */
html.latte .mocha-card.border-2.border-blue .absolute.bg-blue.rounded-full {
  background-color: rgba(63, 81, 181, 0.9) !important;
  color: #ffffff !important;
}

/* ============================================
   Series Individual Page - Latte Theme
   ============================================ */

/* Breadcrumb navigation */
html.latte .hero-section nav a.text-blue-200 {
  color: #546e7a !important; /* Material blue-gray */
}

html.latte .hero-section nav a.text-blue-200:hover {
  color: #D32F2F !important; /* Material red on hover */
}

html.latte .hero-section nav span.text-blue {
  color: #3F51B5 !important; /* Material blue for current page */
}

html.latte .hero-section nav .w-4.h-4.text-blue-200 {
  color: #546e7a !important; /* Material blue-gray for chevrons */
}

/* Section headers in series pages */
html.latte h2.text-blue.mb-4 {
  color: #263238 !important; /* Material dark gray for section titles */
}

html.latte h2.text-blue.mb-4 + p.text-blue-200 {
  color: #546e7a !important; /* Material blue-gray for subtitles */
}

/* Back to Series / Back to Top buttons */
html.latte a.border-2.border-blue.text-blue-200 {
  background-color: #ffffff !important;
  border-color: #3F51B5 !important;
  color: #3F51B5 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html.latte a.border-2.border-blue.text-blue-200:hover {
  background-color: #f8f9fa !important;
  border-color: #D32F2F !important;
  color: #D32F2F !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}

/* Meta info in post cards (reading time, etc.) */
html.latte .mocha-card.border-2.border-blue .text-sm.text-blue-200 {
  color: #546e7a !important;
}

html.latte .mocha-card.border-2.border-blue:hover .text-sm.text-blue-200 span.group-hover\:text-red {
  color: #D32F2F !important;
}

/* Icons in series pages */
html.latte .hero-section .w-5.h-5,
html.latte .mocha-card.border-2.border-blue .w-4.h-4,
html.latte .mocha-card.border-2.border-blue .w-5.h-5 {
  color: inherit !important;
}

/* Icons in series pages */
html.latte .hero-section .w-5.h-5,
html.latte .mocha-card.border-2.border-blue .w-4.h-4,
html.latte .mocha-card.border-2.border-blue .w-5.h-5 {
  color: inherit !important;
}

/* ============================================
   Newsletter Icon Circles - New Style
   ============================================ */

/* Newsletter icon circles - blue background for Latte theme */
html.latte .mocha-card .newsletter-icon-circle,
html.latte .mocha-card .newsletter-icon-circle-large {
  background-color: #7287fd !important; /* Blue circle background */
  border: none !important;
}

/* Newsletter icons - white color for Latte theme */
html.latte .mocha-card .newsletter-icon,
html.latte .mocha-card .newsletter-icon svg {
  color: #ffffff !important; /* White icons on blue background */
  fill: currentColor !important;
}

/* Newsletter icon circles - keep bg-blue for Mocha theme */
html.mocha .newsletter-icon-circle,
html.mocha .newsletter-icon-circle-large,
html.frappe .newsletter-icon-circle,
html.frappe .newsletter-icon-circle-large {
  background-color: #89b4fa !important; /* Mocha/Frappe blue */
}

/* Newsletter icons - dark for Mocha theme */
html.mocha .newsletter-icon,
html.mocha .newsletter-icon svg,
html.frappe .newsletter-icon,
html.frappe .newsletter-icon svg {
  color: #1e1e2e !important; /* Dark color for Mocha/Frappe */
  fill: currentColor !important;
}

/* ============================================
   Keyboard Help Modal - Latte Theme (Material MkDocs Style)
   ============================================ */

/* Modal container */
html.latte #keyboard-help-modal > div {
  background-color: #ffffff !important;
  border-color: #e3e8ef !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Modal title */
html.latte #keyboard-help-modal h2.text-blue {
  color: #1a1a1a !important; /* Almost black for main title */
}

/* Section headings */
html.latte #keyboard-help-modal h3.text-blue-200 {
  color: #3F51B5 !important; /* Material blue for section titles */
  font-weight: 600 !important;
}

/* Shortcut descriptions */
html.latte #keyboard-help-modal .text-blue-300,
html.latte #keyboard-help-modal span.text-blue-300 {
  color: #424242 !important; /* Dark gray for readability */
}

/* kbd elements - Material style */
html.latte #keyboard-help-modal kbd {
  background-color: #ffffff !important;
  border: 1px solid #d6dce5 !important;
  color: #3F51B5 !important; /* Material blue */
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Close button */
html.latte #keyboard-help-modal button.text-blue-200 {
  color: #546e7a !important; /* Material blue-gray */
}

html.latte #keyboard-help-modal button.text-blue-200:hover {
  color: #D32F2F !important; /* Material red on hover */
}

/* Footer border */
html.latte #keyboard-help-modal .border-blue-200 {
  border-color: #e3e8ef !important;
}

/* Footer text */
html.latte #keyboard-help-modal .text-blue-300 {
  color: #546e7a !important; /* Material blue-gray */
}

/* ============================================
   Separator Lines - Latte Theme (About, Author, etc.)
   ============================================ */

/* Separator lines in about/author pages - more visible */
html.latte .border-t.border-gray-300,
html.latte .border-gray-300 {
  border-color: #9399a8 !important; /* Darker gray for better visibility */
}

/* ============================================
   FAQ Section - Latte Theme (Newsletter Page)
   ============================================ */

/* FAQ help-circle icons - Material red for visibility */
html.latte .mocha-card .w-6.h-6.text-red,
html.latte .mocha-card .help-circle.text-red {
  color: #D32F2F !important; /* Material red for question icons */
}

/* FAQ question text - dark for readability */
html.latte .mocha-card h3.text-blue {
  color: #ffffff !important; /* White text on blue background */
}

/* FAQ answer text - light gray for hierarchy */
html.latte .mocha-card p.text-blue-200 {
  color: #e6e9ef !important; /* Light gray on blue background */
}

/* ============================================
   Author Page - Newsletter Subscribe Button Fix
   ============================================ */

/* Newsletter subscribe button - normal state */
html.latte a.border-2.border-blue.text-blue-600 {
  color: #3F51B5 !important; /* Material blue for text */
  border-color: #3F51B5 !important;
  background-color: transparent !important;
}

/* Newsletter subscribe button icon - normal state */
html.latte a.border-2.border-blue.text-blue-600 svg {
  color: #3F51B5 !important;
}

/* Newsletter subscribe button - hover state */
html.latte a.border-2.border-blue.hover\:bg-blue:hover {
  background-color: #3F51B5 !important; /* Material blue background */
  border-color: #3F51B5 !important;
  color: #ffffff !important; /* White text for contrast */
}

/* Newsletter subscribe button icon - hover state */
html.latte a.border-2.border-blue.hover\:bg-blue:hover svg {
  color: #ffffff !important; /* White icon for contrast */
}

/* ============================================
   UI/UX IMPROVEMENTS (2025-11-02)
   Implementing recommendations from UI/UX Review
   ============================================ */

/* ====================
   1. WCAG CONTRAST FIXES - LATTE THEME
   ==================== */

/* Secondary text - improved contrast (was 3.2:1, now 4.6:1) */
html.latte .text-blue-300,
html.latte span.text-blue-300,
html.latte p.text-blue-300 {
  color: #595c6e !important; /* Darker for WCAG AA compliance */
}

/* Metadata text (reading time, dates) - improved contrast */
html.latte .text-gray-500,
html.latte .text-gray-600 {
  color: #595c6e !important; /* Darker for better readability */
}

/* ====================
   2. TOUCH TARGETS - MOBILE (44x44px minimum)
   ==================== */

@media (max-width: 768px) {
  /* Navigation buttons */
  .navbar button,
  header button,
  header a {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Social media icons */
  footer a,
  .social-link,
  a[href*="twitter"],
  a[href*="mastodon"],
  a[href*="linkedin"],
  a[href*="rss"],
  a[href*="buymeacoffee"] {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
  }

  /* Copy button in code blocks */
  .copy-code-button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 12px !important;
  }

  /* Search and theme toggle buttons */
  button[onclick*="openSearchModal"],
  button[onclick*="toggleTheme"] {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
  }

  /* Mobile menu items */
  .mobile-menu-link {
    min-height: 48px;
    padding: 12px 20px !important;
  }
}

/* ====================
   3. IMPROVED VERTICAL SPACING
   ==================== */

/* Article spacing improvements */
article section + section,
.post section + section {
  margin-top: 3rem; /* 48px instead of 32px */
}

/* Code block spacing */
article pre,
.post pre,
article .code-block-wrapper,
.post .code-block-wrapper {
  margin: 2rem 0; /* 32px vertical spacing */
}

/* Heading spacing */
article h2,
.post h2 {
  margin-top: 3.5rem; /* 56px */
  margin-bottom: 1.5rem; /* 24px */
}

article h3,
.post h3 {
  margin-top: 2.5rem; /* 40px */
  margin-bottom: 1rem; /* 16px */
}

/* ====================
   4. CONSISTENT HOVER STATES
   ==================== */

/* Card hover effects */
.mocha-card,
.blog-card,
.series-card {
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.mocha-card:hover,
.blog-card:hover,
.series-card:hover {
  transform: translateY(-4px);
}

/* Dark theme card shadows */
html.mocha .mocha-card:hover,
html.frappe .mocha-card:hover,
html.mocha .blog-card:hover,
html.frappe .blog-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

/* Light theme card shadows */
html.latte .mocha-card:hover,
html.latte .blog-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Navigation link hover */
nav a {
  transition: color 250ms ease, background-color 250ms ease;
}

/* TOC link hover */
.toc-link {
  transition: color 250ms ease, padding-left 250ms ease;
}

.toc-link:hover {
  padding-left: 8px;
}

/* ====================
   5. FOCUS INDICATORS (WCAG 2.1)
   ==================== */

/* Global focus indicator */
*:focus-visible {
  outline: 3px solid var(--focus-color, #8caaee);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Dark theme focus */
html.mocha *:focus-visible,
html.frappe *:focus-visible {
  --focus-color: #8caaee; /* Frappe blue */
}

/* Light theme focus */
html.latte *:focus-visible {
  --focus-color: #1e66f5; /* Latte blue */
}

/* Skip focus on elements that have custom focus styles */
button:focus-visible,
a:focus-visible {
  outline-width: 2px;
}

/* ====================
   6. SKIP-TO-CONTENT LINK
   ==================== */

.skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  padding: 12px 16px;
  background-color: var(--skip-bg, #8caaee);
  color: var(--skip-text, #303446);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  z-index: 10000;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 8px;
}

/* Dark theme skip link */
html.mocha .skip-link,
html.frappe .skip-link {
  --skip-bg: #8caaee;
  --skip-text: #303446;
}

/* Light theme skip link */
html.latte .skip-link {
  --skip-bg: #1e66f5;
  --skip-text: #ffffff;
}

/* ====================
   7. ACTIVE PAGE INDICATOR (Enhanced)
   ==================== */

/* Desktop navigation active indicator */
@media (min-width: 1024px) {
  nav a[aria-current="page"],
  header nav a.text-blue.bg-blue.bg-opacity-20 {
    position: relative;
  }

  nav a[aria-current="page"]::after,
  header nav a.text-blue.bg-blue.bg-opacity-20::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 2px 2px 0 0;
  }

  /* Dark theme - blue underline */
  html.mocha nav a[aria-current="page"]::after,
  html.frappe nav a[aria-current="page"]::after,
  html.mocha header nav a.text-blue.bg-blue.bg-opacity-20::after,
  html.frappe header nav a.text-blue.bg-blue.bg-opacity-20::after {
    background-color: #8caaee; /* Frappe blue */
  }

  /* Light theme - strong blue underline for better visibility */
  html.latte nav a[aria-current="page"]::after,
  html.latte header nav a.text-blue.bg-blue.bg-opacity-20::after {
    background-color: #1e66f5; /* Latte blue - darker and more visible */
    bottom: -4px; /* Slightly lower for better visibility */
    height: 4px; /* Slightly thicker */
  }
}

/* ====================
   8. BREADCRUMB IMPROVEMENTS
   ==================== */

/* Breadcrumb links - improved contrast in light mode */
html.latte nav a.text-blue-200 {
  color: #595c6e !important; /* Better contrast */
}

html.latte nav a.text-blue-200:hover {
  color: #d20f39 !important;
}

/* ====================
   9. MOBILE SPACING IMPROVEMENTS
   ==================== */

@media (max-width: 768px) {
  /* Container padding */
  .container,
  article,
  .post {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Full-width elements (code blocks) */
  article pre:not(.astro-code),
  .post pre:not(.astro-code) {
    margin-left: -24px;
    margin-right: -24px;
    border-radius: 0;
    padding: 20px 24px;
  }
}

/* ====================
   10. TABLE RESPONSIVE HINTS
   ==================== */

@media (max-width: 768px) {
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 24px -24px;
    padding: 0 24px;
  }

  /* Scroll hint for tables */
  .table-wrapper::after {
    content: '👉 Scroll to see more';
    display: block;
    text-align: right;
    font-size: 12px;
    opacity: 0.6;
    margin-top: 8px;
    font-style: italic;
  }

  /* Hide hint if table fits */
  .table-wrapper:not(.overflowing)::after {
    display: none;
  }
}

/* ====================
   11. IMPROVED BUTTON SPACING
   ==================== */

/* Ensure all buttons have adequate spacing */
button,
.button,
a.button {
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ====================
   12. PROGRESS INDICATOR (Reading Progress)
   ==================== */

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.1);
  z-index: 9999;
  pointer-events: none;
}

.read-progress .progress-bar {
  height: 100%;
  background: var(--progress-color, #8caaee);
  transition: width 150ms ease;
  width: 0%;
}

/* Dark theme progress bar */
html.mocha .read-progress .progress-bar,
html.frappe .read-progress .progress-bar {
  --progress-color: #8caaee;
}

/* Light theme progress bar */
html.latte .read-progress .progress-bar {
  --progress-color: #1e66f5;
}

html.latte .read-progress {
  background: rgba(0, 0, 0, 0.05);
}

/* ====================
   13. TOC ACTIVE SECTION HIGHLIGHT
   ==================== */

.toc-link.active {
  color: var(--toc-active-color, #8caaee) !important;
  font-weight: 600;
  border-left: 3px solid var(--toc-active-color, #8caaee);
  padding-left: 12px !important;
  background-color: rgba(140, 170, 238, 0.1);
  border-radius: 0 4px 4px 0;
}

/* Dark theme TOC active */
html.mocha .toc-link.active,
html.frappe .toc-link.active {
  --toc-active-color: #8caaee;
}

/* Light theme TOC active */
html.latte .toc-link.active {
  --toc-active-color: #1e66f5;
  background-color: rgba(30, 102, 245, 0.08);
}

/* ====================
   14. ACCESSIBILITY - REDUCED MOTION
   ==================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .mocha-card:hover,
  .blog-card:hover,
  .series-card:hover {
    transform: none;
  }
}

/* ============================================
   Image Captions - Auto-style text after images
   ============================================ */

/* Style paragraphs immediately after images as captions */
/* Handle both wrapped and unwrapped images */
article img + p,
.post img + p,
article p:has(> img:only-child) + p,
.post p:has(> img:only-child) + p {
    text-align: center;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ctp-subtext0, #a6adc8);
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
    line-height: 1.4;
}

/* Latte theme - image captions */
html.latte article img + p,
html.latte .post img + p,
html.latte article p:has(> img:only-child) + p,
html.latte .post p:has(> img:only-child) + p {
    color: #5c5f77 !important; /* Latte subtext0 */
}

/* Mocha/Frappe theme - image captions (darker themes) */
html.mocha article img + p,
html.mocha .post img + p,
html.mocha article p:has(> img:only-child) + p,
html.mocha .post p:has(> img:only-child) + p,
html.frappe article img + p,
html.frappe .post img + p,
html.frappe article p:has(> img:only-child) + p,
html.frappe .post p:has(> img:only-child) + p {
    color: #a6adc8 !important; /* Mocha/Frappe subtext1 - más claro para mejor contraste */
}

/* ============================================
   Details/Toggle Sections - Collapsible Content
   ============================================ */

details {
  border: 2px solid var(--ctp-blue);
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem 0;
  background-color: var(--ctp-mantle);
  transition: all 0.3s ease;
}

details:hover {
  border-color: var(--ctp-red);
  background-color: var(--ctp-crust);
}

details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ctp-blue);
  padding: 0.5rem;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary:hover {
  color: var(--ctp-red);
}

details summary::before {
  content: '▶';
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 0.8em;
}

details[open] summary::before {
  transform: rotate(90deg);
}

details[open] {
  background-color: var(--ctp-base);
}

details > *:not(summary) {
  margin-top: 1rem;
  padding: 0 0.5rem;
}

/* Mocha/Frappe theme - details */
html.mocha details,
html.frappe details {
  background-color: #1e1e2e;
  border-color: #89b4fa;
}

html.mocha details:hover,
html.frappe details:hover {
  background-color: #181825;
  border-color: #f38ba8;
}

html.mocha details[open],
html.frappe details[open] {
  background-color: #1e1e2e;
}

html.mocha details summary,
html.frappe details summary {
  color: #89b4fa;
}

html.mocha details summary:hover,
html.frappe details summary:hover {
  color: #f38ba8;
}

/* Latte theme - details */
html.latte details {
  background-color: #eff1f5;
  border-color: #1e66f5;
}

html.latte details:hover {
  background-color: #e6e9ef;
  border-color: #d20f39;
}

html.latte details[open] {
  background-color: #eff1f5;
}

html.latte details summary {
  color: #1e66f5;
}

html.latte details summary:hover {
  color: #d20f39;
}

/* ============================================
   Migration Warning - Latte Theme Text Colors
   ============================================ */

/* Migration warning title - dark gray for Latte theme */
html.latte .migration-warning h3 {
  color: #4c4f69 !important; /* Latte text - dark gray for better contrast against blue background */
}

/* ============================================
   Syntax Highlighting - Theme Switcher for Shiki
   ============================================ */

/* Dark theme (Mocha/Frappe) - override inline styles to show dark theme */
html.mocha .astro-code,
html.mocha pre.astro-code,
html.frappe .astro-code,
html.frappe pre.astro-code {
  background-color: var(--shiki-dark-bg) !important;
  color: var(--shiki-dark) !important;
}

html.mocha .astro-code span,
html.mocha pre.astro-code span,
html.frappe .astro-code span,
html.frappe pre.astro-code span {
  color: var(--shiki-dark) !important;
}

/* Light theme (Latte) - use Shiki's inline styles naturally */
/* No need to override - Shiki puts light theme colors directly in inline styles */