/* Fix auto formatting problems in this file  */
/* https://github.com/tailwindlabs/tailwindcss/discussions/5258#discussioncomment-1979394 */
/* https://github.com/tailwindlabs/tailwindcss/discussions/6284#discussioncomment-2724521 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  h1 {
    @apply text-lg md:text-2xl lg:text-4xl tracking-tighter
  }

  h2 {
    @apply text-base md:text-xl lg:text-2xl tracking-tighter
  }

  .btn-primary {
    @apply py-1 px-2 md:py-2 md:px-4 rounded-sm text-sm font-medium cursor-pointer hover:bg-opacity-70 transition-colors duration-75
  }

  .btn-cta-primary {
    @apply bg-slate-900 text-white font-semibold text-sm md:text-base lg:text-lg px-1 sm:px-4 py-1 sm:py-2 rounded-sm shadow-md transform hover:bg-slate-600 hover:shadow-lg active:scale-95 transition-colors duration-75
  }

  .text-field {
    @apply block shadow-inner rounded-sm border border-slate-200 outline-none px-3 py-2 w-full
  }

  .debug {
    @apply border-2 border-red-500
  }

  .swiper-slide {
    @apply lg:w-[30rem]
  }
}

div.field_with_errors>label {
  @apply text-red-500
}

div.field_with_errors> :is(input, textarea, select) {
  @apply border-red-300
}

div.turbo-progress-bar {
  @apply fixed top-0 left-0 w-full h-1 bg-blue-500
}
/* Syntax highlighting styles */
pre {
  background-color: #f8f9fa;
  border-radius: 0.375rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid #e1e4e8;
}

pre code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Rouge syntax highlighting theme - GitHub-inspired light theme */
.highlight {
  background-color: #f8f9fa;
  color: #24292e;
  padding: 0.5rem;
  border-radius: 0.375rem;
}

.highlight .c,
.highlight .cm,
.highlight .c1,
.highlight .cs {
  color: #6a737d;
  font-style: italic;
}

.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: #d73a49;
  font-weight: bold;
}

.highlight .s,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .s2,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx {
  color: #032f62;
}

.highlight .na,
.highlight .nb,
.highlight .nc,
.highlight .no,
.highlight .nd,
.highlight .ni,
.highlight .ne,
.highlight .nf,
.highlight .nl,
.highlight .nn,
.highlight .nx,
.highlight .py,
.highlight .nt {
  color: #6f42c1;
}

.highlight .n {
  color: #24292e;
}

.highlight .o,
.highlight .ow {
  color: #d73a49;
}

.highlight .p {
  color: #24292e;
}

.highlight .gi {
  color: #22863a;
  background-color: #f0fff4;
}

.highlight .gd {
  color: #b31d28;
  background-color: #ffeef0;
}

.highlight .gh {
  color: #6f42c1;
  font-weight: bold;
}

.highlight .k {
  color: #d73a49;
  font-weight: bold;
}

.highlight .l {
  color: #005cc5;
}

.highlight .m {
  color: #005cc5;
}

.highlight .n {
  color: #24292e;
}

.highlight .o {
  color: #d73a49;
}

.highlight .p {
  color: #24292e;
}

.highlight .x {
  color: #24292e;
}

.highlight .w {
  color: #bbbbbb;
  text-decoration: line-through;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* turbo-frame {
  border: 1px solid lightblue;
  display: block;
} */

/* Swiper stuff */
:root {
  --swiper-theme-color: #000;
  --swiper-pagination-top: auto;
  --swiper-pagination-bottom: -6px;
}