/* Custom CSS for Campus Connect */

/* Navigation Styles */
.nav-link {
    color: #4b5563;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
    text-decoration: none;
}

.nav-link:hover {
    color: #059669;
}

.nav-link.active {
    color: #059669;
    background-color: #eff6ff;
}

/* Mobile navigation styles moved to input.css to avoid conflicts */

/* Card Styles */
.card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-0.25rem);
}

.card-hover {
    transform: scale(1);
    transition: all 0.3s;
}

.card-hover:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Button Styles */
.btn-primary {
    background-color: #059669;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #1d4ed8;
}

.btn-secondary {
    background-color: #e5e7eb;
    color: #1f2937;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: #d1d5db;
}

.btn-outline {
    border: 2px solid #059669;
    color: #059669;
    background-color: transparent;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}

.btn-outline:hover {
    background-color: #059669;
    color: white;
}

/* Form Styles */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.form-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #059669;
    border-color: transparent;
}

.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: all 0.2s;
    resize: vertical;
}

.form-textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px #059669;
    border-color: transparent;
}

.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: all 0.2s;
    background-color: white;
}

.form-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px #059669;
    border-color: transparent;
}

/* Badge Styles */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-primary {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-success {
    background-color: #dcfce7;
    color: #166534;
}

.badge-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Hero Section */
.hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-overlay {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
}

/* Swiper Customization */
.swiper-pagination-bullet {
    background-color: white;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: white;
}

.swiper-button-next,
.swiper-button-prev {
    color: white;
}

/* Hero Swiper specific styles */
.hero-swiper {
    width: 100%;
    height: 100%;
}

.hero-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

.slide-up {
    animation: slideUp 0.6s ease-out;
}

.scale-in {
    animation: scaleIn 0.4s ease-out;
}

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

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

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Loading Spinner */
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

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

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Responsive Images */
.responsive-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Blog Card Styles */
.blog-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card-img {
    width: 100%;
    height: 12rem; /* h-48 equivalent */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Mobile-specific blog card fixes */
@media (max-width: 768px) {
    .blog-card {
        margin-bottom: 1rem;
        border-radius: 0.75rem;
        overflow: hidden;
    }
    
    .blog-card-img {
        height: 10rem; /* Slightly smaller on mobile */
        object-fit: cover;
        object-position: center;
        width: 100%;
        display: block;
        border-radius: 0;
    }
    
    /* Ensure images don't break aspect ratio */
    .blog-card .relative {
        position: relative;
        overflow: hidden;
        border-radius: 0.75rem 0.75rem 0 0;
    }
    
    /* Fix for broken images */
    .blog-card-img:not([src]),
    .blog-card-img[src=""],
    .blog-card-img[src*="undefined"],
    .blog-card-img[src*="null"] {
        display: none;
    }
    
    .blog-card-img:not([src]) + .w-full,
    .blog-card-img[src=""] + .w-full,
    .blog-card-img[src*="undefined"] + .w-full,
    .blog-card-img[src*="null"] + .w-full {
        display: flex !important;
    }
}

/* Section Spacing */
.section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 1024px) {
    .section-padding {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

/* Text Gradients */
.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass Effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s;
}

.hover-lift:hover {
    transform: translateY(-0.5rem);
}

.hover-glow {
    transition: box-shadow 0.3s;
}

.hover-glow:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.icon-btn .fa, .icon-btn .fab {
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 18px;
}
.social-icons a i { line-height: 1; }
@media (max-width: 640px) {
    .icon-btn { font-size: .85rem; padding: .40rem .60rem; }
    .social-icons a { width: 36px; height: 36px; font-size: 16px; }
}
.fab-fixed-wa {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 50;
}
@media (min-width: 640px) {
    .fab-fixed-wa { right: 20px; bottom: 20px; }
}

/* Inline SVG icon utilities */
.icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.icon-20 { width: 20px; height: 20px; }
.brand-wa { color: #25D366; }
.brand-li { color: #0A66C2; }

/* Scrollbar Hide Utility */
.scrollbar-hide {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

/* Sticky Sidebar Z-Index Fix */
.sidebar .sticky,
aside .sticky,
.sticky-sidebar {
    z-index: 30;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
:root{--sg-primary:#059669;--sg-accent:#2563eb}
.sg-steps{margin-top:1rem}
.sg-step{border:1px solid #e5e7eb;border-radius:.5rem;background:#fff;overflow:hidden}
.sg-step+.sg-step{margin-top:.75rem}
.sg-step summary{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;list-style:none}
.sg-step[open] summary{background:#f9fafb}
.sg-step-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9999px;background:var(--sg-primary);color:#fff;font-weight:600}
.sg-step-title{font-weight:600;color:#111827}
.sg-step-body{padding:.75rem 1rem}
.sg-steps-toolbar{display:flex;justify-content:flex-end;gap:.5rem;margin:.75rem 0}
.sg-steps-toolbar button{border:1px solid #e5e7eb;background:#f9fafb;border-radius:.375rem;padding:.375rem .75rem;color:#374151}
.sg-steps-toolbar button:hover{background:#eef2ff}
.sg-toc{position:sticky;top:1rem;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;padding:.75rem;max-height:70vh;overflow:auto}
.sg-toc-title{font-weight:600;color:#111827;margin-bottom:.5rem}
.sg-toc-list{display:flex;flex-direction:column;gap:.25rem}
.sg-toc-link{display:block;padding:.25rem .5rem;border-radius:.375rem;color:#374151}
.sg-toc-link:hover{background:#f3f4f6}
.sg-toc-link.active{background:#eef2ff;color:#111827}
.sg-toc-toggle{display:none;border:1px solid #e5e7eb;background:#f9fafb;border-radius:.375rem;padding:.375rem .75rem;color:#374151}
.sg-toc-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:50}
.sg-toc-panel{position:fixed;right:0;top:0;height:100vh;width:80%;max-width:320px;background:#fff;border-left:1px solid #e5e7eb;padding:1rem;overflow:auto}
.article-hero{position:relative;margin-bottom:1rem}
.article-hero img{border-radius:.75rem}
.article-meta{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 1rem 0}
.article-card{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:1rem}
.sg-progress{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #e5e7eb;background:#f9fafb;border-radius:.375rem;padding:.25rem .5rem;color:#374151;font-size:.875rem}
.sg-feedback{border:1px solid #e5e7eb;background:#fff;border-radius:.75rem;padding:1rem;margin-top:1rem}
.sg-feedback-actions{display:flex;gap:.5rem;margin-top:.5rem}
.sg-feedback button{border:1px solid #e5e7eb;background:#f9fafb;border-radius:.375rem;padding:.375rem .75rem;color:#374151}
.sg-feedback button:hover{background:#eef2ff}
.student-wizard-progress{gap:.5rem}
.student-wizard-progress .wizard-dot{width:10px;height:10px;border-radius:9999px;background:#e5e7eb}
.profile-step{margin-bottom:1rem}
@media (max-width: 768px){
  .sg-toc{display:none}
  .sg-toc-toggle{display:inline-block}
}
@media print{
  header, footer, nav, .sg-steps-toolbar, .sg-toc, .sg-toc-toggle, .sg-feedback{display:none !important}
  .article-card{border:none;padding:0}
  .article-hero img{height:auto}
}
.article-card{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:1.25rem}
.sg-steps{margin-top:1rem}
.sg-step{border:1px solid #e5e7eb;border-radius:.5rem;background:#fff;overflow:hidden}
.sg-step+.sg-step{margin-top:.75rem}
.sg-step summary{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;list-style:none}
.sg-step[open] summary{background:#f9fafb}
.sg-step-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9999px;background:#059669;color:#fff;font-weight:600}
.sg-step-title{font-weight:600;color:#111827}
.sg-step-body{padding:.75rem 1rem}
.sg-steps-toolbar{display:flex;justify-content:flex-end;gap:.5rem;margin:.75rem 0}
.sg-steps-toolbar button{border:1px solid #e5e7eb;background:#f9fafb;border-radius:.375rem;padding:.375rem .75rem;color:#374151}
.sg-steps-toolbar button:hover{background:#eef2ff}
.sg-toc{position:sticky;top:6rem;align-self:start;border-left:1px solid #e5e7eb;padding-left:1rem}
.sg-toc-title{font-weight:600;margin-bottom:.5rem;color:#111827}
.sg-toc-list{display:flex;flex-direction:column;gap:.25rem}
.sg-toc-link{color:#4b5563;text-decoration:none;font-size:.875rem}
.sg-toc-link.active{color:#059669}
.sg-toc-toggle{display:none;border:1px solid #e5e7eb;background:#fff;border-radius:.375rem;padding:.375rem .75rem;color:#374151}
.sg-toc-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1070}
.sg-toc-panel{background:#fff;border-radius:.5rem;max-width:90%;margin:10vh auto;padding:1rem}
@media (max-width: 768px){
  .article-card{padding:.75rem}
  .prose{font-size:.95rem;line-height:1.6;overflow-wrap:anywhere}
  .prose h1{font-size:1.25rem;line-height:1.3;margin:.5rem 0}
  .prose h2{font-size:1.125rem;line-height:1.3;margin:.5rem 0}
  .prose h3{font-size:1rem;line-height:1.3;margin:.5rem 0}
  .sg-step summary{padding:.5rem .75rem}
  .sg-step-number{width:24px;height:24px;font-size:.75rem}
  .sg-step-body{padding:.5rem .75rem}
  .sg-steps-toolbar{margin:.5rem 0}
  .sg-toc{display:none}
  .sg-toc-toggle{display:inline-flex;align-items:center;gap:.5rem;position:fixed;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:1060;box-shadow:0 6px 16px rgba(0,0,0,.15);padding:.5rem .9rem;border-radius:9999px;min-height:44px}
}