@import url('https://fonts.googleapis.com/css2?family=Playwrite+HR+Lijeva:wght@100..400&display=swap');

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

@layer components {
  .editorjs-content h1 {
    @apply text-4xl font-bold mb-4;
  }

  .editorjs-content h2 {
    @apply text-3xl font-bold mb-3;
  }

  .editorjs-content h3 {
    @apply text-2xl font-bold mb-3;
  }

  .editorjs-content h4 {
    @apply text-xl font-bold mb-2;
  }

  .editorjs-content h5 {
    @apply text-lg font-bold mb-2;
  }

  .editorjs-content h6 {
    @apply text-base font-bold mb-2;
  }

  .editorjs-content p {
    @apply mb-1;
  }

  .editorjs-content ul {
    @apply list-disc list-inside mb-4;
  }

  .editorjs-content ol {
    @apply list-decimal list-inside mb-4;
  }

  .editorjs-content li {
    @apply mb-1;
  }

  .editorjs-content figure {
    @apply mb-4;
  }

  .editorjs-content figcaption {
    @apply text-sm text-gray-600 mt-1;
  }
}

/* You can remove this line since we've integrated the styles above */
/* @import "public_campaigns"; */
/*
 * 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.
 *


 */

input:focus {
  box-shadow: 0 0 0 3px var(--focus-ring-color) !important;
  border-color: var(--focus-border-color) !important;
}