/* ================================================================
   RAIVEN WILLIAMS — CV SITE
   ================================================================
   EDIT GUIDE:
   · Colors/fonts → Section 1 (CSS Variables)
   · Layout tweaks → find the section comment
   · Mobile breakpoints → bottom of file
   ================================================================ */


/* ----------------------------------------------------------------
   1. CSS VARIABLES — change colors/fonts here
   ---------------------------------------------------------------- */
:root {
  /* Colors */
  --bg:           #0d0f0e;        /* page background (dark) */
  --surface:      #181a19;        /* slightly lighter dark */
  --card:         #f2f2ef;        /* light card background */
  --card-white:   #ffffff;        /* slide inner */
  --border:       #252826;        /* dark border */
  --border-light: #e2e2de;        /* card inner border */
  --green:        #22c55e;        /* accent green */
  --green-dark:   #16a34a;        /* darker green (company names) */
  --text:         #eeeeea;        /* main light text */
  --muted:        #8a8d8a;        /* muted/secondary text */
  --dark-text:    #1a1a18;        /* text on light cards */
  --mid-text:     #444442;        /* secondary text on cards */
  --faint-text:   #888886;        /* metadata / dates */

  /* Typography */
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing & shape */
  --nav-h:   56px;
  --r-md:    12px;
  --r-lg:    16px;
  --max-w:   1080px;
  --gap:     16px;
  --px:      24px;
}


/* ----------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; }
body  { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img   { display: block; max-width: 100%; height: auto; }
ul    { list-style: none; }
a     { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--sans); border: none; background: none; }


/* ----------------------------------------------------------------
   3. NAV
   ---------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--px);
  gap: 16px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.35);
  padding: .45rem .85rem;
  border-radius: 100px;
  margin-bottom: 1.4rem;
  align-self: flex-start;
}
.status-pill .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
  position: relative;
}
.status-pill .pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}

.nav__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.35; } }

.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav__link,
.nav__link--btn {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 6px;
  transition: color .2s;
  white-space: nowrap;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav__link:hover, .nav__link--btn:hover, .nav__link:focus-visible { color: var(--text); outline: none; }
.nav__link--active {
  color: var(--text);
  border-bottom: 2px solid var(--green);
  border-radius: 0;
  padding-bottom: 4px;
}

.chevron { font-size: .55rem; transition: transform .2s; }

/* Dropdown */
.nav__dropdown { position: relative; }
.nav__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  overflow: hidden;
}
.nav__dropdown-menu.is-open { display: block; }
.nav__dropdown-menu li a {
  display: block;
  padding: 10px 16px;
  font-size: .85rem;
  color: var(--muted);
  transition: background .15s, color .15s;
}
.nav__dropdown-menu li a:hover { background: var(--border); color: var(--text); }

/* Hamburger (mobile) */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ----------------------------------------------------------------
   4. HERO
   ---------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 320px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px var(--px) 48px;
  gap: 48px;
  align-items: start;
}

.hero__left { display: flex; flex-direction: column; }

.hero__greeting {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--green);
  margin-bottom: 6px;
}

.hero__name {
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--text);
  margin-bottom: 10px;
}

.hero__title {
  font-family: var(--mono);
  font-size: clamp(.72rem, 1.5vw, .95rem);
  color: var(--green);
  line-height: 1.5;
  margin-bottom: 18px;
}

.hero__bio {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 400px;
  margin-bottom: 32px;
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero photo panel — tall card flush right */
.hero__right {
  width: 380px;
  height: 320px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  flex-shrink: 0;
  align-self: stretch;
}

/* Stats strip */
.hero__stats {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 28px 24px;
  height: auto;
  min-height: 260px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.stat__num {
  font-family: var(--mono);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}

.stat__label {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  filter: grayscale(100%);
  opacity: 0.65;
}


/* ----------------------------------------------------------------
   5. BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--mono);
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn--outline {
  border: 1.5px solid var(--green);
  color: var(--green);
  background: transparent;
}
.btn--outline:hover { background: rgba(34,197,94,.12); }

.btn--solid {
  background: var(--text);
  color: var(--bg);
  border: 1.5px solid transparent;
}
.btn--solid:hover { background: #d5d5d0; }

.btn--cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 6px;
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--sans);
  background: var(--green);
  color: #fff;
  border: none;
  transition: background .2s;
  margin-top: 4px;
}
.btn--cta:hover { background: var(--green-dark); }


/* ----------------------------------------------------------------
   6. CARD SHARED
   ---------------------------------------------------------------- */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  color: var(--dark-text);
}

.card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.card__icon {
  font-size: 1.05rem;
  line-height: 1;
}
.card__icon--mono {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--green-dark);
  font-size: 1rem;
}
.card__icon--arrow {
  color: var(--green-dark);
  font-size: 1.3rem;
  font-weight: 700;
}

