/* Custom CSS for Magister Keperawatan Website */

:root {
   --primary-color: #0f6cbd;
   --secondary-color: #3b82f6;
   --primary-rgb: 15, 108, 189;
   --secondary-rgb: 59, 130, 246;
   --bs-success: var(--primary-color);
   --bs-success-rgb: var(--primary-rgb);
   --dark-color: #212529;
   --light-color: #f8f9fa;
   --font-family: "Inter", sans-serif;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: var(--font-family);
   line-height: 1.6;
   color: var(--dark-color);
}

/* Smooth Scrolling */
html {
   scroll-behavior: smooth;
}

/* Banner Section */
.banner-section {
   margin-top: 76px; /* Account for fixed navbar */
}

.banner-image {
   height: 400px;
   object-fit: cover;
   object-position: center;
}

.banner-overlay {
   background: rgba(var(--primary-rgb), 0.8);
   backdrop-filter: blur(2px);
}

.banner-overlay h1 {
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-overlay p {
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Hero Image Styling */
.hero-image {
   max-height: 400px;
   object-fit: cover;
   object-position: center;
   transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
}

.hero-image:hover {
   transform: scale(1.02);
   box-shadow: 0 20px 40px rgba(var(--primary-rgb), 0.2) !important;
}

/* Hero Section */
.hero-section {
   background: linear-gradient(
      135deg,
      var(--primary-color) 0%,
      var(--secondary-color) 100%
   );
   position: relative;
   overflow: hidden;
}

.hero-section::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="white" opacity="0.05"><path d="M500 50L950 500L500 950L50 500Z"/></svg>')
      center/cover;
   z-index: 1;
}

.hero-overlay {
   position: relative;
   z-index: 2;
}

.hero-content {
   padding-top: 100px;
}

.hero-stats {
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
}

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

.fade-in {
   animation: fadeInUp 0.8s ease-out forwards;
   opacity: 0;
}

/* Navigation */
.navbar {
   transition: all 0.3s ease;
   backdrop-filter: blur(10px);
}

.navbar.scrolled {
   background-color: rgba(255, 255, 255, 0.95) !important;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
   font-size: 1.25rem;
   font-weight: 700;
}

.nav-link {
   font-weight: 500;
   transition: color 0.3s ease;
   position: relative;
}

.nav-link:hover {
   color: var(--primary-color) !important;
}

.nav-link::after {
   content: "";
   position: absolute;
   width: 0;
   height: 2px;
   bottom: -5px;
   left: 50%;
   background-color: var(--primary-color);
   transition: all 0.3s ease;
   transform: translateX(-50%);
}

.nav-link:hover::after {
   width: 100%;
}

/* Feature Cards */
.feature-card {
   transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
   border: 1px solid rgba(var(--primary-rgb), 0.1);
}

.feature-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.1);
}

.feature-icon {
   transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
   transform: scale(1.1);
}

/* Faculty Cards */
.faculty-card {
   transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
}

.faculty-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.faculty-header {
   background: linear-gradient(
      135deg,
      var(--primary-color) 0%,
      var(--secondary-color) 100%
   );
}

.faculty-avatar {
   transition: transform 0.3s ease;
}

.faculty-card:hover .faculty-avatar {
   transform: scale(1.05);
}

/* Admission Cards */
.admission-card {
   background: linear-gradient(
      135deg,
      var(--primary-color) 0%,
      var(--secondary-color) 100%
   );
}

.timeline {
   position: relative;
}

.timeline::before {
   content: "";
   position: absolute;
   left: 10px;
   top: 20px;
   bottom: 20px;
   width: 2px;
   background-color: var(--primary-color);
}

.timeline-item {
   position: relative;
   padding-left: 40px;
}

.timeline-marker {
   position: absolute;
   left: 4px;
   top: 5px;
   width: 12px;
   height: 12px;
   border: 3px solid white;
}

/* Contact Section */
.contact-info {
   transition: all 0.3s ease;
}

