/* =========================================================
   WildLife – custom styles (layered on top of Tailwind)
   ========================================================= */

:root { --brand:#16a34a; }

html, body { scroll-behavior: smooth; }

/* ---------- Glassmorphism ---------- */
.glass {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.35);
}
.dark .glass {
  background: rgba(15,23,42,0.65);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Header shrinks/solidifies on scroll */
#siteHeader.scrolled .glass { box-shadow: 0 10px 30px -10px rgba(0,0,0,.25); }

/* ---------- Nav ---------- */
.nav-link {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.5rem .85rem; border-radius:.6rem; font-weight:500; font-size:1.05rem;
  color:#334155; transition:all .2s;
}
.dark .nav-link { color:#cbd5e1; }
.nav-link:hover { color:var(--brand); background:rgba(22,163,74,.08); }
.nav-active { color:var(--brand)!important; background:rgba(22,163,74,.12); }

.icon-btn {
  display:grid; place-items:center; height:2.5rem; width:2.5rem; border-radius:.75rem;
  color:#334155; transition:all .2s;
}
.dark .icon-btn { color:#e2e8f0; }
.icon-btn:hover { background:rgba(22,163,74,.12); color:var(--brand); }

/* ---------- Footer ---------- */
.footer-h { color:#fff; font-weight:600; margin-bottom:.9rem; }
.footer-link { color:#94a3b8; transition:color .2s; }
.footer-link:hover { color:var(--brand); }
.social {
  display:grid; place-items:center; height:2.25rem; width:2.25rem; border-radius:9999px;
  background:rgba(255,255,255,.08); color:#cbd5e1; transition:all .25s;
}
.social:hover { background:var(--brand); color:#fff; transform:translateY(-3px); }

/* ---------- Hero ---------- */
.hero-overlay { background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.8) 100%); }

/* ---------- Cards ---------- */
.card-hover { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 22px 40px -18px rgba(0,0,0,.35); }
.card-img { transition: transform .6s ease; }
.card-hover:hover .card-img { transform: scale(1.08); }

/* category chip */
.chip { transition:all .2s; }
.chip.active, .chip:hover { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ---------- Reveal animation (fallback if AOS off) ---------- */
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.floaty { animation: floaty 6s ease-in-out infinite; }

/* gradient text */
.gradient-text {
  background:linear-gradient(90deg,#4ade80,#16a34a,#0ea5e9);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* gallery: collapsible collection sections */
.gbody { display:grid; grid-template-rows:1fr; transition:grid-template-rows .45s ease; }
.gbody > div { overflow:hidden; }
.gcollection.collapsed .gbody { grid-template-rows:0fr; }
.gcollection.collapsed .gchev { transform:rotate(-90deg); }
.ghead:hover h2 { color:#16a34a; transition:color .2s; }

/* masonry */
.masonry { column-gap:1rem; }
@media (min-width:640px){ .masonry{ columns:2; } }
@media (min-width:1024px){ .masonry{ columns:3; } }
.masonry > * { break-inside: avoid; margin-bottom:1rem; }

/* toast */
.toast-item {
  min-width:240px; padding:.85rem 1rem; border-radius:.75rem; color:#fff;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.4); animation: slideIn .3s ease;
}
@keyframes slideIn { from{opacity:0; transform:translateX(40px)} to{opacity:1;transform:none} }

/* rich content */
.prose-content p { margin-bottom:1rem; line-height:1.8; }
.prose-content h2,.prose-content h3 { font-weight:700; margin:1.5rem 0 .75rem; }
.prose-content img { border-radius:.75rem; margin:1rem 0; max-width:100%; height:auto; }
.prose-content video { width:100%; max-width:100%; border-radius:.75rem; margin:1rem auto; display:block; }
.prose-content hr { border:0; border-top:2px solid rgba(100,116,139,.35); margin:2rem 0; }
.prose-content .ql-align-center { text-align:center; }
.prose-content .ql-align-right { text-align:right; }
.prose-content .ql-align-justify { text-align:justify; }
.prose-content img.ql-align-center, .prose-content video.ql-align-center { margin-left:auto; margin-right:auto; }
.prose-content img.ql-align-right, .prose-content video.ql-align-right { margin-left:auto; }
.prose-content .media-row { display:flex; gap:1rem; margin:1.5rem 0; align-items:flex-start; }
.prose-content .media-row > * { flex:1 1 0; min-width:0; max-width:50%; margin:0; width:100%; }
@media (max-width:640px){ .prose-content .media-row{ flex-direction:column; } .prose-content .media-row > *{ max-width:100%; } }

/* CKEditor 5 generated content */
.prose-content figure { margin:1.5rem 0; }
.prose-content figure.image { display:table; }
.prose-content figure.image img { margin:0; }
.prose-content figure.image > figcaption { display:table-caption; caption-side:bottom; padding:.5rem; font-size:.85rem; text-align:center; color:#64748b; }
.prose-content .image-style-side { float:right; max-width:50%; margin-left:1.5rem; }
.prose-content .image-style-align-left, .prose-content .image_resized.image-style-align-left { float:left; margin-right:1.5rem; }
.prose-content .image-style-align-right, .prose-content .image_resized.image-style-align-right { float:right; margin-left:1.5rem; }
.prose-content .image-style-align-center { margin-left:auto; margin-right:auto; }
.prose-content figure.image.image_resized { max-width:100%; }
.prose-content figure.image.image_resized img { width:100%; }
.prose-content figure.media { margin:1.5rem 0; }
.prose-content figure.media .ck-media__wrapper, .prose-content figure.media oembed { display:block; }
.prose-content figure.media iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:.75rem; }
.prose-content blockquote { border-left:4px solid var(--brand); padding:.25rem 0 .25rem 1rem; margin:1.5rem 0; font-style:italic; color:#475569; }
.prose-content ul, .prose-content ol { margin:0 0 1rem 1.5rem; line-height:1.8; }
.prose-content ul { list-style:disc; }
.prose-content ol { list-style:decimal; }
.prose-content pre { background:rgba(15,23,42,.06); padding:1rem; border-radius:.6rem; overflow:auto; margin:1rem 0; }
.prose-content table { border-collapse:collapse; width:100%; margin:1.5rem 0; }
.prose-content table td, .prose-content table th { border:1px solid rgba(100,116,139,.35); padding:.5rem .75rem; }
@media (max-width:640px){ .prose-content .image-style-side, .prose-content .image-style-align-left, .prose-content .image-style-align-right { float:none; max-width:100%; margin:1.5rem 0; } }

/* swiper */
.swiper-button-next, .swiper-button-prev { color:#fff!important; }
.swiper-pagination-bullet-active { background:var(--brand)!important; }

/* spinner */
.spinner { width:1.25rem;height:1.25rem;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin { to{ transform:rotate(360deg);} }