/*
 * CUSTOM (L2jNBR): Dark/Light mode for LearnDash Focus Mode (LD30)
 *
 * Objetivo:
 * - DARK como padrao + LIGHT via toggle (sol/lua).
 * - Aplicar SOMENTE no Focus Mode (escopo: .learndash-wrapper .ld-focus)
 *   para nao afetar o restante do site.
 *
 * Correcoes aplicadas aqui (v6):
 * - Corrige "cartao" branco do conteudo (override via ID #ld-focus-content).
 * - Corrige breadcrumb/status e barra inferior (Back to Course/Proximo).
 * - Remove conflito de CSS que deixava .ld-content-actions transparente e voltava o branco.
 * - Mantem scrollbars e toggle sol/lua somente no Focus Mode.
 */
/* ==========================
 * 1) Variaveis do tema
 * ========================= */

/* DARK (padrao) */
.learndash-wrapper .ld-focus {
  --l2-focus-bg: #0f141d;
  --l2-focus-surface: #121a26;
  --l2-focus-surface-2: #0b0f16;
  --l2-focus-border: #1f2a3a;
  --l2-focus-text: #e7ecf6;
  --l2-focus-muted: #9aa7bd;
  --l2-focus-link: #d1b27a;
  --l2-focus-accent: #a58348;
  --l2-focus-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --l2-focus-soft: rgba(255, 255, 255, 0.06);
  --l2-focus-soft-2: rgba(255, 255, 255, 0.10);
}

/* LIGHT (quando usuario ativa) */
body.l2jnbr-focus-light .learndash-wrapper .ld-focus {
  --l2-focus-bg: #f7f9fc;
  --l2-focus-surface: #ffffff;
  --l2-focus-surface-2: #f3f5f8;
  --l2-focus-border: #e2e7ed;
  --l2-focus-text: #111827;
  --l2-focus-muted: #6b7280;
  --l2-focus-link: #ac915b;
  --l2-focus-accent: #ac915b;
  --l2-focus-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  --l2-focus-soft: rgba(0, 0, 0, 0.04);
  --l2-focus-soft-2: rgba(0, 0, 0, 0.08);
}

/* Ajuda navegadores a escolher UI (inputs/scrollbar) de acordo com o modo */
body:not(.l2jnbr-focus-light) .learndash-wrapper .ld-focus { color-scheme: dark; }
body.l2jnbr-focus-light .learndash-wrapper .ld-focus { color-scheme: light; }

/* =========================
 * 2) Base (layout principal)
 * ========================= */

.learndash-wrapper .ld-focus,
.learndash-wrapper .ld-focus .ld-focus-main {
  background-color: var(--l2-focus-bg) !important;
  color: var(--l2-focus-text) !important;
}
.learndash-wrapper .ld-focus {
  min-height: 100vh;
}

.learndash-wrapper .ld-focus .ld-focus-main {
  min-height: 100vh;
}


