/**
 * Landing Page Styles - EDUHUB Public Website
 * Based on master_template/ace/html/landing-page-1.html
 */

html {
   --navbar-height: 5rem;
   --navbar-sm-height: 3.75rem;
}

/**
 See @page-script.js 
*/
#scroll-down {
   position: absolute;
   top: 60vh;
}
#scroll-up {
   position: absolute;
   top: 0;
}

/* when we scroll down a little bit, navbar becomes fixed (+compact) and appears from top */
@keyframes navbarAppearIn {
   0% { transform: translateY(-100%); }
   100% { transform: none; }
}

/* if our ace.css is compiled using sticky: true, then we should make it position: fixed again to fix a few glitches */
.navbar-fixed {
   position: relative;
   animation: none;
   transition: none;
}
.navbar-compact {
   height: 5rem;
}

.navbar-fixed .navbar-inner {
   position: fixed;
   top: 0;
}

.navbar-compact .navbar-inner {
   height: 4rem;
   animation: navbarAppearIn 300ms;
}

@media (prefers-reduced-motion: reduce) {
   .navbar .navbar-inner {
   transition: none !important;
   animation: none !important;
   } 
}

#navbar-dark.navbar-compact .navbar-inner {
   border-bottom: 1px solid rgba(0,0,0,0.075);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.125);
}

/* the shadow for the 3 feature items ... speed, flexibility, etc */
.shadow-1 {
   box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
}

/* the triangle in light/white version */
.shape-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 12px 20px 12px;
   border-top-color: transparent !important;
   border-left-color: transparent !important;
   border-right-color: transparent !important;
}

/* Remove gap between navbar and hero section */
.navbar-darkblue {
   margin-bottom: 0 !important;
}

#page-intro-dark {
   margin-top: 0 !important;
   padding-top: 0.5rem !important;
}

@media (min-width: 1200px) {
   #page-intro-dark {
      padding-top: 1rem !important;
   }
}

/* Navbar links - white color */
#navbar-dark .nav-link {
   color: white !important;
}

#navbar-dark .nav-link:hover,
#navbar-dark .nav-link:focus {
   color: white !important;
   opacity: 0.8;
}

#navbar-dark .nav-link.active {
   color: white !important;
   opacity: 1;
}

/* Media and News Cards Styles */
.hover-shadow {
   transition: all 0.3s ease;
}

.hover-shadow:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.transition {
   transition: all 0.3s ease;
}

.line-clamp-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.line-clamp-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* News List Page Styles */
#news-list-container article {
   transition: all 0.3s ease;
}

#news-list-container article:hover {
   transform: translateY(-3px);
}

#news-list-container .card-img {
   transition: transform 0.3s ease;
}

#news-list-container article:hover .card-img {
   transform: scale(1.05);
}

/* Media Cover Image - A4 Aspect Ratio */
.media-cover-a4 {
   width: 100%;
   aspect-ratio: 210/297;
   overflow: hidden;
   background: #f5f5f5;
}

.media-cover-a4 img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

/* Card image top with A4 aspect ratio */
.card .media-cover-a4 {
   border-radius: 0.25rem 0.25rem 0 0;
}

/* Media Cards Grid Spacing */
#popular-media-container .row {
   margin-left: -1rem;
   margin-right: -1rem;
}

#popular-media-container .row > [class*="col-"] {
   padding-left: 1rem;
   padding-right: 1rem;
   margin-bottom: 2rem;
}

/* Media Card Styling */
#popular-media-container .card {
   border: 1px solid #e0e0e0;
   transition: all 0.3s ease;
   border-radius: 0.5rem;
   overflow: hidden;
   margin-bottom: 0;
}

#popular-media-container .card:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
   transform: translateY(-2px);
}

/* Media Search Results Container - ใช้รูปแบบเดียวกับหน้าแรก */
#media-results-container {
   margin-left: -1rem;
   margin-right: -1rem;
}

#media-results-container > [class*="col-"] {
   padding-left: 1rem;
   padding-right: 1rem;
   margin-bottom: 2rem;
}

