/*
 Theme Name: BuddyBoss Child
 Theme URI: https://estei.org/
 Description: Red Teologica Estei - Primera Red Social Teologica de Latinoamerica
 Author: ESTEI
 Author URI: https://estei.org/
 Template: buddyboss-theme
 Version: 1.1.0
*/

/* =========================================================
   1. DESIGN TOKENS & ROOTS (WCAG 2.2 AA / LUXURY ACADEMIC)
   ========================================================= */
:root {
    --estei-navy-deep:     #050c18;
    --estei-navy-surface:  #0a1628;
    --estei-navy-elevated: #102038;
    --estei-navy-border:   rgba(197, 160, 89, 0.25);

    --estei-gold:          #c5a059;
    --estei-gold-bright:   #e5c07b;
    --estei-gold-glow:     rgba(197, 160, 89, 0.35);
    --estei-gold-gradient: linear-gradient(135deg, #e5c07b 0%, #c5a059 100%);

    --estei-text-primary:   #f8fafc;
    --estei-text-secondary: #cbd5e1;
    --estei-text-muted:     #94a3b8;

    --estei-emerald:       #10b981;
    --estei-cyan:          #38bdf8;
    --estei-amber:         #f59e0b;
    --estei-purple:        #a855f7;

    --estei-radius-sm: 8px;
    --estei-radius-md: 12px;
    --estei-radius-lg: 16px;
    --estei-radius-pill: 9999px;

    --estei-touch-target: 44px;
}

/* =========================================================
   2. GLOBAL RESET & HORIZONTAL OVERFLOW PREVENTION
   ========================================================= */
html,
body {
    overflow-x: clip !important;
    max-width: 100vw !important;
    -webkit-text-size-adjust: 100%;
}

#page,
.site,
.site-content,
#content,
.main-content,
.bb-readylaunch-template {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* Fix BuddyBoss activity subnav filters modal overflowing right viewport edge */
.bb-subnav-filters-container:not(.active) .subnav-filters-modal {
    display: none !important;
}
.bb-subnav-filters-container.active .subnav-filters-modal,
.subnav-filters-modal {
    max-width: calc(100vw - 24px) !important;
    right: 0 !important;
    left: auto !important;
    box-sizing: border-box !important;
}

/* Fluid sidebars on mobile to prevent 320px hardcoded overflow */
@media (max-width: 991px) {
    #bb-rl-right-sidebar,
    .bb-rl-widget-sidebar,
    .bb-rl-sidebar,
    .widget.bp-latest-activities,
    .widget.widget_bb_recent_blog_posts_widget,
    .widget.widget_bp_core_recently_active_widget {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Fix Meow AI Chatbot window fixed width overflow on mobile */
.mwai-chat,
#mwai-chatbot-chatbot-jujkdd {
    max-width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: auto !important;
    box-sizing: border-box !important;
}

/* =========================================================
   3. ADAPTIVE HEADER & BRAND LOGO PERFECTION
   ========================================================= */

/* Hide 60-char raw text node cleanly across all header variants */
.site-header .site-title a,
.bb-mobile-header .site-title a,
.mobile-logo-wrapper .site-title a,
.bb-rl-site-branding .site-title a {
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    max-height: 48px !important;
    vertical-align: middle !important;
}

/* Golden crest icon */
.site-header .site-title a::before,
.bb-mobile-header .site-title a::before,
.mobile-logo-wrapper .site-title a::before {
    content: '' !important;
    display: inline-block !important;
    width: 38px !important;
    height: 38px !important;
    background: url('https://estei.org/wp-content/uploads/estei-assets/estei-premium-logo.png') center/contain no-repeat !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

/* ESTEI Wordmark with guaranteed high contrast on both light and dark headers */
.site-header .site-title a::after,
.bb-mobile-header .site-title a::after,
.mobile-logo-wrapper .site-title a::after {
    content: 'ESTEI' !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 800 !important;
    font-size: 1.35rem !important;
    letter-spacing: 0.12em !important;
    color: #c5a059 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* ReadyLaunch branding: replace generic square with golden crest */
.bb-rl-login-header-logo img,
.register-page-logo img {
    content: url('https://estei.org/wp-content/uploads/estei-assets/estei-premium-logo.png') !important;
    width: 48px !important;
    height: 48px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    display: inline-block !important;
}

/* In ReadyLaunch main header: hide redundant <img> so ::before (crest) and ::after (ESTEI) are displayed cleanly */
.bb-rl-logo-wrap img {
    display: none !important;
}
.bb-rl-logo-wrap::before {
    content: '' !important;
    display: inline-block !important;
    width: 38px !important;
    height: 38px !important;
    background: url('https://estei.org/wp-content/uploads/estei-assets/estei-premium-logo.png') center/contain no-repeat !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}
.bb-rl-logo-wrap::after {
    content: 'ESTEI' !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 800 !important;
    font-size: 1.35rem !important;
    letter-spacing: 0.12em !important;
    color: #c5a059 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ReadyLaunch mobile header spacing */
.bb-readylaunch-template .bb-rl-secondary-header {
    padding-top: 36px !important;
}

/* Sticky header padding compensation */
.sticky-header .site-content {
    padding-top: 68px !important;
}

/* =========================================================
   4. FLOATING WIDGETS HARMONIZATION (NO COLLISIONS)
   ========================================================= */

/* WhatsApp Widget — bottom-left */
#estei-wa-container,
.estei-wa-wrapper {
    position: fixed !important;
    bottom: 16px !important;
    left: 16px !important;
    right: auto !important;
    z-index: 998 !important;
}
.estei-wa-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
.estei-wa-icon {
    width: 26px !important;
    height: 26px !important;
}

/* Teólogo IA Floating Trigger — bottom-right */
#esteiFloatWidgetRoot,
.estei-float-widget-root {
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    z-index: 998 !important;
}
.estei-float-trigger-btn {
    min-height: 46px !important;
    min-width: 46px !important;
    padding: 10px 18px !important;
    border-radius: 28px !important;
    background: #0a1628 !important;
    border: 1.5px solid #c5a059 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.estei-float-trigger-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(197, 160, 89, 0.5) !important;
    background: #102038 !important;
}

/* Reposition secondary Meow AI trigger above Teólogo IA if both are rendered */
.mwai-trigger.mwai-open-button {
    bottom: 74px !important;
    right: 18px !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 997 !important;
    opacity: 0.85 !important;
}
.mwai-trigger.mwai-open-button:hover {
    opacity: 1 !important;
}

/* =========================================================
   5. SOCIAL FEED HERO & COMMUNITY CARDS
   ========================================================= */
.estei-feed-community-hero {
    background: linear-gradient(135deg, #050c18 0%, #0a192f 50%, #050c18 100%) !important;
    border: 1.5px solid rgba(197, 160, 89, 0.35) !important;
    border-radius: 16px !important;
    padding: clamp(20px, 4vw, 34px) clamp(16px, 3vw, 28px) !important;
    margin-bottom: 24px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45) !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}
.estei-feed-community-hero::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(600px, 90vw) !important;
    height: 250px !important;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.16) 0%, transparent 70%) !important;
    pointer-events: none !important;
}
.hero-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid #10b981 !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    margin-bottom: 12px !important;
}
.hero-badge-pill span:last-child {
    color: #34d399 !important;
    font-weight: 800 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-family: 'Inter', sans-serif !important;
}
.estei-pulse-dot {
    width: 8px !important;
    height: 8px !important;
    background: #10b981 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    box-shadow: 0 0 8px #10b981 !important;
    animation: pulseDot 2s infinite !important;
}
@keyframes pulseDot {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}
.estei-community-title {
    font-family: 'Cinzel', serif !important;
    font-size: clamp(1.65rem, 4vw + 0.3rem, 2.6rem) !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    background: linear-gradient(135deg, #ffffff 30%, #e5c07b 70%, #c5a059 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #ffffff !important;
}
.estei-community-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.92rem, 1.4vw, 1.05rem) !important;
    color: #cbd5e1 !important;
    line-height: 1.65 !important;
    max-width: 720px !important;
    margin: 0 auto 20px !important;
}
.estei-community-desc strong {
    color: #ffffff !important;
}
.estei-community-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
}
.btn-estei-gold {
    background: linear-gradient(135deg, #e5c07b, #c5a059) !important;
    color: #050c18 !important;
    font-weight: 800 !important;
    padding: 13px 24px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    min-height: 46px !important;
    box-shadow: 0 4px 18px rgba(197, 160, 89, 0.45) !important;
    transition: all 0.2s ease !important;
}
.btn-estei-gold:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(197, 160, 89, 0.65) !important;
    color: #000000 !important;
}
.btn-estei-outline {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(197, 160, 89, 0.4) !important;
    color: #e5c07b !important;
    padding: 13px 20px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    min-height: 46px !important;
    transition: all 0.2s ease !important;
}
.btn-estei-outline:hover {
    background: rgba(197, 160, 89, 0.15) !important;
    border-color: #e5c07b !important;
    color: #ffffff !important;
}
.estei-live-metrics {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    font-size: 0.82rem !important;
    color: #94a3b8 !important;
    font-family: 'Inter', sans-serif !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* High Contrast for Dark Academic Cards & Bench Titles (WCAG AA Compliance) */
.dikela-hero-title,
.dikela-hero h1,
.dikela-hero h2,
.estei-bench-title h3,
.estei-study-bench h1,
.estei-study-bench h2,
.estei-study-bench h3,
.estei-ai-card h2,
.estei-ai-card h3 {
    color: #ffffff !important;
}
.dikela-hero-subtitle,
.estei-bench-sub,
.estei-ai-subtitle {
    color: #cbd5e1 !important;
}

/* BuddyBoss Feed Item Card Polish */
.activity-list .activity-item {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 20px !important;
    overflow-wrap: break-word !important;
}

/* =========================================================
   6. LEARNPRESS & ACADEMIC CATALOG RESPONSIVENESS
   ========================================================= */
.lp-archive-courses .learn-press-courses,
.lp-courses-loop {
    width: 100% !important;
}

/* Course Search Input & Button Fluid Alignment */
.lp-courses-searching {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
}
.lp-courses-searching input {
    flex: 1 1 auto !important;
    min-height: 44px !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
}
.lp-courses-searching button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Titles and code wrapping (prevent overflow) */
.course-title,
.course-item h3,
.entry-title {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* =========================================================
   7. MODALS, DIALOGS & OVERLAYS RESPONSIVE CONSTRAINTS
   ========================================================= */
.bb-modal,
.estei-modal,
.mfp-content,
.bb-model-window {
    max-height: 90dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

/* =========================================================
   8. MEDIA QUERIES (MOBILE-FIRST SCALE)
   ========================================================= */

/* --- 8.1. ULTRA-MOBILE & STANDARD MOBILE (< 480px) --- */
@media (max-width: 480px) {
    /* Compact Header */
    .bb-mobile-header {
        height: 58px !important;
        padding: 0 10px !important;
    }
    .bb-mobile-header .site-title a::before {
        width: 32px !important;
        height: 32px !important;
        margin-right: 6px !important;
    }
    .bb-mobile-header .site-title a::after {
        font-size: 1.15rem !important;
    }

    /* Stack Community Actions vertically */
    .estei-community-actions {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    .estei-community-actions a,
    .btn-estei-gold,
    .btn-estei-outline {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 16px !important;
        font-size: 0.88rem !important;
    }

    /* Metrics 2x2 grid */
    .estei-live-metrics span {
        flex: 1 1 calc(50% - 8px) !important;
        text-align: center !important;
        font-size: 0.76rem !important;
    }

    /* Floating Widgets: Keep compact & prevent popup obstruction */
    .estei-wa-bubble,
    #estei-wa-tooltip {
        display: none !important; /* Never auto-popup on tiny screens */
    }
    #estei-wa-container {
        bottom: 12px !important;
        left: 12px !important;
    }
    .estei-wa-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    .estei-wa-icon {
        width: 22px !important;
        height: 22px !important;
    }

    /* Compact Teólogo IA to round icon on tiny mobile */
    #esteiFloatWidgetRoot {
        bottom: 12px !important;
        right: 12px !important;
    }
    .estei-float-trigger-btn {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }
    .estei-float-text {
        display: none !important;
    }

    /* Hide redundant secondary Meow AI trigger on <480px to prevent clutter */
    .mwai-trigger.mwai-open-button {
        display: none !important;
    }

    /* ReadyLaunch grid lists 1-column */
    #groups-dir-list .bp-list.grid li,
    #members-dir-list .bp-list.grid li {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }
}

/* --- 8.2. LARGE PHABLETS & SMALL TABLETS (481px - 768px) --- */
@media (min-width: 481px) and (max-width: 768px) {
    .estei-community-actions a {
        flex: 1 1 calc(50% - 6px) !important;
    }
    .estei-wa-bubble {
        max-width: 280px !important;
    }
}

/* --- 8.3. TABLETS PORTRAIT & LANDSCAPE (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .estei-academic-nav {
        padding: 16px !important;
    }
    .estei-community-title {
        font-size: 2.2rem !important;
    }
}

/* --- 8.4. DESKTOP & MONITORS (> 1024px) --- */
@media (min-width: 1025px) {
    .site-content {
        max-width: 1400px;
        margin: 0 auto;
    }
}