:root {
      --color-bg-light: #f4f4f4;
      --color-bg-dark: #1b263b;
      --color-accent: #415a77;
      --color-white: #ffffff;
      --color-text-dark: #2d3e50;
      --color-text-light: #555;
      --color-text-footer: #ffffff;
      --shadow-default: 0 0 15px rgba(0, 0, 0, 0.3);
      --radius-large: 12px;
      --radius-small: 10px;
      --font-main: 'Segoe UI', sans-serif;
      --font-decorative: 'Cinzel Decorative', sans-serif;
      --font-stencil: 'Stardos Stencil', sans-serif;
      --font-list-title: 'Trebuchet MS', sans-serif;
    }

    *, *::before, *::after {
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-main);
      margin: 1rem 0.5rem;
      padding: 0;
      background: var(--color-bg-light);
      transition: background-color 0.4s ease, color 0.4s ease;
    }
    li {
      margin-bottom: 1.5rem;
    }

  
    /* Header */
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2rem;
      background-color: var(--color-bg-dark);
      border-radius: var(--radius-large);
      box-shadow: var(--shadow-default);
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
    }

    .header .lines {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      margin-right: 2rem;
    }

    .header .line {
      height: 18px;
      border-radius: 10px;
      background: linear-gradient(to right, transparent, var(--color-white));
      opacity: 0.95;
    }

    .header .line:nth-child(1) { width: 60%; }
    .header .line:nth-child(2) { width: 75%; }
    .header .line:nth-child(3) { width: 100%; }

    .text {
      text-align: right;
    }

    .name {
      font-family: var(--font-decorative);
      font-size: 2.8rem;
      font-weight: 700;
      color: var(--color-white);
      letter-spacing: 1px;
    }

    .title {
      font-family: var(--font-stencil);
      font-size: 1.5rem;
      color: var(--color-white);
      margin-top: 0.3rem;
    }

    /* Content */
    .content-shell {
      background-color: var(--color-accent);
      padding: 2rem;
      border-radius: var(--radius-large);
      box-shadow: var(--shadow-default);
      width: 100%;
      max-width: 1000px;
      margin: 2rem auto;
    }

    .content-card {
      background: var(--color-white);
      border-radius: var(--radius-small);
      padding: 2rem;
      color: var(--color-text-dark);
    }

    .content-card h1 {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
      font-family: var(--font-stencil);
    }

    .content-card p {
      font-size: 1rem;
      line-height: 1.5;
      color: var(--color-text-light);
    }
    .content-card .post-metadata p {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text-light); /* optional if you want to keep consistency */
}
    .content-card ul {
      list-style: none;
      padding-left: 0;
    }
   .content-card li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 1.2rem;
}
    .content-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--color-accent);
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1;
}
    .content-card a {
  color: var(--color-accent);
  /*font-weight: bold;*/
  text-decoration: none;
}

.content-card a:hover,
.content-card a:focus {
  text-decoration: underline;
}

.content-card a:visited {
  color: #818181;
}


.content-card .checklist li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 1.2rem;
}

.content-card .checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--color-accent);
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1;
}

.content-card .content-card-nav,
.header,
.footer {
  transition: background-color 0.4s ease, color 0.4s ease;
}

.skill-title {
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  color: var(--color-text-dark);
}

