/* ============================================================
   Custom additions for Alec Levy's site
   Extends the Reflux template (templatemo-531) with:
   - About skills list + school logo
   - Experiences (collapsible) section
   - Awards (vertical timeline) section
   - CV section
   Palette: accent #93c6d6 on the dark page background, white text.
   ============================================================ */

/* ---- Sidebar headshot: avoid distortion ---- */
.menu .image img { object-fit: cover; }

/* ---- Projects: uniform thumbnail height regardless of source aspect ---- */
figure.snip1321 img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 5px;
}

/* ---- About: skills + logo ---- */
.section-heading h3,
.section-heading h5 { color: #fff; }
.section-heading h5 { font-weight: 400; }
.section-heading h5 a { color: #93c6d6; }

.skill-list { padding-left: 0; text-align: left; }
.skill-list li {
  list-style: none;
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  color: #fff;
  font-size: 15px;
}
.skill-list li:before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  background-color: #93c6d6;
  border-radius: 2px;
}
.NU-logo { display: flex; align-items: center; justify-content: center; }
.NU-logo img { max-width: 100%; border-radius: 10px; }

/* ---- Experiences ---- */
.my-experience .row { margin-bottom: 40px; }
.exp-image { text-align: center; }
.exp-image img {
  width: 130px; height: 130px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.1);
}
.employer { font-size: 22px; font-weight: 700; }
.employer a { color: #fff; }
.employer a:hover { color: #93c6d6; }
.job-title { font-size: 15px; color: #d8d2d4; margin: 4px 0 14px; }
.job-title i { color: #93c6d6; font-style: italic; }

button.collapsible {
  background-color: transparent;
  color: #93c6d6;
  cursor: pointer;
  padding: 8px 18px;
  border: 1px solid #93c6d6;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  outline: none;
  transition: all 0.25s ease;
}
button.collapsible:hover,
button.collapsible.active { background-color: #93c6d6; color: #fff; }

.collapsible + .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.content p { font-size: 15px; line-height: 1.7; color: #eee; margin-top: 14px; }
.content a { color: #93c6d6; }
.content img { border-radius: 8px; }

/* ---- Awards: vertical timeline ---- */
.timeline {
  list-style: none;
  position: relative;
  padding: 20px 0;
  margin-top: 20px;
}
.timeline:before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: rgba(255,255,255,0.15);
}
.timeline > li { position: relative; margin-bottom: 40px; }
.timeline .direction-r,
.timeline .direction-l { position: relative; width: 46%; }
.timeline .direction-r { float: right; text-align: left; }
.timeline .direction-l { float: left; text-align: right; }
.timeline > li:after { content: ""; display: table; clear: both; }

.flag-wrapper { position: relative; display: block; }
.timeline .hexa {
  position: absolute;
  top: 8px;
  width: 16px; height: 16px;
  background: #93c6d6;
  border: 3px solid #1c2733;
  border-radius: 50%;
}
.direction-r .hexa { left: -30px; margin-left: -8px; }
.direction-l .hexa { right: -30px; margin-right: -8px; }
.direction-r .hexa { left: -8.7%; }
.direction-l .hexa { right: -8.7%; }

.timeline .flag {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.timeline .flag a { color: #fff; }
.timeline .flag a:hover { color: #93c6d6; }
.timeline .time-wrapper { display: block; margin: 4px 0; }
.timeline .time { color: #93c6d6; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; }
.timeline .desc { font-size: 14px; color: #d8d2d4; line-height: 1.6; }
.timeline .desc font { color: #fff; font-weight: 700; }
.timeline .desc em { color: #cfc9cb; }

/* ---- CV ---- */
.resume .pdf-embed {
  width: 100%;
  height: 80vh;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  margin: 10px 0 20px;
}
.resume .white-button { margin-top: 10px; }

/* ---- Mobile timeline: single column ---- */
@media (max-width: 767px) {
  .timeline:before { left: 12px; }
  .timeline .direction-r,
  .timeline .direction-l {
    float: none; width: auto; text-align: left;
    margin-left: 36px;
  }
  .direction-r .hexa, .direction-l .hexa { left: -32px; right: auto; }
  .NU-logo { margin-top: 25px; }
}

/* ============================================================
   Palette theme overrides (deep-teal / sky-blue / periwinkle)
   ------------------------------------------------------------
   --deep-teal:#668586  --tropical-teal:#82aeb1
   --sky-blue:#93c6d6   --periwinkle:#a7acd9   --lilac-ash:#9e8fb2
   ============================================================ */

/* Dark gradient background tinted with the palette (keeps white text legible) */
#page-wraper {
  background: linear-gradient(135deg, #20312f 0%, #1c2733 50%, #2a2438 100%) no-repeat fixed;
  background-size: cover;
}

/* Inline links in section copy use the accent (they were inheriting white) */
.section-heading span a,
.section-heading p a,
.left-text a,
.right-text a { color: #93c6d6; }
.section-heading span a:hover,
.section-heading p a:hover,
.left-text a:hover,
.right-text a:hover { color: #a7acd9; }

/* Accent-background elements need DARK text (white-on-pastel is too faint) */
.white-button a { background-color: #93c6d6; color: #14202a; }
.white-button a:hover { background-color: #a7acd9; color: #14202a; }
figure.snip1321 i { color: #14202a; }
button.collapsible:hover,
button.collapsible.active { color: #14202a; }
.menu .social-network ul li a:hover { color: #14202a; }