/* --- DHL Themed Personal Site Styles (updated) --- */

/* Optional: self-host if you have the licensed fonts
@font-face {
  font-family: 'Delivery';
  src: url('../fonts/Delivery-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Delivery';
  src: url('../fonts/Delivery-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

:root {
  /* DHL palette (Brand Hub: Postyellow #FFCC00; DHL Red #D40511) */
  --dhl-yellow: #FFCC00;
  --dhl-red: #D40511;
  --black: #111111;
  --white: #ffffff;
  --ink: #1a1a1a;
  --paper: #fffaf0; /* slightly warm to flatter DHL yellow */
  --muted: #6b7280;
  --card: #ffffff;
  --card-border: #e5e7eb;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: Delivery, "DHL Type", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

a { color: var(--dhl-red); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: min(1120px, 92%); margin: 0 auto; }

/* Header */
header {
  position: sticky; top: 0; z-index: 30;
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  border-bottom: 1px solid var(--card-border);
}
.nav { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; }
.brand { display:flex; align-items:center; gap:.75rem; font-weight:800; letter-spacing:.2px; }

/* Brand badge with your person.svg (no yellow circle) */
.brand-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border-radius:0;
  box-shadow:none;
  text-decoration:none;
}
.brand-badge img {
  display:block;
  width:100%;
  height:100%;
  object-fit: contain;
}
.brand-badge:after { content: none !important; }

nav ul { display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
nav a { font-weight:700; padding:.4rem .6rem; border-radius:10px; }
nav a:hover { background: color-mix(in srgb, var(--dhl-yellow) 35%, transparent); text-decoration:none; }

/* Hero */
.hero { display:grid; grid-template-columns: 1fr 1fr; gap:2.2rem; align-items:center; padding: 56px 0; }
@media (max-width: 900px) { .hero{ grid-template-columns: 1fr; } }

h1 { font-size: clamp(1.8rem, 2.8vw + .6rem, 2.8rem); line-height: 1.12; margin: .2rem 0 .6rem; font-weight: 900; letter-spacing:-.3px; }
h2 { font-size: clamp(1.6rem, 2vw + .5rem, 2.2rem); margin: 2rem 0 1rem; }
h3 { margin: 1rem 0 .5rem; }

.cta-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.btn { border:2px solid var(--ink); background: var(--dhl-yellow); color:#111; font-weight:900; padding:.7rem 1rem; border-radius:14px; box-shadow: var(--shadow); transition: transform .05s ease-in-out; }
.btn:hover { transform: translateY(-1px); text-decoration:none; }
.btn.secondary { background: var(--card); border-color: var(--card-border); }

.mono { font-variant-ligatures: none; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight:700; background: color-mix(in srgb, var(--dhl-yellow) 25%, transparent); padding:.15rem .4rem; border-radius:6px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card);
  box-shadow: var(--shadow);
  font-weight: 700;
}

.pill .dot {
  width: .75rem;
  height: .75rem;
  border-radius: 999px;
  background: var(--dhl-red);
}

.project-gif {
  width: 50%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

/* Sections & cards */
.section { padding: 26px 0 54px; border-top:1px solid var(--card-border); }
.cards { display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; }
.card { grid-column: span 6; background: var(--card); border:1px solid var(--card-border); border-radius:18px; padding:18px; box-shadow: var(--shadow); transition: transform .08s ease; }
.card:hover { transform: translateY(-2px); }
@media (max-width: 900px){ .card{ grid-column: span 12; } }
.meta { display:flex; gap:.75rem; color:var(--muted); font-size:.95rem; flex-wrap:wrap; }

/* Tip under van */
.tiny-tip {
  margin-top: -5rem;   /* pull up; adjust to taste */
  color: var(--muted);
  text-align: center;
}

/* Footer */
footer { padding:40px 0 60px; color: var(--muted); text-align:center; }

/* Van + Beep bubble */
.van {
  display: block;
  margin: 0 auto 0 60px; /* nudge van to the right */
  width: clamp(220px, 36vw, 420px);
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.15));
}
.van-wrap { position: relative; display: inline-block; }
#van-beep {
  position: absolute;
  top: 80px; /* above the GIF */
  left: 50%;
  transform: translateX(calc(-50% - 15px)); /* slight left offset */
  background: var(--dhl-red);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 5;
}

/* ===================== */
/* Vitae — 3 Column Grid */
/* ===================== */

.vitae { margin: 4rem 0; padding: 0; } /* shares width with .container */

.vitae-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* equal columns */
  gap: 40px;
  align-items: start;
}

.vitae-col h3 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dhl-black);
}

/* Unified timeline styles (used in Experience & Education columns) */
.timeline {
  position: relative;
  padding-left: 1.25rem;                 /* modest indent */
  border-left: 3px solid var(--dhl-yellow);
}

.timeline-item { position: relative; margin-bottom: 1rem; }

.timeline-icon {
  position: absolute; left: -1.2rem; top: 0.2rem;
  background: var(--dhl-red); color: #fff;
  border-radius: 50%; width: 1.6rem; height: 1.6rem;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.timeline-content {
  background: var(--card);
  padding: .9rem 1.1rem;
  border-radius: 10px;
  box-shadow: var(--shadow);
  width: 100%;
  box-sizing: border-box;
}

.timeline-content h4 { margin: 0 0 .25rem; font-weight: 800; }
.timeline-date      { font-size: .85rem; font-weight: 600; color: var(--muted); }

/* Publications column styled like cards */
.pubs { list-style: none; margin: 0; padding: 0; }
.pubs li {
  background: var(--card);
  padding: .9rem 1.1rem;
  border-radius: 10px;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
  width: 100%;
  box-sizing: border-box;
}
.pubs a { font-weight: 700; }

/* Responsive breakpoints */
@media (max-width: 1100px) {
  .vitae-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .vitae-grid { grid-template-columns: 1fr; }
  .timeline { padding-left: 1rem; }
}


/* --- Skills cloud --- */
.skills {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
@media (max-width: 800px) { .skills { grid-template-columns: 1fr; } }

.skill-group h3 {
  margin: 0 0 .35rem;
  font-size: 1rem;
  font-weight: 900;
}

.skill-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}

.skill-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .55rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-weight: 700; font-size: .9rem;
}

.skill-chip .dot {
  width: .5rem; height: .5rem; border-radius: 999px; background: var(--dhl-red);
}