/* ===================================================================
   NEW UK LINES - Custom Stylesheet
   The Institute of Smart and Creative Skills
   =================================================================== */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    color: #0f2b51;
    overflow-x: hidden;
}

/* Diagonal Split Banner Background matching exact reference angles */
.hero-diagonal-left {
    background-color: #0f2b51;
    clip-path: polygon(0 0, 62% 0, 51% 100%, 0% 100%);
}

/* Page section banner - ensures Three.js canvas has height to render into */
.threejs-banner-canvas ~ * {
    position: relative;
    z-index: 3;
}


@media (max-width: 1024px) {
    .hero-diagonal-left {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}

/* Active Nav Tab Indicator */
.nav-link {
    position: relative;
    transition: color 0.2s ease;
}

.nav-link.active {
    color: #0f2b51;
    font-weight: 700;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 0;
    width: 100%;
    height: 3.5px;
    background-color: #1d4ed8;
    border-radius: 2px 2px 0 0;
}

@media (max-width: 1024px) {
    .nav-link.active::after {
        bottom: -4px;
    }
}

/* Custom double-framed bank card */
.bank-card-outer {
    background-color: #6b1426;
    padding: 7px;
    border-radius: 10px;
}

.bank-card-inner {
    background-color: #112c51;
    border: 1.5px solid #d49a45;
    border-radius: 6px;
}

/* Enhanced Pakistan Glow & Pulsing Animation */
@keyframes pulseGlow {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.95)) drop-shadow(0 0 14px rgba(245, 158, 11, 0.8));
        opacity: 0.95;
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(254, 240, 138, 1)) drop-shadow(0 0 28px rgba(234, 88, 12, 1));
        opacity: 1;
    }
}

.pakistan-glow {
    animation: pulseGlow 2.5s infinite ease-in-out;
    transform-origin: 175px 155px;
}

/* Flight Path Line Styling & Contrail Flow */
.flight-path-base {
    stroke-dasharray: 4, 3;
    animation: dashFlow 25s linear infinite;
}

@keyframes dashFlow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -200;
    }
}

/* Animated Flight Airplane */
.flight-airplane {
    pointer-events: none;
    will-change: transform;
    transition: opacity 0.3s ease;
}

/* Static Globe Orbital Rings (clean, no spinning or jumping) */
.globe-rotating-orbit {
    transform-origin: 170px 170px;
}

/* Three.js Background Canvas Container - elevated above diagonal overlay */
.threejs-banner-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 12 !important;
    overflow: hidden;
}

.threejs-banner-canvas canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Enroll Button: Dark Blue default, Turns to Green on Hover, Compact Width */
.btn-enroll {
    background-color: #0f2b51;
    color: #ffffff;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    border: none;
    cursor: pointer;
}

.btn-enroll:hover,
a.btn-enroll:hover,
button.btn-enroll:hover {
    background-color: #16a34a !important; /* Green on hover */
    background: #16a34a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.45) !important;
    transform: translateY(-1px);
}

.btn-enroll:active,
a.btn-enroll:active,
button.btn-enroll:active {
    transform: translateY(0);
}

/* Course Cards: Increased vertical height, slightly decreased border-radius (8px) */
.course-card-box, 
.course-card-item {
    border-radius: 8px !important;
    min-height: 290px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.course-card-box:hover, 
.course-card-item:hover {
    box-shadow: 0 12px 28px -6px rgba(15, 43, 81, 0.16) !important;
}

/* 3D Cylindrical Carousel & Vertically Long Course Cards */
.course-card-vert {
    border-radius: 8px !important;
    min-height: 470px;
    border: 1px solid rgba(226, 232, 240, 0.95) !important; /* Thin border just like home screen */
    background-color: #ffffff;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backface-visibility: hidden;
}

.course-card-vert:hover {
    box-shadow: 0 20px 35px -8px rgba(15, 43, 81, 0.14) !important;
    border-color: rgba(148, 163, 184, 0.6) !important;
}

#coursesCarouselWrapper {
    perspective: 1200px;
    touch-action: pan-y;
}

/* Smooth modal fade animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.25s ease-out forwards;
}

/* Page views (backward compatibility) */
.page-view {
    display: none;
}

.page-view.active-view {
    display: block;
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #173d70;
}

/* ===================================================================
   DARK MODE SYSTEM STYLES
   =================================================================== */

