/* /public_html/assets/css/help_faq_patch.css
   Help + FAQ Patch (FINAL - Day/Night Compatible)

   Dark-mode detection supported:
   - body.dark
   - body[data-theme="dark"]
   - html.dark
   - html[data-theme="dark"]
   - [data-theme="dark"] body (legacy)

   Scope:
   - .help-wrap, .help-page, .faq-page only
*/

/* =========================================================
   0) TOKENS (Light default)
========================================================= */
:root{
  --hf-bg: #f6f8fc;
  --hf-card: #ffffff;
  --hf-border: rgba(15,23,42,0.12);
  --hf-shadow: 0 12px 30px rgba(2,6,23,0.08);

  --hf-text: #0b1220;
  --hf-muted: #334155;
  --hf-soft: #64748b;

  --hf-chip: #f1f5f9;
  --hf-chip-text: #334155;

  --hf-link: #2563eb;
  --hf-link-hover: #1d4ed8;

  --hf-hover-bg: #e0f2fe;
  --hf-hover-border: #38bdf8;
}

/* =========================================================
   0B) DARK TOKENS (trigger on HTML or BODY)
========================================================= */
body.dark,
body[data-theme="dark"],
html.dark body,
html[data-theme="dark"] body,
[data-theme="dark"] body{
  --hf-bg: #020617;
  --hf-card: rgba(2, 6, 23, 0.86);
  --hf-border: rgba(148,163,184,0.22);
  --hf-shadow: 0 18px 55px rgba(15,23,42,0.35);

  --hf-text: #f8fafc;
  --hf-muted: rgba(226,232,240,0.94);
  --hf-soft: rgba(226,232,240,0.82);

  --hf-chip: rgba(2,6,23,0.55);
  --hf-chip-text: rgba(226,232,240,0.94);

  --hf-link: #93c5fd;
  --hf-link-hover: #7dd3fc;

  --hf-hover-bg: rgba(2,6,23,0.55);
  --hf-hover-border: rgba(56,189,248,0.65);
}

/* =========================================================
   1) SCOPE BASE
========================================================= */
.help-wrap,
.help-page,
.faq-page{
  background: var(--hf-bg) !important;
  color: var(--hf-text) !important;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   2) REMOVE FADE (Help/FAQ only)
