/* Additions to the original compiled stylesheet (style.css).
   These replace the animations that were done by JavaScript (framer-motion) in the React build. */

/* ---------- scroll / load reveal animations ---------- */
[data-anim] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: .6s;
  transition-timing-function: ease-out;
}
[data-anim="up"]    { transform: translateY(28px); }
[data-anim="up-sm"] { transform: translateY(10px); }
[data-anim="up-md"] { transform: translateY(20px); }
[data-anim="left"]  { transform: translateX(-30px); }
[data-anim="left-sm"] { transform: translateX(-20px); }
[data-anim="right"] { transform: translateX(30px); }
[data-anim="scale"] { transform: scale(.95); }
[data-anim="badge"] { transform: scale(.6) rotate(-30deg); transition-duration: 1s; }
[data-anim].in-view { opacity: 1; transform: none; }
.no-js [data-anim] { opacity: 1; transform: none; }

/* ---------- page loader ---------- */
.pi-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#f0f9f0 0%,#e8f5e9 50%,#f7fdf4 100%);
  transition: opacity .45s ease, transform .45s ease;
}
.pi-loader.is-done { opacity: 0; transform: scale(1.05); pointer-events: none; }
.no-js .pi-loader { display: none; }
.pi-loader-ring { animation: pi-rotate 2s linear infinite; }
.pi-loader-logo { animation: pi-pulse 1.6s ease-in-out infinite; }
.pi-loader-dash { animation: pi-dash 1.8s ease-in-out infinite; }
.pi-loader-text { animation: pi-fade 1.4s ease-in-out infinite; }
@keyframes pi-rotate { to { transform: rotate(360deg); } }
@keyframes pi-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes pi-dash { from { stroke-dashoffset: 289; } to { stroke-dashoffset: 0; } }
@keyframes pi-fade { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* ---------- testimonial carousel ---------- */
.pi-track { transition: transform .6s cubic-bezier(.25,.8,.25,1); will-change: transform; }

/* ---------- gallery lightbox ---------- */
.pi-lightbox { transition: opacity .2s ease; }
.pi-lightbox[hidden] { display: none !important; }
.pi-lightbox .pi-lightbox-inner { transition: transform .2s ease; }
.pi-filter-item { transition: opacity .3s ease, transform .3s ease; }
.pi-filter-item.is-hidden { display: none; }

/* ---------- dropdown ---------- */
.pi-dropdown[hidden] { display: none !important; }

/* ---------- form messages ---------- */
.pi-alert {
  border-radius: .75rem; padding: .85rem 1rem; font-size: .875rem; font-weight: 500;
  margin-bottom: 1.25rem; border: 1px solid;
}
.pi-alert-success { background: #e8f5e0; border-color: #c5dfc5; color: #1e3a2f; }
.pi-alert-error   { background: #fdecec; border-color: #f5c2c2; color: #8a1f1f; }
.pi-alert-dark    { background: rgba(106,176,76,.15); border-color: rgba(106,176,76,.35); color: #c8f5b8; margin: .75rem 0 0; }
.pi-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* content added from the admin panel may contain long words */
.pi-break { overflow-wrap: anywhere; }

/* ---------- home hero background slideshow ---------- */
.pi-hero-slides { position: absolute; inset: 0; overflow: hidden; }
.pi-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; }
.pi-hero-slide.is-active { opacity: 1; }
.pi-hero-slide > img { transition: scale 7s ease-out; scale: 1.06; }
.pi-hero-slide.is-active > img { scale: 1; }
.pi-hero-dots {
  position: absolute; z-index: 20; left: 50%; bottom: 6.5rem; transform: translateX(-50%);
  display: flex; gap: .5rem; padding: .4rem .6rem; border-radius: 999px;
  background: rgba(30,58,47,.35); backdrop-filter: blur(6px);
}
@media (min-width: 768px) { .pi-hero-dots { bottom: 8rem; } }
.pi-hero-dot { width: .55rem; height: .55rem; border-radius: 999px; background: rgba(255,255,255,.6); border: 0; padding: 0; cursor: pointer; transition: width .3s, background .3s; }
.pi-hero-dot.is-active { width: 1.6rem; background: #6ab04c; }
@media (prefers-reduced-motion: reduce) {
  .pi-hero-slide, .pi-hero-slide > img { transition: none; scale: 1; }
}

/* ---------- new pages: blog, events, projects, careers, team, CSR ---------- */
.pi-narrow { max-width: 48rem; margin-left: auto; margin-right: auto; }
.pi-article { padding: 2rem; }
@media (min-width: 768px) { .pi-article { padding: 3rem; } }
.pi-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) {
  .pi-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .pi-split > aside { position: sticky; top: 6.5rem; }
}

.pi-prose { color: #4a6050; font-size: 1.0625rem; line-height: 1.8; }
.pi-prose > * + * { margin-top: 1.1em; }
.pi-prose h2 { font-family: var(--app-font-serif); color: #1e3a2f; font-weight: 700; font-size: 1.6rem; line-height: 1.25; margin-top: 1.8em; }
.pi-prose h3 { font-family: var(--app-font-serif); color: #1e3a2f; font-weight: 700; font-size: 1.25rem; margin-top: 1.5em; }
.pi-prose > :first-child { margin-top: 0; }
.pi-prose strong { color: #1e3a2f; font-weight: 700; }
.pi-prose a { color: #4a9c35; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pi-prose ul { list-style: none; padding: 0; }
.pi-prose li { position: relative; padding-left: 1.6rem; margin-top: .45em; }
.pi-prose li::before { content: ""; position: absolute; left: .2rem; top: .7em; width: .55rem; height: .55rem; border-radius: 999px; background: #6ab04c; }
.pi-hl { background: linear-gradient(135deg,#4a9c35,#1a7a5e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; }
.dark .pi-prose { color: #c8d8cc; }
.dark .pi-prose h2, .dark .pi-prose h3, .dark .pi-prose strong { color: #fff; }

.pi-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pi-square { aspect-ratio: 1 / 1; }
.pi-past { opacity: .85; }
.pi-past img { filter: grayscale(.35); }

.pi-date-badge {
  position: absolute; top: .75rem; left: .75rem; background: #fff; color: #1e3a2f; border-radius: .75rem;
  padding: .35rem .7rem; text-align: center; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.1; box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.pi-date-badge span { display: block; font-family: var(--app-font-serif); font-size: 1.5rem; color: #4a9c35; }

.pi-facts > div { padding: .7rem 0; border-bottom: 1px dashed #d4edda; }
.pi-facts > div:last-child { border-bottom: 0; }
.pi-facts dt { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #6ab04c; }
.pi-facts dd { margin: .15rem 0 0; font-weight: 600; color: #1e3a2f; }
.dark .pi-facts dd { color: #fff; }

.pi-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 3rem; font-size: .875rem; color: #4a6050; }
.pi-pager a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid #d4edda; background: #fff; color: #1e3a2f; font-weight: 600; }
.pi-pager a:hover { border-color: #6ab04c; }

.pi-share { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid #d4edda; background: #fff; color: #1e3a2f; font-size: .8rem; font-weight: 600; transition: all .2s; }
.pi-share:hover { background: #1e3a2f; color: #fff; border-color: #1e3a2f; }

.pi-details summary { cursor: pointer; color: #4a9c35; font-weight: 600; font-size: .875rem; }
.pi-select { appearance: auto; background-color: #fff; }
.dark .pi-select { background-color: transparent; }
.pi-file { height: auto; padding-top: .45rem; padding-bottom: .45rem; }

/* ---------- utilities used by the new pages that the original stylesheet did not include ---------- */
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-1 { row-gap: .25rem; }
.h-56 { height: 14rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-16 { margin-top: 4rem; }
.space-y-3 > :not(:last-child) { margin-bottom: .75rem; }
@media (min-width: 48rem) {
  .md\:items-center { align-items: center; }
  .md\:p-8 { padding: 2rem; }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
}
@media (min-width: 80rem) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* sub-items in the mobile menu */
.pi-subnav { padding-left: 2.25rem; position: relative; }
.pi-subnav::before { content: ""; position: absolute; left: 1.4rem; top: 50%; width: .35rem; height: .35rem; border-radius: 999px; background: #6ab04c; transform: translateY(-50%); }

/* menu drop-downs also open with plain CSS (keyboard focus or mouse hover), even if JavaScript fails.
   Wrapped in the "components" layer (the first layer the stylesheet declares) because the original stylesheet hides [hidden] elements from a CSS
   layer, and only an earlier layer's !important rule can override that. */
@layer components {
  @media (hover: hover) {
    [data-dropdown]:hover > .pi-dropdown[hidden] { display: block !important; }
    [data-dropdown]:focus-within > .pi-dropdown[hidden] { display: block !important; }
  }
}

/* home page "Get Involved" photo cards */
.pi-cta-card { min-height: 26rem; display: flex; }
.pi-cta-card > .relative { width: 100%; }
.self-start { align-self: flex-start; }
@media (hover: hover) { .hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); } }

/* ---------- extra article formatting (editor toolbar) ---------- */
.pi-prose em { font-style: italic; }
.pi-prose ol { list-style: none; padding: 0; counter-reset: pi-ol; }
.pi-prose ol > li { position: relative; padding-left: 2rem; margin-top: .5em; counter-increment: pi-ol; }
.pi-prose ol > li::before { content: counter(pi-ol); position: absolute; left: 0; top: .15em; width: 1.4rem; height: 1.4rem; border-radius: 999px; background: #e8f5e0; color: #2d6a1e; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pi-prose blockquote { margin-left: 0; margin-right: 0; padding: 1rem 1.25rem; border-left: 4px solid #6ab04c; background: #f0f9eb; border-radius: 0 .75rem .75rem 0; color: #1e3a2f; font-family: var(--app-font-serif); font-style: italic; font-size: 1.15rem; }
.pi-prose hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, #c5dfc5, transparent); margin: 2em 0; }
.pi-prose .pi-figure { margin: 1.6em 0; }
.pi-prose .pi-figure img { width: 100%; border-radius: 1rem; box-shadow: 0 10px 25px -10px rgba(14,40,22,.35); }
.pi-prose .pi-figure figcaption { margin-top: .6rem; text-align: center; font-size: .85rem; color: #6b7f70; }
.dark .pi-prose blockquote { background: rgba(106,176,76,.12); color: #fff; }