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

/* ------------------------------------------------------------
Layout
------------------------------------------------------------ */

.layout { 
	display: grid; 
	grid-template-columns: 1fr 240px; 
	align-items: start; 
}

.main { 
	border-right: 0.5px solid var(--navy-mid); 
	min-height: calc(100vh - 100px); 
}

/* ------------------------------------------------------------
Blog Shell - three-column layout
------------------------------------------------------------ */

.blog-shell {
	display: grid;
	grid-template-columns: 300px 1fr 280px;
	align-items: start;
}

.blog-shell a, .blog-shell * a {
	text-decoration: none;
}

/* ------------------------------------------------------------
Left Topic Nav (Table of Contents)
------------------------------------------------------------ */

.blog-topics {
	border-right: 0.5px solid var(--navy-mid);
	padding: 12px 0 40px;
	position: sticky;
	top: 56px;
	max-height: calc(100vh - 56px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--navy-mid) transparent;
}

.blog-topics::-webkit-scrollbar { 
	width: 3px; 
}

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

.blog-topics-title { 
	font-size: 10px; 
	font-weight: 500; 
	color: var(--text-faint); 
	letter-spacing: 0.09em; 
	text-transform: uppercase; 
	padding: 4px 14px 6px 14px; 
}

.blog-topics-divider { 
	height: 0.5px; 
	background: var(--navy-mid); 
	margin: 8px 14px; 
}

/* ------------------------------------------------------------
Right Topic Nav (Blog Search)
------------------------------------------------------------ */

.blog-search-title { 
	padding: 12px 0px 6px 0px; 
	font-size: 10px; 
	font-weight: 500; 
	color: var(--green-lighter); /* var(--text-secondary); */
	letter-spacing: 0.09em; 
	text-transform: uppercase; 
}

.blog-search-tree {
	list-style: none;
	padding: 0; 
	margin: 0;
}

.blog-search-tree ul {
	list-style: none;
	padding: 0; 
	margin: 0;
	display: none;
}

.blog-search-tree * img {
	margin-right: 4px;
	transition: transform 0.2s;
	transform: rotate(90deg); 
}

.open.blog-search-tree * img { 
	transform: none; 
}

.blog-search-tree li a, .blog-search-tree * li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 14px 4px 16px;
	font-size: 11px;
	color: var(--text-faint);
	transition: color 0.15s, background 0.15s;
	border-left: 2px solid transparent;
}

.blog-search-tree li.open > ul, .blog-search-tree * li.open > ul { 
	display: block; 
}

.blog-search-tree li a:hover {  /* hover must appear before active */
	color: var(--text-secondary); 
	background: #0d1829; 
}

.blog-search-tree * li a:hover {  /* hover must appear before active */
	color: var(--text-muted); 
	background: #0d1829; 
}

.blog-search-tree li a.topic-active, .blog-search-tree * li a.topic-active {
	color: var(--blue-pale);
	background: var(--blue-dim);
	border-left-color: var(--blue);
}

.blog-search-tree li a.year-active, .blog-search-tree * li a.year-active {
	color: var(--blue-pale);
	background: var(--blue-dim);
	border-left-color: var(--blue);
}

.blog-search-tree li a.topic-active:hover, .blog-search-tree * li a.topic-active:hover {
	color: var(--text-primary); 
}

.blog-search-tree li a.year-active:hover, .blog-search-tree * li a.year-active:hover {
	color: var(--text-primary); 
}

/* Top-level topic links */
.blog-search-tree > li > a {
	padding: 5px 5px;
	font-size: 12px;
	color: var(--text-muted);
}

/* Indentation, padding and font size */
.blog-search-tree ul > li > a {
	padding: 4px 14px 4px 16px;
}

.blog-search-tree ul > li > ul > li > a {
	padding: 4px 14px 4px 24px;
}

.blog-search-tree ul > li > ul > li > ul > li > a {
	padding: 4px 14px 4px 32px;
}

