/* =====================================================
   Richiest Article Pages — richiest-article.css
   Fonts: DM Sans (body) + Playfair Display (headings)
   ===================================================== */

:root {
  --dark:     #393b44;
  --slate:    #8d93ab;
  --mist:     #d6e0f0;
  --offwhite: #f1f3f8;
  --white:    #ffffff;
  --ink:      #1a1c22;
}

/* ---------- Base ---------- */
body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--offwhite);
  color: var(--dark);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--dark);
}

h4 {
  font-family: 'DM Sans', sans-serif;
  color: var(--slate);
}

a {
  color: var(--slate);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--dark);
  text-decoration: underline;
}

img {
  margin-top: 15px;
  margin-bottom: 15px;
  max-width: 100%;
  height: auto;
}

ul { margin-left: 0; }
ul li { padding-top: 0; }
ol { margin-left: 0; }
ol li { padding-top: 10px; }

p {
  line-height: 1.4;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0;
}

h1 { font-weight: bold; font-size: 2.2em; padding-top: 20px; padding-bottom: 20px; margin: 0; }
h2 { font-weight: bold; font-size: 1.6em; padding-top: 20px; margin: 0; }
h3 { font-style: italic; font-size: 1.4em; padding-left: 10px; padding-top: 20px; margin: 0; }
h4 { font-size: 1.2em; padding-top: 15px; margin: 0; }

/* ---------- Dark Article Title Header ---------- */
.article-title-header {
  background: var(--dark);
  position: relative;
  overflow: hidden;
  padding: 2rem 0 1.75rem;
}
.article-title-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(141,147,171,0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
  opacity: 0.8;
  margin-bottom: 0.75rem;
  font-family: 'DM Sans', sans-serif;
  padding-left: 0;
}
.article-h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
  padding-top: 0;
  padding-bottom: 0;
}
.article-sub {
  font-size: 1rem;
  color: var(--mist);
  margin-bottom: 0;
  font-family: 'DM Sans', sans-serif;
  padding-left: 0;
}

/* ---------- Layout ---------- */
.container-800 {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.container-1000 {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.container-1280 {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.dark-div { background: var(--dark); }

/* ---------- Sections ---------- */
section {
  border-top: 1px solid var(--slate);
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}
section:nth-child(even) { background-color: #f5f5f5; }

/* ---------- Author ---------- */
.author-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 15px;
  border: 0;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.author-image-large { width: 400px; height: 400px; object-fit: cover; }
.author-name { font-size: 1.0em; font-weight: 500; }
.author-text { color: #949C9F; font-size: 0.8em; }
.author-info { display: flex; align-items: start; margin-bottom: 20px; }

/* ---------- Tables ---------- */
.table-wrapper { overflow-x: auto; }

table {
  margin-top: 20px;
  margin-bottom: 20px;
  border-collapse: separate;
  border-spacing: 4px;
  background-color: #fff;
  table-layout: auto;
}
table th {
  background-color: #949C9F;
  border-radius: 10px;
  color: white;
  height: 40px;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  font-family: 'DM Sans', sans-serif;
}
table td {
  border-radius: 10px;
  background-color: #ffffff;
  border: 1px solid #D5DADC;
  padding: 10px;
  vertical-align: middle;
}
.w-12 { width: 12.5%; }
.w-20 { width: 20%; }
.w-40 { width: 40%; }
.w-60 { width: 60%; }
tbody td:first-child { background-color: #D5DADC; }
table tbody tr td:hover { background-color: #E8E8E8; }

/* ---------- Nav ---------- */
.navbar { padding-left: 0; }
.navbar-nav { padding-left: 0; }
.navbar-brand { margin-right: 50px; }
.nav-item .dropdown-item { white-space: normal; overflow: hidden; margin-top: 2px; margin-bottom: 2px; }

/* ---------- Buttons / Fixed ---------- */
.btn {
  margin-top: 15px;
  background-color: var(--slate);
  color: white;
}

.return-to-top {
  position: fixed;
  bottom: 50px;
  right: 20px;
  background: var(--dark);
  width: 50px;
  height: 50px;
  display: none;
  text-align: center;
  line-height: 50px;
  color: white;
  cursor: pointer;
  border-radius: 10px;
  z-index: 1000;
}
#return-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--dark);
  width: 50px;
  height: 50px;
  display: none;
  text-align: center;
  line-height: 50px;
  color: white;
  cursor: pointer;
  border-radius: 10px;
  z-index: 1000;
}

/* ---------- TOC ---------- */
.fixed-toc {
  position: fixed;
  bottom: 10%;
  left: 5px;
  width: 300px;
  background-color: #fff;
  border-radius: 5px;
  padding: 1px;
  z-index: 1000;
}
.list-group { margin: 5px; }
.list-group-item { margin: 3px; padding: 3px; }

/* ---------- Misc ---------- */
.icon { width: 30px; height: 50px; padding-bottom: 20px; }
.footer-link { color: #ffffff; font-size: 0.7em; }
.security-link { color: white; text-decoration: none; }
.security-link:target { font-size: larger; text-decoration: underline; }
.blog-link { font-size: 0.9em; margin-bottom: 5px; text-decoration: none; font-weight: bold; }
.blog-link:visited, .blog-link:hover { text-decoration: none; color: black; }

.mobile-indicator { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .table-container { overflow-x: auto; scrollbar-width: auto; }
  th { height: 80px; }
  td { height: 80px; }
  .mobile-indicator { display: block; }
  .navbar-nav-scroll { max-height: 350px; overflow-y: auto; }
  section { padding-left: 5px; padding-right: 5px; }
}