@import "@afomera/richer-text/dist/css/richer-text.css";
:root {
  /* Abstractions */
  --color-bg: white;
  --color-text: black;
  --color-text-reversed: white;
  --color-text-subtle: var(--zinc-500);
  --color-link: var(--blue-700);
  --color-border-light: var(--zinc-100);
  --color-border: var(--zinc-200);
  --color-border-dark: var(--zinc-400);
  --color-selected: var(--blue-100);
  --color-selected-dark: var(--blue-300);
  --color-highlight: var(--yellow-200);

  /* Accent colors */
  --color-primary: #892333;
  --color-secondary: var(--zinc-100);
  --color-negative: var(--red-600);
  --color-positive: var(--green-600);

  /* SVG color values */
  --color-filter-text: invert(0);
  --color-filter-text-reversed: invert(1);
  --color-filter-negative: invert(22%) sepia(85%) saturate(1790%) hue-rotate(339deg) brightness(105%) contrast(108%);
  --color-filter-positive: invert(44%) sepia(89%) saturate(409%) hue-rotate(89deg) brightness(94%) contrast(97%);

  /* Colorize browser widgets */
  color-scheme: light;
}

[data-color-scheme="dark"] {
  /* Abstractions */
  --color-bg: var(--zinc-950);
  --color-text: white;
  --color-text-reversed: black;
  --color-text-subtle: var(--zinc-400);
  --color-link: var(--blue-400);
  --color-border-light: var(--zinc-900);
  --color-border: var(--zinc-800);
  --color-border-dark: var(--zinc-600);
  --color-selected: var(--blue-950);
  --color-selected-dark: var(--blue-800);
  --color-highlight: var(--yellow-900);

  /* Accent colors */
  --color-primary: #892333;
  --color-secondary: var(--zinc-800);
  --color-negative: var(--red-900);
  --color-positive: var(--green-900);

  /* SVG color values */
  --color-filter-text: invert(1);
  --color-filter-text-reversed: invert(0);
  --color-filter-negative: invert(15%) sepia(65%) saturate(2067%) hue-rotate(339deg) brightness(102%) contrast(97%);
  --color-filter-positive: invert(23%) sepia(62%) saturate(554%) hue-rotate(91deg) brightness(93%) contrast(91%);

  /* Colorize browser widgets */
  color-scheme: dark;
}

* {
  border-color: var(--color-border);
  scrollbar-color: #C1C1C1 transparent;
  scrollbar-width: thin;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-synthesis-weight: none;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
}

.turbo-progress-bar {
  background-color: var(--color-primary);
}

::selection {
  background-color: var(--color-selected);
}
.menu-resources li{
  list-style-type: none;
}
.menu-resources li a{
  display: flex;
  gap: 1rem;
  align-items: center;
  white-space: nowrap;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 400;
  transition: color 0.2s, background-color 0.2s;
  height: 3rem;
  padding: 0.5rem 1rem;
  width: 100%;
  justify-content: start;
}

.three-columns,.items-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-4);
}
.two-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-4);
}
label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.checkbox-group label {
  margin-bottom: 0rem;
}
/* Pagination Component */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--size-1);
  padding: var(--size-4) 0;
}

.pagination > a,
.pagination > em,
.pagination > span {
  align-items: center;
  border-radius: var(--rounded-md);
  display: inline-flex;
  font-size: var(--text-sm);
  justify-content: center;
  line-height: var(--leading-tight);
  min-inline-size: var(--size-8);
  padding: var(--size-1_5) var(--size-3);
  text-decoration: none;
}

.pagination > a {
  background-color: var(--color-bg);
  border: var(--border) solid var(--color-border);
  color: var(--color-text);

  &:hover {
    background-color: var(--color-secondary);
  }

  &:focus-visible {
    outline: var(--border-2) solid var(--color-selected-dark);
    outline-offset: var(--size-0_5);
  }

  &:active {
    background-color: var(--color-border-light);
  }
}

.pagination > em.current {
  background-color: var(--color-primary);
  border: var(--border) solid var(--color-primary);
  color: var(--color-text-reversed);
  font-style: normal;
}

.pagination > span.disabled {
  border: var(--border) solid var(--color-border);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

.pagination > span.gap {
  border: none;
  color: var(--color-text-subtle);
  padding: var(--size-1_5) var(--size-1);
}

.pagination > .previous_page,
.pagination > .next_page {
  align-items: center;
  display: inline-flex;
  gap: var(--size-1);
}
.nav-logo{
  max-width: 150px;
  margin-top: 15px;
  margin-bottom: 25px;
}
.completed{
  background-color: var(--green-300);
}
.two-col {
  display: grid;
  grid-template-columns: minmax(500px, 1fr) minmax(auto, 375px);
  gap: 35px;
  align-items: start;

  & .col-one,
  .col-two {
    box-shadow: var(--box-shadow);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: var(--border-radius);
    background: #ffffff;
  }
}

.dropzone {
  padding: 30px;
  background-color: var(--btn-background);
  border-radius: var(--btn-radius, var(--rounded-md));
  border: 1px solid var(--btn-border-color, var(--color-border));
}
.file-item{
  background-color: var(--btn-background);
  border-radius: var(--btn-radius, var(--rounded-md));
  border: 1px dashed var(--btn-border-color, var(--color-border));
  padding: 1rem;
  margin: 1rem 0;
}

.dropzone.is-dragover {
  background-color: #e6ecef;
}

.dragover {
  background-color: red;
}

.two-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-4);
}
.three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-4);
}
.text-editor-wrapper{
  min-height: 200px;
  padding: 10px;
}

.sortable-ghost {
  opacity: 0.4;
}

.sortable-drag {
  opacity: 0.9;
}

.block-header {
  cursor: move;
}

.drag-handle {
  display: inline-block;
  margin-right: 8px;
  color: #6b7280;
}
.current-image{
  max-width: 300px;
}
.current-image img{
 width: 100%;
}