/* ========== REUSABLE COMPONENTS (temporary before components.css) ========== */

/* Generic card container */
.card-block {
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  padding: 12px;
  margin: 10px;
  background-color: var(--color-bg-light);
}

/* Common flex layout for cards */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Main content section */
#personDiv {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  flex-wrap: wrap;
}

#personDiv .main {
  flex: 1 1 600px;
  min-width: 300px;
}

#antabellDiv .main,
#tingDiv .main,
#articleDiv .main {
  flex: 2 1 70%;
  display: flex;
  flex-direction: column;
}

#antabellDiv.full-main .main,
#tingDiv.full-main .main,
#articleDiv.full-main .main {
  flex: 1 1 100%;
}

/* Related content section */
#antabellDiv .related,
#tingDiv .related,
#personDiv .related,
#articleDiv .related {
  flex: 0 0 120px;
}

.related:empty,
.related .relatedArticlesDiv:empty {
  display: none;
}

/* ========== RELATED LINKS ========== */
.separator {
  margin: 10px 0;
}

.personLinksDiv {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.personLinkHeader {
  background-color: var(--color-bg-secondary);
  font-weight: bold;
  padding: 6px;
  margin-bottom: 6px;
  border-radius: 4px;
  font-size: 1.2em;
}

.artReadAlso {
  width: 20%;
  border: 1px solid var(--color-border-light);
  padding: 8px;
  border-radius: 6px;
  background-color: var(--color-bg-light);
}

.readAlsoArticleLink {
  margin-bottom: 10px;
}

.readAlsoArticleLink a {
  color: var(--color-text-link);
  text-decoration: none;
}

.readAlsoArticleLink a:hover {
  text-decoration: underline;
}

/* Modern navbar container */
.modern-navbar-lite {
  width: 100%;
  background-color: var(--color-bg-secondary);
  padding: 0;
  margin-bottom: 10px;
}

.modern-navbar-lite .nav-inner {
  max-width: 990px;
  margin: 0 auto;
  padding: 4px 10px;
}

.main-nav-lite {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav-lite li {
  margin: 0;
}

.main-nav-lite a {
  display: block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  background-color: var(--color-bg-light);
  color: var(--color-bg-dark);
  border: 1px solid var(--color-border-grey);
  transition: all 0.2s ease-in-out;
}

.main-nav-lite li.active a {
  background-color: var(--color-bg-dark);
  color: var(--color-text-invert);
}

.main-nav-lite a:hover {
  background-color: var(--color-bg-hover-light);
  color: var(--color-text-black);
}

.sub-nav-lite {
  max-width: 990px;
  margin: 5px auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background-color: var(--color-bg-accent);
  padding: 6px 10px;
  list-style: none;
  border-radius: 4px;
}

.sub-nav-lite a {
  display: block;
  padding: 5px 10px;
  background-color: var(--color-bg-subnav);
  color: var(--color-text-link);
  border: 1px solid var(--color-border-light);
  border-radius: 3px;
  font-size: 13px;
  text-decoration: none;
}

.sub-nav-lite a:hover {
  background-color: var(--color-bg-subnav-hover);
  color: var(--color-text-black);
}

.anaWrapper {
	margin-left: 6px;
	white-space: nowrap;
}

.anaPrefix {
	font-size: 0.9em;
	color: #555;
}

.anaIcon {
	vertical-align: middle;
}

/* Responsive */
@media (max-width: 768px) {
  #personDiv,
  #tingDiv,
  #articleDiv {
    flex-direction: column;
  }

  #personDiv .main,
  #personDiv .related,
  #tingDiv .main,
  #tingDiv .related,
  #articleDiv .main,
  #articleDiv .related {
    flex: 1 1 100%;
  }
}