/* Theme CSS untuk WebUNS - Palet warna yang lebih muted/redup namun tetap elegan */

/* ===== BASIC SCROLL SYSTEM ===== */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    max-width: 100%;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

/* Scroll Padding untuk Navigasi - disesuaikan dengan header fixed */
html {
    scroll-padding-top: 100px;
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 140px;
    }
}

/* Scrollbar styling moved to scroll-enhancements.css to avoid duplication */

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #63B3ED #f1f1f1;
}

/* Container constraints - optimized for smooth scrolling */
.container {
    max-width: 100%;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow: visible;
    overflow-x: hidden; /* Prevent horizontal overflow in containers */
    box-sizing: border-box;
}

/* Fixed header positioning - ensure it stays at top */
header.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: linear-gradient(to right, #1e1723, #3a2f45) !important;
}

/* Body padding for fixed header */
body {
    padding-top: 80px !important;
}

@media (max-width: 768px) {
    body {
        padding-top: 100px !important;
    }
}

/* Ensure header z-index overrides Tailwind classes */
header.navbar.z-50,
header.navbar[class*="z-"] {
    z-index: 999 !important;
}

@media (max-width: 768px) {
    header.navbar .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Grid responsive fixes */
@media (max-width: 768px) {
    .grid {
        gap: 1rem !important;
        justify-items: center;
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
    }
    
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Force single column layout on mobile */
    .grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

@media (max-width: 480px) {
    .grid {
        gap: 0.75rem !important;
        justify-items: center;
    }
    
    .container {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

.mx-auto {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Section constraints */
section {
    max-width: 100%;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    overflow-x: hidden;
}

/* Grid and flex containers */
.grid, [class*="grid-"] {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    overflow-x: hidden;
}

/* Absolute positioned elements */
[class*="absolute"] {
    max-width: calc(100% - 2rem);
    box-sizing: border-box;
}



/* Specific section fixes - removed overflow-x to prevent individual scroll bars */
#berita .relative,
footer,
.footer {
    max-width: 100% !important;
    overflow: visible;
    overflow-x: hidden;
}

/* Fix for potential white space at bottom */
html, body {
    height: 100%;
}

body > footer:last-child {
    margin-bottom: 0;
    padding-bottom: 1rem;
}

#berita .grid {
    max-width: 100% !important;
}

/* Article cards - removed overflow-x to prevent individual scroll bars */
article {
    max-width: 100% !important;
}



/* Mobile viewport specific fixes - simplified to prevent scroll conflicts */
@media (max-width: 768px) {
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

:root {
    /* Warna utama - versi lebih muted */
    --primary-dark: #1e1723;      /* Versi lebih gelap dari #281d2e */
    --primary: #2a2035;           /* Versi lebih muted dari #281d2e */
    --primary-light: #3a2f45;     /* Versi lebih muted dari #382853 */
    
    /* Warna aksen - versi lebih muted */
    --accent-light: #a19da3;      /* Versi lebih muted dari #b2aeb5 */
    --accent-lighter: #d5d3d7;    /* Versi lebih terang dari accent-light */
    
    /* Warna overlay dan transparansi */
    --overlay-dark: rgba(30, 23, 35, 0.7);  /* Overlay untuk background images */
    --overlay-light: rgba(161, 157, 163, 0.3); /* Overlay ringan untuk section backgrounds */
    
    /* Warna teks */
    --text-dark: #1e1723;         /* Teks gelap */
    --text-medium: #3a2f45;       /* Teks medium */
    --text-light: #d5d3d7;        /* Teks terang */
    
    /* Warna gradien */
    --gradient-header: linear-gradient(to right, var(--primary-dark), var(--primary-light));
    --gradient-footer: linear-gradient(to bottom, var(--primary-dark), var(--primary-light));
}

/* Penerapan warna untuk elemen umum */

/* Header */
header {
    background: var(--gradient-header) !important;
}

/* Footer */
footer {
    background: var(--gradient-footer) !important;
}

/* Tombol */
.btn-primary, 
.inline-block[class*="bg-[#382853]"], 
.inline-block[class*="bg-[#281d2e]"] {
    background-color: var(--primary-light) !important;
    color: white !important;
    transition: background-color 0.3s ease !important;
}

.btn-primary:hover, 
.inline-block[class*="bg-[#382853]"]:hover, 
.inline-block[class*="bg-[#281d2e]"]:hover {
    background-color: var(--primary) !important;
}

/* Teks berwarna */
[class*="text-[#281d2e]"] {
    color: var(--primary) !important;
}

[class*="text-[#382853]"] {
    color: var(--primary-light) !important;
}

/* Background sections */
[class*="bg-[#b2aeb5]/30"] {
    background-color: var(--overlay-light) !important;
}

[class*="bg-[#b2aeb5]"] {
    background-color: var(--accent-light) !important;
}

/* Welcome overlay */
.welcome-overlay {
    background: linear-gradient(var(--overlay-dark), var(--overlay-dark)) !important;
}

/* Service cards */
.service-card {
    background-color: var(--accent-light) !important;
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Activity cards responsive design - unified approach */
.activity-card, .service-card {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Mobile responsive fixes for activity cards */
@media (max-width: 768px) {
    .activity-card, .service-card {
        max-width: calc(100% - 2rem);
        width: calc(100% - 2rem);
        margin: 0 auto;
        padding: 1rem;
        box-sizing: border-box;
    }
    
    .activity-card h3, .service-card h3 {
        font-size: 1.125rem;
        line-height: 1.4;
        word-wrap: break-word;
    }
    
    .activity-card p, .service-card p {
        font-size: 0.875rem;
        line-height: 1.5;
        word-wrap: break-word;
    }
}

@media (max-width: 480px) {
    .activity-card, .service-card {
        max-width: calc(100% - 1rem);
        width: calc(100% - 1rem);
        padding: 0.75rem;
    }
}

/* Force grid items to respect container width */
@media (max-width: 768px) {
    .grid > * {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Specific fix for layanan section - highest priority */
    section#layanan .container .grid.grid-cols-1.md\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    section#layanan .activity-card.service-card {
        display: block !important;
        width: calc(100% - 2rem) !important;
        max-width: calc(100% - 2rem) !important;
        margin: 0 auto !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        flex: none !important;
    }
}

/* Optimized scrollbar styling for smooth performance */



/* ===== INTERSECTION OBSERVER ANIMATIONS ===== */
/* Fade-in animation untuk elemen yang masuk viewport */
.fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* AOS handles animations now - removed conflicting styles */
/* .section, .program-card, .curriculum-item, .activity-card, .extra-card styles moved to AOS */

/* ===== NAVBAR SCROLL EFFECTS ===== */
.navbar {
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* ===== PARALLAX ELEMENTS ===== */
.cloud, .balloon {
    will-change: transform;
    transition: none; /* Remove transition untuk parallax yang smooth */
}
/* Scrollbar styles consolidated in scroll-enhancements.css */

/* Prevent scroll conflicts */
.scroll-smooth {
    scroll-behavior: smooth;
}

.scroll-auto {
    scroll-behavior: auto;
}

/* Consolidated scroll-safe element styles */
h1, h2, h3, h4, h5, h6,
h1::before, h1::after, h2::before, h2::after, h3::before, h3::after,
h4::before, h4::after, h5::before, h5::after, h6::before, h6::after,
p, span, a, strong, em {
    transform: none !important;
    will-change: auto !important;
    overflow: visible !important;
}

/* Pseudo-element specific fixes */
h1::before, h1::after, h2::before, h2::after, h3::before, h3::after,
h4::before, h4::after, h5::before, h5::after, h6::before, h6::after {
    position: absolute !important;
    pointer-events: none !important;
}

/* Karya Mahasiswa Card Hover Effects */
.program-card.card {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.program-card.card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.1), 0 8px 8px -5px rgba(0, 0, 0, 0.04) !important;
}

.program-card.card:active {
    transform: translateY(-4px) !important;
    transition: all 0.1s ease !important;
}

/* Safe decorative elements for headings */
.w-16.h-1.bg-\[\#3a2f45\].mx-auto,
.heading-underline {
    transform: none !important;
    will-change: auto !important;
    overflow: visible !important;
    position: static !important;
    pointer-events: none !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Video Profile Container - Optimal size for desktop */
#profil .flex.justify-center > div {
    max-width: 800px !important;
    width: 800px !important;
    margin: 0 auto !important;
}

/* Responsive video sizing */
@media (min-width: 768px) {
    #profil .flex.justify-center > div {
        max-width: 800px !important;
        width: 800px !important;
    }
}

@media (max-width: 767px) {
    #profil .flex.justify-center > div {
        max-width: 350px !important;
        width: 350px !important;
    }
}