/**
 * DETAIL PAGES CSS
 * ================================================================================
 * Styles for scholarship, program, and university detail pages
 * 
 * PAGES USING THIS FILE:
 * - /scholarship/details/index.php
 * - /program/details/index.php
 * - /university/details/index.php
 * 
 * ================================================================================
 */

/* ================================================================================
   LAYOUT: Content with Sidebar (2-column flex layout)
   Used in: All three detail pages
   Elements: .content-with-sidebar (main container)
   ================================================================================ */

.content-with-sidebar {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.content-main {
    width: 900px;
}

.sidebar {
    width: 300px;
}

/* Responsive: Stack on mobile (max-width: 900px) */
@media (max-width: 900px) {
    .content-with-sidebar {
        flex-direction: column;
    }
    
    .content-main,
    .sidebar {
        width: 100%;
    }
}

/* ================================================================================
   PAGE HERO SECTION
   Used in: All detail pages (scholarship, program, university)
   Elements: .page-hero, .page-hero .hero-overlay, .page-hero h1
   ================================================================================ */

.page-hero {
    position: relative;
    height: 320px;
    background: center/cover no-repeat;
    border-bottom: 5px solid #e11d48;
}

.page-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.page-hero h1 {
    color: white;
    position: relative;
    z-index: 2;
    padding: 140px 20px 0;
    text-align: center;
}

/* ================================================================================
   SIDEBAR WIDGETS
   Used in: All detail pages
   Elements: .sidebar-widget, .sidebar-widget-highlight
   ================================================================================ */

.sidebar-widget,
.sidebar-widget-highlight {
    background: linear-gradient(#694049 #93a057);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.sidebar-widget-highlight ul li,
.sidebar-widget ul li {
    margin-bottom: 10px;
    list-style: none;
}

/* Sidebar widget headings */
.sidebar-widget h3,
.sidebar-widget-highlight h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Subscriber count text */
.sidebar-widget p {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

/* ================================================================================
   SUBSCRIPTION BUTTON
   Used in: All detail pages (subscribe/notify buttons in sidebar)
   Methods called: /assets/js/detail-pages.js - subscriptionHandler()
   ================================================================================ */

#subscribeBtn {
    width: 100%;
    padding: 12px;
    font-size: 18px;
    border-radius: 50px;
    transition: 0.2s ease;
}

#subscribeBtn.subscribed {
    background: #e11d48;
    border-color: #e11d48;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.4);
}

/* ================================================================================
   TOAST NOTIFICATIONS
   Used in: All detail pages
   Methods called: /assets/js/detail-pages.js - showToast()
   ================================================================================ */

#toast {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #111;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    display: none;
    opacity: 0;
    transition: 0.3s ease;
    z-index: 9999;
}

#toast.show {
    display: block;
    opacity: 1;
}

/* ================================================================================
   CONTENT CARD BADGE
   Used in: Scholarship detail page (.card-badge displays program type)
   ================================================================================ */

.card-badge {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, #f97316, #e11d48);
    color: white;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
}

/* ================================================================================
   MAIN CONTENT SECTION HEADINGS
   Used in: All detail pages (h3 for section titles like "Universities Offering")
   ================================================================================ */

.content-main h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Related/related items section spacing */
.content-main section {
    margin-top: 40px;
}