.skill-desc {
  margin-top: 0.3rem;
  color: var(--color-text-light);
}

    /* Footer */
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--color-bg-dark);
      padding: 2rem 3rem;
      border-radius: var(--radius-large);
      box-shadow: var(--shadow-default);
      max-width: 1000px;
      margin: 2rem auto 0 auto;
      width: 100%;
      flex-wrap: wrap;
      gap: 2rem;
    }

    .footer-lines-left {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .footer-lines-right {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      align-items: flex-end; /* This right-aligns the lines */
    }

    .footer-line-r {
      height: 10px;
      background: linear-gradient(to right, var(--color-white), transparent);
      border-radius: 10px;
      opacity: 0.95;
    }
    .footer-line-l {
      height: 10px;
      background: linear-gradient(to right, transparent, var(--color-white));
      border-radius: 10px;
      opacity: 0.95;
    }
    .footer-lines-left .footer-line-l:nth-child(1),
    .footer-lines-right .footer-line-r:nth-child(1) {
      width: 100px;
    }
    .footer-lines-left .footer-line-l:nth-child(2),
    .footer-lines-right .footer-line-r:nth-child(2) {
      width: 200px;
    }
    .footer-lines-left .footer-line-l:nth-child(3),
    .footer-lines-right .footer-line-r:nth-child(3) {
      width: 300px;
    }

    .footer-text {
      text-align: center;
      color: var(--color-text-footer);
      font-family: var(--font-main);
      font-size: 0.8rem;
      line-height: 1.6;
      flex: 1 1 auto;
      min-width: 180px;
      margin-top: -0.5rem; /* (TBD) Tighten spacing between top lines and text */
    }
    .footer-text a {
      color: var(--color-text-footer);
      text-decoration: underline;
    }

    /* Responsive */
    @media (max-width: 970px) {
      .header, .footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .header .lines {
       flex-direction: row;
       justify-content: center;
       /*gap: 0.7rem;*/
       width: 100%;
       margin: 0 0 0 0;
     }
     .header .line {
      flex: 1;
      min-width: 30px;
    }
      .text {
        width: 100%;
        margin-top: 1rem;
      }
        .footer-text {
        width: 100%;
      }
        .footer-lines-left, .footer-lines-right {
        flex-direction: row;
        justify-content: center;
        width: 100%;
        margin-bottom: 0.5rem;
      }
    }

    /* Dark Mode Styles */
html.dark-mode {
  --color-bg-light: #0d1b2a;
  --color-bg-dark: #1b263b;
  --color-accent: #415a77;
  --color-text-dark: #ffffff;
  --color-text-light: #d1d1d1;
  --color-text-footer: #ffffff;
  background: var(--color-bg-light);
}

html.dark-mode .content-card {
  background: var(--color-bg-dark);
}

html.dark-mode .content-card-nav {
  background: var(--color-bg-dark);
}

.dark-mode-toggle {
  display: flex;
  justify-content: right; 
  gap: 0.5rem;
}
.dark-mode-label {
  font-size: 0.8rem;
}

html.dark-mode a {
  color: #e0e0e0; /* soft light for contrast */
}

.content-card.dark-mode a:visited {
  color: #818181;
}

html.dark-mode .post-card {
  background-color: #415a77;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-accent);
  transition: 0.4s;
  border-radius: var(--radius-large);
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: var(--color-white);
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--color-accent);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

 /* Nav section */
 .content-shell-nav {
      background-color: var(--color-accent);
      padding: 2rem;
      border-radius: var(--radius-large);
      box-shadow: var(--shadow-default);
      width: 100%;
      max-width: 1000px;
      margin: 2rem auto;
    }

   .content-card-nav {
  background: var(--color-white);
  border-radius: var(--radius-small);
  padding: 1rem 2rem; 
  color: var(--color-text-dark);
  display: flex;
  justify-content: space-between;
  align-items: center; 
}

.content-card-nav a:hover,
.content-card-nav a:focus {
  text-decoration: underline;
}
    .content-card-nav a:visited {
      color: var(--color-text-dark)
    }

 
.pull-quote {
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 4px solid var(--color-accent, #0077cc);
  background-color: rgba(0, 0, 0, 0.03); /* Adjust for dark/light modes */
  color: var(--color-text, #333);
}
html.dark-mode .pull-quote {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-text-dark, #ddd);
}
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* responsive fallback */
  gap: 1rem;
  width: 100%;
} 

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  font-weight: bold;
  color: var(--color-text-dark);
  text-decoration: none;
}

.nav-links a:hover {
  text-decoration: underline;
}

/* Optional: override visited color if needed */
.nav-links a:visited {
  color: var(--color-text-dark);
}
.nav-links a {
  font-family: var(--font-stencil);
  font-weight: bold;
  font-size: 1.2rem;
  color: var(--color-text-dark);
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a:focus {
  text-decoration: underline;
}

html.dark-mode .nav-links a {
  color: var(--color-white);
}

@media (max-width: 700px) {
  .main-nav {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .dark-mode-toggle {
    justify-content: center;
  }
}
.posts-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* === Post Card Styling === */
.post-card {
  background-color: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-default);
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
  line-height: 1.6;
}

.post-card h2 {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
  margin-top: 0rem;
  font-family: var(--font-main);
}

.post-card em {
  display: block;
  margin-bottom: 0.8rem;
  font-style: italic;
  color: var(--color-text-light);
}

.post-card blockquote {
  margin: 0.5rem 0 1.5rem 0;
  padding-left: 1rem;
  border-left: 4px solid var(--color-accent);
  font-style: italic;
  color: var(--color-text-light);
}

.post-card p {
  margin: 0.4rem 0;
}

.post-card strong {
  font-weight: 600;
}

.post-card a {
  display: inline-block;
  margin-top: 0rem;
  color: var(--color-accent);
  text-decoration: none;
}

.post-card a:hover {
  text-decoration: underline;
}

/* Optional hover elevation effect 
.post-card:hover {
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}*/

/*.post-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
} This is not used anywhere */

.post-main {
  flex: 1 1 60%;
}


.post-date {
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  margin-bottom: 0.25rem;
}

.post-subtitle {
  display: block;
  margin-bottom: 0.8rem;
  font-style: italic;
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1.4;
}

.post-metadata {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0; /* 2rem */
  margin-top: 0; /* 0.5rem */
  align-items: flex-start;
  line-height: 1.4;
}

.post-metadata p {
  margin: 0.3rem 0;
}

.post-metadata,
.post-metadata p {
  font-size: 0.85rem;
}

.post-title-link {
  text-decoration: none;
  color: inherit;
}

.post-title-link:hover,
.post-title-link:focus {
  text-decoration: underline;
  color: var(--color-accent);
}

/* === Dark Mode Overrides === */
.dark-mode .post-card {
  background-color: #2d3e50; /* deep slate */
  color: var(--color-white);
}

.dark-mode .post-card em {
  color: #bbb;
}

.dark-mode .post-card blockquote {
  border-left-color: #ccc;
  color: #ccc;
}

.dark-mode .post-card a {
  color: #aecdff;
}
.dark-mode .related-materials {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .post-subtitle {
  color: #bbb;
}

#filters {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

#filters label {
  font-weight: bold;
}

#filters select {
  padding: 0.4rem;
  border-radius: var(--radius-small);
  font-size: 1rem;
}

/*.meta-left,
.meta-right {
  flex: 1 1 48%;
} Test to see if needed */

.subtle-bullets li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.5rem;
}

.subtle-bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-size: 1rem;
  line-height: 1;
}
.read-more {
  display: inline-block;
 /* margin-top: 1.2rem; */
  margin-bottom: 0.6rem; 
  font-weight: bold;
  color: var(--color-accent);
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

.divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 0 0 1.2rem 0;
}

@media (max-width: 600px) {
  .meta-right {
    text-align: left;
    padding-top: 0; /* reduce space or remove entirely */
    margin-top: 0;  /* optional: ensure no margin added */
  }
}
/*.external-link::after {
  content: " ↗";
  font-size: 0.85em;
  vertical-align: top;
  margin-left: 0.2rem;
}*/