/* Custom layer: animations and PWA touches that sit on top of Tailwind. */

:root {
    --brand: #047857;
}

html {
    scroll-behavior: smooth;
}

.safe-area-top { padding-top: env(safe-area-inset-top, 0); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

.pwa-body {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
}

@keyframes pageSlideIn {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.pwa-page-enter { animation: pageSlideIn .3s ease-out forwards; }

.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease-out, transform .6s ease-out;
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .scroll-animate { opacity: 1; transform: none; transition: none; }
}

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Rich text coming out of the admin editor */
.rich-text h2 { font-size: 1.5rem; font-weight: 700; margin: 1.75rem 0 .75rem; color: #111827; }
.rich-text h3 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 .5rem; color: #111827; }
.rich-text p { margin-bottom: 1rem; line-height: 1.75; color: #374151; }
.rich-text ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; color: #374151; }
.rich-text ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; color: #374151; }
.rich-text li { margin-bottom: .375rem; }
.rich-text a { color: #047857; text-decoration: underline; }
.rich-text strong { color: #111827; }
.rich-text img { border-radius: .75rem; margin: 1rem 0; max-width: 100%; height: auto; }

/* Number inputs without spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }