/* ==========================================================
   Jooker Safe Header Override  —  v1.0
   Scope: .site-header | .edublink-header-top |
          .edublink-header-right | .edublink-mobile-menu |
          .edublink-elementor-header-wrapper
   DO NOT edit Swiper, MetisMenu, Headroom, or init.js.
   ========================================================== */

/* ----------------------------------------------------------
   Brand Variables
   ---------------------------------------------------------- */
:root {
    --jkr-green:        #6B9080;
    --jkr-gold:         #ffd45f;
    --jkr-nav-text:     #757783;
    --jkr-dark-text:    #1c1e27;
    --jkr-border:       #e0e2e9;
    --jkr-icon-bg:      #f1f2f6;
    --jkr-dark-overlay: rgba(0, 0, 0, 0.6);
    --jkr-dark-solid:   rgba(0, 0, 0, 0.92);
    --jkr-white:        #ffffff;
}

/* ----------------------------------------------------------
   TOP BAR — white, not sticky
   ---------------------------------------------------------- */
.edublink-header-top {
    background-color: var(--jkr-white);
    border-bottom: 1px solid var(--jkr-border);
    padding: 25px 0 26px;
}

/* Collapse top bar when sticky activates */
.edublink-header-sticky .edublink-header-top,
.edublink-hide-at-sticky.edublink-header-top {
    display: none !important;
}

