/* ---------------------------------------------------------------------------
 * Hand-written styles for the PHP port.
 *
 * Two stylesheets ship with every page:
 *
 *   theme.css  Tailwind's compiled output, harvested from the Astro build by
 *              `tools/harvest-assets.php`. It is not generated here and not
 *              edited by hand: the templates keep the same class names the
 *              build used, so the same utility classes still apply. There is no
 *              Tailwind step, and therefore no Node.
 *
 *   site.css   This file. It holds the rules the build inlined as per-page
 *              scoped `<style>` blocks, written out without Astro's
 *              `data-astro-cid-*` scope attributes, plus anything the port
 *              adds.
 * ------------------------------------------------------------------------- */

/* Hero fade-in: each block carries its own --delay. Moved here from Hero.astro. */

.hero-fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: heroFadeIn 0.5s ease forwards;
  animation-delay: var(--delay);
}

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* About page header. Moved here from about.astro. */

.about-hero-fade {
  opacity: 0;
  transform: translateY(12px);
  animation: aboutHeroIn 0.8s ease forwards;
}

@keyframes aboutHeroIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Long-form guide contents. Moved here from Article.astro, where the build
   scoped every rule to `.article-content[data-astro-cid-…]`; the selector here
   is the same rule without the scope attribute. Each one has to beat Tailwind's
   preflight, which resets margins, list styles and heading sizes. */

.article-content p {
  margin-bottom: 1.5rem;
}

.article-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.article-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.article-content ul,
.article-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.article-content ol {
  list-style: decimal;
}

.article-content li {
  margin-bottom: 0.5rem;
}

.article-content a {
  color: #a1a3f7;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-content strong {
  color: #fff;
}