/* =========================
   ELEANA CORE THEME (GLOBAL)
   ========================= */
:root{
  --e-bg:#0b0b0b;
  --e-card:#111111;
  --e-border:rgba(255,255,255,.12);
  --e-border2:rgba(255,255,255,.08);
  --e-text:#ffffff;
  --e-muted:rgba(255,255,255,.72);
  --e-accent:#A31F23;
  --e-accent2:#c0262b;
  --e-shadow: 0 12px 30px rgba(0,0,0,.45);
  --e-radius:18px;
}

/* Optional: darken overall app background a bit (comment out if you don't want it) */
/*
body, .content, .page-content { background: var(--e-bg) !important; }
*/

/* =========================
   ELEANA CARD LOOK (GENERIC)
   Apply to common "panel/box" patterns without breaking layout
   ========================= */
.panel, .portlet, .card, .content-box, .box, .well{
  border-radius: var(--e-radius) !important;
}

/* =========================
   BUTTONS (TRY TO MATCH ELEANA)
   This targets common bootstrap-ish button classes used by Ruko themes.
   If your theme uses different class names, tell me and I’ll adjust.
   ========================= */
.btn-primary{
  border-color: rgba(163,31,35,.75) !important;
  background: linear-gradient(180deg, var(--e-accent2), var(--e-accent)) !important;
  font-weight: 800 !important;
}
.btn-primary:hover{ filter: brightness(1.04); }

.btn-default, .btn-secondary{
  border:1px solid var(--e-border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  color: var(--e-text) !important;
}

/* =========================
   INPUTS
   ========================= */
input[type="text"], input[type="search"], input[type="email"], input[type="url"],
textarea, select{
  border-radius: 14px !important;
  border: 1px solid var(--e-border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  color: var(--e-text) !important;
}
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.45) !important; }

/* =========================
   LINK ACCENT
   ========================= */
a, .link{
  color: rgba(255,255,255,.90);
}
a:hover, .link:hover{
  color: #fff;
}
/* =========================================================
   ENTITY HEADING FIELDS
   White + Bold + Underlined (FINAL OVERRIDE)
   ========================================================= */

/* Heading titles that are LINKS */
h1 a, h2 a, h3 a, h4 a, h5 a,
.record-title a,
.item-heading a,
.listing-title a,
.items-listing a.title,
.items-listing h3 a,
.items-listing h4 a,
.table a.title,
.entity_items_listing a,
.entity-items-listing a{
  color:#ffffff !important;
  font-weight:900 !important;
  text-decoration:underline !important;
  text-decoration-thickness:1.5px !important;
  text-underline-offset:3px !important;
}

/* Force style on nested spans/divs (Ruko often wraps text) */
h1 a *, h2 a *, h3 a *, h4 a *, h5 a *,
.record-title a *, .item-heading a *, .listing-title a *,
.items-listing a.title *, .items-listing h3 a *, .items-listing h4 a *,
.table a.title *{
  color:#ffffff !important;
  font-weight:900 !important;
  text-decoration:underline !important;
}

/* Heading FIELD TYPE (non-link headings) */
.fieldtype_heading,
.fieldtype_heading *,
.heading_field,
.heading_field *,
.heading-field,
.heading-field *,
.field_heading,
.field_heading *{
  color:#ffffff !important;
  font-weight:900 !important;
  text-decoration:underline !important;
  text-decoration-thickness:1.5px !important;
  text-underline-offset:3px !important;
}

/* Hover (keep white, subtle emphasis) */
.record-title a:hover,
.item-heading a:
/* =========================================================
   UNIVERSAL WYSIWYG SOURCE MODE FIX
   Forces readable code in Source/HTML/Text mode for major editors
   ========================================================= */

/* 1) CKEditor source mode */
body .cke_source,
body .cke_source_area textarea,
body .cke_editable_source,
body .cke textarea{
  background:#ffffff !important;
  color:#000000 !important;
  caret-color:#000000 !important;
  font-family: Menlo, Consolas, Monaco, "Courier New", monospace !important;
}

/* 2) TinyMCE source code editor */
body .tox textarea,
body .tox-dialog textarea,
body .tox-textarea,
body textarea.tox-textarea{
  background:#ffffff !important;
  color:#000000 !important;
  caret-color:#000000 !important;
  font-family: Menlo, Consolas, Monaco, "Courier New", monospace !important;
}