.learndash-wrapper .ld-focus .ld-focus-header {
  background: var(--l2-focus-surface-2) !important;
  border-bottom: 1px solid var(--l2-focus-border) !important;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo {
  background: var(--l2-focus-surface-2) !important;
  border-right: 1px solid var(--l2-focus-border) !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar {
  background-color: var(--l2-focus-surface) !important;
  border-right: 1px solid var(--l2-focus-border) !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
  background-color: var(--l2-focus-surface-2) !important;
  color: var(--l2-focus-text) !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading a {
  color: #ffffff !important;
}

/* Links gerais dentro do Focus */
.learndash-wrapper .ld-focus a {
  color: #ac915b !important;
}

.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
  color: var(--l2-focus-text) !important;
}

/* v6) Override do LearnDash: algumas regras usam ID #ld-focus-content com fundo claro. */
.learndash-wrapper .ld-focus #ld-focus-content {
  background-color: var(--l2-focus-surface) !important;
  color: var(--l2-focus-text) !important;
  border-color: var(--l2-focus-border) !important;
}


/* =========================
 * 3) Sidebar (corrigir blocos brancos)
 * ========================= */

/* 3.1) Items de AULA (ld-lesson-item) */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item {
  background-color: var(--l2-focus-surface) !important;
  border-bottom: 1px solid var(--l2-focus-border) !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item .ld-lesson-item-preview {
  background: transparent !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item .ld-lesson-title,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item a {
  color: #a58348 !important;
}

/* Estado atual (aula atual) */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item .ld-lesson-item-preview.ld-is-current-lesson,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item .ld-lesson-item-preview.ld-is-current-item {
  background-color: var(--l2-focus-soft) !important;
}

/* 3.2) Lista de TOPICOS dentro de uma aula expandida (ld-topic-list.ld-table-list)
 * No CSS original do LearnDash essa area vem com #f0f3f6 e pseudo-elements brancos.
 */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list {
  background-color: var(--l2-focus-surface-2) !important;
  border: 1px solid var(--l2-focus-border) !important;
}

/* Quadradinho/ponteiro (pseudo-element) que fica branco no original */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list::before,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list:before {
  background-color: var(--l2-focus-surface-2) !important;
  border: 1px solid var(--l2-focus-border) !important;
}

/* Items de topico (preview) */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list .ld-table-list-item-preview {
  background: transparent !important;
  color: var(--l2-focus-text) !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list .ld-table-list-item-preview a,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list .ld-table-list-title,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list .ld-topic-title {
  color: var(--l2-focus-text) !important;
}

/* Hover e item atual */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-table-list .ld-table-list-item-preview:hover {
  background-color: var(--l2-focus-soft) !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-table-list .ld-table-list-item-preview.ld-is-current-item {
  background-color: var(--l2-focus-soft-2) !important;
  border-left: 3px solid var(--l2-focus-accent) !important;
}

/* =========================================================
 * SUBSTITUIR este bloco pelo anterior.
 * Ajuste pedido: “deixa um pouco mais fina”
 * - Reduzi padding
 * - Reduzi border-radius
 * - Reduzi grossura da borda esquerda
 * - Shadow mais leve
 * ========================================================= */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item-section-heading {
  background-color: var(--l2-focus-surface-2) !important;
  color: var(--l2-focus-text) !important;

  /* Mais fino (menos “alto”) */
  padding: 7px 10px !important;

  /* Menos arredondado */
  border-radius: 8px !important;

  /* Bordas mais sutis */
  border: 1px solid rgba(255, 255, 255, 0.07) !important;

  /* Faixa lateral mais fina */
  border-left: 3px solid rgba(165, 131, 72, 0.50) !important;

  /* Tipografia um pouco mais “leve” visualmente */
  font-weight: 650 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;

  /* Sombra mais discreta */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20) !important;

  /* Margem um pouco menor */
  margin: 8px 10px 6px !important;
}

/* =========================================================
 * ADICIONAR (opcional): hover/foco mais discreto também
 * ========================================================= */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item-section-heading:hover,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item-section-heading:focus-within {
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28) !important;
}


/* =========================
 * 4) Conteudo (corrigir wrappers brancos)
 * ========================= */

/* Wrapper principal do conteudo: evita "faixas" brancas herdadas do tema */
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
  background: transparent !important;
}

/* Embed YouTube/Video (Gutenberg/Elementor) - fundo dark/light coerente */
.learndash-wrapper .ld-focus .ld-focus-main .wp-block-embed,
.learndash-wrapper .ld-focus .ld-focus-main figure.wp-block-embed,
.learndash-wrapper .ld-focus .ld-focus-main .wp-block-embed__wrapper,
.learndash-wrapper .ld-focus .ld-focus-main .wp-block-video,
.learndash-wrapper .ld-focus .ld-focus-main .wp-block-video video,
.learndash-wrapper .ld-focus .ld-focus-main .elementor-video,
.learndash-wrapper .ld-focus .ld-focus-main .elementor-video iframe,
.learndash-wrapper .ld-focus .ld-focus-main iframe,
.learndash-wrapper .ld-focus .ld-focus-main video {
  background-color: var(--l2-focus-surface-2) !important;
}

/* Se o tema colocar "cartao" branco em volta do conteudo, neutraliza (sem afetar a barra inferior) */
.learndash-wrapper .ld-focus .ld-focus-main .entry-content {
  background-color: transparent !important;
}

/* Breadcrumbs + status no topo: remove fundos claros e harmoniza com o tema */
.learndash-wrapper .ld-focus #ld-focus-content .ld-breadcrumbs,
.learndash-wrapper .ld-focus #ld-focus-content .ld-breadcrumbs * {
  background-color: transparent !important;
  color: var(--l2-focus-muted) !important;
}

.learndash-wrapper .ld-focus #ld-focus-content .ld-breadcrumbs a {
  color: var(--l2-focus-accent) !important;
}