.contact-info:hover {
   transform: translateY(-5px);
   background: rgba(255, 255, 255, 0.15);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.contact-icon {
   transition: all 0.3s ease;
   background: linear-gradient(
      135deg,
      var(--primary-color) 0%,
      var(--secondary-color) 100%
   ) !important;
   box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
}

.contact-info:hover .contact-icon {
   transform: scale(1.1);
   box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

.contact-info h3 {
   color: #ffffff;
   font-weight: 600;
}

.contact-info p {
   color: rgba(255, 255, 255, 0.9);
}

.contact-info small {
   color: rgba(255, 255, 255, 0.7) !important;
}

/* Map Container */
.map-container iframe {
   filter: grayscale(20%);
   transition: filter 0.3s ease;
}

.map-container:hover iframe {
   filter: grayscale(0%);
}

/* Buttons */
.btn {
   font-weight: 500;
   border-radius: 8px;
   transition: all 0.3s ease;
   border: 2px solid transparent;
}

.btn-success {
   background: linear-gradient(
      135deg,
      var(--primary-color) 0%,
      var(--secondary-color) 100%
   );
   border: 2px solid transparent;
}

.btn-success:hover {
   background: linear-gradient(
      135deg,
      var(--secondary-color) 0%,
      var(--primary-color) 100%
   );
   transform: translateY(-2px);
   box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
}

.btn-outline-success {
   border-color: var(--primary-color);
   color: var(--primary-color);
}

.btn-outline-success:hover {
   background-color: var(--primary-color);
   border-color: var(--primary-color);
   transform: translateY(-2px);
   box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
}

.btn-outline-light {
   border-color: white;
   color: white;
}

.btn-outline-light:hover {
   background-color: white;
   border-color: white;
   color: var(--primary-color);
   transform: translateY(-2px);
}

/* Social Links */
.social-links a {
   transition: all 0.3s ease;
   display: inline-block;
}

.social-links a:hover {
   transform: translateY(-3px);
   opacity: 0.8;
}

/* Badge Styling */
.badge {
   font-weight: 500;
   border-radius: 6px;
}

/* Responsive Design */
@media (max-width: 768px) {
   .hero-content {
      text-align: center;
      padding-top: 80px;
   }

   .display-4 {
      font-size: 2.5rem;
   }

   .display-5 {
      font-size: 2rem;
   }

   .hero-stats {
      margin-top: 30px;
   }

   .timeline::before {
      left: 15px;
   }

   .timeline-marker {
      left: 9px;
   }
}

@media (max-width: 576px) {
   .display-4 {
      font-size: 2rem;
   }

   .display-5 {
      font-size: 1.75rem;
   }

   .btn-lg {
      font-size: 1rem;
      padding: 0.75rem 1.5rem;
   }

   .hero-content {
      padding-top: 60px;
   }
}

/* Loading States */
.loading {
   opacity: 0.6;
   pointer-events: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
   width: 8px;
}

::-webkit-scrollbar-track {
   background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
   background: var(--primary-color);
   border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
   background: var(--secondary-color);
}

/* Faculty Detail Modal */
.faculty-detail-avatar {
   transition: transform 0.3s ease;
}

.faculty-detail-avatar:hover {
   transform: scale(1.05);
}

.expertise-tags .badge {
   font-size: 0.85em;
   padding: 0.5em 0.8em;
   border: 1px solid var(--primary-color);
}

.faculty-details h5 {
   border-bottom: 2px solid var(--primary-color);
   padding-bottom: 0.5rem;
   margin-bottom: 1rem;
}

.contact-info {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   padding: 2rem 1.5rem;
   border-radius: 15px;
   margin-top: 1rem;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Modal Styling */
.modal-header {
   background: linear-gradient(
      135deg,
      var(--primary-color) 0%,
      var(--secondary-color) 100%
   );
}

.modal-dialog {
   margin: 2rem auto;
}

@media (max-width: 768px) {
   .modal-dialog {
      margin: 1rem;
   }

   .banner-image {
      height: 250px;
   }

   .banner-overlay h1 {
      font-size: 1.75rem;
   }

   .banner-overlay p {
      font-size: 1rem;
   }
}

/* Large screen adjustments */
@media (min-width: 1200px) {
   .banner-image {
      height: 500px;
   }

   .hero-image {
      max-height: 450px;
   }
}

/* Print Styles */
@media print {
   .navbar,
   .hero-section,
   .btn,
   footer {
      display: none !important;
   }

   body {
      font-size: 12pt;
      line-height: 1.4;
   }
}

/* =====================================================
   FULLSCREEN IMAGE MODAL - Mobile First Approach
   ===================================================== */

/* Base Modal Styles (Mobile First) */
.image-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
   display: none;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.image-modal.active {
   display: flex;
   align-items: center;
   justify-content: center;
}

.image-modal.show {
   opacity: 1;
}

/* Backdrop */
.image-modal-backdrop {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.95);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

/* Modal Content Container */
.image-modal-content {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   z-index: 1;
   padding: 60px 10px 80px;
}

/* Modal Body - Image Container */
.image-modal-body {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   overflow: hidden;
   touch-action: pinch-zoom pan-x pan-y;
}

/* Modal Image */
.image-modal-img {
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   object-fit: contain;
   border-radius: 4px;
   transform: scale(1);
   transition:
      transform 0.3s ease,
      opacity 0.3s ease;
   opacity: 0;
   user-select: none;
   -webkit-user-drag: none;
}

.image-modal-img.loaded {
   opacity: 1;
}

.image-modal-img.zoomed {
   transform: scale(2);
   cursor: zoom-out;
}

/* Close Button - Mobile optimized */
.image-modal-close {
   position: absolute;
   top: 15px;
   right: 15px;
   width: 44px;
   height: 44px;
   border: none;
   background: rgba(255, 255, 255, 0.15);
   color: white;
   font-size: 20px;
   border-radius: 50%;
   cursor: pointer;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
}

.image-modal-close:hover,
.image-modal-close:focus {
   background: rgba(255, 255, 255, 0.25);
   transform: scale(1.1);
}

.image-modal-close:active {
   transform: scale(0.95);
}

/* Navigation Controls */
.image-modal-controls {
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   transform: translateY(-50%);
   display: flex;
   justify-content: space-between;
   padding: 0 10px;
   pointer-events: none;
}

.image-modal-nav {
   width: 44px;
   height: 44px;
   border: none;
   background: rgba(255, 255, 255, 0.15);
   color: white;
   font-size: 18px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   pointer-events: auto;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   opacity: 0;
   visibility: hidden;
}

.image-modal-nav.visible {
   opacity: 1;
   visibility: visible;
}

.image-modal-nav:hover,
.image-modal-nav:focus {
   background: rgba(255, 255, 255, 0.25);
   transform: scale(1.1);
}

.image-modal-nav:active {
   transform: scale(0.95);
}

.image-modal-nav:disabled {
   opacity: 0.3;
   cursor: not-allowed;
}

/* Caption */
.image-modal-caption {
   position: absolute;
   bottom: 40px;
   left: 50%;
   transform: translateX(-50%);
   color: white;
   font-size: 14px;
   text-align: center;
   max-width: calc(100% - 40px);
   padding: 8px 16px;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 20px;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   opacity: 0;
   transition: opacity 0.3s ease;
}

.image-modal-caption.visible {
   opacity: 1;
}

/* Counter */
.image-modal-counter {
   position: absolute;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   color: white;
   font-size: 14px;
   font-weight: 500;
   padding: 6px 14px;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 20px;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   opacity: 0;
   transition: opacity 0.3s ease;
}

.image-modal-counter.visible {
   opacity: 1;
}

/* Loading Spinner */
.image-modal-loading {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 40px;
   height: 40px;
   border: 3px solid rgba(255, 255, 255, 0.2);
   border-top-color: white;
   border-radius: 50%;
   animation: imageModalSpin 0.8s linear infinite;
}

@keyframes imageModalSpin {
   to {
      transform: translate(-50%, -50%) rotate(360deg);
   }
}

/* Clickable Images */
.zoomable-image {
   cursor: zoom-in;
   transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
}

.zoomable-image:hover {
   transform: scale(1.02);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Swipe Indicator (Mobile) */
.image-modal-swipe-hint {
   position: absolute;
   bottom: 100px;
   left: 50%;
   transform: translateX(-50%);
   color: rgba(255, 255, 255, 0.6);
   font-size: 12px;
   text-align: center;
   animation: swipeHintFade 2s ease-in-out;
   pointer-events: none;
}

@keyframes swipeHintFade {
   0%,
   100% {
      opacity: 0;
   }
   20%,
   80% {
      opacity: 1;
   }
}

/* =====================================================
   TABLET STYLES (min-width: 768px)
   ===================================================== */
@media (min-width: 768px) {
   .image-modal-content {
      padding: 80px 50px 100px;
   }

   .image-modal-close {
      top: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      font-size: 22px;
   }

   .image-modal-nav {
      width: 50px;
      height: 50px;
      font-size: 20px;
   }

   .image-modal-controls {
      padding: 0 30px;
   }

   .image-modal-caption {
      font-size: 15px;
      bottom: 50px;
      padding: 10px 20px;
   }

   .image-modal-counter {
      font-size: 15px;
      padding: 8px 18px;
   }

   .image-modal-img {
      border-radius: 8px;
   }
}

/* =====================================================
   DESKTOP STYLES (min-width: 1024px)
   ===================================================== */
@media (min-width: 1024px) {
   .image-modal-content {
      padding: 60px 80px 80px;
   }

   .image-modal-close {
      top: 25px;
      right: 25px;
      width: 56px;
      height: 56px;
      font-size: 24px;
   }

   .image-modal-nav {
      width: 56px;
      height: 56px;
      font-size: 22px;
   }

   .image-modal-controls {
      padding: 0 50px;
   }

   .image-modal-caption {
      font-size: 16px;
      bottom: 40px;
      max-width: 600px;
   }

   .image-modal-img {
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
   }
}

/* =====================================================
   LARGE DESKTOP STYLES (min-width: 1440px)
   ===================================================== */
@media (min-width: 1440px) {
   .image-modal-content {
      padding: 60px 120px 80px;
   }

   .image-modal-controls {
      padding: 0 80px;
   }
}