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

@layer components {
  .content-container {
    @apply container mx-auto pt-[20vh] pb-[18vh];
  }

  .text-link {
    @apply underline;
  }

  .text-link-bold {
    @apply underline font-bold;
  }

  .btn {
    @apply border border-transparent inline-block tracking-wide transition-all font-normal py-[12px] px-[36px] rounded-full cursor-pointer;
    @apply focus:outline-none focus:ring-2 active:ring-2 ring-offset-2;
  }

  .btn-primary {
    @apply bg-baobab hover:bg-baobab-dark text-white;
    @apply focus:ring-baobab-light focus:bg-baobab-dark active:ring-baobab-light active:bg-baobab-dark;
  }

  .btn-primary.disabled, .btn-primary:disabled {
    @apply bg-baobab-light cursor-not-allowed;
  }

  .btn-black {
    @apply border border-black bg-black hover:bg-gray-800 text-white;
    @apply focus:ring-black focus:bg-black active:ring-black active:bg-black;
  }

  .btn-hunter {
    @apply border border-hunter bg-hunter hover:bg-hunter-dark text-white;
    @apply focus:ring-hunter-light focus:bg-hunter-dark active:ring-hunter-light active:bg-hunter-dark;
  }

  .btn-white {
    @apply border border-white bg-white hover:bg-gray-100 text-black;
    @apply focus:ring-white focus:bg-white active:ring-white active:bg-white;
  }

  /* .btn-cancel {
    @apply bg-transparent border border-gray-400 text-gray-600;
    @apply hover:bg-gray-100 hover:border-gray-500 hover:text-gray-700;
    @apply focus:ring-gray-400 focus:bg-gray-100 active:ring-gray-400 active:bg-gray-100;
  } */

  .btn-outlined {
    @apply bg-transparent border border-black text-black hover:bg-black hover:text-white;
    @apply focus:ring-black focus:bg-black active:ring-black active:bg-black;
  }

  .btn-outlined-hunter {
    @apply bg-transparent border border-hunter text-hunter hover:bg-hunter hover:text-white;
    @apply focus:ring-hunter focus:bg-hunter active:ring-hunter active:bg-hunter;
  }

  /* Sortable table styles */
  .admin-table th a {
    @apply inline-flex items-center no-underline text-gray-700 hover:text-baobab;
  }

  .sort-indicator {
    @apply inline-block text-black;
  }

  .sort-asc .sort-indicator,
  .sort-desc .sort-indicator {
    @apply text-baobab;
  }

  .btn-sm {
    @apply py-[6px] px-[21px] text-[16px];
  }

  .btn-tiny {
    @apply py-[6px] px-[12px] text-[14px];
  }

  .btn-thin {
    @apply py-[6px] px-[17px] text-[14px];
  }

  .form-field {
    @apply relative mb-[30px];
  }

  .inline-field .form-field {
    @apply mb-0;
  }

  /* Fancy text field */
  .fancy-text-field {
    @apply placeholder-transparent w-full h-[58px] px-[31px] rounded-full border border-black bg-white focus:outline-none focus:ring-2 focus:ring-baobab-light text-black;
  }

  .inline-field {
    @apply flex items-center;
  }

  .field_with_errors input,
  .field_with_errors select {
    @apply border-kigelia border-2 focus:border-kigelia focus:ring-red-200;
  }

  .fancy-text-field-label {
    @apply absolute select-none transition-all left-0 -top-[11px] ml-[32px] rounded-sm bg-white px-1 text-dusk font-normal text-sm peer-placeholder-shown:text-[18px] peer-placeholder-shown:text-dove peer-placeholder-shown:top-[18px] peer-placeholder-shown:ml-[30px] peer-placeholder-shown:bg-transparent pointer-events-none;
  }

  .field_with_errors .fancy-text-field-label {
    @apply border-none;
  }

  .fancy-form-error {
    @apply text-red-500 text-sm ml-[34px] mt-1;
  }

  .fancy-form-hint {
    @apply text-sm text-acacia italic ml-[34px] mt-1;
  }

  /* Basic text field */
  .text-field {
    @apply w-full h-[58px] px-[31px] rounded-full border border-mopane bg-white focus:outline-none focus:ring-2 focus:ring-baobab-light text-dusk placeholder:text-mopane;
  }

  /* Transparent text field */
  .text-field {
    @apply w-full h-[58px] px-[31px] rounded-full border border-black bg-transparent focus:outline-none focus:ring-2 focus:ring-baobab-light text-black placeholder:text-dusk;
  }

  .inline-editable {
    @apply w-full border-0 p-0 h-auto text-dusk rounded-none text-pretty hover:border-0 hover:ring-0 hover:outline-none focus:ring-0 placeholder:text-[#aaa] !important;
  }

  .text-area {
    @apply w-full min-h-[120px] px-[31px] py-[15px] rounded-2xl border border-black bg-white focus:outline-none focus:ring-2 focus:ring-baobab-light text-dusk placeholder:text-mopane;
  }

  /* .text-field-label {
    @apply text-black font-medium tracking-wide uppercase;
  } */

  /* Select field */
  .select-field {
    @apply w-full h-[58px] px-[31px] pl-6 pr-8 rounded-full border border-mopane bg-white text-dusk focus:outline-none focus:ring-2 focus:ring-baobab-light;
  }

  /* Inline dropdown */
  .inline-dropdown {
    @apply h-[58px] px-[20px] rounded-full border border-mopane bg-white text-dusk focus:outline-none focus:ring-2 focus:ring-baobab-light w-auto min-w-[180px];
  }

  .inline-form-field {
    @apply flex items-center;
  }

  .checkbox-round {
    @apply w-[20px] h-[20px] flex-shrink-0 rounded-full bg-transparent border-black text-black focus:ring-0;
  }

  .select-field.transparent {
    @apply border-black bg-transparent text-black;
  }

  .form-error {
    @apply text-kigelia text-sm ml-[25px] mt-1;
  }

  .form-hint {
    @apply text-sm text-acacia italic ml-[34px] mt-1;
  }

  .toggle-switch-label {
    /* @apply ml-[32px] text-sm text-acacia font-normal; */
    @apply text-black font-medium tracking-wide uppercase;
  }

  .file-field {
    @apply w-full h-[58px] pr-6 rounded-full border border-mopane bg-white text-dusk focus:outline-none focus:ring-2 focus:ring-baobab-light file:overflow-hidden file:rounded-l-full file:border-0 file:border-solid file:border-inherit file:bg-neutral-100 file:px-7 file:cursor-pointer file:text-neutral-700 file:transition file:duration-150 file:ease-in-out file:[border-inline-end-width:1px] file:[margin-inline-end:0.75rem] file:h-[58px];
  }

  /* .field_with_errors {
    @apply border-kigelia border-2 focus:border-kigelia focus:ring-red-200;
  } */

  .form-label {
    @apply font-medium tracking-wide uppercase inline-block mb-[11px];
  }

  .page-heading {
    @apply text-[30px] mb-4;
  }

  .breadcrumbs {
    @apply flex items-center;
  }

  .breadcrumbs-item {
    @apply relative text-dusk truncate max-w-[220px];
  }

  .breadcrumbs-item:not(:first-child) {
    @apply pl-6;
  }

  .breadcrumbs-item:not(:first-child)::before {
    @apply content-['/'] absolute left-2 top-1/2 -translate-y-1/2;
  }

  .breadcrumbs-item a {
    @apply text-black underline underline-offset-[10px] decoration-1 decoration-dove;
  }

  /* Admin table */
  .admin-table {
    @apply w-full border-collapse bg-white shadow-md rounded-lg overflow-hidden;
  }

  .admin-table thead {
    @apply bg-gray-50;
  }

  .admin-table thead th {
    @apply px-6 py-4 border-b-2 border-gray-200 text-left font-medium uppercase tracking-wider;
  }

  .admin-table tbody {
    @apply divide-y divide-gray-200;
  }

  .admin-table tbody tr:hover {
    @apply hover:bg-gray-50;
  }

  .admin-table tbody td {
    @apply px-6 py-4;
  }

  .dictionary-word {
    @apply underline underline-offset-4 decoration-1 decoration-dove relative cursor-help;
  }

  .dictionary-tooltip {
    @apply absolute bottom-[calc(100%+5px)] left-1/2 -translate-x-1/2 bg-white text-dusk p-2 rounded-md font-normal text-sm w-[550px] max-w-[90vw] z-10 border-2 border-blue-800 shadow-lg font-roboto;
  }

  .dictionary-tooltip::after {
    @apply content-[''] absolute top-[calc(100%)] left-1/2 -translate-x-1/2 border-[5px] border-solid border-t-blue-800 border-r-transparent border-b-transparent border-l-transparent;
  }

  .text_element_content .dictionary-tooltip p {
    @apply text-dusk p-0 mb-0 text-sm !important;
  }

  /* absolute top-[calc(100%+5px)] left-1/2 -translate-x-1/2 border-width-5 border-style-solid border-color-black border-color-transparent border-color-transparent border-color-transparent */
}

@layer utilities {
  .clearfix {
    @apply clear-both;
  }

  .cursor-none {
    cursor: none;
  }

  /* Image edge cropping to eliminate razor lines */
  .image-edge-crop {
    @apply overflow-hidden;
  }
  
  .image-edge-crop img {
    transform: scale(1.015);
  }
}

/* Overrides */
.turbo-progress-bar {
  @apply bg-baobab-dark;
}

.ql-bubble .ql-tooltip {
  z-index: 10000 !important;
}

.ql-toolbar {
  @apply rounded-t-2xl
}

.ql-editor:not(.quill-editor-snow .ql-editor) {
  padding: 0 !important;
}

.ql-editor:not(.quill-editor-snow .ql-editor) h1 {
  @apply font-clearface text-[54px] leading-[60px] mb-6 !important;
}

.ql-editor:not(.quill-editor-snow .ql-editor) h2 {
  @apply font-clearface text-[30px] leading-[38px] text-pretty mb-4 !important;
}

.ql-editor:not(.quill-editor-snow .ql-editor) p {
  @apply text-[21px] leading-[28px] font-roboto text-pretty mb-5 !important;
}

.ql-editor:not(.quill-editor-snow .ql-editor) ol,
.ql-editor:not(.quill-editor-snow .ql-editor) ul,
.text_element_content ol,
.text_element_content ul {
  @apply pl-0 mb-4 !important;
}

.ql-editor:not(.quill-editor-snow .ql-editor) ol,
.text_element_content ol {
  @apply list-decimal pl-[15px] !important
}

.ql-editor:not(.quill-editor-snow .ql-editor) ul,
.text_element_content ul {
  @apply list-disc !important
}

.ql-editor:not(.quill-editor-snow .ql-editor) li,
.text_element_content li {
  @apply text-[21px] leading-[28px] font-roboto text-pretty !important;
}

.ql-editor:not(.quill-editor-snow .ql-editor).ql-blank::before {
  @apply font-clearface text-[30px] leading-[35px] text-pretty right-0 left-0 not-italic !important;
}

.text_element_content h1 {
  @apply font-clearface text-[52px] leading-[60px] text-pretty mb-6 !important;
}

.text_element_content h2 {
  @apply font-clearface text-[28px] leading-[38px] text-pretty mb-4 !important;
}

.text_element_content p,
.text_element_content * p {
  @apply text-[20px] leading-[28px] font-roboto text-pretty mb-5 !important;
}

.quill-editor-snow .ql-editor {
  @apply text-[18px] leading-[28px] font-roboto !important;
}

.quill-editor-snow .ql-toolbar.ql-snow {
  @apply border-black !important;
}

.quill-editor-snow .ql-container.ql-snow {
  @apply h-[300px] rounded-b-2xl border-black !important;
}


.toastify {
  @apply font-sans text-white rounded-lg shadow-lg;
}

.gslide-image img {
  @apply rounded-3xl;
}
.loader {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #4b5563;
  text-align: center;
}

.loader::after {
  content: "...";
  display: inline-block;
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60%, 100% {
    content: "...";
  }
} 
@font-face {
  font-family: "ClearfaceStd";
  font-weight: normal;
  font-style: normal;
  src: url(/assets/clearfacestd-regular-webfont-91167daa64dfb0759315d8c0c920b0281760c7b60443f4693ab447706f6e4953.woff2) format("woff2"), url(/assets/clearfacestd-regular-webfont-988f5cf91ad99bda0c0a3ef9a31a1d511f56dafa7f6e09a265dba4a834f1ed91.woff) format("woff"); }
@media print {
  
}
/*
 * 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.
 *


 */

#carousel::-webkit-scrollbar {
  display: none;
}

[v-cloak] {
  visibility: hidden;
}

form {
  margin-block-end: 0em;
}

.dictionary-tooltip {
  position: absolute;
  z-index: 1000;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 400px;
  margin-top: 5px;
  line-height: 1.5;
}

.dictionary-tooltip::after {
  content: '';
  display: table;
  clear: both;
}

.dictionary-image {
  float: left;
  max-width: 200px;
  margin: 0 12px 8px 0;
  border-radius: 4px;
}

.dictionary-image img {
  border-radius: 4px;
}

.dictionary-content {
  overflow: hidden;
}