/* ============================================================   
   jpchacha.com | Add-on CSS for Help Pages
============================================================ */

:root {
	--hover-back:     #1c222f; /* 111827 */
}

/* ------------------------------------------------------------
Docs Shell
------------------------------------------------------------ */

.docs-shell {
	position: fixed;
	top: 56px;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	overflow: hidden;
}

/* ------------------------------------------------------------
Table of Contents - Customizations (Uses treemenu)
------------------------------------------------------------ */

/* LEVEL 0 */
   
.table-of-contents-nav > ul > li > span {
	padding-left: 6px;
}

.table-of-contents-nav > ul > li > span > a {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-secondary);
}

.table-of-contents-nav > ul > li > span > a:hover { 
	color: var(--text-primary); 
}

/* LEVEL 1 */

.table-of-contents-nav > ul > li > ul > li > span {
	padding-left: 18px;
}

.table-of-contents-nav > ul > li > ul > li > span > a {
	font-size: 14px;
	color: var(--text-muted);
}

.table-of-contents-nav > ul > li > ul > li > span > a:hover {
	color: var(--text-secondary);
}

/* LEVEL 2 */

.table-of-contents-nav > ul > li > ul > li > ul > li > span {
	padding-left: 30px;
}

.table-of-contents-nav > ul > li > ul > li > ul > li > span > a {
	font-size: 13px;
	color: var(--text-muted);
}

.table-of-contents-nav > ul > li > ul > li > ul > li > span > a:hover {
	color: var(--text-secondary);
}

/* LEVEL 3 */

.table-of-contents-nav > ul > li > ul > li > ul > li > ul > li > span {
	padding-left: 42px;
}

.table-of-contents-nav > ul > li > ul > li > ul > li > ul > li > span > a {
	font-size: 12px;
	color: var(--text-faint);
}

.table-of-contents-nav > ul > li > ul > li > ul > li > ul > li > > span a:hover {
	color: var(--text-muted);
}

/* LEVEL 4 */

.table-of-contents-nav > ul > li > ul > li > ul > li > ul > li > ul > li > span {
	padding-left: 54px;
}

.table-of-contents-nav > ul > li > ul > li > ul > li > ul > li > ul > li > span > a {
	font-size: 12px;
	color: var(--text-faint);
}

.table-of-contents-nav > ul > li > ul > li > ul > li > ul > li > ul > li > span > a:hover {
	color: var(--text-muted);
}

/* ------------------------------------------------------------
Main Content
------------------------------------------------------------ */

.content {
	flex: 1;
	overflow-y: auto;
	padding: 20px 30px 60px 30px;
	background: var(--navy);
}

.content::-webkit-scrollbar { 
	width: 8px; 
}

.content::-webkit-scrollbar-track { 
	background: transparent; 
}

.content::-webkit-scrollbar-thumb { 
	background: var(--navy-mid); 
	border-radius: 2px; 
}

.content::-webkit-scrollbar-thumb:hover { 
	background: var(--navy-light); 
}

.content-eyebrow {
	font-size: 11px;
	font-weight: 500;
	color: var(--blue);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.content h1 {
	font-size: 28px;
	font-weight: 500;
	color: var(--text-primary);
	letter-spacing: -0.02em;
	margin-bottom: 8px;
	line-height: 1.2;
}

.content-tagline {
	font-size: 13px;
	color: var(--text-faint);
	font-style: italic;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 0.5px solid var(--navy-mid);
}

.content p {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.8;
	margin-bottom: 16px;
	max-width: 680px;
}

.content h2 {
	font-size: 17px;
	font-weight: 500;
	color: var(--text-primary);
	margin: 32px 0 14px;
}

.content h3 {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
	margin: 20px 0 8px;
}

.content strong {
	color: var(--text-primary);
	font-weight: 500;
}

/* ------------------------------------------------------------
My Content Container for Adaptation
------------------------------------------------------------ */

.content-container {
	background: #ffffff;
	color: #222233;
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 12px;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;

	margin: 0px 0px 0px 0px;
	padding: 1px 4px 1px 4px;
}

.content-container * {
	color: #00000;
}

.content-container p, .content-container * p {
	color: #00000;
	max-width: none;
}

.content-container a, .content-container * a {
	color: #6666ff;
	text-decoration: none;
}

.content-container a:hover, .content-container * a:hover {
	color: #cc66ff;
}
.content-container a:active, .content-container * a:active {
	color: #ff6666;
}

.chm_section p, .chm_section * p,.chm_sub_section p {
	color: #222233;
}
.chm_section ul, .chm_section * ul,.chm_sub_section p {
	color: #222233;
}

/* ------------------------------------------------------------
Responsive
------------------------------------------------------------ */

@media (max-width: 700px) {
  html, body {
    overflow: auto;
  }

  .nav {
    padding: 0 16px;
    gap: 16px;
  }

  .nav-link {
    display: none;
  }

  .docs-shell {
    position: static;
    flex-direction: column;
    overflow: visible;
  }

  .table-of-contents {
    width: 100%;
    max-height: 320px;
    border-right: none;
    border-bottom: 0.5px solid var(--navy-mid);
  }

  .content {
    padding: 28px 20px 48px;
    overflow: visible;
  }
}