/* ==========================================================================
   Syntex Auth Nav — v1.1.0
   Pixel-matched to NAW Controls design:
     Guest:     hexagon-user icon  +  "Sign In" text  (no border/bg)
     Logged in: dark navy pill  |  circular grey avatar  |  username  |  chevron
   ========================================================================== */

/* ── CSS Custom Properties ────────────────────────────────────────────────── */
:root {
    --san-navy:             #0d2340;   /* exact dark from screenshots            */
    --san-navy-hover:       #091929;
    --san-text-navy:        #0d2340;   /* Sign In text colour                   */
    --san-text-light:       #ffffff;
    --san-avatar-bg:        #b0bec5;   /* the grey circle behind the avatar      */
    --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-radius:           9999px;
    --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;
}

/* ══════════════════════════════════════════════════════════════════════════
   GUEST STATE — icon + "Sign In" text, no background, no border
   ══════════════════════════════════════════════════════════════════════════ */
.san-signin-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    padding:         4px 0;                 /* no pill — just bare icon + text  */
    background:      transparent;
    border:          none;
    color:           var(--san-text-navy);
    font-size:       1rem;
    font-weight:     600;
    line-height:     1;
    text-decoration: none;
    cursor:          pointer;
    transition:      opacity var(--san-transition);
}
.san-signin-btn:hover,
.san-signin-btn:focus-visible {
    opacity: .75;
    outline: none;
}

/* Hexagonal user icon — sized to match screenshot (~32×32px visually) */
.san-signin-btn .san-hex-icon {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}
.san-signin-btn .san-hex-icon svg {
    width:   30px;
    height:  30px;
    display: block;
}

.san-signin-btn .san-btn-label {
    font-size:   1rem;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* ── Divider  |  between Sign In and Register ────────────────────────────── */
.san-divider {
    color:          var(--san-divider-color);
    font-size:      1.1rem;
    line-height:    1;
    pointer-events: none;
    font-weight:    300;
}

/* ── Register button (solid navy pill) ───────────────────────────────────── */
.san-register-btn {
    display:         inline-flex;
    align-items:     center;
    padding:         10px 22px;
    border-radius:   6px;
    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;
}
.san-account-btn:focus{
    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;
    /* left padding tight against the avatar, right padding for chevron */
    padding:       7px 12px 7px 12px;
    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 — grey disc, user icon inside ─────────────────────────── */
.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;
}
/* When showing a real Gravatar image */
.san-avatar .san-gravatar,
.san-avatar img {
    width:         100%;
    height:        100%;
    border-radius: 50%;
    object-fit:    cover;
    display:       block;
}
/* Fallback silhouette icon inside grey circle */
.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 label ──────────────────────────────────────────────────────── */
.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 PANEL
   ══════════════════════════════════════════════════════════════════════════ */
.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;
}

/* ── Dropdown items ──────────────────────────────────────────────────────── */
.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;
}

/* Logout row */
.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 / motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .san-dropdown,
    .san-account-btn,
    .san-signin-btn,
    .san-register-btn,
    .san-chevron {
        transition: none;
        padding: 5px 12px 5px 5px;        
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .san-dropdown {
        right: auto;
        left:  0;
    }
}