.learndash-wrapper .ld-focus #ld-focus-content .ld-lesson-status,
.learndash-wrapper .ld-focus #ld-focus-content .ld-topic-status {
  background-color: var(--l2-focus-surface-2) !important;
  border: 1px solid var(--l2-focus-border) !important;
  border-radius: 12px;
  color: var(--l2-focus-text) !important;
}

/* Barra inferior (Back to Course / Proxima Licao) - remove branco */
.learndash-wrapper .ld-focus #ld-focus-content .ld-content-actions {
  background: var(--l2-focus-surface-2) !important;
  border: 1px solid var(--l2-focus-border) !important;
  border-radius: 14px;
  box-shadow: var(--l2-focus-shadow);
}

/* v6) Normaliza itens internos da barra inferior (evita blocos brancos em wrappers internos) */
.learndash-wrapper .ld-focus #ld-focus-content .ld-content-actions .ld-content-action,
.learndash-wrapper .ld-focus #ld-focus-content .ld-content-actions .ld-content-action * {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* =========================
 * 5) Scrollbars (apenas Focus)
 * ========================= */

/* Firefox */
.learndash-wrapper .ld-focus {
  scrollbar-color: var(--l2-focus-border) var(--l2-focus-surface);
  scrollbar-width: thin;
}

/* WebKit (Chrome/Edge/Safari) */
.learndash-wrapper .ld-focus ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.learndash-wrapper .ld-focus ::-webkit-scrollbar-track {
  background: var(--l2-focus-surface);
}

.learndash-wrapper .ld-focus ::-webkit-scrollbar-thumb {
  background: var(--l2-focus-border);
  border-radius: 999px;
}

.learndash-wrapper .ld-focus ::-webkit-scrollbar-thumb:hover {
  background: var(--l2-focus-accent);
}

/* =========================
 * 6) Botao sol/lua
 * ========================= */

.learndash-wrapper .ld-focus .ld-theme-toggle {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.learndash-wrapper .ld-focus .ld-theme-toggle-btn {
  all: unset;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--l2-focus-border);
  background: var(--l2-focus-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--l2-focus-text);
  box-shadow: var(--l2-focus-shadow);
}

.learndash-wrapper .ld-focus .ld-theme-toggle-btn:hover,
.learndash-wrapper .ld-focus .ld-theme-toggle-btn:focus {
  outline: none;
  border-color: var(--l2-focus-accent);
}

.learndash-wrapper .ld-focus .ld-theme-toggle-btn .ld-theme-icon {
  display: none;
  line-height: 0;
}

/* DARK padrao => mostra LUA */
body:not(.l2jnbr-focus-light) .learndash-wrapper .ld-focus .ld-theme-icon--moon {
  display: inline-flex;
}

/* LIGHT => mostra SOL */
body.l2jnbr-focus-light .learndash-wrapper .ld-focus .ld-theme-icon--sun {
  display: inline-flex;
}

@media (max-width: 768px) {
  .learndash-wrapper .ld-focus .ld-theme-toggle-btn {
    width: 34px;
    height: 34px;
  }
}