body {
  font-family: "Funnel Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  margin: 0;
  padding: 0;
}

#contactText {
    font-size: 20px;
}

.ContactIcons {
    vertical-align: middle;
    margin-left: 4px;
    filter: invert(1) brightness(2);
    transition: transform 0.25s ease;
}

.ContactIcons:hover{
    transform: scale(1.25);
}

#contact a {
  text-decoration: none;
}

#bottomHalf{
    background-color: blue;
    color: white;
    margin: 0;
    padding: 10px;
}

#name {
    font-size: 100px;
    font-weight: 600;
    text-align: center;
}

/* Top bar aligned left */
.topbar {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center;
  justify-content: flex-start;  /* left side */
  gap: 12px;
  padding: 10px 16px;
  background: blue;
  border-bottom: 1px solid blue;
}

.topbar a,
.menu a,
.submenu-toggle {
  color: white;          /* all nav text white */
}

/* Hamburger */
.hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 36px; height: 36px; padding: 6px;
  border: 0; background: transparent; cursor: pointer;
}
.hamburger span { display: block; height: 2px; width: 100%; background: #111; transition: transform .25s ease, opacity .25s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* LEFT drawer */
.nav-left {
  position: fixed;
  inset: 0 auto 0 0;          /* attach to left edge */
  width: 78%;
  max-width: 320px;
  background: blue;
  border-right: 1px solid blue;
  transform: translateX(-100%); /* hidden off-screen to the left */
  opacity: 0;
  transition: all .25s ease, opacity .28s ease;
  padding: 16px;
}
.nav-left[data-state="open"] { transform: translateX(0); opacity: 1; }

/* Menu + items */
.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.menu a { text-decoration: none; color: white; padding: 8px 10px; display: block; border-radius: 8px; }
.menu a:hover, .submenu a:hover { background: darkblue; font-weight: 500;}

/* “Projects” uses same font as site */
.submenu-toggle {
  all: unset;                 /* remove default button styles */
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;              /* inherit font family/size/weight */
  color: inherit;
}
.submenu-label { font: inherit; color: white;}

.chevron { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .22s ease; color: white;}
.submenu-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* Submenu animation */
.submenu {
  margin-left: 8px;
  overflow: hidden;
  transition: grid-template-rows .26s ease, opacity .26s ease;
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
}
.submenu[aria-hidden="false"] { grid-template-rows: 1fr; opacity: 1; }
.submenu > * { overflow: hidden; }

/* Desktop: inline menu; dropdown under Projects (left-aligned) */
@media (min-width: 840px) {
  .hamburger { display: none; }
  .nav-left {
    position: static; transform: none; opacity: 1; border: 0; padding: 0; width: auto;
  }
  .menu { display: flex; align-items: center; gap: 12px; }
  .has-submenu { position: relative; }
  .submenu {
    position: absolute; top: 120%; left: 0;
    min-width: 220px; padding: 8px;
    background: blue; border: 1px solid blue; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
  }
  .has-submenu:hover .submenu { grid-template-rows: 1fr; opacity: 1; }
}

/* Active (current page) state matches the hover look */
.menu a.active,
.submenu a.active,
.submenu-toggle.active {
  background: darkblue;
  font-weight: 500;
}


.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* space out left + right sides */
  padding: 10px 16px;
  background: blue;
  border-bottom: 1px solid #eee;
}

.topbar-icon {
  width: 36px;   /* adjust size as you like */
  height: 36px;
  border-radius: 50%; /* makes it circular if the image is square */
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.topbar-icon:hover {
  transform: scale(1.05);
}

.resume-link {
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid blue;         /* white border for dark headers */
  border-radius: 999px;
  color: white;                   /* text color */
  text-decoration: none;
  font-weight: 300;
  transition: all 0.25s ease;
}

.resume-link:hover {
  background: white;
  color: white;                 /* dark text on hover */
  font-weight: 500;
}

#umichECELink {
    color: white;
    text-decoration: none;
}

#umichECELink:hover {
    text-decoration: underline;
}

/* ===== HERO INTRO ANIMATION ===== */
.hero {
  position: relative;
  min-height: 40vh;
  display: grid;
  grid-template-columns: 1.05fr auto 1fr; /* tighter spacing between name and bar */
  align-items: center;
  gap: 8px; /* reduce the gap between columns */
  padding: 10px 10px; /* less padding overall */
  background: transparent;
  color: black;
  display: grid;
  /* Wider left column, bar, narrower right column pushes bar slightly right */
  grid-template-columns: 1.15fr auto 0.85fr;
  gap: 16px;
}


.slide-name {
  margin: 0;
  font-size: clamp(48px, 7vw, 80px); /* slightly smaller and responsive */
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;  /* <<< keeps "Sandeep Sawhney" on one line */
  transform: translateX(0);
  transition: transform 700ms ease, text-align 700ms ease;
}

.hero.played .slide-name {
  text-align: left;
  transform: translateX(-2.5vw);
}


/* vertical bar that drops down */
.vbar {
  width: 3px;
  height: 0;                       /* animate height */
  background: currentColor;        /* matches text color (usually white in your blue theme) */
  opacity: 0.9;
  transition: height 700ms ease 600ms; /* starts after name slides */
  justify-self: start;
  margin-left: 5px; /* nudges bar closer to name */
}

/* final bar height */
.hero.played .vbar {
  height: min(44vh, 360px);
}

/* typing area */
.typewrap {
  min-height: 180px;               /* reserve space to avoid layout shift */
  display: grid;
  align-content: center;
  gap: 8px;
  opacity: 0;                      /* fade in when typing starts */
  transition: opacity 300ms ease 900ms;
}

.hero.typing .typewrap { opacity: 1; }

/* each line while typing gets a blinking caret via ::after */
.typewrap p {
  margin: 0;
  font-size: clamp(16px, 2.3vw, 22px);
  font-weight: 300;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;                /* hide until typed */
}

/* caret effect applied to the active span */
.typewrap .typing::after {
  content: "│";
  margin-left: 2px;
  animation: caret-blink 1s step-end infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

/* Small screens: stack vertically */
@media (max-width: 720px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: 56vh;
    text-align: center;
  }
  .hero.played .slide-name {
    transform: none;
    text-align: center;
  }
  .vbar {
    justify-self: center;
    height: 0;
  }
  .hero.played .vbar {
    height: 120px;
  }
}

.vbar { justify-self: start; } /* nudges the bar toward the right edge of its column */

#contactPageHeader{
    font-size: 50px;
}

/* Add spacing after the Projects dropdown */
.has-submenu {
  margin-right: 14px; /* pushes Contact farther away */
}

/* Add internal spacing between “Projects” text and chevron */
.submenu-toggle {
  padding-right: 16px; /* increases space before the arrow */
  column-gap: 10px;    /* ensures text–arrow gap is consistent */
}

/* Optionally increase total menu item gap for desktop */
@media (min-width: 840px) {
  .menu {
    gap: 20px; /* wider spacing between all top-level links */
  }
}