========================================================= */
.help-wrap *,
.help-page *,
.faq-page *{
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Muted text */
.help-wrap .text-muted, .help-page .text-muted, .faq-page .text-muted,
.help-wrap .lead,      .help-page .lead,      .faq-page .lead,
.help-wrap p,          .help-page p,          .faq-page p,
.help-wrap li,         .help-page li,         .faq-page li,
.help-wrap small,      .help-page small,      .faq-page small{
  color: var(--hf-muted) !important;
}

/* Headings + summary */
.help-wrap h1, .help-page h1, .faq-page h1,
.help-wrap h2, .help-page h2, .faq-page h2,
.help-wrap h3, .help-page h3, .faq-page h3,
.help-wrap h4, .help-page h4, .faq-page h4,
.help-wrap h5, .help-page h5, .faq-page h5,
.help-wrap h6, .help-page h6, .faq-page h6,
.help-wrap summary, .help-page summary, .faq-page summary{
  color: var(--hf-text) !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
}

/* Links */
.help-wrap a, .help-page a, .faq-page a,
.help-wrap a:visited, .help-page a:visited, .faq-page a:visited{
  color: var(--hf-link) !important;
}
.help-wrap a:hover, .help-page a:hover, .faq-page a:hover,
.help-wrap a:focus, .help-page a:focus, .faq-page a:focus{
  color: var(--hf-link-hover) !important;
  text-decoration: underline;
}

/* =========================================================
   3) PANELS / CARDS
========================================================= */
.help-wrap .help-hero,
.help-wrap .card,
.help-wrap .panel,
.help-wrap .box,
.help-wrap .widget,
.help-page .help-hero,
.help-page .card,
.faq-page .faq-card,
.faq-page .card{
  background: var(--hf-card) !important;
  border: 1px solid var(--hf-border) !important;
  box-shadow: var(--hf-shadow) !important;
  color: var(--hf-text) !important;
  border-radius: 18px !important;
}

.help-wrap .card,
.help-page .card,
.faq-page .faq-card,
.faq-page .card{
  margin-bottom: 18px !important;
}

.help-wrap .sec,
.help-page .sec,
.faq-page .faq-section{
  padding: 16px !important;
}

/* =========================================================
   4) ACCORDION / DETAILS
========================================================= */
.help-wrap details,
.help-wrap .item,
.help-page details,
.help-page .item,
.faq-page details,
.faq-page .faq-item{
  background: color-mix(in srgb, var(--hf-card) 85%, var(--hf-bg)) !important;
  border: 1px solid var(--hf-border) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  color: var(--hf-text) !important;
}

.help-wrap .item summary,
.help-page .item summary,
.faq-page .faq-item summary,
.help-wrap details summary,
.help-page details summary,
.faq-page details summary{
  color: var(--hf-text) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  list-style: none;
  cursor: pointer;
}

.help-wrap summary::-webkit-details-marker,
.help-page summary::-webkit-details-marker,
.faq-page summary::-webkit-details-marker{
  display:none;
}

.help-wrap .ans,
.help-wrap .empty,
.help-wrap .hv,
.help-page .ans,
.faq-page .faq-answer,
.faq-page .accordion-body{
  color: var(--hf-muted) !important;
  line-height: 1.8 !important;
  font-size: 14px !important;
}

/* =========================================================
   5) SEARCH / INPUTS
========================================================= */
.help-wrap .help-search,
.help-page .help-search,
.faq-page .faq-search,
.help-wrap .search,
.help-wrap .searchbox{
  background: var(--hf-card) !important;
  border: 1px solid color-mix(in srgb, var(--hf-border) 70%, rgba(15,23,42,0.14)) !important;
  border-radius: 14px !important;
}

.help-wrap input,
.help-wrap textarea,
.help-wrap select,
.faq-page input,
.faq-page textarea,
.faq-page select{
  color: var(--hf-text) !important;
  background: transparent !important;
  border-color: color-mix(in srgb, var(--hf-border) 70%, rgba(15,23,42,0.18)) !important;
}

.help-wrap input::placeholder,
.help-wrap textarea::placeholder,
.faq-page input::placeholder,
.faq-page textarea::placeholder{
  color: var(--hf-soft) !important;
  opacity: 1 !important;
}

/* =========================================================
   6) BUTTONS / PILLS
========================================================= */
.help-wrap .help-btn,
.help-page .help-btn,
.faq-page .faq-btn,
.help-wrap .help-more,
.faq-page .faq-more,
.help-wrap .btn,
.help-wrap .btnx{
  background: var(--hf-card) !important;
  color: var(--hf-text) !important;
  border: 1px solid color-mix(in srgb, var(--hf-border) 70%, rgba(15,23,42,0.14)) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.help-wrap .help-btn:hover,
.faq-page .faq-btn:hover,
.help-wrap .help-more:hover,
.faq-page .faq-more:hover{
  background: var(--hf-hover-bg) !important;
  border-color: var(--hf-hover-border) !important;
}

.help-wrap .help-pill,
.faq-page .faq-pill,
.help-wrap .hbadge,
.faq-page .hbadge,
.help-wrap .pill,
.help-wrap .badge,
.help-wrap .badge2{
  background: var(--hf-chip) !important;
  color: var(--hf-chip-text) !important;
  border: 1px solid var(--hf-border) !important;
}

/* =========================================================
   7) SIDEBAR INDEX LINKS
========================================================= */
.help-wrap .side a,
.help-page .side a,
.help-wrap .help-index a,
.faq-page .faq-index a{
  background: color-mix(in srgb, var(--hf-card) 85%, var(--hf-bg)) !important;
  color: var(--hf-text) !important;
  border: 1px solid color-mix(in srgb, var(--hf-border) 70%, rgba(148,163,184,.12)) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
}

.help-wrap .side a:hover,
.help-wrap .help-index a:hover,
.faq-page .faq-index a:hover{
  background: var(--hf-hover-bg) !important;
  border-color: var(--hf-hover-border) !important;
}

/* =========================================================
   8) RESPONSIVE
========================================================= */
@media (max-width: 900px){
  .help-wrap .help-grid,
  .help-page .help-grid,
  .faq-page .faq-layout{
    grid-template-columns: 1fr !important;
  }
  .help-wrap .side,
  .help-page .side{
    position: static !important;
    top: auto !important;
  }
}

/* =========================================================
   9) LIGHT-MODE SAFETY NET (ONLY when BOTH html and body are light)
   Prevents white-on-white bugs without breaking dark mode toggle.
========================================================= */
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.help-wrap,
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.help-page,
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.faq-page{
  color: #0b1220 !important;
}

html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.help-wrap .help-hero,
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.help-wrap .card,
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.faq-page .faq-card,
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.faq-page .card{
  background: #ffffff !important;
  border-color: rgba(15,23,42,0.12) !important;
}

/* Do NOT force colors in dark mode; only when both are light */
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.help-wrap * ,
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.help-page * ,
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.faq-page *{
  color: #0b1220;
}

html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.help-wrap p,
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.help-page p,
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.faq-page p,
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.help-wrap .ans,
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.help-wrap .hv,
html:not(.dark):not([data-theme="dark"])
body:not(.dark):not([data-theme="dark"])
.faq-page .faq-answer{
  color: #334155 !important;
}
/* =========================================================
   BACKGROUND FORCE (Help/FAQ) — Put at END of file
   Requires body class: help-page OR faq-page OR helpfaq
========================================================= */

/* LIGHT MODE background */
html:not(.dark):not([data-theme="dark"]) body.help-page,
html:not(.dark):not([data-theme="dark"]) body.helpfaq,
html:not(.dark):not([data-theme="dark"]) body.faq-page{
  background: #f6f8fc !important;
}

/* DARK MODE background */
html.dark body.help-page,
html[data-theme="dark"] body.help-page,
body.dark.help-page,
body[data-theme="dark"].help-page,

html.dark body.helpfaq,
html[data-theme="dark"] body.helpfaq,
body.dark.helpfaq,
body[data-theme="dark"].helpfaq,

html.dark body.faq-page,
html[data-theme="dark"] body.faq-page,
body.dark.faq-page,
body[data-theme="dark"].faq-page{
  background: #020617 !important;
}

/* Force the page wrappers to match the page background */
body.help-page .help-wrap,
body.helpfaq .help-wrap,
body.faq-page .faq-page{
  background: transparent !important;
}

/* Force the main content area backgrounds that themes often paint white */
body.help-page .front-main-layout,
body.help-page .front-main-content,
body.help-page .front-page,
body.help-page main,
body.help-page .main-content,
body.help-page .content,
body.help-page .container,
body.help-page .container-fluid,
body.helpfaq .front-main-layout,
body.helpfaq .front-main-content,
body.helpfaq .front-page,
body.helpfaq main,
body.helpfaq .main-content,
body.helpfaq .content,
body.helpfaq .container,
body.helpfaq .container-fluid,
body.faq-page .front-main-layout,
body.faq-page .front-main-content,
body.faq-page .front-page,
body.faq-page main,
body.faq-page .main-content,
body.faq-page .content,
body.faq-page .container,
body.faq-page .container-fluid{
  background: transparent !important;
}

/* Optional: keep cards readable while page background changes */
body.help-page .card,
body.help-page .help-hero,
body.helpfaq .card,
body.helpfaq .help-hero,
body.faq-page .faq-card,
body.faq-page .card{
  background: var(--hf-card, #ffffff) !important;
}