/**
 * ION Wrapper - Isolation & Compatibility Stylesheet
 * Prevents conflicts with WordPress themes and plugins
 * Version: 2.0.0
 */

/* ========================================
   CSS ISOLATION & RESET FOR ION NAVBAR
   ======================================== */
/* Ensure fonts are showing correctly in dark mode */
/* Ensure fonts are showing correctly in dark mode */
body[data-theme="dark"] h2,
body[data-theme="dark"] h5,
body[data-theme="dark"] a {
    color: white !important;
}
.border-b{
	border-bottom-width:0px !important;
}
/* Ensure ION navbar doesn't inherit unwanted theme styles */
#ion-navbar,
#ion-navbar * {
    all: revert;
    box-sizing: border-box;
}

/* Prevent theme typography from affecting ION navbar */
#ion-navbar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: inherit;
    background: inherit;
}

/* Reset link styles within navbar */
#ion-navbar a {
    text-decoration: none;
    color: inherit;
}

#ion-navbar a:hover,
#ion-navbar a:focus {
    text-decoration: none;
}

/* ========================================
   WORDPRESS MENU SUPPRESSION
   ======================================== */

/* Hide default WordPress menus only when suppression is enabled */
body.ion-menu-active.ion-suppress-wp-menus .wp-nav-menu-suppressed {
    display: none !important;
    visibility: hidden !important;
}

/* Common WordPress theme menu selectors - only hide when suppression is enabled */
body.ion-menu-active.ion-suppress-wp-menus nav.primary-navigation,
body.ion-menu-active.ion-suppress-wp-menus nav.main-navigation,
body.ion-menu-active.ion-suppress-wp-menus .site-navigation,
body.ion-menu-active.ion-suppress-wp-menus #site-navigation,
body.ion-menu-active.ion-suppress-wp-menus .primary-menu,
body.ion-menu-active.ion-suppress-wp-menus #primary-menu,
body.ion-menu-active.ion-suppress-wp-menus header nav,
body.ion-menu-active.ion-suppress-wp-menus .header-navigation {
    /* Don't use display:none as theme might use it for mobile logic */
    /* Instead, make it invisible and non-interactive */
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Elementor Theme Builder headers - only hide when suppression is enabled */
body.ion-menu-active.ion-suppress-wp-menus [data-elementor-type="header"],
body.ion-menu-active.ion-suppress-wp-menus header.elementor-location-header,
body.ion-menu-active.ion-suppress-wp-menus .elementor-location-header,
body.ion-menu-active.ion-suppress-wp-menus nav.elementor-nav-menu,
body.ion-menu-active.ion-suppress-wp-menus .elementor-widget-nav-menu {
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ========================================
   ADMIN BAR COMPATIBILITY
   ======================================== */

/* Ensure admin bar doesn't conflict with ION navbar */
body.ion-menu-active.admin-bar #ion-navbar {
    margin-top: 0;
    position: relative;
    z-index: 99998;
    /* Just below admin bar (99999) */
}

/* Ensure admin bar stays on top */
body.admin-bar #wpadminbar {
    z-index: 99999 !important;
}

/* ========================================
   COMMON THEME CONFLICTS
   ======================================== */

/* Prevent sticky headers from overlapping */
body.ion-menu-active .site-header.sticky,
body.ion-menu-active header.fixed {
    position: relative !important;
}

/* Reset z-index conflicts */
body.ion-menu-active #ion-navbar {
    z-index: 9999;
    position: relative;
}

/* Ensure content appears below navbar */
body.ion-menu-active #primary.site-main,
body.ion-menu-active main.site-main,
body.ion-menu-active .site-content {
    position: relative;
    z-index: 1;
}

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */

/* Ensure ION navbar is responsive */
@media screen and (max-width: 768px) {
    #ion-navbar {
        width: 100%;
        overflow-x: hidden;
    }
}

/* ========================================
   PLUGIN COMPATIBILITY
   ======================================== */

/* Compatibility with popular page builders */
body.ion-menu-active .elementor-editor-active #ion-navbar,
body.ion-menu-active .vc_inline-editor #ion-navbar {
    pointer-events: none;
    opacity: 0.5;
}

/* WooCommerce compatibility */
body.ion-menu-active.woocommerce nav.woocommerce-breadcrumb {
    /* Keep breadcrumbs visible */
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    left: auto !important;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {

    /* Hide ION navbar when printing */
    #ion-navbar {
        display: none !important;
    }

    /* Hide default menus for print only when suppression is enabled */
    body.ion-menu-active.ion-suppress-wp-menus nav.primary-navigation,
    body.ion-menu-active.ion-suppress-wp-menus nav.main-navigation {
        display: none !important;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Ensure skip links work with ION navbar */
.skip-link.screen-reader-text:focus {
    z-index: 100000 !important;
}

/* Focus visible for keyboard navigation */
#ion-navbar a:focus-visible,
#ion-navbar button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ========================================
   LOADING STATE
   ======================================== */

/* Prevent flash of unstyled content */
#ion-navbar[data-loading="true"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#ion-navbar[data-loading="false"] {
    opacity: 1;
}

/* ========================================
   ERROR STATE
   ======================================== */

/* Style for error messages (admin only) */
.ion-menu-error {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-left-width: 4px;
    padding: 12px 15px;
    margin: 20px;
    border-radius: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ion-menu-error h3 {
    margin: 0 0 8px 0;
    color: #856404;
    font-size: 16px;
    font-weight: 600;
}

.ion-menu-error p {
    margin: 4px 0;
    color: #856404;
    font-size: 14px;
    line-height: 1.5;
}

.ion-menu-error code {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: Monaco, Consolas, monospace;
    font-size: 13px;
}

/* ========================================
   RTL (Right-to-Left) SUPPORT
   ======================================== */

body.rtl #ion-navbar {
    direction: rtl;
    text-align: right;
}

body.rtl #ion-navbar * {
    direction: rtl;
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
    #ion-navbar {
        border: 1px solid currentColor;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {

    #ion-navbar *,
    #ion-navbar *::before,
    #ion-navbar *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   CUSTOM SCROLLBAR FOR ION NAVBAR
   ======================================== */

#ion-navbar *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#ion-navbar *::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

#ion-navbar *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

#ion-navbar *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

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

/* Force hide specific elements when ION is active */
body.ion-menu-active .ion-hide-when-active {
    display: none !important;
}

/* Force show specific elements when ION is active */
body.ion-menu-active .ion-show-when-active {
    display: block !important;
}