/* =================================================================== */
/* === STUDENT CAMP 2025 - MAIN THEME & LAYOUT STYLES === */
/* =================================================================== */

/* --- 1. CORE THEME & COLOR PALETTE --- */
:root {
    --oxford-blue: #002147;
    --accent-gold: #FDB813;
    --light-background: #F8F9FA;
    --dark-text: #212529;
}

/* --- 2. GLOBAL LAYOUT & TYPOGRAPHY --- */
html, body { height: 100%; }
html { scroll-padding-top: 110px; }
body { display: flex; flex-direction: column; padding-top: 70px; }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }
a { color: var(--oxford-blue); }
a:hover { color: #003366; }
.figure { display: block; margin-left: auto; margin-right: auto; }
.section-padding { padding-top: 60px; }
.lyrics { line-height: 1.6; font-size: 1.05rem; }

/* --- 3. BOOTSTRAP THEME OVERRIDES --- */
.bg-primary { background-color: var(--oxford-blue) !important; }
.text-primary { color: var(--oxford-blue) !important; }
.text-warning { color: var(--accent-gold) !important; }
.bg-light { background-color: var(--light-background) !important; }
.btn-primary { background-color: var(--oxford-blue); border-color: var(--oxford-blue); }
.btn-primary:hover { background-color: #003366; border-color: #003366; }
.btn-warning { background-color: var(--accent-gold); border-color: var(--accent-gold); color: var(--dark-text); }
.btn-warning:hover { background-color: #e6a400; border-color: #e6a400; color: var(--dark-text); }
.table-primary { --bs-table-bg: var(--oxford-blue); --bs-table-color: white; --bs-table-striped-bg: #eef2f7; }

/* =================================================================== */
/* === COMPONENT-SPECIFIC STYLES === */
/* =================================================================== */

/* --- Main Fixed Header (Navbar) --- */
.navbar-custom { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background-color: var(--oxford-blue); }

/* --- Homepage Hero Section --- */
.hero-section { position: relative; }
.hero-logo { position: absolute; top: 20px; left: 30px; width: 100px; z-index: 10; }
.theme-title { min-height: 120px; }
.theme-verse { font-size: 1.25rem; font-weight: 300; opacity: 0.8; margin-top: -10px; }
.animated-theme { font-size: 6rem; font-weight: 900; text-transform: uppercase; opacity: 0; animation: fadeInUp 1.5s ease-out 0.5s forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

/* --- Scholarship & Leaders Sections --- */
.scholarship-section { background-color: var(--oxford-blue); }
.scholarship-hr { width: 100px; margin: 30px auto; border-top: 2px solid var(--accent-gold); opacity: 1; }
#leaders { padding-top: 100px !important; background-color: #f8f9fa; }
.leader-card { background-color: #fff; border-radius: 15px; padding: 30px; text-align: center; border: 2px solid #e9ecef; box-shadow: none; transform: translateY(0); transition: all 0.3s ease-in-out; }
.leader-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 33, 71, 0.15); border-color: var(--accent-gold); }
.leader-photo-wrapper { width: 150px; height: 150px; margin: -75px auto 20px auto; border-radius: 50%; border: 5px solid white; box-shadow: 0 5px 15px rgba(0, 33, 71, 0.2); overflow: hidden; position: relative; z-index: 2; }
.leader-photo-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.leader-card h5 { font-weight: 700; color: var(--oxford-blue); }
.leader-card .leader-role { font-weight: 600; color: var(--accent-gold); display: block; margin-bottom: 15px; }
.leader-card .welcome-message { font-style: italic; color: #6c757d; font-size: 0.95rem; }
#leaderModalPhoto {
    width: 150px;       /* Set a fixed width */
    height: 150px;      /* Set a fixed height to ensure it's a perfect circle */
    object-fit: cover;  /* Ensures the image fills the space without distortion */
}

/* --- History Page Timeline (COMPLETE & CORRECTED) --- */
.timeline { position: relative; max-width: 1200px; margin: 0 auto; }
.timeline::after { content: ''; position: absolute; width: 6px; background-color: var(--oxford-blue); top: 0; bottom: 0; left: 50%; margin-left: -3px; border-radius: 3px; }
.timeline-container { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; }
.timeline-container::after { content: ''; position: absolute; width: 25px; height: 25px; background-color: white; border: 4px solid var(--oxford-blue); top: 15px; border-radius: 50%; z-index: 1; }
.timeline-container.left { left: 0; }
.timeline-container.left::after { right: -17px; }
.timeline-container.right { left: 50%; }
.timeline-container.right::after { left: -16px; }
.timeline-content { padding: 20px 30px; background-color: #f8f9fa; position: relative; border-radius: 6px; border: 1px solid #e9ecef; }
.timeline-clickable { text-decoration: none; color: inherit; display: block; transition: transform 0.2s ease-in-out; }
.timeline-clickable:hover { transform: scale(1.03); }
.timeline-clickable .timeline-content { transition: background-color 0.2s; }
.timeline-clickable:not(.collapsed) .timeline-content { background-color: var(--oxford-blue); color: white; border-color: var(--oxford-blue); }
.timeline-clickable.collapsed .timeline-content { background-color: #f8f9fa; color: inherit; }
.theme-list { list-style-type: none; padding: 15px 20px 5px 20px; margin-top: 10px; background-color: #fff; border-radius: 6px; }
.theme-list li { padding: 5px 0; font-size: 0.95rem; border-bottom: 1px dashed #e9ecef; }
.theme-list li:last-child { border-bottom: none; }

/* --- Other Component Styles --- */
.gallery-thumbnail { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 0.375rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s ease-in-out; }
.gallery-thumbnail:hover { transform: scale(1.05); }
.gallery-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.schedule-time-column { width: 25%; }
.duty-task-col { width: 20%; }
.admin-table .select-all-header { width: 50px; }
.floating-action-button { position: fixed; bottom: 30px; right: 30px; z-index: 1050; padding: 1rem 1.25rem; border-radius: 50px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); opacity: 0; transform: scale(0.8); transition: all 0.3s ease; pointer-events: none; }
.floating-action-button.visible { opacity: 1; transform: scale(1); pointer-events: auto; }

/* =================================================================== */
/* === RESPONSIVE STYLES === */
/* =================================================================== */
@media screen and (max-width: 768px) {
    /* Responsive hero section */
    .hero-logo { width: 70px; left: 15px; top: 15px; }
    .animated-theme { font-size: 3.5rem; }
    .theme-title { min-height: 80px; }
    .theme-verse { font-size: 1rem; }

    /* Responsive timeline structure */
    .timeline::after { left: 31px; }
    .timeline-container { width: 100%; padding-left: 70px; padding-right: 25px; }
    .timeline-container.left, .timeline-container.right { left: 0%; }
    .timeline-container.left::after, .timeline-container.right::after { left: 15px; }

    /* Mobile-friendly animation */
    [data-aos="fade-up"] { transform: none !important; opacity: 0; }
    [data-aos="fade-up"].aos-animate { opacity: 1 !important; }
}

/* ============================================== */
/* === STYLES FOR SOCIAL MEDIA PLACEHOLDER      === */
/* ============================================== */

.social-feed-placeholder {
    border: 2px dashed #ced4da; /* A dashed grey border */
    border-radius: 0.5rem;      /* Rounded corners to match your site's style */
    padding: 2rem;              /* Spacing inside the box */
    background-color: #f8f9fa;  /* A very light grey background */
    min-height: 400px;          /* Give it some height so it doesn't collapse */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.placeholder-content {
    opacity: 0.7; /* Make the text slightly faded */
}