.blog-search-tree ul > li > ul > li > ul > li > ul > li > a {
	padding: 4px 14px 4px 40px;
}

/* ------------------------------------------------------------
Article Cards / Listing
------------------------------------------------------------ */

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

.article-link {
	display: block;
	padding: 0px;
	border: 0px;
}

.article-link-box {
	display: block; 
	background: var(--navy-mid); 
	border: 0.5px solid var(--navy-light); 
	border-radius: 3px; 
	padding: 4px 20px 16px 20px;
	font-size: 11px; 
	color: var(--text-muted); 
	transition: border-color 0.15s;
}

.article-link-box:hover { 
	background: #0d1829; 
	border-color: var(--blue);
}

.article-link-box h2 {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-secondary);
	line-height: 1.2;
	margin: 8px 0px 16px 0px;
}

.article-link-box p {
	font-size: 13px;
	/* color: var(--text-secondary); */
	color: var(--text-muted); 
	line-height: 1.65;
	margin-bottom: 12px;
}

.article-meta {
	font-size: 13px;
	text-align:left;
	color: var(--text-faint);
	margin-bottom: 8px;
	padding-bottom: 4px;
}

.article-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--text-faint);
	margin: 6px 0px 0px 0px;
	padding: 0;
}


.article-meta-text { 
; 
}

.article-meta-sep { 
color: var(--text-dimmer); 
}

.article-reads { 
font-size: 11px; 
color: var(--text-dimmer); 
white-space: nowrap; 
flex-shrink: 0; 
padding-top: 24px; 
}

.article-tag {
  font-size: 11px;
  background: var(--blue-dim);
  border: 0.5px solid #1d4ed8;
  border-radius: 3px;
  padding: 2px 8px;
  color: var(--blue-pale);
}

/* ------------------------------------------------------------
Article Body
------------------------------------------------------------ */

.article-body {
  padding: 44px 52px 64px;
  border-right: 0.5px solid var(--navy-mid);
/*	border-left: 0.25px solid var(--navy-mid);
	border-right: 0.25px solid var(--navy-mid);
   max-width: 1080px;*/
}

.article-body { flex: 1; min-width: 0; }



.article-body p {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.85;
	margin-bottom: 18px;
	max-width: 700px;
}

.article-body p:last-child { 
	margin-bottom: 0; 
}

.article-body em {
	font-style: italic;
}

.article-body strong {
	font-weight: 700;
}

.article-body h2 {
	font-size: 18px;
	font-weight: 500;
	color: var(--text-primary);
	margin: 16px 0 14px;
}

.article-body h3 {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-primary);
	margin: 16px 0 10px;
}

.article-body h4 {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-primary);
	margin: 16px 0 10px;
}

.article-body h2:first-child, .article-body h3:first-child, .article-body h4:first-child {
	margin-top: 0px; 
}

.article-body img {
	max-width: 100%;
	border-radius: 8px;
	border: 0.5px solid var(--navy-light);
	margin: 20px 0;
	display: block;
}

.article-body blockquote {
	border-left: 2px solid var(--blue);
	background: var(--navy-mid);
	border-radius: 0 8px 8px 0;
	padding: 14px 18px;
	margin: 20px 0;
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.75;
}

.article-body ul, .article-body ol {
	padding-left: 20px;
	margin-bottom: 18px;
}

.article-body li {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.75;
	margin-bottom: 6px;
}

/* ------------------------------------------------------------
Article Post-Navigation
------------------------------------------------------------ */

