/* =========================================================
   Global font for About/Resume template
   ========================================================= */
body.page-template-page-about,
body.page-template-page-about * {
  font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
}
body.page-template-page-about .dashicons,
body.page-template-page-about .dashicons::before {
  font-family: dashicons !important;
}

/* =========================================================
   Hero video: fixed 2.39:1 ratio, video covers, overlay above
   ========================================================= */
.about-hero { background:#111; margin:0px 10px; }
.about-hero__ratio {
  position: relative;
  width: 100%;
}

/* robust ratio support (works even if aspect-ratio not supported) */
.about-hero__ratio::before { content:""; display:block; padding-top: calc(100% / 2.39); }
@supports (aspect-ratio: 2.39 / 1) {
  .about-hero__ratio::before { display:none; }
  .about-hero__ratio { aspect-ratio: 2.39 / 1; }
}

.about-hero__video,
.about-hero__fallback {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
}
.about-hero__fallback {
  display:flex; align-items:center; justify-content:center; color:#fff;
}

/* Overlay text over video */
.about-hero__overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:2;
}
.about-hero__text {
  pointer-events:auto;
  display:inline-block;
  background: rgba(0,0,0,.45);
  color:#fff;
  padding:.6rem .9rem;
  border-radius:.5rem;
  font: 700 clamp(18px, 2.5vw, 36px)/1.3 "Open Sans Condensed", Helvetica, Arial, sans-serif;
  max-width: min(90vw, 1100px);
  text-align: center;
  white-space: pre-line;
}

/* Overlay text animations (used by about.js) */
@keyframes upOut   { to   { transform: translateY(-30%); opacity: 0; } }
@keyframes upIn    { from { transform: translateY(30%);  opacity: 0; } to { transform:none; opacity:1; } }
@keyframes downOut { to   { transform: translateY(30%);  opacity: 0; } }
@keyframes downIn  { from { transform: translateY(-30%); opacity: 0; } to { transform:none; opacity:1; } }
@keyframes leftOut { to   { transform: translateX(-30%); opacity: 0; } }
@keyframes leftIn  { from { transform: translateX(30%);  opacity: 0; } to { transform:none; opacity:1; } }
@keyframes rightOut{ to   { transform: translateX(30%);  opacity: 0; } }
@keyframes rightIn { from { transform: translateX(-30%); opacity: 0; } to { transform:none; opacity:1; } }
@keyframes fadeOut { to   { opacity: 0; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }

.about-hero__text.anim-up-out    { animation: upOut   .5s forwards ease; }
.about-hero__text.anim-up-in     { animation: upIn    .5s forwards ease; }
.about-hero__text.anim-down-out  { animation: downOut .5s forwards ease; }
.about-hero__text.anim-down-in   { animation: downIn  .5s forwards ease; }
.about-hero__text.anim-left-out  { animation: leftOut .5s forwards ease; }
.about-hero__text.anim-left-in   { animation: leftIn  .5s forwards ease; }
.about-hero__text.anim-right-out { animation: rightOut .5s forwards ease; }
.about-hero__text.anim-right-in  { animation: rightIn  .5s forwards ease; }
.about-hero__text.anim-fade-out  { animation: fadeOut .5s forwards ease; }
.about-hero__text.anim-fade-in   { animation: fadeIn  .5s forwards ease; }

/* =========================================================
   Resume section — slate background, white text/links
   ========================================================= */
.about-resume{
  background:#222; /* slate #1f2937 */
  color:#fff;
  padding:48px 0;
  margin:0px 10px;
}
.about-resume a{ color:#fff; }

/* Main page content block under the hero */
body.page-template-page-about .site-main .entry-content {
  color: #fff;
  padding: 24px 20px;
}
body.page-template-page-about .site-main .entry-content a {
  color: #9dd0ff;
}

.about-resume__inner{
  width:min(1100px,92%);
  margin:0 auto;
}

.about-resume__title{
  margin:0 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.about-resume__title > span{
  font-size:36px;
  font-weight:700;
  letter-spacing:.3px;
}
.about-resume__printbtn{
  background:transparent;
  border:0;
  color:#fff;
  opacity:.9;
  cursor:pointer;
  line-height:0;
}
.about-resume__printbtn:hover{ opacity:1; transform:scale(1.04); }

.resume-group{ margin-top:12px; }
.resume-group__title{
  margin:18px 0 8px;
  font-size:22px;
  font-weight:700;
  opacity:.95;
}

.resume-list {
  list-style:none; margin:0; padding:0;
  border-top:1px solid rgba(255,255,255,.14);
}
.resume-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 4px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

li .resume-item:hover {
  background-color: #333;
}

.resume-thumbwrap{ flex:0 0 auto; }
.resume-thumb{
  width:20px; height:30px; object-fit:cover;
  border-radius:4px; box-shadow:0 0 0 1px rgba(255,255,255,.2);
}

/* title left, year right */
.resume-texts{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 auto;
  min-width:0;
}
.resume-link{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-decoration:none;
}
.resume-link:hover{ text-decoration:underline; }
.resume-link-title {
  min-width: 0;
}
.resume-link-meta {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  white-space:normal;
}
.resume-link-type {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.resume-link-type--icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.resume-link-type--icon .dashicons {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.resume-link-type--icon::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  background: #fff;
  color: #111;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 5;
}
.resume-link-type--icon:hover,
.resume-link-type--icon:focus-visible {
  background: rgba(208,163,92,.18);
  color: var(--nf-gold, #d0a35c);
  transform: translateY(-1px);
}
.resume-link-type--icon:hover::after,
.resume-link-type--icon:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.resume-link-type--text {
  font-weight: 600;
}
.resume-dist-chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.resume-dist-logo {
  display:block;
  max-width:42px;
  max-height:30px;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  padding: 2px 4px;
}
.resume-dist-chip--text {
  font-weight:600;
}
.resume-year{
  margin-left:auto;           /* push year to right edge */
  opacity:.9; font-weight:600;
}
/* Row hover: subtle white wash */
.about-resume .resume-item {
  transition: background-color .2s ease;
}
.about-resume .resume-item:hover {
  background: rgba(255,255,255,.08); /* white, slightly transparent */
}

/* Do not underline the title on hover */
.about-resume .resume-link:hover {
  text-decoration: none;
}
/* Row hover: subtle white wash (preferred) */
.about-resume .resume-list .resume-item {
  transition: background-color .2s ease;
}
.about-resume .resume-list .resume-item:hover {
  background-color: rgba(255,255,255,.08); /* soft white tint */
}

/* If you really want a darker hover instead, use this: */
/* .about-resume .resume-list .resume-item:hover { background-color: #333; } */

/* No underline on title hover */
.about-resume .resume-list .resume-item .resume-link,
.about-resume .resume-list .resume-item .resume-link:hover,
.about-resume .resume-list .resume-item .resume-link:focus {
  text-decoration: none;
}