/* Top bar social icons — 35 px circles */
.edublink-header-top .edublink-social-links a,
.edublink-header-top .social-links a {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           35px;
    height:          35px;
    background-color: var(--jkr-icon-bg);
    color:           var(--jkr-nav-text);
    border-radius:   50%;
    margin-right:    10px;
    font-size:       15px;
    line-height:     35px;
    text-decoration: none;
    transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color            0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.edublink-header-top .edublink-social-links a:hover,
.edublink-header-top .social-links a:hover {
    background-color: var(--jkr-green);
    color:            var(--jkr-white);
}

/* Top bar contact info items */
.edublink-header-top .edublink-header-contact-info li,
.edublink-header-top .header-contact-info li {
    display:      flex;
    align-items:  center;
    float:        left;
    border-right: 1px solid var(--jkr-border);
    margin-left:  40px;
    padding-right: 40px;
}

.edublink-header-top .edublink-header-contact-info li:last-child,
.edublink-header-top .header-contact-info li:last-child {
    border-right: none;
}

.edublink-header-top .edublink-header-contact-info .icon,
.edublink-header-top .header-contact-info .icon {
    font-size:    30px;
    margin-right: 12px;
    color:        var(--jkr-green);
}

.edublink-header-top .edublink-header-contact-info h6,
.edublink-header-top .header-contact-info h6 {
    font-size:   14px;
    font-weight: 400;
    margin:      0;
    color:       var(--jkr-nav-text);
}

.edublink-header-top .edublink-header-contact-info p,
.edublink-header-top .header-contact-info p {
    font-size: 16px;
    margin:    0;
    color:     var(--jkr-dark-text);
}

/* ----------------------------------------------------------
   MAIN NAV ROW
   ---------------------------------------------------------- */
.site-header,
.edublink-elementor-header-wrapper {
    background-color: var(--jkr-dark-overlay);
}

.edublink-header-sticky .site-header,
.edublink-header-sticky .edublink-elementor-header-wrapper,
.edublink-sticky-header-wrapper.edublink-header-sticky {
    background-color: var(--jkr-dark-solid);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* ----------------------------------------------------------
   NAVIGATION LINKS
   ---------------------------------------------------------- */
.site-header .mainmenu-nav ul li a,
.site-header .main-menu ul li a,
.edublink-elementor-header-wrapper .mainmenu-nav ul li a {
    color:         var(--jkr-nav-text);
    font-size:     16px;
    font-weight:   400;
    padding-top:   22px;
    padding-bottom: 21px;
    transition:    color 500ms ease;
}

.site-header .mainmenu-nav ul li a:hover,
.site-header .main-menu ul li a:hover,
.edublink-elementor-header-wrapper .mainmenu-nav ul li a:hover {
    color: var(--jkr-green);
}

/* Dropdown panels */
.site-header .mainmenu-nav ul li ul,
.edublink-elementor-header-wrapper .mainmenu-nav ul li ul {
    background:    var(--jkr-white);
    min-width:     220px;
    border-radius: 8px;
    box-shadow:    0 0 65px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------------
   HEADER RIGHT — round icon buttons (cart, bell, language)
   ---------------------------------------------------------- */
.edublink-header-right .header-btn,
.edublink-header-right .header-action-btn,
.edublink-header-right .edublink-header-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            35px;
    height:           35px;
    background-color: var(--jkr-icon-bg);
    border-radius:    50%;
    color:            var(--jkr-nav-text);
    font-size:        15px;
    margin-left:      8px;
    text-decoration:  none;
    position:         relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.edublink-header-right .header-btn:hover,
.edublink-header-right .header-action-btn:hover,
.edublink-header-right .edublink-header-btn:hover {
    background-color: var(--jkr-green);
    color:            var(--jkr-white);
}

.edublink-header-right .header-btn .badge,
.edublink-header-right .header-action-btn .badge {
    position:         absolute;
    top:              -4px;
    right:            -4px;
    background-color: #e74c3c;
    color:            var(--jkr-white);
    border-radius:    50%;
    font-size:        10px;
    width:            16px;
    height:           16px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    line-height:      1;
}

/* ----------------------------------------------------------
   AUTH FALLBACK — .jkr-header-auth-fallback
   To suppress if Elementor header already has auth buttons:
     .jkr-header-auth-fallback { display: none; }
   in Appearance → Customise → Additional CSS.
   ---------------------------------------------------------- */
.jkr-header-auth-fallback {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    margin-left: 12px;
}

.jkr-header-auth-fallback .jkr-auth-btn {
    color:            var(--jkr-white) !important;
    background-color: var(--jkr-green);
    border:           2px solid var(--jkr-green);
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          9px 20px;
    font-size:        14px;
    font-weight:      600;
    border-radius:    4px;
    text-decoration:  none;
    white-space:      nowrap;
    transition: background-color 0.3s ease,
                color            0.3s ease,
                border-color     0.3s ease;
}

.jkr-header-auth-fallback .jkr-auth-btn:hover {
    color:            var(--jkr-green) !important;
    background-color: var(--jkr-white);
    border-color:     var(--jkr-white);
}

/* Logged-in: user avatar */
.jkr-header-auth-fallback .jkr-user-avatar {
    width:        32px;
    height:       32px;
    border-radius: 50%;
    object-fit:   cover;
    cursor:       pointer;
    vertical-align: middle;
}

.jkr-header-auth-fallback .jkr-user-dropdown {
    position:    relative;
    display:     inline-flex;
    align-items: center;
}

.jkr-header-auth-fallback .jkr-user-dropdown-menu {
    display:       none;
    position:      absolute;
    top:           calc(100% + 8px);
    right:         0;
    min-width:     200px;
    background:    var(--jkr-white);
    border-radius: 8px;
    box-shadow:    0 4px 24px rgba(0, 0, 0, 0.12);
    z-index:       9999;
    padding:       8px 0;
    list-style:    none;
    margin:        0;
}

.jkr-header-auth-fallback .jkr-user-dropdown:hover .jkr-user-dropdown-menu {
    display: block;
}

.jkr-header-auth-fallback .jkr-user-dropdown-menu li a {
    display:         block;
    padding:         10px 18px;
    color:           var(--jkr-dark-text) !important;
    font-size:       14px;
    text-decoration: none;
    transition:      background-color 0.2s ease;
}

.jkr-header-auth-fallback .jkr-user-dropdown-menu li a:hover {
    background-color: var(--jkr-icon-bg);
    color:            var(--jkr-green) !important;
}

/* ----------------------------------------------------------
   MOBILE MENU
   ---------------------------------------------------------- */
.edublink-mobile-menu,
.edublink-mobile-menu .edublink-mobile-menu-nav-wrapper {
    background-color: #1c1e27;
}

.edublink-mobile-menu-nav-wrapper ul li a {
    color:      var(--jkr-white) !important;
    font-size:  15px;
    transition: color 0.3s ease;
}

.edublink-mobile-menu-nav-wrapper ul li a:hover {
    color: var(--jkr-gold) !important;
}

/* ----------------------------------------------------------
   MOBILE MENU — injected extras (.jkr-mobile-extras)
   ---------------------------------------------------------- */
.jkr-mobile-extras {
    padding:       20px 25px;
    border-top:    1px solid rgba(255, 255, 255, 0.1);
    margin-top:    12px;
}

.jkr-mobile-extras .jkr-mobile-user-info {
    display:        flex;
    align-items:    center;
    gap:            12px;
    margin-bottom:  12px;
    padding-bottom: 12px;
    border-bottom:  1px solid rgba(255, 255, 255, 0.1);
}

.jkr-mobile-extras .jkr-mobile-user-info img {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    object-fit:    cover;
}

.jkr-mobile-extras .jkr-mobile-user-name {
    color:       var(--jkr-white);
    font-size:   14px;
    font-weight: 600;
}

.jkr-mobile-extras .jkr-mobile-auth {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-bottom:  16px;
}

.jkr-mobile-extras .jkr-mobile-auth-btn {
    display:         block;
    text-align:      center;
    padding:         11px 20px;
    font-size:       15px;
    font-weight:     600;
    border-radius:   4px;
    text-decoration: none;
    transition:      background-color 0.3s ease, color 0.3s ease;
}

.jkr-mobile-extras .jkr-mobile-auth-btn.jkr-signin {
    background-color: var(--jkr-green);
    color:            var(--jkr-white) !important;
    border:           2px solid var(--jkr-green);
}

.jkr-mobile-extras .jkr-mobile-auth-btn.jkr-signin:hover {
    background-color: transparent;
    border-color:     var(--jkr-white);
}

.jkr-mobile-extras .jkr-mobile-auth-btn.jkr-signup {
    background-color: transparent;
    color:            var(--jkr-white) !important;
    border:           2px solid var(--jkr-green);
}

.jkr-mobile-extras .jkr-mobile-auth-btn.jkr-signup:hover {
    background-color: var(--jkr-green);
}

.jkr-mobile-extras .jkr-mobile-auth-btn.jkr-logout {
    background-color: transparent;
    color:            rgba(255, 255, 255, 0.7) !important;
    border:           1px solid rgba(255, 255, 255, 0.2);
    font-size:        13px;
    padding:          8px 20px;
}

/* Mobile language switcher */
.jkr-mobile-extras .jkr-mobile-lang {
    margin-top: 8px;
}

.jkr-mobile-extras .jkr-mobile-lang .wpml-ls,
.jkr-mobile-extras .jkr-mobile-lang ul {
    background: transparent !important;
    padding:    0 !important;
}

.jkr-mobile-extras .jkr-mobile-lang a {
    color:     rgba(255, 255, 255, 0.7) !important;
    font-size: 13px;
}

.jkr-mobile-extras .jkr-mobile-lang a:hover {
    color: var(--jkr-gold) !important;
}