/* ==========================================================================
   Syntex Auth Nav — v1.2.0
   ========================================================================== */

/* ── CSS Custom Properties — overridden at runtime by admin settings ──────── */
:root {
    --san-navy:             #0d2340;
    --san-navy-hover:       #091929;
    --san-signin-color:     #0d2340;
    --san-signin-hover-bg:  #0d2340;
    --san-signin-hover-color: #ffffff;
    --san-text-light:       #ffffff;
    --san-avatar-bg:        #b0bec5;
    --san-avatar-size:      30px;
    --san-chevron-color:    rgba(255,255,255,0.75);
    --san-divider-color:    #cbd5e1;
    --san-dropdown-bg:      #ffffff;
    --san-dropdown-border:  #e2e8f0;
    --san-dropdown-shadow:  0 10px 28px rgba(0,0,0,.14);
    --san-dropdown-radius:  10px;
    --san-item-hover-bg:    #f1f5f9;
    --san-logout-color:     #dc2626;
    --san-logout-hover-bg:  #fef2f2;
    --san-btn-radius:       6px;
    --san-font:             inherit;
    --san-transition:       150ms ease;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.syntex-auth-nav {
    display:     inline-flex;
    align-items: center;
    gap:         10px;
    font-family: var(--san-font);
    position:    relative;
    user-select: none;
    left: 45px;
}

/* ══════════════════════════════════════════════════════════════════════════
   GUEST STATE
   ══════════════════════════════════════════════════════════════════════════ */

/* Sign In — icon + label. On hover: fills to navy pill with white text */
.san-signin-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         7px 14px 7px 10px;
    background:      transparent;
    border:          1.5px solid transparent;
    border-radius:   var(--san-btn-radius);
    color:           var(--san-signin-color);
    font-size:       .9375rem;
    font-weight:     600;
    line-height:     1;
    text-decoration: none;
    cursor:          pointer;
    transition:      background var(--san-transition), color var(--san-transition), border-color var(--san-transition);
}
.san-signin-btn:hover,
.san-signin-btn:focus-visible {
    background:   var(--san-signin-hover-bg);
    color:        var(--san-signin-hover-color);
    border-color: var(--san-signin-hover-bg);
    outline:      none;
}
.san-signin-btn .san-hex-icon {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}
.san-signin-btn .san-hex-icon svg {
    width:   28px;
    height:  28px;
    display: block;
    transition: stroke var(--san-transition);
}
.san-signin-btn .san-btn-label {
    white-space: nowrap;
}

/* Divider */
.san-divider {
    color:          var(--san-divider-color);
    font-size:      1.1rem;
    line-height:    1;
    pointer-events: none;
    font-weight:    300;
}

/* Register button */
.san-register-btn {
    display:         inline-flex;
    align-items:     center;
    padding:         9px 22px;
    border-radius:   var(--san-btn-radius);
    background:      var(--san-navy);
    color:           var(--san-text-light);
    font-size:       .9375rem;
    font-weight:     600;
    line-height:     1;
    text-decoration: none;
    cursor:          pointer;
    transition:      background var(--san-transition);
    white-space:     nowrap;
}
.san-register-btn:hover,
.san-register-btn:focus-visible {
    background: var(--san-navy-hover);
    color:      var(--san-text-light);
    outline:    none;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGGED-IN STATE — dark navy pill [avatar] username ▾
   ══════════════════════════════════════════════════════════════════════════ */
.san-account-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           9px;
    padding:       8px 12px 8px 8px;
    border:        none;
    border-radius: 6px;
    background:    var(--san-navy);
    color:         var(--san-text-light);
    font-family:   var(--san-font);
    font-size:     .9375rem;
    font-weight:   500;
    line-height:   1;
    cursor:        pointer;
    transition:    background var(--san-transition);
    white-space:   nowrap;
}
.san-account-btn:hover,
.san-account-btn:focus-visible {
    background: var(--san-navy-hover);
    outline:    none;
}

/* Avatar circle */
.san-avatar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--san-avatar-size);
    height:          var(--san-avatar-size);
    border-radius:   50%;
    background:      var(--san-avatar-bg);
    flex-shrink:     0;
    overflow:        hidden;
}
.san-avatar .san-gravatar,
.san-avatar img {
    width:         100%;
    height:        100%;
    border-radius: 50%;
    object-fit:    cover;
    display:       block;
}
.san-avatar .san-avatar-icon {
    width:   18px;
    height:  18px;
    display: block;
    color:   #fff;
}
.san-avatar .san-avatar-icon svg {
    width:  18px;
    height: 18px;
    display: block;
}

/* Username */
.san-account-btn .san-btn-label {
    font-size:      .9375rem;
    font-weight:    500;
    letter-spacing: .01em;
}

/* Chevron */
.san-account-btn .san-chevron {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    color:       var(--san-chevron-color);
    transition:  transform var(--san-transition);
}
.san-account-btn .san-chevron svg {
    width:        14px;
    height:       14px;
    display:      block;
    stroke-width: 2.5;
}
.san-account-btn[aria-expanded="true"] .san-chevron {
    transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════════════════
   DROPDOWN
   ══════════════════════════════════════════════════════════════════════════ */
.san-dropdown {
    display:        none;
    position:       absolute;
    top:            calc(100% + 8px);
    right:          0;
    min-width:      210px;
    background:     var(--san-dropdown-bg);
    border:         1px solid var(--san-dropdown-border);
    border-radius:  var(--san-dropdown-radius);
    box-shadow:     var(--san-dropdown-shadow);
    list-style:     none;
    margin:         0;
    padding:        6px 0;
    z-index:        99999;
    overflow:       hidden;
    opacity:        0;
    transform:      translateY(-6px);
    transition:     opacity var(--san-transition), transform var(--san-transition);
    pointer-events: none;
}
.san-dropdown.is-open {
    display:        block;
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}
.san-dd-item a {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 18px;
    color:           #1e293b;
    font-size:       .875rem;
    font-weight:     400;
    text-decoration: none;
    transition:      background var(--san-transition), color var(--san-transition);
}
.san-dd-item a:hover,
.san-dd-item a:focus-visible {
    background: var(--san-item-hover-bg);
    color:      #0f172a;
    outline:    none;
}
.san-dd-item .san-dd-icon {
    flex-shrink: 0;
    width:       18px;
    height:      18px;
    opacity:     .55;
    display:     flex;
    align-items: center;
}
.san-dd-item .san-dd-icon svg {
    width:   18px;
    height:  18px;
    display: block;
}
.san-dd-logout {
    border-top:  1px solid var(--san-dropdown-border);
    margin-top:  4px;
    padding-top: 4px;
}
.san-dd-logout a       { color: var(--san-logout-color); }
.san-dd-logout a:hover { background: var(--san-logout-hover-bg); color: var(--san-logout-color); }
.san-dd-logout .san-dd-icon { opacity: .75; }

/* ── A11y ─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .san-dropdown, .san-account-btn, .san-signin-btn,
    .san-register-btn, .san-chevron { transition: none; }
}
/* Only targets devices between 768px and 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .syntex-auth-nav{
        left: 20px;
    }
}
/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .san-dropdown { right: auto; left: 0; }
    .syntex-auth-nav{
        left: 10px;
    }
}