/* ==========================================================================
   Custom styles for Charlie Yang's portfolio
   Works within the Massively (HTML5 UP) template class structure.
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root {
  --accent: #4a90d9;
  --accent-glow: rgba(74, 144, 217, 0.35);
  --card-bg: rgba(255, 255, 255, 0.035);
  --card-border: rgba(255, 255, 255, 0.08);
  --text-secondary: rgba(255, 255, 255, 0.55);
}

/* ---------- Nav: Chatbot CTA highlight ---------- */
#nav ul.links li.nav-cta a {
  color: var(--accent);
  position: relative;
}
#nav ul.links li.nav-cta a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}
#nav ul.links li.nav-cta a:hover {
  text-shadow: 0 0 12px var(--accent-glow);
}

/* ---------- Chatbot CTA button on index ---------- */
.cta-chatbot {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.75em 1.75em;
  background: var(--accent);
  color: #fff !important;
  border: none;
  border-bottom: none;
  border-radius: 4px;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 900;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
  box-shadow: 0 2px 16px var(--accent-glow);
}
.cta-chatbot:hover {
  background: #3a7bc8;
  box-shadow: 0 4px 24px var(--accent-glow);
  transform: translateY(-1px);
  border-bottom: none;
}

/* ---------- Experience: proper bullet lists ---------- */
.experience-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.experience-bullets li {
  position: relative;
  padding-left: 1.25em;
  margin-bottom: 0.5em;
  line-height: 1.8;
}
.experience-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Experience: uniform image containers ---------- */
.posts article .image.fit.exp-logo {
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.posts article .image.fit.exp-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
}

/* ---------- Projects: uniform image containers ---------- */
.posts article .image.fit.proj-img {
  height: 220px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1f25;
}
.posts article .image.fit.proj-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.posts article .image.fit.proj-img img[alt="Information Cascades"] {
  object-position: center top;
}

/* ---------- Life: center full images in card ---------- */
.posts article .image.fit.life-img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.posts article .image.fit.life-img img {
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- Experience: card layout consistency ---------- */
.posts article {
  text-align: left;
}
.posts article header {
  text-align: left;
}
.posts article header h2 {
  margin-bottom: 0.25rem;
}
.posts article header h3 {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}
.posts article .exp-date {
  display: block;
  font-size: 0.65rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  font-style: italic;
}

/* ---------- Projects: card styling ---------- */
.posts article p {
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.9;
}

/* ---------- Projects: tech tag ---------- */
.project-tech {
  display: block;
  font-size: 0.6rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 900;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

/* ---------- Project card: live demo badge ---------- */
.live-badge {
  display: inline-block;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 900;
  color: #fff;
  background: var(--accent);
  padding: 0.15em 0.6em;
  border-radius: 3px;
  margin-left: 0.5em;
  vertical-align: middle;
  border-bottom: none;
}
.live-badge:hover {
  border-bottom: none;
}

/* ---------- About Me: smaller hero photo ---------- */
.post.featured .image.main {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Responsive: prevent overflow ---------- */
@media screen and (max-width: 736px) {
  .posts article p {
    font-size: 0.8rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .cta-chatbot {
    display: block;
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  .posts article {
    padding: 0 !important;
  }
  .posts article header h2 {
    font-size: 0.75rem;
  }
}