/* Site-specific CSS that lives outside the Tailwind build:
   scroll-reveal animation, marquee, hero grid pattern, honeypot. */

html { font-family: 'Inter', sans-serif; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }

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

.hero-grid {
  background-image: linear-gradient(rgba(46,181,172,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(46,181,172,.07) 1px, transparent 1px);
  background-size: 44px 44px;
}

.marquee { animation: marquee 30s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Honeypot field — visually hidden but present for bots */
.hp-field { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; }

/* Rich-text content (Wagtail |richtext output) */
.rt-content { color: #54697c; line-height: 1.8; }
.rt-content h3, .rt-content h4 { font-family: 'Sora', sans-serif; font-weight: 600; color: #0b1620; margin: 1.6em 0 .6em; }
.rt-content h3 { font-size: 1.35rem; }
.rt-content h4 { font-size: 1.15rem; }
.rt-content p { margin: 0 0 1em; }
.rt-content ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; }
.rt-content ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1em; }
.rt-content li { margin: .35em 0; }
.rt-content a { color: #21918b; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.rt-content a:hover { color: #1e7471; }
.rt-content hr { border-color: #eef2f6; margin: 2em 0; }
.rt-content b, .rt-content strong { color: #1b3040; }
.rt-dark, .rt-dark p { color: #b3c2cf; }
.rt-dark h3, .rt-dark h4, .rt-dark b, .rt-dark strong { color: #fff; }
.rt-dark a { color: #7fd8d4; }

/* Blog article body — adds the features only blog posts enable
   (h2, blockquote, embedded images and video). */
.rt-article { font-size: 1.0625rem; }
.rt-article h2 { font-family: 'Sora', sans-serif; font-weight: 700; color: #0b1620; font-size: 1.7rem; margin: 1.8em 0 .6em; }
.rt-article blockquote { border-left: 3px solid #2eb5ac; background: #f7f9fb; padding: 1.1em 1.4em; margin: 1.8em 0; border-radius: 0 1rem 1rem 0; font-size: 1.1rem; color: #1b3040; font-style: italic; }
.rt-article blockquote p:last-child { margin-bottom: 0; }
.rt-article img { border-radius: 1.25rem; margin: 2em 0; width: 100%; height: auto; }
.rt-article .responsive-object { position: relative; padding-bottom: 56.25%; margin: 2em 0; border-radius: 1.25rem; overflow: hidden; }
.rt-article .responsive-object iframe { position: absolute; inset: 0; width: 100%; height: 100%; }