/* ---------------------------------------------------
   Dr. Guido Roberts-Borsani — Astrophysicist
   Shared stylesheet
--------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&family=Arial&display=swap');

:root {
  --text-dark: #222222;
  --text-body: #3a3a3a;
  --accent-teal: #4fb0a5;
  --accent-teal-dark: #3a8f86;
  --grad-start: #a54daa;
  --grad-end: #1b77cd;
  --max-width: 1024px;
  --nav-height: 60px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #ffffff;
  overflow-x: hidden; /* the hero label's left-bleed shouldn't cause a horizontal scrollbar */
}

body {
  margin: 0 auto;
  width: 60vw;
  min-width: 740px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: var(--text-body);
  background: #ffffff;
  line-height: 1.6;
}

/* Below the nav breakpoint the 50vw column is too narrow to be usable —
   let the page fill the screen like a normal mobile site instead. */
@media (max-width: 720px) {
  body {
    width: 100%;
    min-width: 0;
  }
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent-teal-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}

/* ---------- Nav bar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #eaeaea;
}

.nav-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 18.7px 24px 12.7px;
}

.nav-wrap ul {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
}

.nav-wrap a {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 15.94175px;
  letter-spacing: 0.5px;
  color: var(--text-dark);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-wrap a:hover,
.nav-wrap a.active {
  color: var(--accent-teal);
}

.nav-toggle {
  display: none;
}

/* ---------- Hero sections (image + big title) ---------- */
.hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  overflow: visible;
}

/* The research photo's callout box sits near the top of the source image and
   was getting cropped off — shift the image content down (reveal more of its
   top) so the box is fully visible within the fixed-height container. */
#research-hero {
  background-position: center 15%;
}

/* Section label (About Me / Research / Contact / Team / Data): positioned so
   its vertical center sits 2/3 up from the bottom of the image (1/3 down from
   the top), and 25% of its own width bleeds outside the image's left edge.
   Both percentages are relative to the label's own box via the transform, so
   this works no matter how long the label text is. */
.hero-title-wrap {
  position: absolute;
  z-index: 2;
  top: 33.33%;
  left: 0;
  transform: translate(-25%, -50%);
}

.hero-title {
  display: inline-block;
  background: rgba(255, 255, 255, 0.88);
  font-size: 50.4px;
  line-height: 1.1;
  padding: 2.22px 6px;
  text-transform: uppercase;
}

/* Same positioning system as .hero-title-wrap on the other pages: vertical
   center 1/3 down from the top of the image, 25% of the box's own width
   bleeding outside the image's left edge. The extra -20px nudges the text
   (only the text, not the image) a little further up still. */
.hero-name-wrap {
  position: absolute;
  z-index: 2;
  /* vh (viewport-relative), not %, so the text's on-screen position stays
     fixed regardless of hero-home's own box size — decoupled from the image
     now that the image is sized/positioned independently. Reproduces the
     exact position the text had before that decoupling. */
  top: calc(33.33vh - 119.6px);
  left: 0;
  transform: translate(calc(-25% + 20px), -50%);
}

/* The image is not part of "the hero" shift/positioning — it's pinned to
   fill exactly the screen from the bottom edge of the nav to the bottom of
   the viewport, independent of how the text above it is nudged. 60px matches
   the header's current rendered height. */
.hero-home {
  min-height: calc(100vh - 60px);
  background: #ffffff;
  margin-bottom: 56px; /* same breathing room the other sections have before the next block starts */
}

/* Fills the same boxed width as the photos on the other pages (see .hero's
   own padding + background-clip below) — no separate inset. */
.hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
}

.hero-name {
  display: block;
  width: max-content;
  max-width: 100%;
  font-size: 52.75px;
  line-height: 1.17337; /* controls the box's vertical size since padding is 0 */
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  padding: 0 8px;
  text-transform: none;
  margin-bottom: 6.67px;
}

.hero-subtitle {
  font-size: 20.454px;
  letter-spacing: 5.5px;
  text-transform: uppercase;
  color: var(--text-dark);
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  display: inline-block;
  padding: 0.67px 5.33px;
  margin-top: 0; /* <p> has a browser-default top margin (1em) that isn't collapsed
                    away since this is inline-block — must reset explicitly */
  margin-bottom: 3px;
}