#media-results-container .card {
   border: 1px solid #e0e0e0;
   transition: all 0.3s ease;
   border-radius: 0.5rem;
   overflow: hidden;
   margin-bottom: 0;
}

#media-results-container .card:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
   transform: translateY(-2px);
}

/* Favorite button positioning */
#popular-media-container .card .position-relative,
#media-results-container .card .position-relative {
   overflow: visible;
}

#popular-media-container .card .position-absolute.end-0,
#media-results-container .card .position-absolute.end-0 {
   right: 0;
   top: 0;
   z-index: 10;
}

/* Favorite button styling */
.btn-favorite {
   background-color: white !important; /* พื้นหลังสีขาวเมื่อยังไม่ได้กด */
   border-color: #e0e0e0 !important;
   border-width: 1px;
   color: white !important;
   transition: all 0.3s ease;
   padding: 0.5rem !important;
   width: 2.25rem;
   height: 2.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
}

.btn-favorite i {
   font-size: 1rem;
}

/* เมื่อยังไม่ได้กด: หัวใจสีขาว, พื้นหลังสีขาว */
.btn-favorite:not(.active) {
   background-color: white !important; /* พื้นหลังสีขาว */
   border-color: #e0e0e0 !important;
}

.btn-favorite:not(.active) i {
   color: #ffffff !important; /* หัวใจสีขาวเมื่อยังไม่ได้กด */
   opacity: 1 !important;
   -webkit-text-stroke: 1px #ffc1cc; /* เส้นสีชมพูอ่อนรอบหัวใจ */
   text-stroke: 1px #ffc1cc;
}

.btn-favorite:hover:not(.active) {
   background-color: #f5f5f5 !important; /* พื้นหลังสีเทาอ่อนเมื่อ hover */
   border-color: #d0d0d0 !important;
   transform: scale(1.1);
}

.btn-favorite:hover:not(.active) i {
   color: #ffffff !important; /* หัวใจสีขาวเมื่อ hover และยังไม่ได้กด */
   -webkit-text-stroke: 1px #ffc1cc; /* เส้นสีชมพูอ่อนรอบหัวใจ */
   text-stroke: 1px #ffc1cc;
}

/* Favorite button active state (เมื่อกดแล้ว) */
.btn-favorite.active {
   background-color: white !important; /* พื้นหลังสีขาวเมื่อกดแล้ว */
   border-color: #ffc1cc !important;
   color: #ff69b4 !important;
}

.btn-favorite.active i {
   color: #ff69b4 !important; /* หัวใจสีชมพูเมื่อกดแล้ว */
   opacity: 1 !important; /* แสดงหัวใจเมื่อกดแล้ว */
   -webkit-text-stroke: 0 !important; /* ไม่มี stroke เมื่อกดแล้ว */
   text-stroke: 0 !important;
}

/* Adjust font sizes for public website */
body, html {
   font-size: 0.9375rem; /* 15px จาก 16px */
}

/* Adjust heading sizes */
h1 { font-size: 1.875rem !important; }
h2 { font-size: 1.625rem !important; }
h3 { font-size: 1.45rem !important; }
h4 { font-size: 1.25rem !important; }
h5 { font-size: 1.1rem !important; }
h6 { font-size: 1rem !important; }

/* Adjust text size classes */
.text-180 { font-size: 1.5rem !important; }
.text-160 { font-size: 1.35rem !important; }
.text-150 { font-size: 1.25rem !important; }
.text-140 { font-size: 1.15rem !important; }
.text-130 { font-size: 1.1rem !important; }
.text-125 { font-size: 1.05rem !important; }
.text-120 { font-size: 1rem !important; }
.text-115 { font-size: 0.95rem !important; }
.text-110 { font-size: 0.9rem !important; }
.text-105 { font-size: 0.875rem !important; }
.text-100 { font-size: 0.9375rem !important; }
.text-95 { font-size: 0.875rem !important; }
.text-90 { font-size: 0.8125rem !important; }
.text-85 { font-size: 0.75rem !important; }
.text-75 { font-size: 0.7rem !important; }