/* ============================================================
   Sticky Social & Translator Bar  v1.7  — sst-style.css
   Design tokens match Gilliou theme (Cormorant Garamond + Jost)
   ============================================================ */

/* ── PLUGIN TOKENS — match Gilliou palette ── */
:root {
    --sst-bg:        #2C3828;   /* Gilliou --brown */
    --sst-icon:      #F7F5F0;   /* Gilliou --cream */
    --sst-accent:    #B8986A;   /* Gilliou --gold  */
    --sst-accent-dk: #8C7040;   /* Gilliou --gold-dark */
    --sst-panel-bg:  #FFFFFF;
    --sst-panel-txt: #1A1E16;   /* Gilliou --charcoal */
    --sst-panel-sub: #6B7A66;   /* Gilliou --muted */
    --sst-panel-bdr: #D4DDD4;   /* Gilliou --border */
    --sst-radius:    22px;
    --sst-speed:     250ms cubic-bezier(0.4,0,0.2,1);
}

/* ── DARK MODE overrides for panel ── */
html.dark-mode {
    --sst-panel-bg:  #141E14;
    --sst-panel-txt: #E8F0E8;
    --sst-panel-sub: #6A7A65;
    --sst-panel-bdr: #283228;
}

/* ══ THE BAR ══ */
#sst-bar {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    opacity: 0;
    transform: translateX(70px);
    transition: opacity .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}
#sst-bar.sst-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* ══ ITEMS ══ */
.sst-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px 0 12px;
    background: var(--sst-bg);
    color: var(--sst-icon);
    text-decoration: none;
    cursor: pointer;
    border: none;
    outline: none;
    box-shadow: -2px 2px 10px rgba(26,30,22,.25);
    transition: background var(--sst-speed), padding var(--sst-speed), box-shadow var(--sst-speed);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    font-family: 'Jost', -apple-system, sans-serif;
}
.sst-item:hover,
.sst-item:focus-visible {
    background: var(--sst-accent);
    padding-right: 20px;
    box-shadow: -3px 3px 18px rgba(184,152,106,.35);
    outline: none;
}

/* ── ICON ── */
.sst-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.sst-icon svg { width:100%; height:100%; display:block; color:inherit; }

/* ── LABEL ── */
.sst-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: inherit;
    white-space: nowrap;
}

/* ── TOOLTIP (icon-only mode) ── */
.sst-item {
    position: relative;
}
.sst-item::after {
    content: attr(aria-label);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26,30,22,.88);
    color: #F7F5F0;
    font-size: 11px;
    font-family: 'Jost', -apple-system, sans-serif;
    font-weight: 500;
    letter-spacing: .06em;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
/* Only show tooltip when no visible label */
.sst-item:not(:has(.sst-label)):hover::after { opacity: 1; }
/* Don't show tooltip on the dark mode button — it has its own label logic */
#sst-darkmode-btn::after { display: none; }

/* ══ DARK MODE BUTTON ══ */
#sst-darkmode-btn .sst-icon-sun,
#sst-darkmode-btn .sst-icon-moon { transition: opacity .2s, transform .3s; }

/* light mode: show moon (click to go dark) */
html:not(.dark-mode) #sst-darkmode-btn .sst-icon-sun  { display:none; }
html:not(.dark-mode) #sst-darkmode-btn .sst-icon-moon { display:flex; }
html:not(.dark-mode) #sst-darkmode-btn .sst-dm-label::after { content: 'Dark'; }

/* dark mode: show sun (click to go light) */
html.dark-mode #sst-darkmode-btn .sst-icon-sun  { display:flex; }
html.dark-mode #sst-darkmode-btn .sst-icon-moon { display:none; }
html.dark-mode #sst-darkmode-btn .sst-dm-label::after { content: 'Light'; }

/* gold ring when dark mode is active */
html.dark-mode #sst-darkmode-btn {
    background: var(--sst-accent);
}
html.dark-mode #sst-darkmode-btn:hover {
    background: var(--sst-accent-dk);
    box-shadow: -3px 3px 18px rgba(184,152,106,.4);
}

/* ══ LANGUAGE PANEL ══ */
#sst-lang-panel {
    display: none;
    flex-direction: column;
    gap: 3px;
    position: fixed;
    z-index: 100000;
    background: var(--sst-panel-bg);
    border-radius: 12px;
    padding: 10px 8px;
    min-width: 178px;
    box-shadow: 0 12px 40px rgba(26,30,22,.18), 0 2px 8px rgba(26,30,22,.08);
    border: 1px solid var(--sst-panel-bdr);
}
#sst-lang-panel.sst-open {
    display: flex;
    animation: sstPanelIn .2s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sstPanelIn {
    from { opacity:0; transform:scale(.88) translateY(4px); }
    to   { opacity:1; transform:scale(1)   translateY(0);   }
}

.sst-lang-title {
    font-family: 'Jost', -apple-system, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sst-panel-sub);
    padding: 2px 8px 7px;
    border-bottom: 1px solid var(--sst-panel-bdr);
    margin-bottom: 3px;
}

.sst-lang-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    text-align: left;
    transition: background var(--sst-speed);
}
.sst-lang-btn:hover    { background: rgba(184,152,106,.1); }
.sst-lang-btn.sst-active { background: rgba(184,152,106,.15); }

.sst-lang-flag { font-size: 20px; line-height: 1; flex-shrink: 0; }
.sst-lang-name {
    font-family: 'Jost', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--sst-panel-txt);
    flex: 1;
}
.sst-lang-check {
    font-size: 12px;
    color: var(--sst-accent);
    font-weight: 700;
    opacity: 0;
    transition: opacity .15s;
}
.sst-lang-btn.sst-active .sst-lang-check { opacity: 1; }
#sst-translate-btn.sst-active { background: var(--sst-accent); }

/* ══ MOBILE ══ */
@media (max-width: 500px) {
    #sst-bar {
        position: fixed !important;
        top: auto !important;
        bottom: 14px !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        transform: translateY(80px) !important;
        opacity: 0;
    }
    #sst-bar.sst-visible {
        transform: translateY(0) !important;
        opacity: 1;
    }
    .sst-item {
        border-radius: 50% !important;
        width: 42px;
        height: 42px;
        padding: 0 !important;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(26,30,22,.2);
    }
    .sst-label, .sst-dm-label { display: none; }
    .sst-item::after { display: none !important; }
    #sst-darkmode-btn .sst-icon-sun,
    #sst-darkmode-btn .sst-icon-moon { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    #sst-bar, .sst-item, #sst-lang-panel { transition: none !important; animation: none !important; }
}