/* ============================================================
   78-SOCIAL-BAR.CSS
   Template Factory — Social Bar Component

   Component: social-bar
   Variants:
     slb-01  Vertical floating   — абсолютно справа, вертикально по центру
     slb-02  Vertical inline     — инлайн-колонка внутри слота
     slb-03  Horizontal inline   — горизонтальная строка

   Sizes:   sm / md (default) / lg
   Colors:  default / light / dark / primary

   Правило: NO nesting-dependent rules (.slot > .social-bar).
   Каждый компонент самодостаточен.
   ============================================================ */


/* ============================================================
   TOKENS
   ============================================================ */

:root {
    --social-bar-icon-size-sm:   1rem;      /* 16px */
    --social-bar-icon-size-md:   1.25rem;   /* 20px */
    --social-bar-icon-size-lg:   1.625rem;  /* 26px */

    --social-bar-link-size-sm:   2rem;      /* 32px */
    --social-bar-link-size-md:   2.5rem;    /* 40px */
    --social-bar-link-size-lg:   3rem;      /* 48px */

    --social-bar-gap-sm:         var(--space-2);
    --social-bar-gap-md:         var(--space-3);
    --social-bar-gap-lg:         var(--space-4);

    /* Default link color — semi-transparent on any background */
    --social-bar-color:          var(--text-secondary);
    --social-bar-color-hover:    var(--text-primary);
    --social-bar-bg:             transparent;
    --social-bar-bg-hover:       rgba(0, 0, 0, 0.07);
    --social-bar-radius:         var(--radius-full);

    /* Floating variant specifics */
    --social-bar-floating-offset: var(--space-6);    /* distance from section edge */
    --social-bar-divider-color:  rgba(255, 255, 255, 0.3);
}


/* ============================================================
   BASE
   ============================================================ */

.social-bar {
    /* nav wrapper */
}

.social-bar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--social-bar-gap-md);
    align-items: center;
}

.social-bar__item {
    /* li */
}

.social-bar__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:  var(--social-bar-link-size-md);
    height: var(--social-bar-link-size-md);
    border-radius: var(--social-bar-radius);
    background: var(--social-bar-bg);
    color: var(--social-bar-color);
    text-decoration: none;
    transition: color var(--duration-fast), background var(--duration-fast),
                transform var(--duration-fast);
    font-size: var(--social-bar-icon-size-md);
    line-height: 1;
}

.social-bar__link:hover,
.social-bar__link:focus-visible {
    color: var(--social-bar-color-hover);
    background: var(--social-bar-bg-hover);
    transform: translateY(-2px);
    outline: none;
}

.social-bar__link:focus-visible {
    box-shadow: 0 0 0 2px var(--primary);
    transform: none;
}


/* ============================================================
   VARIANTS
   ============================================================ */

/* --- slb-01 Floating vertical (right side of section) ---
   Секция должна иметь position: relative (у .section есть по умолчанию).
   Вертикальная линия сверху и снизу — декоративный акцент. */

.social-bar--floating {
    position: absolute;
    right: var(--social-bar-floating-offset);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.social-bar--floating .social-bar__list {
    flex-direction: column;
    gap: var(--social-bar-gap-md);
}

/* Декоративная вертикальная линия над и под иконками */
.social-bar--floating .social-bar__list::before,
.social-bar--floating .social-bar__list::after {
    content: '';
    display: block;
    width: 1px;
    height: 3rem;
    background: var(--social-bar-divider-color);
    margin-inline: auto;
}

/* Без декоративных линий */
.social-bar--floating .social-bar__list.no-lines::before,
.social-bar--floating .social-bar__list.no-lines::after {
    display: none;
}

/* На мобильных — floating скрывается (нет места) */
@media (max-width: 768px) {
    .social-bar--floating {
        display: none;
    }
}


/* --- slb-02 Vertical inline --- */

.social-bar--vertical .social-bar__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--social-bar-gap-sm);
}


/* --- slb-03 Horizontal inline --- */

.social-bar--horizontal .social-bar__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--social-bar-gap-md);
}


/* ============================================================
   SIZE MODIFIERS
   ============================================================ */

.social-bar--sm .social-bar__link {
    width:  var(--social-bar-link-size-sm);
    height: var(--social-bar-link-size-sm);
    font-size: var(--social-bar-icon-size-sm);
}

.social-bar--lg .social-bar__link {
    width:  var(--social-bar-link-size-lg);
    height: var(--social-bar-link-size-lg);
    font-size: var(--social-bar-icon-size-lg);
}


/* ============================================================
   COLOR MODIFIERS
   ============================================================ */

/* Light — for dark backgrounds (icons are white/light) */
.social-bar--light {
    --social-bar-color:       rgba(255, 255, 255, 0.75);
    --social-bar-color-hover: rgba(255, 255, 255, 1);
    --social-bar-bg-hover:    rgba(255, 255, 255, 0.12);
    --social-bar-divider-color: rgba(255, 255, 255, 0.3);
}

/* Dark — for light backgrounds */
.social-bar--dark {
    --social-bar-color:       rgba(0, 0, 0, 0.55);
    --social-bar-color-hover: rgba(0, 0, 0, 0.85);
    --social-bar-bg-hover:    rgba(0, 0, 0, 0.07);
    --social-bar-divider-color: rgba(0, 0, 0, 0.15);
}

/* Primary — brand accent color */
.social-bar--primary {
    --social-bar-color:       var(--primary);
    --social-bar-color-hover: var(--primary-dark, var(--primary));
    --social-bar-bg-hover:    var(--primary-alpha-10, rgba(0, 0, 0, 0.07));
}