/* Custom CSS for Guru Inovatif v2 - Tailwind Enhanced */

/* Import External Stylesheets */
@import url('button.css');
@import url('typhograpy.css');
@import url('ela.css');

/* ============================================= */
/* FIX: ELA Navbar Additional Styles */
/* ============================================= */
/* Ensure navbar content has proper transitions */
.navbar-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    transform: scale(1);
    will-change: transform, background-color, width, margin;
    overflow: visible !important;
}

/* Enhanced button transitions */
.navbar-container .btn-outline-primary {
    transform: scale(1);
}

.navbar-container.sticky .btn-outline-primary,
.navbar-container.scrolling .btn-outline-primary {
    color: #5f58fd !important;
    border-color: #5f58fd !important;
    background: transparent !important;
    transform: scale(0.95);
}

.navbar-container.sticky .btn-outline-primary:hover,
.navbar-container.scrolling .btn-outline-primary:hover {
    background: #5f58fd !important;
    color: white !important;
    transform: scale(1);
}

/* Default state button login (kuning B2B style) */
.navbar-container:not(.sticky):not(.scrolling) .btn-outline-primary {
    color: #1f2937 !important;
    border-color: #F79009 !important;
    background: #F79009 !important;
}

.navbar-container:not(.sticky):not(.scrolling) .btn-outline-primary:hover {
    background: #eab308 !important;
    border-color: #eab308 !important;
}

