/*
Theme Name: Kemenag Lumajang Modern
Theme URI: https://kemenag-lumajang.com
Author: AI Coding Agent
Description: Tema modern untuk portal resmi Kementerian Agama Kabupaten Lumajang dengan fokus pada pelayanan publik.
Version: 1.0.0
Text Domain: kemenag-lumajang
*/

/* 
Targeting modern design with Tailwind CSS
The functional styling is handled via Tailwind.
*/

/* Dynamic Navigation Menus & Dropdowns for WordPress */
.flex.gap-6 {
    display: flex !important;
    gap: 1.5rem !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.flex.gap-6 > li {
    position: relative !important;
    padding: 1rem 0 !important;
}
.flex.gap-6 > li > a {
    color: #334155 !important; /* slate-700 */
    font-weight: 600 !important;
    font-size: 0.875rem !important; /* text-sm */
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}
.flex.gap-6 > li:hover > a {
    color: #0F6E4F !important; /* kemenag-green */
}
/* Base style for all sub-menus, including nested ones */
.flex.gap-6 .sub-menu {
    display: none !important;
    position: absolute !important;
    background-color: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
    min-width: 250px !important;
    z-index: 9999 !important;
    padding: 0.5rem 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
}

/* Level 2 Sub-menu (drops down from top-level) */
.flex.gap-6 > li > .sub-menu {
    top: 100% !important;
    left: 0 !important;
    margin-top: 0.5rem !important;
}

/* Hover bridge to keep level 2 submenu open smoothly when transitioning cursor from parent */
.flex.gap-6 > li > .sub-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -0.6rem !important;
    left: 0 !important;
    right: 0 !important;
    height: 0.6rem !important;
    background: transparent !important;
    z-index: 10 !important;
}

/* Level 3 Sub-menu & beyond (flies out to the right) */
.flex.gap-6 .sub-menu li {
    position: relative !important;
}
.flex.gap-6 .sub-menu .sub-menu {
    top: 0 !important;
    left: 100% !important;
    margin-top: -0.5rem !important; /* Align with parent padding */
    margin-left: 0px !important; /* Keep it continuous so mouse hover does not exit */
}

/* Hover bridge for level 3 submenu to bridge horizontal mouse movement */
.flex.gap-6 .sub-menu .sub-menu::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -1rem !important;
    width: 1rem !important;
    background: transparent !important;
    z-index: 10 !important;
}

/* Show Sub-menu on Hover of parent list item */
.flex.gap-6 li:hover > .sub-menu {
    display: flex !important;
}

/* Sub-menu items spacing */
.flex.gap-6 .sub-menu li {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.flex.gap-6 .sub-menu li a {
    display: block !important;
    width: 100% !important;
    padding: 0.625rem 1.25rem !important;
    font-size: 0.825rem !important; /* text-xs */
    color: #475569 !important; /* slate-600 */
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.flex.gap-6 .sub-menu li a:hover {
    background-color: #f0fdf4 !important; /* emerald-50 */
    color: #0F6E4F !important; /* kemenag-green */
    padding-left: 1.5rem !important;
}

/* Indicator Caret Icons using FontAwesome */

/* 1. Level 1 (top-level) items with children (points down) */
.flex.gap-6 > li.menu-item-has-children > a::after {
    content: "\f078" !important; /* FontAwesome chevron-down */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 0.65rem !important;
    color: #94a3b8 !important; /* slate-400 */
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.flex.gap-6 > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg) !important;
    color: #0F6E4F !important;
}

/* 2. Level 2+ items that have children (points right) */
.flex.gap-6 .sub-menu li.menu-item-has-children > a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

.flex.gap-6 .sub-menu li.menu-item-has-children > a::after {
    content: "\f054" !important; /* FontAwesome chevron-right */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 950 !important;
    font-size: 0.65rem !important;
    color: #94a3b8 !important; /* slate-400 */
    margin-left: auto !important; /* Push caret to side */
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.flex.gap-6 .sub-menu li.menu-item-has-children:hover > a::after {
    transform: translateX(3px) !important;
    color: #0F6E4F !important;
}

/* Active styling */
.flex.gap-6 > li.current-menu-item > a,
.flex.gap-6 > li.current-menu-ancestor > a {
    color: #0F6E4F !important;
}

/* Modern WordPress Pagination (paginate_links) Styling */
ul.page-numbers {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    list-style: none !important;
    margin: 2rem 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

ul.page-numbers li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.page-numbers .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 0.875rem !important;
    border-radius: 9999px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #475569 !important; /* slate-600 */
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important; /* slate-200 */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

ul.page-numbers a.page-numbers:hover {
    border-color: #0F6E4F !important; /* kemenag-green */
    color: #0F6E4F !important;
    background-color: #f0fdf4 !important; /* emerald-50 */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px -1px rgba(15, 110, 79, 0.12), 0 2px 4px -1px rgba(15, 110, 79, 0.08) !important;
}

ul.page-numbers .page-numbers.current {
    background-color: #0F6E4F !important; /* kemenag-green */
    color: #ffffff !important;
    border-color: #0F6E4F !important;
    box-shadow: 0 10px 15px -3px rgba(15, 110, 79, 0.3), 0 4px 6px -4px rgba(15, 110, 79, 0.3) !important;
}

ul.page-numbers .page-numbers.dots {
    border-color: transparent !important;
    background-color: transparent !important;
    color: #94a3b8 !important; /* slate-400 */
    cursor: default !important;
    box-shadow: none !important;
}

/* Footer Quick Links Dynamic Menu Styling */
.footer-quick-links-container ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important; /* space-y-4 */
}
.footer-quick-links-container ul li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer-quick-links-container ul li a {
    color: #94a3b8 !important; /* text-slate-400 */
    font-size: 0.875rem !important; /* text-sm */
    transition: color 0.15s ease !important;
    text-decoration: none !important;
}
.footer-quick-links-container ul li a:hover {
    color: #34d399 !important; /* text-emerald-400 */
}

/* Footer Bottom Dynamic Menu Styling */
.footer-bottom-container ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important; /* gap-8 */
}
.footer-bottom-container ul li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer-bottom-container ul li a {
    color: #64748b !important; /* text-slate-500 */
    font-size: 0.75rem !important; /* text-xs */
    transition: color 0.15s ease !important;
    text-decoration: none !important;
}
.footer-bottom-container ul li a:hover {
    color: #ffffff !important; /* text-white */
}