/* Supplementary styles for CMS-driven content that the original static
   build didn't need (rich text bodies, blog cards, pagination). Uses the
   same design tokens as the compiled Tailwind build. */

.prose-aws h2 { font-family:'Playfair Display',Georgia,serif; font-size:1.75rem; color:#1C1C1C; margin-top:2rem; margin-bottom:1rem; line-height:1.15; }
.prose-aws h3 { font-family:'Playfair Display',Georgia,serif; font-size:1.4rem; color:#1C1C1C; margin-top:1.75rem; margin-bottom:.75rem; }
.prose-aws p { margin-bottom:1.1rem; }
.prose-aws ul, .prose-aws ol { margin: 0 0 1.1rem 1.25rem; }
.prose-aws ul { list-style: disc; }
.prose-aws ol { list-style: decimal; }
.prose-aws li { margin-bottom: .4rem; }
.prose-aws a { color:#1C1C1C; text-decoration: underline; text-underline-offset: 3px; }
.prose-aws blockquote { border-left: 3px solid #6B705C; padding-left: 1.25rem; font-style: italic; color:#1C1C1C; margin: 1.5rem 0; }
.prose-aws img { width: 100%; height: auto; margin: 1.5rem 0; }
.prose-aws strong { color:#1C1C1C; }

.blog-card { background:#FBFAF6; }
.blog-pagination a, .blog-pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:2.5rem; height:2.5rem; border:1px solid #EBE8E0; font-size:12px; letter-spacing:.05em; }
.blog-pagination a:hover { background:#1C1C1C; color:#FBFAF6; }
.blog-pagination .current { background:#1C1C1C; color:#FBFAF6; }

.badge-draft { background:#EBE8E0; color:#6B705C; font-size:10px; letter-spacing:.15em; text-transform:uppercase; padding:3px 8px; }

/* ---------------------------------------------------------------------
 * Scroll-reveal system (approximates the original's framer-motion
 * whileInView fade/slide-up reveals). Progressive enhancement: content
 * is fully visible by default; the hidden initial state only applies
 * once JS confirms it's running and will animate it back in, so nothing
 * is ever permanently hidden if JavaScript fails to load.
 * ------------------------------------------------------------------- */
html.js-anim .reveal,
html.js-anim .reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
html.js-anim .reveal.in-view,
html.js-anim .reveal-stagger.in-view > * {
  opacity: 1;
  transform: none;
}
html.js-anim .reveal-stagger > *:nth-child(1){transition-delay:.00s}
html.js-anim .reveal-stagger > *:nth-child(2){transition-delay:.07s}
html.js-anim .reveal-stagger > *:nth-child(3){transition-delay:.14s}
html.js-anim .reveal-stagger > *:nth-child(4){transition-delay:.21s}
html.js-anim .reveal-stagger > *:nth-child(5){transition-delay:.28s}
html.js-anim .reveal-stagger > *:nth-child(6){transition-delay:.35s}
html.js-anim .reveal-stagger > *:nth-child(7){transition-delay:.42s}
html.js-anim .reveal-stagger > *:nth-child(8){transition-delay:.49s}
html.js-anim .reveal-stagger > *:nth-child(n+9){transition-delay:.55s}

/* Homepage hero: giant heading lines + eyebrow/subtext/scroll-cue stagger in on load */
html.js-anim .hero-stagger { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
html.js-anim .hero-stagger.in-view { opacity: 1; transform: none; }

/* Respect reduced-motion preference regardless of the above */
@media (prefers-reduced-motion: reduce) {
  html.js-anim .reveal, html.js-anim .reveal-stagger > *, html.js-anim .hero-stagger {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Mobile nav: smooth height/opacity transition instead of an instant show/hide */
#mobileMenu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
#mobileMenu.open { max-height: 600px; opacity: 1; }

/* Tabbed product grid panels crossfade */
.tabgrid-panel { transition: opacity .4s ease; }

/* Testimonial crossfade */
.testimonial-slide { transition: opacity .5s cubic-bezier(.22,1,.36,1); }

/* Header gains a subtle shadow once the page has scrolled past the hero */
#siteHeader { transition: box-shadow .3s ease; }
#siteHeader.scrolled { box-shadow: 0 1px 0 rgba(28,28,28,.06), 0 8px 24px -12px rgba(28,28,28,.12); }