/* Fix untuk dropdown trigger */
.dropdown-trigger {
    color: white !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.navbar-container.sticky .dropdown-trigger,
.navbar-container.scrolling .dropdown-trigger {
    color: #1f2937 !important;
}

.dropdown-trigger svg {
    color: inherit !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Logo & Text Positioning */
.navbar-logo img {
    transform: scale(1);
}

.navbar-container.sticky .navbar-logo img,
.navbar-container.scrolling .navbar-logo img {
    transform: scale(0.95);
}

.nav-text {
    transform: translateY(0);
}

.nav-text:hover {
    transform: translateY(-1px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-logo:hover img {
    transform: scale(1.05);
}

/* Dropdown positioning fix */
.dropdown-wrapper {
    position: relative;
    z-index: 1002;
}

.dropdown-content {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 9999 !important;
    margin-top: 8px !important;
    transform-origin: top right;
    min-width: 288px;
    width: max-content;
}

.navbar-container {
    contain: none !important;
    overflow: visible !important;
}

.navbar-spacer {
    height: 0;
    transition: height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.navbar-container.sticky + .navbar-spacer {
    height: 100px;
}

/* Mobile navbar fixes */
@media (min-width: 1024px) {
    .navbar-container.sticky {
        padding: 0 80px;
    }
}

@media (max-width: 1023px) {
    .navbar-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .navbar-container.scrolling {
        padding: 0 2.5%;
    }

    .navbar-container.scrolling .navbar-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .dropdown-content-mobile {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        min-width: 280px !important;
        max-width: calc(100vw - 40px) !important;
        margin-top: 12px !important;
    }

    .dropdown-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1001;
        touch-action: none;
    }
}

/* Logo & Text at Top State */
.navbar-container:not(.sticky):not(.scrolling) .navbar-content {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
}

.navbar-container:not(.sticky):not(.scrolling) .nav-text {
    color: #ffffff !important;
    opacity: 0.9;
}

.navbar-container:not(.sticky):not(.scrolling) .nav-text:hover {
    color: #F79009 !important;
    opacity: 1;
}

/* Badge B2B saat scroll */
.navbar-container.sticky .navbar-badge,
.navbar-container.scrolling .navbar-badge {
    background: #EBF2FF !important;
    border-color: #C3D9FF !important;
    color: #5f58fd !important;
}

/* Sticky navbar width adjustments */
.navbar-container.sticky .navbar-content {
    width: 100% !important;
    max-width: 1280px !important;
}

.navbar-container.scrolling .navbar-content {
    width: 98% !important;
    max-width: 1280px !important;
    transform: scale(0.99) !important;
}

/* ============================================= */
/* FIX: Impact Slider Overflow (ELA Page) */
/* ============================================= */
/* Wrapper untuk mencegah horizontal scroll pada section impact */
#impact-dinas,
#impact-sekolah,
#impact-guru,
#impact-ortu,
#impact-pesertadidik {
    overflow: hidden;
    /* Cegah konten slider keluar dari container tab */
}

/* Pastikan container impact slider tidak overflow ke luar */
.impact-slider-container {
    max-width: 100% !important;
    overflow-x: clip !important;
    /* Modern clip untuk mencegah horizontal scroll tanpa memotong vertikal */
}

/* ===================================
   UTILITY CLASSES
   =================================== */

/* Hidden utility - force hide elements */
.hidden {
    display: none !important;
}

/* ===================================
   MODAL DEFAULT BEHAVIOR
   =================================== */

/* Modal hidden by default - shown via JS/Alpine */
.modal {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
}

.modal.show,
.modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* ===================================
   NAVBAR CUSTOM BEHAVIORS
   =================================== */

/* Glassmorphism Navbar */
.navbar-glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Dropdown show/hide animation */
.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mobile menu slide animation */
.mobile-menu-panel {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-panel.show {
    transform: translateX(0);
}

/* Nav link active underline animation */
.nav-link-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 2px;
    transition: transform 0.3s ease;
}

.nav-link-underline:hover::after,
.nav-link-underline.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* Smooth scrollbar for dropdowns */
.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.5);
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* ===================================
   BOOTSTRAP-LIKE GRID SYSTEM (Tailwind Style)
   =================================== */

/* Container System */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

.container-fluid {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Row System */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

/* Base Column */
[class*="col-"],
[class*="sm:col-"],
[class*="md:col-"],
[class*="lg:col-"],
[class*="xl:col-"],
[class*="2xl:col-"] {
    position: relative;
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Default Columns (Mobile First) */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
.col { flex: 1 0 0%; max-width: 100%; }

/* Small Breakpoint (sm: >= 640px) */
@media (min-width: 640px) {
    .sm\:col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .sm\:col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .sm\:col-3 { flex: 0 0 25%; max-width: 25%; }
    .sm\:col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .sm\:col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .sm\:col-6 { flex: 0 0 50%; max-width: 50%; }
    .sm\:col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .sm\:col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .sm\:col-9 { flex: 0 0 75%; max-width: 75%; }
    .sm\:col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .sm\:col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .sm\:col-12 { flex: 0 0 100%; max-width: 100%; }
    .sm\:col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .sm\:col { flex: 1 0 0%; max-width: 100%; }
}

/* Medium Breakpoint (md: >= 768px) */
@media (min-width: 768px) {
    .md\:col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .md\:col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .md\:col-3 { flex: 0 0 25%; max-width: 25%; }
    .md\:col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .md\:col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .md\:col-6 { flex: 0 0 50%; max-width: 50%; }
    .md\:col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .md\:col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .md\:col-9 { flex: 0 0 75%; max-width: 75%; }
    .md\:col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .md\:col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .md\:col-12 { flex: 0 0 100%; max-width: 100%; }
    .md\:col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .md\:col { flex: 1 0 0%; max-width: 100%; }
}

/* Large Breakpoint (lg: >= 1024px) */
@media (min-width: 1024px) {
    .lg\:col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .lg\:col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .lg\:col-3 { flex: 0 0 25%; max-width: 25%; }
    .lg\:col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .lg\:col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .lg\:col-6 { flex: 0 0 50%; max-width: 50%; }
    .lg\:col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .lg\:col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .lg\:col-9 { flex: 0 0 75%; max-width: 75%; }
    .lg\:col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .lg\:col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .lg\:col-12 { flex: 0 0 100%; max-width: 100%; }
    .lg\:col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .lg\:col { flex: 1 0 0%; max-width: 100%; }
}

/* Extra Large Breakpoint (xl: >= 1280px) */
@media (min-width: 1280px) {
    .xl\:col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .xl\:col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .xl\:col-3 { flex: 0 0 25%; max-width: 25%; }
    .xl\:col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .xl\:col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .xl\:col-6 { flex: 0 0 50%; max-width: 50%; }
    .xl\:col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .xl\:col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .xl\:col-9 { flex: 0 0 75%; max-width: 75%; }
    .xl\:col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .xl\:col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .xl\:col-12 { flex: 0 0 100%; max-width: 100%; }
    .xl\:col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .xl\:col { flex: 1 0 0%; max-width: 100%; }
}

/* 2X Large Breakpoint (2xl: >= 1536px) */
@media (min-width: 1536px) {
    .\32xl\:col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .\32xl\:col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .\32xl\:col-3 { flex: 0 0 25%; max-width: 25%; }
    .\32xl\:col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .\32xl\:col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .\32xl\:col-6 { flex: 0 0 50%; max-width: 50%; }
    .\32xl\:col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .\32xl\:col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .\32xl\:col-9 { flex: 0 0 75%; max-width: 75%; }
    .\32xl\:col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .\32xl\:col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .\32xl\:col-12 { flex: 0 0 100%; max-width: 100%; }
    .\32xl\:col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .\32xl\:col { flex: 1 0 0%; max-width: 100%; }
}