/* 3) Summernote code view */
body .note-editor .note-codable,
body .note-editor textarea{
  background:#ffffff !important;
  color:#000000 !important;
  caret-color:#000000 !important;
  font-family: Menlo, Consolas, Monaco, "Courier New", monospace !important;
}

/* 4) Froala HTML view */
body .fr-box textarea,
body .fr-box .fr-code{
  background:#ffffff !important;
  color:#000000 !important;
  caret-color:#000000 !important;
  font-family: Menlo, Consolas, Monaco, "Courier New", monospace !important;
}

/* 5) Generic fallback: any textarea that appears inside common editor wrappers */
body .editor textarea,
body .wysiwyg textarea,
body .richtext textarea,
body .fieldtype_textarea_wysiwyg textarea,
body .fieldtype_textarea textarea{
  background:#ffffff !important;
  color:#000000 !important;
  caret-color:#000000 !important;
  font-family: Menlo, Consolas, Monaco, "Courier New", monospace !important;
}

/* Selection visibility */
body .cke_source::selection,
body .tox textarea::selection,
body .note-codable::selection,
body textarea::selection{
  background:#cce0ff !important;
  color:#000000 !important;
}
/* =========================================================
   NUCLEAR FALLBACK (still safe):
   Make ALL textareas readable (including source mode)
   ========================================================= */
body textarea{
  background:#ffffff !important;
  color:#000000 !important;
  caret-color:#000000 !important;
}
body textarea::placeholder{
  color:#666666 !important;
}
/* ============================
   CKEditor dialog readability
   (Table Properties, Link, etc.)
   ============================ */

/* Make dialog text readable */
.cke_dialog,
.cke_dialog * {
  color: #111 !important;
  text-shadow: none !important;
}

/* Inputs: typed text + background */
.cke_dialog input.cke_dialog_ui_input_text,
.cke_dialog input.cke_dialog_ui_input_password,
.cke_dialog textarea.cke_dialog_ui_input_textarea,
.cke_dialog select.cke_dialog_ui_input_select {
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #bbb !important;
}

/* Placeholder text (optional but helpful) */
.cke_dialog input::placeholder,
.cke_dialog textarea::placeholder {
  color: #777 !important;
  opacity: 1 !important;
}

/* Field labels & legends */
.cke_dialog label,
.cke_dialog legend,
.cke_dialog .cke_dialog_ui_labeled_label {
  color: #111 !important;
}

/* Dialog panels/tabs */
.cke_dialog .cke_dialog_body,
.cke_dialog .cke_dialog_contents,
.cke_dialog .cke_dialog_ui_vbox,
.cke_dialog .cke_dialog_ui_hbox,
.cke_dialog .cke_dialog_tabs,
.cke_dialog .cke_dialog_tab {
  background: #f7f7f7 !important;
}

/* Tab text */
.cke_dialog .cke_dialog_tab a {
  color: #111 !important;
}

/* Fix “disabled looking” text in some themes */
.cke_dialog .cke_disabled,
.cke_dialog .cke_disabled * {
  opacity: 1 !important;
  color: #111 !important;
}
/* =========================
   ELEANA 3:1 INFO BANNER
   ========================= */
.eleana-info-banner{
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 14px auto 18px;
  border-radius: 18px;
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* Force 3:1 aspect ratio */
.eleana-info-banner.ratio-3x1{
  aspect-ratio: 3 / 1;
}

/* Image fill */
.eleana-info-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay text */
.eib-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centered looks best in 3:1 */
  gap: 6px;
  padding: 16px 18px;
  color: #fff;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.35) 45%,
      rgba(0,0,0,0) 75%
    );
}

.eib-kicker{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

.eib-title{
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 950;
  letter-spacing: .25px;
  line-height: 1.15;
}

.eib-sub{
  font-size: 13px;
  color: rgba(255,255,255,.75);
  line-height: 1.35;
  max-width: 70ch;
}

/* Mobile tuning */
@media (max-width: 560px){
  .eib-overlay{
    padding: 14px 14px;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.65) 0%,
        rgba(0,0,0,.45) 55%,
        rgba(0,0,0,.15) 100%
      );
  }
  .eib-title{
    font-size: 18px;
  }
}