/* joomrecipe-fix.css  (v5)
   Goal: stop "text exists but becomes invisible on scroll" inside JoomRecipe
   by forcing correct color + table variables and overriding JoomRecipe's
   unexpected `color-scheme: dark` on light templates.
*/

/* ---------- 0) DEBUG (optional)
   Uncomment briefly to confirm this file is active on recipe pages.
*/
/*
body.com_joomrecipe::before{
  content:"joomrecipe-fix.css v5 loaded";
  position:fixed; left:10px; bottom:10px; z-index:999999;
  background:#000; color:#fff; padding:6px 10px; font:12px/1.2 sans-serif;
  opacity:.75;
}
*/

/* ---------- 1) Neutralize the dark color-scheme JoomRecipe applies */
body.com_joomrecipe .joomrecipe,
body.com_joomrecipe .joomrecipe .card,
body.com_joomrecipe .joomrecipe .card-body,
body.com_joomrecipe .joomrecipe .table,
body.com_joomrecipe .joomrecipe table,
body.com_joomrecipe .joomrecipe .table-responsive{
  color-scheme: light !important;
}

/* ---------- 2) Force readable text color in recipe content areas */
body.com_joomrecipe .joomrecipe,
body.com_joomrecipe .joomrecipe .card,
body.com_joomrecipe .joomrecipe .card-body,
body.com_joomrecipe .joomrecipe .jr-recipe,
body.com_joomrecipe .joomrecipe .recipe,
body.com_joomrecipe .joomrecipe .ingredients,
body.com_joomrecipe .joomrecipe .preparation,
body.com_joomrecipe .joomrecipe .nutrition,
body.com_joomrecipe .joomrecipe .notes,
body.com_joomrecipe .joomrecipe h1,
body.com_joomrecipe .joomrecipe h2,
body.com_joomrecipe .joomrecipe h3,
body.com_joomrecipe .joomrecipe h4,
body.com_joomrecipe .joomrecipe h5,
body.com_joomrecipe .joomrecipe h6,
body.com_joomrecipe .joomrecipe p,
body.com_joomrecipe .joomrecipe li,
body.com_joomrecipe .joomrecipe span,
body.com_joomrecipe .joomrecipe td,
body.com_joomrecipe .joomrecipe th{
  color: var(--bs-body-color, #212529) !important;
  -webkit-text-fill-color: currentColor !important; /* catches rare “invisible text-fill” cases */
}

/* Links inside recipe should also be readable */
body.com_joomrecipe .joomrecipe a{
  color: var(--bs-link-color, #0d6efd) !important;
}
body.com_joomrecipe .joomrecipe a:hover{
  color: var(--bs-link-hover-color, #0a58ca) !important;
}

/* ---------- 3) Bootstrap table variables (common culprit when vars go wrong) */
body.com_joomrecipe .joomrecipe .table,
body.com_joomrecipe .joomrecipe table{
  --bs-table-color: var(--bs-body-color, #212529);
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--bs-body-color, #212529);
  --bs-table-striped-bg: rgba(0,0,0,.03);
  --bs-table-active-color: var(--bs-body-color, #212529);
  --bs-table-active-bg: rgba(0,0,0,.06);
  --bs-table-hover-color: var(--bs-body-color, #212529);
  --bs-table-hover-bg: rgba(0,0,0,.04);
}

body.com_joomrecipe .joomrecipe .table td,
body.com_joomrecipe .joomrecipe .table th,
body.com_joomrecipe .joomrecipe table td,
body.com_joomrecipe .joomrecipe table th{
  color: var(--bs-body-color, #212529) !important;
}

/* ---------- 4) If a parent/ancestor sets opacity/filter/blend, neutralize it */
body.com_joomrecipe .joomrecipe,
body.com_joomrecipe .joomrecipe .card,
body.com_joomrecipe .joomrecipe .card-body{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ---------- 5) Paint/repaint nudge (only affects JoomRecipe area)
   Helps if this is a Chrome compositing/scroll paint bug.
*/
body.com_joomrecipe .joomrecipe .card,
body.com_joomrecipe .joomrecipe .card-body,
body.com_joomrecipe .joomrecipe .table-responsive{
  transform: translateZ(0);
  backface-visibility: hidden;
}