/**
 * Glassmorphism Theme Styles
 * Nusa Penida Tech - Modern Glassmorphism UI
 */

/* ========================================
   TYPOGRAPHY - Font Family
   ======================================== */

/* Base font - Inter for body text (modern, clean, highly readable) */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 400;
}

/* Sans-serif font - Montserrat for headings (professional, modern) */
h1, h2, h3, h4, h5, h6,
.font-serif {
    font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Sans-serif utility class */
.font-sans {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ========================================
   HEADER SYSTEM
   ======================================== */

/* Mobile Header */
header.mobile-header {
    all: unset !important;
    display: block !important;
    background: rgba(10, 38, 71, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(32, 148, 139, 0.2) !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

header.mobile-header::before {
    display: none !important;
}

/* Desktop Header */
header.desktop-header {
    all: unset !important;
    display: none !important;
    background: rgba(10, 38, 71, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(32, 148, 139, 0.2) !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

header.desktop-header::before {
    display: none !important;
}

@media (min-width: 768px) {
    header.mobile-header {
        display: none !important;
    }
    header.desktop-header {
        display: block !important;
    }
}

.text-gradient-header {
    background: linear-gradient(135deg, #20948B 0%, #144272 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   MOBILE MENU
   ======================================== */

#mobile-menu {
    display: block !important;
    background: rgba(10, 38, 71, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    position: relative !important;
    width: 100% !important;
    border-top: 1px solid rgba(32, 148, 139, 0.2) !important;
    max-height: calc(100vh - 64px) !important;
    overflow-y: auto !important;
}

#mobile-menu.hidden {
    display: none !important;
}

#mobile-menu:not(.hidden) {
    display: block !important;
    animation: slideDown 0.25s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reset ALL elements inside mobile menu */
#mobile-menu nav,
#mobile-menu .custom-nav-container,
#mobile-menu .main-nav {
    all: unset !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    background: transparent !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

#mobile-menu ul.nav-menu {
    all: unset !important;
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#mobile-menu ul.nav-menu > li {
    all: unset !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#mobile-menu ul.nav-menu > li > a {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

#mobile-menu ul.nav-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #20948B !important;
}

#mobile-menu ul.nav-menu > li > a i,
#mobile-menu ul.nav-menu > li > a .ti {
    position: relative !important;
    right: auto !important;
    transform: none !important;
    font-size: 16px !important;
    opacity: 0.6 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Submenu styles */
#mobile-menu ul.submenu,
#mobile-menu .submenu {
    all: unset !important;
    display: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    min-width: 100% !important;
}

/* Show submenu when parent has .active class */
#mobile-menu .active > .submenu,
#mobile-menu .active > ul.submenu,
#mobile-menu .active > ul,
#mobile-menu li.active > .submenu,
#mobile-menu li.active > ul.submenu,
#mobile-menu li.active > ul,
#mobile-menu ul.nav-menu > li.active > ul.submenu,
#mobile-menu ul.nav-menu > li.active > .submenu,
#mobile-menu ul.nav-menu > li.active > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Rotate icon when submenu is active */
#mobile-menu .active > a .submenu-icon,
#mobile-menu .active > a .ti-chevron-down,
#mobile-menu li.active > a .submenu-icon,
#mobile-menu li.active > a .ti-chevron-down,
#mobile-menu li.active > a i {
    transform: rotate(180deg) !important;
}

#mobile-menu .submenu-icon,
#mobile-menu a .ti-chevron-down,
#mobile-menu a i.ti-chevron-down {
    transition: transform 0.3s ease !important;
}

#mobile-menu ul.submenu li,
#mobile-menu .submenu li {
    all: unset !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#mobile-menu ul.submenu li a,
#mobile-menu .submenu li a {
    all: unset !important;
    display: block !important;
    padding: 12px 16px 12px 32px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

#mobile-menu ul.submenu li a:hover,
#mobile-menu .submenu li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #20948B !important;
}

/* ========================================
   DESKTOP NAV STYLES
   ======================================== */

header.desktop-header nav.main-nav,
header.desktop-header .main-nav {
    all: unset !important;
    display: flex !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    flex-direction: row !important;
    background: transparent !important;
    align-items: center !important;
    gap: 4px !important;
}

header.desktop-header .nav-menu {
    all: unset !important;
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 4px !important;
    align-items: center !important;
}

header.desktop-header .nav-menu > li {
    all: unset !important;
    display: block !important;
    position: relative !important;
}

header.desktop-header .nav-menu > li > a {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 10px 16px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

header.desktop-header .nav-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

header.desktop-header .nav-menu > li:hover > .submenu {
    display: block !important;
}

header.desktop-header .submenu {
    all: unset !important;
    display: none !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    min-width: 200px !important;
    background: rgba(10, 38, 71, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(32, 148, 139, 0.2) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    padding-top: 12px !important;
    margin-top: 0 !important;
    list-style: none !important;
    z-index: 100 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Bridge element to prevent gap hover issue */
header.desktop-header .submenu::before {
    content: '' !important;
    position: absolute !important;
    top: -10px !important;
    left: 0 !important;
    right: 0 !important;
    height: 14px !important;
    background: transparent !important;
}

header.desktop-header .submenu li {
    all: unset !important;
    display: block !important;
}

header.desktop-header .submenu li a {
    all: unset !important;
    display: block !important;
    padding: 10px 16px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
    font-family: inherit !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

header.desktop-header .submenu li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #20948B !important;
}

/* ========================================
   GLASSMORPHISM COMPONENTS
   ======================================== */

.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-white {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-card-hover:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.glass-button {
    background: rgba(32, 148, 139, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(32, 148, 139, 0.5);
    color: #ffffff;
}

.glass-button:hover {
    background: rgba(32, 148, 139, 1);
    box-shadow: 0 8px 32px rgba(32, 148, 139, 0.3);
}

/* ========================================
   TEXT & GRADIENTS
   ======================================== */

.text-gradient {
    background: linear-gradient(135deg, #3DCFC4 0%, #20948B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-mesh {
    background:
        radial-gradient(at 40% 20%, rgba(32, 148, 139, 0.3) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(20, 66, 114, 0.25) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(10, 38, 71, 0.3) 0px, transparent 50%),
        radial-gradient(at 80% 50%, rgba(32, 148, 139, 0.15) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(20, 66, 114, 0.2) 0px, transparent 50%);
}

/* ========================================
   SWIPER CUSTOMIZATIONS
   ======================================== */

/* Services Swiper Pagination */
.servicesSwiper .swiper-pagination {
    position: relative;
    bottom: 0;
    margin-top: 1.5rem;
}

.servicesSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    transition: all 0.3s ease;
}

.servicesSwiper .swiper-pagination-bullet-active {
    background: linear-gradient(135deg, #20948B 0%, #144272 100%);
    width: 24px;
    border-radius: 5px;
}

.servicesSwiper .swiper-slide {
    height: auto;
}

.servicesSwiper .swiper-slide > div {
    height: 100%;
}

/* How We Work Swiper Pagination */
.howWeWorkSwiper {
    overflow: visible;
    padding-top: 2rem;
}

.howWeWorkSwiper .swiper-pagination {
    position: relative;
    bottom: 0;
    margin-top: 1.5rem;
}

.howWeWorkSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    transition: all 0.3s ease;
}

.howWeWorkSwiper .swiper-pagination-bullet-active {
    background: linear-gradient(135deg, #20948B 0%, #144272 100%);
    width: 24px;
    border-radius: 5px;
}

.howWeWorkSwiper .swiper-slide {
    height: auto;
}

.howWeWorkSwiper .swiper-slide > div {
    height: 100%;
}

/* Service Swiper (for services pages) */
.serviceSwiper {
    width: 100%;
    padding: 20px 0 60px 0;
}

.serviceSwiper .swiper-slide {
    height: auto;
}

.serviceSwiper .swiper-button-next,
.serviceSwiper .swiper-button-prev {
    color: #20948B;
}

.serviceSwiper .swiper-button-next:after,
.serviceSwiper .swiper-button-prev:after {
    font-size: 20px;
}

.serviceSwiper .swiper-pagination-bullet {
    background: rgba(32, 148, 139, 0.3);
    opacity: 1;
}

.serviceSwiper .swiper-pagination-bullet-active {
    background: #20948B;
}

@media (max-width: 768px) {
    .serviceSwiper .swiper-button-next,
    .serviceSwiper .swiper-button-prev {
        display: none;
    }
}

/* ========================================
   PROSE STYLES (for content)
   ======================================== */

.prose-glassmorphism {
    --tw-prose-body: rgba(255, 255, 255, 0.8);
    --tw-prose-headings: #fff;
    --tw-prose-links: #20948B;
    --tw-prose-bold: #fff;
    --tw-prose-quotes: rgba(255, 255, 255, 0.9);
    --tw-prose-quote-borders: #20948B;
}

.prose-glassmorphism a {
    color: #20948B;
    text-decoration: none;
    transition: all 0.2s ease;
}

.prose-glassmorphism a:hover {
    color: #144272;
    text-decoration: underline;
}

.prose-glassmorphism strong {
    color: #20948B;
}

.prose-glassmorphism h1,
.prose-glassmorphism h2,
.prose-glassmorphism h3,
.prose-glassmorphism h4,
.prose-glassmorphism h5,
.prose-glassmorphism h6 {
    color: #fff;
}

.prose-glassmorphism blockquote {
    border-left-color: #20948B;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 0 0.5rem 0.5rem 0;
}

.prose-glassmorphism img {
    border-radius: 1rem;
}

.prose-glassmorphism table {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    overflow: hidden;
}

.prose-glassmorphism th {
    background: rgba(32, 148, 139, 0.2);
    color: #20948B;
}

.prose-glassmorphism td,
.prose-glassmorphism th {
    border-color: rgba(255, 255, 255, 0.1);
}

.prose-glassmorphism tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

.prose-glassmorphism ul li::marker {
    color: #20948B;
}

.prose-glassmorphism ol li::marker {
    color: #20948B;
}