/*
Theme Name: Tema Custom UIN Jambi
Theme URI: https://utipd.uinjambi.ac.id
Author: Halim UTIPD UIN Jambi
Author URI: https://utipd.uinjambi.ac.id
Description: Tema resmi custom UIN Sulthan Thaha Saifuddin Jambi berbasis WordPress & Tailwind CSS.
Version: 2.7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tema-custom-uin-jambi
Tags: education, blog, news, custom-menu, featured-images, custom-logo, translation-ready
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
*/

/* ==========================================================================
   Header Shrink Effect saat Scroll
   ========================================================================== */
#site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body.admin-bar #site-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar #site-header {
        top: 46px !important;
    }
}

#header-top-bar {
    max-height: 60px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

#site-header.header-scrolled #header-top-bar {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

#main-nav-bar {
    transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
}

.site-title,
#main-nav-bar ul>li>a,
.search-toggle,
#menu-toggle {
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Keadaan awal navbar di halaman selain depan (single.php, page.php, dll: latar putih, teks hitam) */
#site-header.header-inner:not(.header-scrolled) #main-nav-bar {
    background-color: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}

#site-header.header-inner:not(.header-scrolled) #main-nav-bar ul:not(.sub-menu)>li>a {
    color: #0f172a !important;
}

#site-header.header-inner:not(.header-scrolled) #main-nav-bar ul:not(.sub-menu)>li>a:hover {
    color: #005ec4 !important;
}

/* Keadaan awal navbar di halaman depan (teks putih di atas hero slider) */
#site-header.header-front:not(.header-scrolled) #main-nav-bar ul:not(.sub-menu)>li>a {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
}

#site-header.header-front:not(.header-scrolled) .site-title {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
}

#site-header.header-front:not(.header-scrolled) #main-nav-bar ul:not(.sub-menu)>li>a:hover {
    color: #fcd34d !important;
}

/* ==========================================================================
   Hero Slider Top Dark Gradient Overlay
   ========================================================================== */
.hero-top-gradient {
    background: linear-gradient(180deg, rgba(0, 20, 45, 0.95) 0%, rgba(0, 20, 45, 0.75) 45%, rgba(0, 20, 45, 0.35) 75%, rgba(0, 20, 45, 0) 100%) !important;
}

/* ==========================================================================
   Hero Slider News Title Hover Underline (amber-500, h-0.5 / 2px)
   ========================================================================== */
.hero-title-link {
    background-image: linear-gradient(to right, #f59e0b, #f59e0b);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
    padding-bottom: 2px;
    text-decoration: none;
}

.hero-title-link:hover {
    background-size: 100% 2px;
    color: #fff;
}

/* Judul slider: Full text di mode mobile (tanpa clamp), 2 baris di layar tablet/desktop */
.hero-slider-title {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

@media (min-width: 768px) {
    .hero-slider-title {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }
}

/* Navbar saat discroll untuk SEMUA halaman (seperti scroll halaman depan: latar navy & teks/ikon putih) */
#site-header.header-scrolled #main-nav-bar {
    background-color: rgb(0, 33, 71) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.25);
    border-bottom-color: transparent !important;
}

#site-header.header-scrolled .site-title {
    color: #ffffff !important;
}

#site-header.header-scrolled #main-nav-bar ul:not(.sub-menu)>li>a {
    color: #ffffff !important;
}

#site-header.header-scrolled #main-nav-bar ul:not(.sub-menu)>li>a:hover {
    color: #fcd34d !important;
}

#site-header.header-scrolled .search-toggle,
#site-header.header-scrolled #menu-toggle {
    color: rgba(255, 255, 255, 0.9) !important;
}

#site-header.header-scrolled .search-toggle:hover,
#site-header.header-scrolled #menu-toggle:hover {
    color: #fcd34d !important;
}

#main-nav-container {
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#site-header.header-scrolled #main-nav-container {
    height: 4rem;
    /* 56px (h-14) vs 64px / 80px (h-16 md:h-20) */
}

#site-logo {
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
}

#site-header.header-scrolled #site-logo {
    height: 1.75rem;
    /* 28px pada layar kecil */
}

@media (min-width: 768px) {
    #site-header.header-scrolled #site-logo {
        height: 2.125rem;
        /* 34px pada desktop */
    }
}

/* ==========================================================================
   Mobile Off-Canvas Drawer Menu
   ========================================================================== */
#mobile-menu-container {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.3s ease;
}

#mobile-menu-container.active {
    visibility: visible;
    pointer-events: auto;
}

#mobile-menu-backdrop {
    position: fixed !important;
    inset: 0 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#mobile-menu-container.active #mobile-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
}

#mobile-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 10000 !important;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

#mobile-menu-container.active #mobile-menu {
    transform: translateX(0);
    pointer-events: auto;
}

/* ==========================================================================
   Emergency Contact Modal: Slide In dari Samping (Off-Canvas Style)
   ========================================================================== */
#emergencyModal {
    transform: translateX(calc(100% + 2.5rem)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0.35s !important;
}

#emergencyModal.active {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   Site Title Header
   ========================================================================== */
.site-title {
    display: block;
    line-height: 1.15 !important;
    /* Rapat/mepet dan proporsional untuk teks kapital 3 baris */
}

/* ==========================================================================
   Line Clamp Utilities (Ellipsis ...)
   ========================================================================== */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

@media (min-width: 768px) {
    .md\:line-clamp-4 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }
}

/* ==========================================================================
   Responsive Navigation Menu Display
   ========================================================================== */
@media (min-width: 1024px) {
    .desktop-nav-menu {
        display: flex !important;
    }

    .mobile-nav-toggle {
        display: none !important;
    }

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

@media (max-width: 1023px) {
    .desktop-nav-menu {
        display: none !important;
    }

    .mobile-nav-toggle {
        display: flex !important;
    }
}

/* Excerpt helper di berita mobile */
@media (max-width: 767px) {
    .berita-card-excerpt {
        display: none !important;
    }
}

/* ==========================================================================
   Overlay & Modal di atas Header (z-index 99999 > header 999)
   ========================================================================== */
#search-overlay,
#imageModal {
    z-index: 99999 !important;
}

/* ==========================================================================
   Logo Marquee - Lebar Fleksibel Pas Logo & Jarak px Rapat
   ========================================================================== */
.marquee-track {
    gap: 1.25rem !important;
}

.marquee-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 52px !important;
    padding: 2px 0 !important;
    flex-shrink: 0 !important;
}

.marquee-item img {
    height: 46px !important;
    max-height: 46px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
}

.marquee-item:hover img {
    transform: scale(1.08) !important;
}

@media (min-width: 768px) {
    .marquee-track {
        gap: 1.75rem !important;
    }

    .marquee-item {
        height: 66px !important;
        padding: 4px 0 !important;
    }

    .marquee-item img {
        height: 58px !important;
        max-height: 58px !important;
    }
}