@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;
  }

  /* Toggle Switch */
  .toggle-switch {
    @apply relative inline-flex items-center cursor-pointer;
  }

  .toggle-switch input {
    @apply sr-only;
  }

  .toggle-switch-track {
    @apply w-[52px] h-[28px] bg-gray-200 rounded-full transition-colors duration-200 ease-in-out border border-gray-300;
  }

  .toggle-switch-thumb {
    @apply absolute left-[3px] top-1/2 -translate-y-1/2 w-[22px] h-[22px] bg-white rounded-full shadow-md transition-transform duration-200 ease-in-out border border-gray-200;
  }

  .toggle-switch input:checked + .toggle-switch-track {
    @apply bg-hunter border-hunter;
  }

  .toggle-switch input:checked ~ .toggle-switch-thumb {
    @apply translate-x-[24px] border-hunter/20;
  }

  .toggle-switch input:focus + .toggle-switch-track {
    @apply ring-2 ring-hunter/30 ring-offset-1;
  }

  .toggle-switch-container {
    @apply flex items-center gap-4 py-4 px-5 rounded-2xl bg-gray-50 border border-gray-200 mb-6;
  }

  .toggle-switch-label {
    @apply text-[15px] text-gray-700 font-medium select-none cursor-pointer;
  }

  .toggle-switch-container:has(input:checked) {
    @apply bg-hunter/5 border-hunter/20;
  }

  .toggle-switch-container:has(input:checked) .toggle-switch-label {
    @apply text-hunter;
  }

  .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;
  }

  /* Navigation active state */
  .nav-item-active {
    @apply bg-black bg-opacity-5;
  }

  /* Fullscreen button shimmer effect */
  .fullscreen-shimmer {
    @apply relative overflow-hidden;
  }

  .fullscreen-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    animation: shimmer 8s ease-in-out 3s infinite;
  }

  @keyframes shimmer {
    0% {
      left: -100%;
    }
    12.5% {
      left: 100%;
    }
    100% {
      left: 100%;
    }
  }

  /* 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;
  }

  /* Dictionary meanings go through the same editor, so they can carry links. */
  .dictionary-tooltip a,
  .dictionary-meaning a {
    @apply text-baobab underline break-words;
  }

  /* 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);
  }

  /* Drag-to-resize images. The box carrying [data-image-scale] holds one image
     plus its credit and caption, and its width is a percentage of the slot the
     layout preset gave it — deliberately with no minimum, since any floor in
     pixels would stop the drag partway and quietly undo the alignment. */
  .image-scale-handle {
    touch-action: none;
  }

  /* The badge and alignment guide live on <body> during a drag, so they are
     plain CSS rather than utilities on a Vue-rendered node. */
  body.image-scale-dragging {
    cursor: nwse-resize;
    user-select: none;
  }

  .image-scale-badge {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transform: translate(14px, 14px);
    padding: 4px 10px;
    border-radius: 9999px;
    background: rgba(17, 17, 17, 0.85);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  .image-scale-badge[data-snapped='true'] {
    background: #1a4d1a;
  }

  .image-scale-guide {
    position: fixed;
    z-index: 9998;
    display: none;
    pointer-events: none;
    height: 0;
    border-top: 1px dashed rgba(26, 77, 26, 0.9);
  }
}

/* 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-[40px] leading-[48px] 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;
}

/* Match the public site's link styling so the editor shows what visitors see. */
.ql-editor:not(.quill-editor-snow .ql-editor) a {
  @apply text-baobab underline break-words;
}

/* Hovering a link inside an editable area makes Chrome pop up its own tooltip
   with the address, which clips off the front of anything long and can't be
   styled or turned off. Taking the link out of the hit-test suppresses it; the
   caret, click-to-select and drag-select all still land on the text underneath,
   and our own panel (quill_link_preview.js) shows the address in full. */
.ql-editor a {
  pointer-events: none;
}

/* Put the cursor in a link and this shows where it points, with Edit and
   Remove. Styled to match Quill's own formatting bubble. See quill_link_preview.js */
.ql-link-preview {
  @apply absolute z-20 flex items-center gap-3 max-w-[min(90%,520px)] px-4 py-2 rounded-full bg-[#444] text-white text-[13px] font-roboto shadow-lg;
}

.ql-link-preview-url {
  @apply text-baobab underline truncate;
}

.ql-link-preview-action {
  @apply shrink-0 text-white/70 hover:text-white underline cursor-pointer;
}

.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-[40px] leading-[48px] 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;
}

/* Auto-linkified URLs styling */
.text_element_content a {
  @apply text-baobab underline break-words;
}

.text_element_content a:hover {
  @apply text-baobab-dark;
}

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

.quill-editor-snow .ql-editor a {
  @apply text-baobab underline break-words;
}

.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;
}

/* Inline edit formatting tooltip */
.inline-edit-tooltip {
  @apply bg-gray-800 text-white text-xs px-3 py-1.5 rounded-md shadow-lg;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}

.inline-edit-tooltip.visible {
  opacity: 1;
}
/* Arrange drawer — drag-and-drop reorder proxy for sections & components */
.arrange-ghost {
  @apply opacity-40 bg-fog rounded-lg;
}
.sortable-drag {
  @apply opacity-90;
}
.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;
}