/* ---------- Section content ---------- */
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 0;
}

.section p {
  font-size: 16px;
  color: var(--text-body);
  margin: 0 0 18px;
}

.section p a {
  color: #1b74c4;
}

.button-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  background: linear-gradient(141deg, var(--grad-start) 0%, var(--grad-end) 100%);
  color: #ffffff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.88;
  text-decoration: none;
}

/* ---------- Contact section ---------- */
.contact-details {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.contact-block h3 {
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.contact-block p {
  margin: 0;
}

/* ---------- Team page ---------- */
.team-intro {
  padding-bottom: 0;
}

.team-member {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 28px 0;
  border-bottom: 1px solid #eee;
}

.team-member:last-child {
  border-bottom: none;
}

.team-photo {
  flex: 0 0 auto;
}

.team-photo img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.team-info h3 {
  font-size: 17px;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.team-info p {
  margin: 0;
  font-size: 15px;
}

.team-past .team-member {
  display: block;
}

.team-past h3 {
  margin-bottom: 8px;
}

/* ---------- Data page ---------- */
.data-columns {
  margin: 4px 0;
  font-size: 15px;
}

.data-links p {
  margin: 6px 0;
}

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 24px 16px 40px;
  font-size: 13px;
  color: #999;
}

/* ---------- Scroll / load reveal animation ---------- */
/* Visible by default so content still shows with JS disabled or unsupported;
   JS adds .reveal-init (hidden) then removes it (.is-visible) once in view. */
.reveal,
.reveal-onload {
  opacity: 1;
  transform: none;
}

.reveal.reveal-init,
.reveal-onload.reveal-init {
  opacity: 0;
  transform: translateY(24px);
}

.reveal.is-visible,
.reveal-onload.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal.reveal-init,
  .reveal-onload.reveal-init {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Mobile nav ---------- */
@media (max-width: 720px) {
  .nav-wrap {
    justify-content: space-between;
    align-items: center;
    height: var(--nav-height);
    padding: 0 24px;
  }

  .nav-wrap ul {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: #ffffff;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid #eaeaea;
  }

  .nav-wrap ul li {
    border-top: 1px solid #f0f0f0;
  }

  .nav-wrap ul a {
    display: block;
    padding: 14px 24px;
  }

  .nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-dark);
  }

  .nav-wrap.open ul {
    display: flex;
  }

  /* Shorter, banner-style images on mobile (matching desktop's proportions)
     instead of a tall portrait crop — the home hero is excluded, it has its
     own full-screen treatment. */
  .hero:not(.hero-home) {
    min-height: 260px;
  }

  /* Same vertical fraction (1/3 down from the top) as desktop, but no
     horizontal bleed — there's no gutter on a phone screen to bleed into.
     Flush with the true left edge of the screen (no margin). */
  .hero-title-wrap {
    position: absolute;
    z-index: 2;
    top: 33.33%;
    left: 0;
    transform: translateY(-50%);
  }

  /* Positioned (not flex-flow) so it can sit at a precise fraction of the
     screen height; left+right (not a bare width) keeps it safely wrapped
     regardless of content length. 60px matches the mobile nav's height, so
     "33.33vh" is measured from the true top of the screen, not from
     hero-home's own top (which already starts below the nav). */
  .hero-name-wrap {
    position: absolute;
    z-index: 2;
    top: calc(33.33vh - 138.52px);
    left: 0;
    right: 24px;
    transform: translateY(-50%);
  }

  .hero-title {
    font-size: 32.4px;
    padding: 1.78px 4px;
  }

  .hero-name {
    font-size: 28.16px;
    line-height: 1.15;
    margin-left: 0;
  }

  .hero-subtitle {
    font-size: 16px;
    letter-spacing: 2px;
    margin-left: 0;
  }

  .section {
    padding: 40px 24px;
  }

  .hero-home {
    margin-bottom: 40px;
  }

  .team-member {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .team-info {
    text-align: left;
    width: 100%;
  }

  .team-info h3 {
    text-align: center;
  }

  .contact-details {
    gap: 32px;
  }
}