/* ==========================================================================
   migration.css — additive overrides for the React port.
   Loads LAST. Never edit style.css or queries.css; add rules here instead.
   ========================================================================== */

/* Replaces jQuery $('html,body').animate({scrollTop}) smooth scrolling. */
html {
  scroll-behavior: smooth;
}

/* WebP hero background with PNG fallback.
   Overrides style.css:359-360 by load order, same specificity. */
header {
  background-image: -webkit-linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.3)
    ),
    image-set(
      url(../img/home.webp) type("image/webp"),
      url(../img/home.png) type("image/png")
    );
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    image-set(
      url(../img/home.webp) type("image/webp"),
      url(../img/home.png) type("image/png")
    );
}

/* Overrides style.css:258, which sets `text-align: justify` on the About bio.
   The column is ~447px at a 22px font — roughly 40 characters per line. That
   measure is far too narrow to justify without stretching the inter-word
   spaces to ~3x normal (measured: 13.5px median, 17.7px max, against a ~5px
   natural space). Ragged-right reads correctly at any column width. */
.selfie-box p {
  text-align: left;
}

/* Replaces jQuery slideToggle(200) on the mobile nav.
   queries.css sets .main-nav { display: none } below 768px. */
@media only screen and (max-width: 767px) {
  .main-nav {
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height 200ms ease-in-out;
  }

  .main-nav.is-open {
    max-height: 400px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .main-nav {
    transition: none;
  }
}