.card__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--dark-text);
  text-transform: lowercase;
  letter-spacing: .01em;
  flex: 1;
}


/* ----------------------------------------------------------------
   7. PAGE LAYOUT WRAPPERS
   ---------------------------------------------------------------- */
.experience-card,
.two-col-wrap,
.full-card {
  max-width: var(--max-w);
  margin: 0 auto var(--gap);
  padding-left: var(--px);
  padding-right: var(--px);
}

/* experience-card is itself a card at full width */
.experience-card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  color: var(--dark-text);
}

/* two-col-wrap is a transparent wrapper */
.two-col-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  background: none;
  padding-top: 0;
  padding-bottom: 0;
}

/* full-card is a card that spans full width */
.full-card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 28px var(--px);
  color: var(--dark-text);
}


/* ----------------------------------------------------------------
   8. EXPERIENCE CARD + CAROUSEL
   ---------------------------------------------------------------- */
.exp-toggle {
  margin-left: auto;
  font-size: .78rem;
  color: var(--faint-text);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  transition: color .2s;
}
.exp-toggle:hover { color: var(--dark-text); }

.carousel { position: relative; }

.carousel__viewport {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border-light);
}

.carousel__track {
  display: flex;
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* Each slide */
.slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--card-white);
}

.slide__left {
  padding: 28px 28px 28px 28px;
  border-right: 1px solid var(--border-light);
}

.slide__right {
  padding: 28px 24px;
  display: flex;
  align-items: center;
}

.slide__badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--faint-text);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.slide__role {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark-text);
  margin-bottom: 3px;
  line-height: 1.3;
}

.slide__level {
  font-size: .68rem;
  font-weight: 600;
  background: #e8f5e9;
  color: var(--green-dark);
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.slide__company {
  font-size: .85rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 4px;
}

.slide__meta {
  font-size: .78rem;
  color: var(--faint-text);
  margin-bottom: 14px;
}

.slide__desc {
  font-size: .83rem;
  color: var(--mid-text);
  line-height: 1.65;
}

.slide__checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.slide__checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .84rem;
  color: #333;
  line-height: 1.5;
}

.slide__checks li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Arrows */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 1.4rem;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: background .2s;
  line-height: 1;
}
.carousel__btn:hover { background: #f0f0f0; }
.carousel__btn--prev { left: -17px; }
.carousel__btn--next { right: -17px; }

/* Dots */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.carousel__dot.is-active {
  background: var(--green);
  transform: scale(1.2);
}

/* Collapsed state */
.carousel.is-collapsed { display: none; }


/* ----------------------------------------------------------------
   9. CAPABILITIES
   ---------------------------------------------------------------- */
.caps-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--dark-text);
  white-space: nowrap;
}

.cap-i { font-style: normal; font-size: .9rem; }
.cap-logo { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; vertical-align: middle; }
.cap-logo svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Certifications */
.cert-list { display: flex; flex-direction: column; gap: 12px; list-style: none; padding-left: 0; }
.cert-list li { display: flex; flex-direction: column; padding-left: 1.2rem; position: relative; font-size: .82rem; color: var(--dark-text); line-height: 1.4; }
.cert-list li::before { content: ''; position: absolute; left: 0; top: .45em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.cert-date { display: block; font-size: .72rem; color: var(--faint-text); margin-top: 2px; font-family: var(--mono); }


/* ----------------------------------------------------------------
   10. CONNECT CARD
   ---------------------------------------------------------------- */
.connect-card {
  background: transparent;
  overflow: hidden;
  padding: 0;
  max-width: var(--max-w);
  margin: 0 auto;
}
.connect-card__inner {
  display: grid;
  grid-template-columns: 1fr 160px;
  height: 100%;
  justify-items: end;
}
.connect-card .card__title,
.connect-card .connect__sub,
.connect-card .connect__social,
.connect-card .btn--cta {
  color: #fff;
}
.connect-card .connect__social {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
}
.connect-card .connect__social:hover {
  background: rgba(255,255,255,.22);
}
.connect-card .btn--cta {
  background: var(--green);
}

/* replaced inline above */

.connect-card__content {
  padding: 22px 20px 22px 24px;
  display: flex;
  flex-direction: column;
}

.connect__sub {
  font-size: .84rem;
  color: var(--mid-text);
  margin-bottom: 14px;
}

.connect__btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.connect__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: .84rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid #ddd;
  color: var(--dark-text);
  transition: background .2s;
}
.connect__social:hover { background: #f0f0ee; }

.connect-card__photo-wrap {
  overflow: hidden;
  height: 100%;
}

.connect-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


/* ----------------------------------------------------------------
   11. CAREER LOG
   ---------------------------------------------------------------- */
.summary-block {
  font-size: .88rem;
  color: var(--mid-text);
  line-height: 1.75;
  max-width: 700px;
  border-left: 3px solid var(--green);
  padding-left: 16px;
  margin-bottom: 28px;
}

.log-list { display: flex; flex-direction: column; }

.log-entry {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border-light);
}
.log-entry:last-child { border-bottom: none; }

