/* CRITICAL: Force light mode globally - override OS dark mode */
:root,
html,
body {
  color-scheme: light !important;
  forced-color-adjust: none !important;
  -ms-high-contrast-adjust: none !important;
}

html {
  font-size: 14px;
  overscroll-behavior: none;
  min-height: 100%;
  position: relative;
}



@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Autumn Theme Overrides */
.appearance-none {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #ea580c;
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
  text-align: start;
}

/* Global Input & Select Aesthetics - Tailwind already handles most, keeping padding overrides */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
  padding-left: 0.875rem !important;
  padding-right: 0.875rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  border-radius: 0.5rem !important;
  border-width: 1px !important;
  transition-duration: 200ms !important;
  caret-color: #222222 !important;
  cursor: url('/img/cursor-text.svg') 12 12, text !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #ea580c !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.2) !important;
}

/* Custom Select styling to ensure arrows look good with height */
select {
  background-position: right 0.5rem center !important;
  padding-right: 2.5rem !important;
}

/* Textarea min-height adjustment */
textarea {
  min-height: 80px;
}

/* ==========================================================================
   TRUMBOWYG & CONTENTEDITABLE SPECIFIC FIXES (Scoped, not global)
   ========================================================================== */

/* Target ONLY the editor content areas */
.trumbowyg-editor,
[contenteditable="true"] {
  /* Font & Spacing */
  font-family: Calibri, Carlito, sans-serif;
  font-size: 11.5pt;
  line-height: 1.6;
  text-align: justify;
  padding: 4rem 5rem !important;

  /* Colors & Cursor - Dark Gray for visibility */
  caret-color: #222222 !important;
  color: #000000 !important;
  background-color: #ffffff !important;

  /* Ensure visibility */
  opacity: 1 !important;
  isolation: isolate;

  /* Force light mode context */
  color-scheme: light !important;
  forced-color-adjust: none !important;

  /* Custom Cursor to force visibility */
  cursor: url('/img/cursor-text.svg') 12 12, text !important;
}

/* Force cursor on the wrapper too */
.trumbowyg-box,
.trumbowyg-editor,
.trumbowyg-textarea {
  cursor: url('/img/cursor-text.svg') 12 12, text !important;
}

.trumbowyg-editor:focus,
[contenteditable="true"]:focus {
  outline: none !important;
  caret-color: #222222 !important;
}

/* Ensure children inherit the dark texts but don't force backgrounds */
.trumbowyg-editor *,
[contenteditable="true"] * {
  caret-color: inherit !important;
}

/* Responsive Padding for Editor */
@media (max-width: 768px) {
  .trumbowyg-editor {
    padding: 2rem 1.5rem !important;
  }
}

.split-mode .trumbowyg-editor {
  padding: 4rem 2.5rem !important;
}

@media (max-width: 768px) {
  .split-mode .trumbowyg-editor {
    padding: 2rem 1.5rem !important;
  }
}

/* Headings inside Editor */
.trumbowyg-editor h1 {
  font-size: 2rem !important;
  font-weight: bold !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

.trumbowyg-editor h2 {
  font-size: 1.5rem !important;
  font-weight: bold !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}

.trumbowyg-editor h3 {
  font-size: 1.25rem !important;
  font-weight: bold !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

.trumbowyg-editor h4 {
  font-size: 1.1rem !important;
  font-weight: bold !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

.trumbowyg-editor h5 {
  font-size: 1rem !important;
  font-weight: bold !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

.trumbowyg-editor ul {
  list-style-type: disc !important;
  padding-left: 2rem !important;
  margin-bottom: 1rem !important;
}

.trumbowyg-editor ol {
  list-style-type: decimal !important;
  padding-left: 2rem !important;
  margin-bottom: 1rem !important;
}

.trumbowyg-editor li {
  display: list-item !important;
  margin-bottom: 0.25rem !important;
}

.trumbowyg-editor p {
  margin-bottom: 1em !important;
}

.trumbowyg-editor p:last-child {
  margin-bottom: 0 !important;
}

.trumbowyg-editor blockquote {
  border-left: 4px solid #ccc !important;
  padding-left: 1rem !important;
  font-style: italic !important;
  margin-bottom: 1rem !important;
  color: #555 !important;
}

/* Tooltip text fix for comments (as seen previously) */
.comment-highlight[data-tooltip]:hover::after {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  /* El borde 1px sólido a veces ayuda a repintar el control */
  border: 1px solid #ccc;

  /* Forzamos el color del texto interno */
  -webkit-text-fill-color: #000000 !important;

  /* El truco de la sombra para tapar el color de fondo nativo del navegador */
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;

  /* Forzamos que la transición de color no ocurra */
  transition: background-color 5000s ease-in-out 0s;

  /* Y finalmente, el caret */
  caret-color: #222222 !important;
}