/* Smooth Transition for Theme Toggling */
body, 
header, 
nav, 
.course-card-vert, 
.course-card-box, 
.course-card-item, 
#mobileMenu, 
#searchDropdown, 
input, 
select, 
textarea, 
footer {
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                color 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Body in Dark Mode */
html.dark body {
    background-color: #080e1a;
    color: #f1f5f9;
}

/* Dark Mode Navigation & Header */
html.dark header {
    background-color: #081120 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .nav-link {
    color: #cbd5e1;
}

html.dark .nav-link:hover {
    color: #ffffff;
}

html.dark .nav-link.active {
    color: #ffffff;
}

html.dark .nav-link.active::after {
    background-color: #60a5fa !important;
}

/* Dark Mode Section Backgrounds & Diagonals */
html.dark .bg-\[\#e3ecfa\] {
    background-color: #091528 !important;
}

html.dark .hero-diagonal-left {
    background-color: #050b14 !important;
}

html.dark .bg-sectionAlt {
    background-color: #0b1424 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .bg-\[\#f8fafc\] {
    background-color: #080e1a !important;
}

/* Dark Mode Cards & Containers */
html.dark .bg-white {
    background-color: #0f1c30 !important;
}

html.dark .course-card-vert,
html.dark .course-card-box,
html.dark .course-card-item {
    background-color: #0f1c30 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: #f1f5f9 !important;
}

html.dark .course-card-vert:hover {
    box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
}

html.dark .course-card-box:hover,
html.dark .course-card-item:hover {
    box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Dark Mode Borders */
html.dark .border-slate-200,
html.dark .border-slate-200\/90,
html.dark .border-slate-200\/80,
html.dark .border-slate-200\/60,
html.dark .border-slate-100,
html.dark .border-slate-300,
html.dark .border-blue-200,
html.dark .border-blue-200\/70,
html.dark .border-blue-200\/60 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Dark Mode Typography */
html.dark .text-navy {
    color: #f8fafc !important;
}

html.dark .text-slate-700,
html.dark .text-slate-800,
html.dark .text-slate-900 {
    color: #e2e8f0 !important;
}

html.dark .text-slate-600 {
    color: #cbd5e1 !important;
}

html.dark .text-slate-500 {
    color: #94a3b8 !important;
}

html.dark .text-slate-400 {
    color: #94a3b8 !important;
}

/* Dark Mode Form Inputs & Selects */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #132238 !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25) !important;
}

/* Dark Mode Category Filter Buttons */
html.dark .course-filter-btn {
    background-color: #0f1c30 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}

html.dark .course-filter-btn:hover {
    border-color: #60a5fa !important;
    color: #ffffff !important;
}

html.dark .course-filter-btn.bg-amber-50 {
    background-color: #311c07 !important;
    border-color: #d07b29 !important;
    color: #fbbf24 !important;
}

/* Dark Mode Carousel Controls */
html.dark #carouselPrevBtn,
html.dark #carouselNextBtn {
    background-color: #132238 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

html.dark #carouselPrevBtn:hover,
html.dark #carouselNextBtn:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Dark Mode Modals & Popovers */
html.dark #searchDropdown {
    background-color: #0f1c30 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
}

html.dark #scorecardModal .bg-white,
html.dark #videoModal .bg-white {
    background-color: #0f1c30 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

/* Dark Mode Badge Overrides */
html.dark .bg-slate-50,
html.dark .bg-slate-100 {
    background-color: #16243a !important;
    color: #cbd5e1 !important;
}

html.dark .bg-blue-100 {
    background-color: #172e4d !important;
    color: #93c5fd !important;
}

html.dark .bg-amber-100 {
    background-color: #3b2308 !important;
    color: #fde047 !important;
}

html.dark .bg-amber-50 {
    background-color: #261605 !important;
}

/* Dark Mode Footer */
html.dark footer {
    background-color: #050a12 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dark Mode Custom Scrollbar */
html.dark ::-webkit-scrollbar-track {
    background: #081120;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #172e4d;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

/* ===================================================================
   RESPONSIVE DESIGN SYSTEM OVERRIDES (MOBILE, TABLET, DESKTOP)
   =================================================================== */

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Small Screen Optimizations (< 640px) */
@media (max-width: 640px) {
    #coursesCarouselWrapper {
        perspective: 900px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    
    .course-slide-item {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .hero-diagonal-left {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) !important;
    }

    /* Prevent awkward line breaks on mobile buttons */
    .btn-enroll {
        white-space: nowrap;
    }
}

/* Tablet Optimizations (641px - 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
    .hero-diagonal-left {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) !important;
    }
}