/* Custom CSS for PADEV Project (Eduka Theme Inspired) */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --primary-color: #0B4A3A;      /* Deep Forest Green */
  --primary-dark: #073328;
  --navy-color: #0F2942;         /* Pure Navy Blue */
  --navy-dark: #0A1C2E;
  --accent-color: #FFAA00;       /* Academic Gold/Yellow */
  --accent-hover: #E09600;
  --light-bg: #F8F9FA;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #2D3748;
  background-color: #FFFFFF;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Outfit', sans-serif;
}

/* Glassmorphism Navigation */
.glass-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(11, 74, 58, 0.08);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #0B4A3A;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #073328;
}

/* Hero & Section Geometric Background Grids */
.bg-grid-pattern {
  background-size: 30px 30px;
  background-image: 
    radial-gradient(circle, rgba(11, 74, 58, 0.07) 1px, transparent 1px);
}

.bg-radial-gradient {
  background: radial-gradient(circle at 50% 0%, rgba(255, 170, 0, 0.12) 0%, rgba(11, 74, 58, 0.03) 50%, transparent 100%);
}

/* Hover Lift Effect */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 30px -10px rgba(11, 74, 58, 0.15);
}

/* Pulse Glow */
.glow-accent {
  box-shadow: 0 0 25px rgba(255, 170, 0, 0.4);
}

/* Custom Swiper Bullet Styling */
.swiper-pagination-bullet-active {
  background: #FFAA00 !important;
  width: 28px !important;
  border-radius: 6px !important;
}

/* Image frame custom shapes */
.organic-border {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* Long-form article body on detail pages (paragraphs + bullet lists) */
.article-body p {
  margin-bottom: 1rem;
}
.article-body p:last-child {
  margin-bottom: 0;
}
.article-body ul {
  list-style: disc;
  margin: 0 0 1.25rem;
  padding-left: 1.4rem;
}
.article-body ul li {
  margin-bottom: 0.55rem;
  padding-left: 0.25rem;
}
.article-body ul li::marker {
  color: var(--accent-color);
}

/* Hero headlines: only ever one headline on screen. Without JavaScript the
   lines share one tall grid cell (the first shows, the rest wait); with
   JavaScript the block is sized to the headline on screen, so the layout
   never leaves a gap and lines are never seen overlapping. */
.hero-headlines {
  display: grid;
}
.hero-headlines > .hero-headline {
  grid-area: 1 / 1;
  opacity: 1;
  transition: opacity 2000ms ease-in-out;
}
.hero-headlines > .hero-headline.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.hero-headlines.is-managed {
  display: block;
  position: relative;
  transition: height 600ms ease-in-out;
}
.hero-headlines.is-managed > .hero-headline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .hero-headlines > .hero-headline,
  .hero-headlines.is-managed {
    transition: none;
  }
}