.log-entry__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.log-entry__dates {
  font-family: var(--mono);
  font-size: .73rem;
  color: var(--faint-text);
  line-height: 1.5;
}

.log-entry__loc {
  font-size: .73rem;
  color: #aaa;
}

.log-entry__role {
  font-size: .98rem;
  font-weight: 800;
  color: var(--dark-text);
  margin-bottom: 4px;
  line-height: 1.3;
}

.log-entry__lvl {
  font-size: .67rem;
  font-weight: 600;
  background: #e8f5e9;
  color: var(--green-dark);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.log-entry__co {
  font-size: .84rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 10px;
}

.log-entry__list { display: flex; flex-direction: column; gap: 7px; }
.log-entry__list li {
  font-size: .83rem;
  color: #444;
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
}
.log-entry__list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--green-dark);
  font-weight: 700;
}

.tools-row {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}
.tools-row__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--faint-text);
  margin-bottom: 8px;
}
.tools-row__list {
  font-size: .84rem;
  color: var(--mid-text);
  line-height: 2;
}


/* ----------------------------------------------------------------
   12. ON THE ROAD
   ---------------------------------------------------------------- */
.otr-tagline {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-text);
  line-height: 1.55;
  max-width: 640px;
  margin-bottom: 14px;
}
.otr-body {
  font-size: .88rem;
  color: var(--mid-text);
  line-height: 1.8;
  max-width: 600px;
}


/* ----------------------------------------------------------------
   13. FOOTER
   ---------------------------------------------------------------- */
.site-footer {
  padding: 18px var(--px);
  border-top: 1px solid var(--border);
  font-size: .78rem;
  color: var(--muted);
  max-width: 100%;
}

.footer-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: var(--max-w);
  margin: 0 auto;
}

.footer-wrap nav {
  display: flex;
  gap: 18px;
}
.footer-wrap nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.footer-wrap nav a:hover { color: var(--green); }


/* ----------------------------------------------------------------
   FOCUS STYLES (accessibility)
   ---------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }


/* ----------------------------------------------------------------
   14. RESPONSIVE — TABLET (≤ 900px)
   ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 40px var(--px) 32px;
  }
  .hero__right { display: none; }

  .two-col-wrap {
    grid-template-columns: 1fr;
  }

  .log-entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .log-entry__meta { flex-direction: row; gap: 12px; padding-top: 0; }

  .carousel__btn--prev { left: 0; }
  .carousel__btn--next { right: 0; }
}


/* ----------------------------------------------------------------
   15. RESPONSIVE — MOBILE (≤ 600px)
   ---------------------------------------------------------------- */
@media (max-width: 600px) {
  :root { --px: 16px; --gap: 12px; }

  .nav__hamburger { display: flex; }
  .nav__links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 12px var(--px) 20px;
    gap: 2px;
    z-index: 99;
  }
  .nav__links.is-open { display: flex; }
  .nav__dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding-left: 12px;
  }
  .nav__dropdown-menu.is-open { display: block; }

  .hero__name { font-size: 2.4rem; }
  .hero__title { font-size: .75rem; }

  .slide { grid-template-columns: 1fr; }
  .slide__left { border-right: none; border-bottom: 1px solid var(--border-light); }

  .connect-card { max-width: 100%; }
  .connect-card__inner { grid-template-columns: 1fr; }
  .connect-card__photo-wrap { height: 200px; }

  .footer-wrap { flex-direction: column; text-align: center; gap: 8px; }
}