/**
 * MAIN (WORK) PAGE — OVERRIDES
 * =============================
 * Loaded after main.07544d9b.css, so these rules win without editing that
 * hard-to-read hashed file.
 */

/* 1) "Info" button: yellow outline by default (yellow text), fills solid
   yellow with white text while open/clicked. Built directly in CSS as a
   true ellipse (fixed width/height + 50% border-radius) instead of the two
   image files, since those default to filled (not outline) and only swap
   to outline on click — the opposite of what's wanted here. */
.project__button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
  background-color: transparent;
  border: 1px solid #f4b809; /* adjust: outline color/thickness */
  border-radius: 50%; /* with a fixed width/height below, this curves into a true ellipse rather than a pill */
  width: 4.5em; /* adjust: ellipse width — widen/narrow the oval */
  height: 1.5em; /* matches the original button height */
  padding: 0; /* width now controls sizing, not padding */
  color: #f4b809;
  flex-shrink: 0; /* keeps the ellipse's shape even if the caption text is long */
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out, transform .15s ease;
}

.project__button:active,
.project__button--clicked {
  background-color: #f4b809; /* adjust: fill color */
  border-color: #f4b809;
  color: #fff;
  background-image: none;
}

/* The footer's grid used to stretch the button all the way to the right
   edge of the row. Switching to flex puts the button right next to the
   caption text instead, so it's no longer pinned to the corner. */
.project__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between; /* caption stays left, button pinned to the far right */
}

.project__footer > .project__caption {
  margin-right: 1em; /* adjust: minimum gap before the button, even if the caption runs long */
}

/* 2) Star icon: rotates while it moves side to side on desktop, and just
   rotates in place (no side-to-side) on mobile. */
@media (min-width: 768px) {
  nav.navbar > ul.main > li.star > img {
    animation: pingpong 3s cubic-bezier(0, .35, 1, .65) infinite alternate;
  }

  @keyframes pingpong {
    0% {
      left: calc(50% - 50px);
      transform: rotate(0deg);
    }
    to {
      left: calc(-50% + 50px);
      transform: rotate(360deg); /* adjust: more/fewer full turns per pass */
    }
  }
}

@media (max-width: 767px) {
  nav.navbar > ul.main > li.star > img {
    animation: spin 3s linear infinite;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

/* 3) Body copy always black instead of yellow. */
.project__big-text,
.project__accordion-text {
  color: #000;
}

/* Line breaks typed into a project's description in projects-data.js
   (e.g. a blank line between paragraphs) now actually show up on the page,
   instead of being collapsed away like normal HTML text. */
.project__accordion-text p {
  white-space: pre-line;
}

/* 4) Year/credits: pinned to the bottom of the "Info" panel — which is the
   same size as the picture, so this lines up with the bottom of the image.
   Uses a flex column instead of sticky positioning: sticky only "sticks"
   once there's enough text to actually scroll, so short descriptions were
   leaving it sitting right after the text near the top instead. With flex,
   the paragraph (flex: 1) always fills the remaining space above it and
   scrolls internally if it's long, so the meta line lands in the same spot
   every time. */
.project__accordion-text {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* scrolling now happens on the paragraph itself, see below */
}

.project__accordion-text p {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0 0 .5em;
}

.project__meta {
  font-size: .8em;
  padding-top: .25em;
  color: #000;
  background: #fff;
}

.project__meta a {
  text-decoration: underline;
}

/* 5) Remove the drop shadow around the fullscreen image modal. */
.modal {
  box-shadow: none;
}