/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Responsive Sidebar Styles */
@media (max-width: 768px) {
  /* Ensure sidebar is properly positioned on mobile */
  .sidebar-mobile {
    position: fixed;
    z-index: 50;
  }

  /* Optional: Add backdrop for overlay behavior on mobile if needed */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
  }
}

/* Smooth transitions for all sidebar-related elements */
.sidebar-transition {
  transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
}

/* Ensure main content transitions smoothly */
.main-content {
  transition: padding-left 0.3s ease-in-out;
}

.content-display {
  h1 {
    font-size: 2rem;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  h2 {
    font-size: 1.5rem;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  h3 {
    font-size: 1rem;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  h4 {
    font-size: 0.875rem;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  h5 {
    font-size: 0.75rem;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  h6 {
    font-size: 0.625rem;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  p {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  ul {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  li {
    padding-bottom: 5px;
  }

  pre {
    text-wrap: auto;
  }

  code {
    text-wrap: auto;
  }
}

.markdown-ul {
  list-style: disc;
}

.markdown-ol {
  list-style: decimal;
}

ul.markdown-list, ol.markdown-list {
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 1.5rem;
}

.markdown-list-item {
  margin: 0.5rem 0;
}

.markdown-paragraph {
  margin: 0;
  line-height: 1.6;
}

/* Code Block Styling */
.code-block-wrapper {
  margin: 1rem 0;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f6f8fa;
}

.code-block-header {
  background-color: #f1f3f4;
  border-bottom: 1px solid #e1e5e9;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #656d76;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.code-language {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.code-block-wrapper pre {
  margin: 0;
  padding: 1rem;
  background-color: #f6f8fa;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

.code-block-fallback {
  background-color: #f6f8fa;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Rouge Syntax Highlighting Styles */
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #24292f;
  background-color: #f6f8fa;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #cf222e;
}
.highlight .gr {
  color: #f6f8fa;
}
.highlight .gd {
  color: #82071e;
  background-color: #ffebe9;
}
.highlight .nb {
  color: #953800;
}
.highlight .nc {
  color: #953800;
}
.highlight .no {
  color: #953800;
}
.highlight .nn {
  color: #953800;
}
.highlight .sr {
  color: #116329;
}
.highlight .na {
  color: #116329;
}
.highlight .nt {
  color: #116329;
}
.highlight .gi {
  color: #116329;
  background-color: #dafbe1;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: #0550ae;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #0550ae;
}
.highlight .sb {
  color: #0550ae;
}
.highlight .bp {
  color: #0550ae;
}
.highlight .ne {
  color: #0550ae;
}
.highlight .nl {
  color: #0550ae;
}
.highlight .py {
  color: #0550ae;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #0550ae;
}
.highlight .o, .highlight .ow {
  color: #0550ae;
}
.highlight .gh {
  color: #0550ae;
  font-weight: bold;
}
.highlight .gu {
  color: #0550ae;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #0a3069;
}
.highlight .nd {
  color: #8250df;
}
.highlight .nf, .highlight .fm {
  color: #8250df;
}
.highlight .err {
  color: #f6f8fa;
  background-color: #82071e;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #6e7781;
}
.highlight .gl {
  color: #6e7781;
}
.highlight .gt {
  color: #6e7781;
}
.highlight .ni {
  color: #24292f;
}
.highlight .si {
  color: #24292f;
}
.highlight .ge {
  color: #24292f;
  font-style: italic;
}
.highlight .gs {
  color: #24292f;
  font-weight: bold;
}
/* Featured Swizzel Card Title */
.featured-card-title {
  line-height: 1.5;
  font-weight: 400;
  font-size: 1.1875rem;
  color: #ffffff;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Soft Blink Animation for Validation Feedback */
@keyframes soft-blink {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(96, 165, 250, 0.15);
  }
}

.soft-blink {
  animation: soft-blink 0.5s ease-in-out 3;
  border-radius: 0.75rem;
}