.article-post-nav {
	margin-top: 48px;
	padding: 16px 16px 16px 16px;
	border-top: 0.5px solid var(--navy-mid);
	/*border-left: 0.5px solid var(--navy-mid);
	border-right: 0.5px solid var(--navy-mid);*/
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.article-post-nav-label {
	font-size: 11px;
	color: var(--text-dimmer);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
}

.article-post-nav-link {
	font-size: 13px;
	color: var(--text-muted);
	transition: color 0.15s;
}

.article-post-nav-link:hover { 
	color: var(--blue-pale); 
}

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

.table-of-contents-tog {
	display: block;
	align-items: center;
	justify-content: space-between;
	padding: 6px 14px 6px 10px;
	font-size: 13px;
	color: var(--blue-pale);
	background: var(--blue-dim);
	transition: color 0.15s, background 0.15s;
	border-left: 2px solid var(--blue);
}

.table-of-contents-tog:hover {
	color: var(--text-secondary);
}

.table-of-contents-tog span { 
	display: flex;
	align-items: center;
}

.table-of-contents-tog img {
	margin-right: 8px;
	transition: transform 0.2s;
	transform: rotate(90deg); 
}

.is_hidden.table-of-contents-tog img { 
	transform: none; 
}

.table-of-contents-nav.is_hidden {
	display: none;
}

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

.table-of-contents-nav > ul > li > span > a {
	font-size: 14px;
	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: 12px;
}

.table-of-contents-nav > ul > li > ul > li > span > a {
	font-size: 13px;
	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: 20px;
}

.table-of-contents-nav > ul > li > ul > li > ul > li > span > a {
	font-size: 12px;
	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: 28px;
}

.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: 36px;
}

.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);
}

/* SPECIAL */

.table-of-contents-nav--pop > ul > li > span > a {
	padding-left: 4px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
}

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

/* ------------------------------------------------------------
Active Filter Label
------------------------------------------------------------ */

.active-filter {
	margin-top: 10px;
	font-size: 12px;
	color: var(--text-faint);
}

.active-filter-head { 
	color: var(--text-secondary); 
	font-weight: 500; 
}

.active-filter-tail { 
	color: var(--amber-light); 
	font-weight: 500; 
}

/* ------------------------------------------------------------
Year Groups
------------------------------------------------------------ */

.year-group { 
	border-bottom: 0.5px solid var(--navy-mid); 
}

.year-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 40px;
	background: var(--navy-dark, #090e1a);
	border-bottom: 0.5px solid var(--navy-mid);
	position: sticky;
	top: 56px;
	z-index: 5;
}

.year-toggle {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-faint);
	letter-spacing: 0.08em;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: color 0.15s;
}

.year-toggle:hover { 
	color: var(--text-secondary); 
}

.year-toggle::before {
	content: '';
	display: inline-block;
	width: 0; height: 0;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent var(--text-dimmer);
	transition: transform 0.2s;
}

.year-toggle.open::before { 
	transform: rotate(90deg); 
}

.year-count { 
	font-size: 11px; 
	color: var(--text-dimmer); 
}

/* NO RESULTS */
.no-results {
	padding: 40px;
	font-size: 14px;
	color: var(--text-faint);
	text-align: center;
}

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

@media (max-width: 900px) {
  .blog-shell { grid-template-columns: 160px 1fr; }
  .sidebar { display: none; }
}

@media (max-width: 640px) {
  .nav { padding: 0 16px; gap: 16px; }
  .nav-link { display: none; }
  .breadcrumb { padding: 12px 16px; }
  .blog-shell { grid-template-columns: 1fr; }
  .blog-topics {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 0.5px solid var(--navy-mid);
    padding: 12px 0;
  }
  .main { border-right: none; }
  .page-header, .year-heading { padding-left: 16px; padding-right: 16px; }
  .article { padding-left: 16px; padding-right: 16px; }
  .year-heading { top: 56px; }
  .footer { padding: 16px; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 700px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; border-top: 0.5px solid var(--navy-mid); padding: 20px 16px; }
  .layout .main { border-right: none; }
  .page-header, .post-header, .post-body, .post-footer, .more-articles { padding-left: 16px; padding-right: 16px; }
  .post-header h1 { font-size: 24px; }
  .post-body { max-width: 100%; }
}