/* ========================================
   LPD KESIMAN DESIGN SYSTEM
   ======================================== */

/* Local Inter font-face */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Base Styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Hero Section Mobile Optimizations */
.hero-stat {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.hero-stat:hover {
  transform: translateY(-2px);
  background-color: rgba(255, 255, 255, 0.15);
}

/* ========================================
   STAFF PAGE SPECIFIC STYLES
   ======================================== */

/* Mobile scroll behavior */
@media (max-width: 640px) {
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }
  
  /* Mobile-friendly touch targets */
  .filter-btn, 
  button, 
  a {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better text rendering on mobile */
  .staff-card h3, 
  .staff-card p {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  
  /* Mobile hero adjustments */
  .hero-mobile-adjust {
    min-height: 85vh;
  }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
  .hero-tablet-adjust {
    min-height: 90vh;
  }
}

/* Staff grid animations */
.staff-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.staff-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Filter button animations */
.filter-btn {
  transition: all 0.2s ease-in-out;
}

/* Mobile responsive adjustments for filter buttons */
@media (max-width: 640px) {
  .filter-btn {
    font-size: 0.75rem;
    padding: 0.75rem;
  }
  
  .filter-btn i {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .filter-btn {
    font-size: 0.875rem;
    padding: 1rem;
  }
  
  .filter-btn i {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 1024px) {
  .filter-btn {
    font-size: 0.875rem;
    padding: 1.5rem 1rem;
  }
  
  .filter-btn i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
}

/* Search input focus states */
.search-container {
  transition: all 0.2s ease-in-out;
}

/* Hero background sticky effect */
.hero-bg-sticky {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .hero-bg-sticky {
    background-attachment: scroll; /* Fix for mobile performance */
  }
}

/* Fade in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Mobile-specific improvements */
@media (max-width: 640px) {
  .hero-stat {
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  /* Compact stats layout for mobile */
  .hero-stats-mobile {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-width: 20rem;
  }
  
  /* Better touch targets for mobile */
  .hero-button {
    min-height: 44px;
    padding: 0.875rem 1.25rem;
  }
  
  /* Ensure text doesn't overflow on very small screens */
  .text-gradient-hero {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
  }
}

/* Extra small screens (< 475px) */
@media (max-width: 475px) {
  .hero-stat {
    min-height: 56px;
    padding: 0.5rem;
  }
  
  .hero-stats-mobile {
    gap: 0.375rem;
    max-width: 18rem;
  }
}

/* Responsive breakpoints for better iPad support */
@media (min-width: 768px) and (max-width: 1024px) {
  /* iPad specific styles */
  .hero-section-container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  .hero-title {
    font-size: 3rem;
    line-height: 1.1;
  }
  
  .hero-subtitle {
    font-size: 1.25rem;
    max-width: 32rem;
  }
  
  .hero-buttons {
    flex-direction: row;
    gap: 1rem;
    max-width: 36rem;
  }
  
  .hero-stats {
    margin-top: 3rem;
    gap: 1.5rem;
    max-width: 40rem;
  }
}

/* Large desktop optimization */
@media (min-width: 1280px) {
  .hero-title {
    font-size: 4.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.5rem;
    max-width: 48rem;
  }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ========================================
   COMPONENT LIBRARY
   ======================================== */

/* Buttons */
.btn-brand {
  @apply px-6 py-3 bg-gradient-to-r from-brand-500 to-accent-400 text-white rounded-xl font-semibold transition-all duration-300 shadow-brand hover:shadow-brand-lg hover:scale-105 flex items-center justify-center;
}

.btn-brand:hover {
  @apply from-brand-600 to-accent-500;
}

.btn-brand-outline {
  @apply px-6 py-3 border-2 border-brand-500 text-brand-500 rounded-xl font-semibold transition-all duration-300 hover:bg-brand-500 hover:text-white;
}

.btn-accent {
  @apply px-6 py-3 bg-gradient-to-r from-accent-400 to-accent-500 text-white rounded-xl font-semibold transition-all duration-300 shadow-accent;
}

.btn-ghost {
  @apply px-6 py-3 text-gray-700 rounded-xl font-semibold transition-all duration-300 hover:bg-gray-100;
}

/* Cards */
.card-premium {
  @apply bg-white rounded-3xl shadow-xl border border-gray-100 transition-all duration-300 hover:shadow-2xl hover:scale-105;
}

.card-glass {
  @apply bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 transition-all duration-300;
}

.card-service {
  @apply bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100 text-center h-full;
}

/* Navigation */
.nav-link-premium {
  @apply px-5 py-2.5 text-gray-700 hover:text-brand-500 font-medium rounded-xl hover:bg-gradient-to-r hover:from-brand-50 hover:to-accent-50 transition-all duration-300 relative group flex items-center;
}

.nav-dropdown {
  @apply absolute left-0 mt-3 bg-white/95 backdrop-blur-md shadow-2xl rounded-2xl py-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 border border-gray-100/50;
}

/* Headers */
.heading-hero {
  @apply text-4xl md:text-5xl lg:text-6xl font-bold leading-tight;
}

.heading-section {
  @apply text-4xl md:text-5xl font-bold mb-6;
}

.heading-card {
  @apply text-2xl font-bold mb-4;
}

/* Text Styles */
.text-gradient-brand {
  @apply bg-gradient-to-r from-brand-600 to-accent-600 bg-clip-text text-transparent;
}

.text-gradient-gold {
  @apply bg-gradient-to-r from-gold-500 to-accent-400 bg-clip-text text-transparent;
}

.text-muted {
  @apply text-gray-600 leading-relaxed;
}

/* Backgrounds */
.bg-gradient-brand {
  @apply bg-gradient-to-r from-brand-500 to-accent-400;
}

.bg-gradient-brand-light {
  @apply bg-gradient-to-br from-brand-50 via-white to-accent-50;
}

.bg-gradient-dark {
  @apply bg-gradient-to-br from-gray-900 via-gray-800 to-black;
}

/* Sections */
.section-padding {
  @apply py-20;
}

.section-hero {
  @apply relative py-20 bg-gradient-to-br from-brand-500 via-accent-500 to-brand-600 overflow-hidden;
}

.section-feature {
  @apply py-20 bg-gradient-to-br from-gray-50 via-white to-gray-50;
}

.section-cta {
  @apply py-20 bg-gray-900 relative overflow-hidden;
}

/* Icons */
.icon-brand {
  @apply w-12 h-12 bg-gradient-to-r from-brand-400 to-brand-600 rounded-xl flex items-center justify-center text-white shadow-lg;
}

.icon-accent {
  @apply w-12 h-12 bg-gradient-to-r from-accent-400 to-accent-600 rounded-xl flex items-center justify-center text-white shadow-lg;
}

.icon-service {
  @apply w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg transition-transform duration-300 group-hover:scale-110;
}

/* Forms */
.form-input-premium {
  @apply w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-all duration-200;
}

.form-label-premium {
  @apply block text-sm font-semibold text-gray-700 mb-2;
}

/* Utilities */
.container-premium {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.glass-effect {
  @apply bg-white/95 backdrop-blur-md border border-gray-100/50;
}

.floating-element {
  @apply absolute rounded-full blur-xl opacity-20;
}

/* Animations */
.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

.animate-bounce-gentle {
  animation: bounceGentle 2s infinite;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounceGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Animation Utility Classes */
.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 0.8s ease-out forwards;
}

/* Reveal on Scroll */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hero Section Optimizations */
#hero-section {
  will-change: transform;
}

#hero-bg {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Mobile First Approach */
@screen sm {
  .heading-hero {
    @apply text-5xl;
  }
}

@screen md {
  .heading-hero {
    @apply text-6xl;
  }
}

@screen lg {
  .heading-hero {
    @apply text-7xl;
  }
}

/* ========================================
   TENTANG KAMI PAGE STYLES
   ======================================== */

/* Scroll reveal animations for tentang-kami pages */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.in-view {
  opacity: 1;
  transform: none;
}

/* Table improvements for data tables */
.table-sticky thead th {
  position: sticky;
  top: 0;
  background: #F97316;
  color: #fff;
  z-index: 1;
}

.table-sticky td:nth-child(n+2), 
.table-sticky th:nth-child(n+2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Mobile responsive table styles */
@media (max-width: 640px) {
  .table-responsive {
    display: none;
  }
  
  .table-cards {
    display: block;
  }
  
  .table-card {
    @apply bg-white p-4 rounded-lg border border-gray-200 mb-4;
  }
  
  .table-card-title {
    @apply font-semibold text-gray-800 mb-2;
  }
  
  .table-card-content {
    @apply text-sm text-gray-600 space-y-1;
  }
}

@media (min-width: 641px) {
  .table-responsive {
    display: block;
  }
  
  .table-cards {
    display: none;
  }
}

/* Timeline responsive styles */
.timeline-item {
  @apply relative flex items-start;
  transition: all 0.3s ease;
}

.timeline-item:hover {
  @apply transform scale-105;
}

.timeline-icon {
  @apply w-8 h-8 bg-orange-500 text-white rounded-full flex items-center justify-center text-sm mr-3 mt-1;
  transition: all 0.3s ease;
}

.timeline-item:hover .timeline-icon {
  @apply bg-orange-600 shadow-lg;
}

/* Breadcrumb responsive improvements */
.breadcrumb-responsive {
  @apply flex items-center space-x-2 text-sm;
}

@media (max-width: 640px) {
  .breadcrumb-responsive {
    @apply flex-wrap space-x-1 text-xs;
  }
  
  .breadcrumb-responsive li {
    @apply truncate max-w-24;
  }
}

/* ========================================
   DESA KESIMAN PAGE SPECIFIC STYLES
   ======================================== */

/* Demographic Cards */
.demographic-card {
  @apply bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4 text-center transition-all duration-300 hover:shadow-lg hover:scale-105;
}

.demographic-card.green {
  @apply from-green-50 to-green-100;
}

.demographic-card.orange {
  @apply from-orange-50 to-orange-100;
}

/* Banjar Grid Animations */
.banjar-grid {
  @apply grid grid-cols-2 md:grid-cols-3 gap-2 text-sm;
}

.banjar-item {
  @apply bg-gray-50 p-3 rounded-lg transition-all duration-200 hover:bg-gray-100 hover:shadow-md cursor-default;
}

/* Village Hero Section */
.village-hero {
  @apply bg-gradient-to-r from-green-500 via-green-600 to-emerald-600 text-white py-12 sm:py-16 md:py-20 rounded-xl sm:rounded-2xl mb-6 sm:mb-8 text-center relative overflow-hidden;
}

.village-hero::before {
  content: '';
  @apply absolute inset-0 bg-gradient-to-br from-green-400/20 via-transparent to-emerald-400/20;
}

.village-hero::after {
  content: '';
  @apply absolute top-0 left-0 w-full h-full opacity-30;
  background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Ccircle cx="30" cy="30" r="2"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

/* Responsive Text Scaling for Village */
.village-title {
  @apply text-2xl xs:text-3xl sm:text-4xl md:text-5xl font-bold mb-3 sm:mb-4 leading-tight drop-shadow-lg relative z-10;
}

.village-subtitle {
  @apply text-sm sm:text-base md:text-lg lg:text-xl text-green-100 relative z-10 drop-shadow;
}

/* Enhanced Content Cards */
.content-card {
  @apply bg-white rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 border border-gray-100 hover:shadow-xl transition-all duration-300;
}

.content-card:hover {
  @apply transform -translate-y-1;
}

/* Sidebar Cards */
.sidebar-card {
  @apply bg-white rounded-lg sm:rounded-xl shadow-lg p-4 sm:p-6 border border-gray-100 hover:shadow-xl transition-shadow duration-300;
}

/* Map Placeholder Enhancement */
.map-placeholder {
  @apply bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg p-6 text-center h-40 flex items-center justify-center transition-all duration-300 hover:from-gray-200 hover:to-gray-300;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
}