/**
 * H2J Ecosystem — Social networks visual styles (h2j-social.css)
 *
 * Implémente les classes CSS générées par H2JSocial::getCssClasses() :
 *   .h2j-social                          — container flex par défaut
 *   .h2j-social-style-{color|black|white|gray|outline|ghost}
 *   .h2j-social-icon-color-{brand|white|black|gray}
 *   .h2j-social-shape-{round|square}
 *   .h2j-social-size-{s|sm|m|md|l|lg|xl}
 *   .h2j-social-hover-{lift|grow|glow|none}
 *   .h2j-social-theme-{dark|light|auto}
 *   .h2j-social-{followus|footer|sharegate|soongate|mailgate}   — scope contexte
 *
 * La couleur marque d'un réseau est fournie en inline style via `--h2j-social-brand`
 * sur chaque <a>. Le CSS utilise cette variable pour les styles "color" et
 * les effets "glow" sans dépendre du nom du réseau (design scalable).
 *
 * Scope spécial drawer megamenu :
 *   .h2j-mm-tree__item--module-widget .h2jeco-follow-us-widget
 * pour un rendu compact cohérent avec le design drawer.
 *
 * @author    H2J Ecosystem <info@2klove.fr>
 * @copyright 2024-2026 H2J sas RCS 978391720
 * @license   Commercial license
 * @since     v2.4.0.9
 */

/* ---------------------------------------------------------------
   1. WIDGET WRAPPER (followus context)
   Le titre et la police héritent du parent (drawer/footer/etc.)
   pour garantir la cohérence avec le thème actif (CUBX presets,
   classic PS, ou n'importe quel autre thème).
   --------------------------------------------------------------- */
.h2jeco-follow-us-widget {
    display: block;
    width: 100%;
    /* Pas de font-family forcée — héritage naturel du parent */
    /* Pas de color forcée — héritage naturel du parent */
}

.h2jeco-follow-us-widget__title {
    font-size: 13px;
    font-weight: 600;
    /* color: inherit permet au titre d'adopter automatiquement la couleur
       de texte du contexte parent (drawer sombre = clair, footer clair = sombre).
       Fallback sur --h2j-text si le parent n'a rien défini. */
    color: inherit;
    font-family: inherit;
    line-height: 1.4;
    margin: 0 0 10px;
    letter-spacing: inherit;
}

/* ---------------------------------------------------------------
   2. CONTAINER — .h2j-social (layout racine)
   Flex row horizontal avec wrap automatique si débordement.
   --------------------------------------------------------------- */
.h2j-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* ---------------------------------------------------------------
   3. ICON BASE — .h2j-social-icon
   Chaque <a> est un bouton cliquable carré/rond selon la shape.
   Taille et couleur sont pilotées par les modifier classes.
   --------------------------------------------------------------- */
.h2j-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    /* !important pour résister aux `a { transition: color 0.3s }` globaux
       des thèmes PS qui écrasent la transition entière (shorthand CSS). */
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease !important;
    color: inherit;
    background: transparent;
    border: 0 solid transparent;
    box-sizing: border-box;
}

.h2j-social-icon:hover,
.h2j-social-icon:focus-visible {
    text-decoration: none;
    outline: none;
}

.h2j-social-icon:focus-visible {
    outline: 2px solid var(--h2j-primary, #7c3aed);
    outline-offset: 2px;
}

/* SVG prend 60% de la largeur du bouton parent pour laisser un padding uniforme.
   currentColor permet aux styles (bg, outline, ghost) de piloter la teinte.
   v2.15.29 : passe de 55% à 60% pour des icônes plus présentes visuellement
   (rendu plus proche du pattern idyll.fr H2JTools). */
.h2j-social-icon svg {
    width: 60%;
    height: 60%;
    display: block;
    fill: currentColor;
    pointer-events: none;
}

/* ---------------------------------------------------------------
   4. SIZES
   H2JDS_SOCIAL_SIZE peut valoir S/M/L/XL (uppercase) ou sm/md/lg/xl
   selon la version du template. getCssClasses() applique strtolower()
   et les valeurs historiques donnent parfois juste 'm'. On supporte
   les deux conventions pour être défensif.
   --------------------------------------------------------------- */
.h2j-social-size-s .h2j-social-icon,
.h2j-social-size-sm .h2j-social-icon {
    width: 24px;
    height: 24px;
}

.h2j-social-size-m .h2j-social-icon,
.h2j-social-size-md .h2j-social-icon {
    width: 32px;
    height: 32px;
}

.h2j-social-size-l .h2j-social-icon,
.h2j-social-size-lg .h2j-social-icon {
    width: 40px;
    height: 40px;
}

.h2j-social-size-xl .h2j-social-icon {
    width: 48px;
    height: 48px;
}

/* ---------------------------------------------------------------
   5. SHAPES
   Trois formes supportées (cohérent avec les 3 options BO) :
   - round   : cercle complet (50%)
   - rounded : coins arrondis intermédiaires (12px)
   - square  : quasi-carré avec léger adoucissement (4px)

   Le !important garantit la prise en compte même en cas d'override
   du thème parent (certains thèmes PS forcent border-radius:0 sur
   les liens dans le drawer/footer/header).
   --------------------------------------------------------------- */
.h2j-social-shape-round .h2j-social-icon {
    border-radius: 50% !important;
}

.h2j-social-shape-rounded .h2j-social-icon {
    border-radius: 12px !important;
}

.h2j-social-shape-square .h2j-social-icon {
    border-radius: 4px !important;
}

/* ---------------------------------------------------------------
   6. BG STYLES
   Définissent le fond + couleur texte par défaut du bouton.
   Peuvent être override par la couleur icône (section 7).
   --------------------------------------------------------------- */

/* "color" = couleur officielle du réseau (Facebook bleu, Instagram rose, etc.).
   Utilise la variable --h2j-social-brand injectée en inline style. */
.h2j-social-style-color .h2j-social-icon {
    background-color: var(--h2j-social-brand, #64748b);
    color: var(--h2j-social-brand-fg, #ffffff);
    border-color: transparent;
}

.h2j-social-style-black .h2j-social-icon {
    background-color: #000000;
    color: #ffffff;
    border-color: transparent;
}

.h2j-social-style-white .h2j-social-icon {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid var(--h2j-border, #e5e7eb);
}

.h2j-social-style-gray .h2j-social-icon {
    background-color: #6b7280;
    color: #ffffff;
    border-color: transparent;
}

/* "outline" = fond transparent + bordure en couleur marque */
.h2j-social-style-outline .h2j-social-icon {
    background-color: transparent;
    color: var(--h2j-social-brand, #64748b);
    border: 1.5px solid currentColor;
}

/* "ghost" = fond transparent, uniquement l'icône colorée */
.h2j-social-style-ghost .h2j-social-icon {
    background-color: transparent;
    color: var(--h2j-social-brand, #64748b);
    border-color: transparent;
}

/* ---------------------------------------------------------------
   7. ICON COLOR OVERRIDES
   Permettent de forcer la couleur de l'icône SVG indépendamment
   du bg_style. Priorité supérieure grâce à !important car c'est
   un override explicite depuis la config BO.
   --------------------------------------------------------------- */
.h2j-social-icon-color-brand .h2j-social-icon {
    color: var(--h2j-social-brand, #64748b) !important;
}

.h2j-social-icon-color-white .h2j-social-icon {
    color: #ffffff !important;
}

.h2j-social-icon-color-black .h2j-social-icon {
    color: #000000 !important;
}

.h2j-social-icon-color-gray .h2j-social-icon {
    color: #9ca3af !important;
}

/* ---------------------------------------------------------------
   8. HOVER EFFECTS
   Le !important est nécessaire car les thèmes PS / CUBX définissent
   souvent des règles globales sur a:hover (transform, box-shadow,
   text-decoration) qui ont une spécificité suffisante pour override
   nos effets. Même pattern défensif que pour les shapes.

   Effets alignés avec le select BO (configure.tpl l.614-619) :
   - glow    : halo lumineux couleur marque
   - zoom    : scale up (BO = "Zoom", alias CSS de l'ancien "grow")
   - lift    : translateY négatif (BO = "Elevation")
   - fade    : opacité réduite au repos, pleine au hover
   - brand   : fond passe à la couleur officielle du réseau (effet idyll.fr)
   - none    : pas d'effet
   --------------------------------------------------------------- */
.h2j-social-hover-lift .h2j-social-icon:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* zoom (BO value) + grow (ancienne constante PHP, rétrocompat) */
.h2j-social-hover-zoom .h2j-social-icon:hover,
.h2j-social-hover-grow .h2j-social-icon:hover {
    transform: scale(1.12) !important;
}

.h2j-social-hover-glow .h2j-social-icon:hover {
    box-shadow: 0 0 14px var(--h2j-social-brand, rgba(100, 116, 139, 0.5)) !important;
    transform: translateY(-1px) !important;
}

/* fade : icônes légèrement estompées au repos, pleines au hover */
.h2j-social-hover-fade .h2j-social-icon {
    opacity: 0.55;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease,
                background-color 0.2s ease, color 0.2s ease !important;
}
.h2j-social-hover-fade .h2j-social-icon:hover {
    opacity: 1 !important;
}

/* brand : au hover le fond passe à la couleur officielle du réseau.
   Effet signature idyll.fr : les icônes sont en noir (ou autre bg)
   au repos, et "révèlent" leur couleur marque au survol.
   Utilise --h2j-social-brand injecté en inline style sur chaque <a>. */
.h2j-social-hover-brand .h2j-social-icon:hover {
    background-color: var(--h2j-social-brand, #64748b) !important;
    color: var(--h2j-social-brand-fg, #ffffff) !important;
    border-color: var(--h2j-social-brand, #64748b) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

/* Pour outline/ghost au hover, on "remplit" le bouton avec la couleur marque
   pour donner un feedback visuel plus riche que juste le transform. */
.h2j-social-style-outline .h2j-social-icon:hover,
.h2j-social-style-ghost .h2j-social-icon:hover {
    background-color: var(--h2j-social-brand, #64748b) !important;
    color: #ffffff !important;
    border-color: var(--h2j-social-brand, #64748b) !important;
}

/* ---------------------------------------------------------------
   9. THEME OVERRIDES (dark/light auto)
   Appliqués seulement si theme != auto dans la config.
   Utilisés principalement pour le style "white" qui doit s'adapter
   à un fond sombre (inversion automatique du contraste).
   --------------------------------------------------------------- */
.h2j-social-theme-dark .h2j-social-style-white .h2j-social-icon {
    background-color: rgba(255, 255, 255, 0.95);
    color: #1a1f2c;
    border-color: rgba(255, 255, 255, 0.3);
}

.h2j-social-theme-dark .h2j-social-style-outline .h2j-social-icon,
.h2j-social-theme-dark .h2j-social-style-ghost .h2j-social-icon {
    color: rgba(255, 255, 255, 0.9);
}

/* ---------------------------------------------------------------
   10. SCOPE — Drawer megamenu (compact)
   Quand le widget est rendu dans un item de type module_widget
   du drawer H2J Ecosystem, on ajuste le titre et le padding pour
   s'aligner sur les autres items du drawer.

   Le padding horizontal du <li> parent est géré ici de façon partagée
   pour tous les widgets module (follow-us, h2jchat eve, etc.) afin d'éviter
   les doubles paddings si plusieurs modules déclarent leur propre scope.
   Si un autre widget module redéclare cette règle avec la même valeur
   (12px), CSS résout sans conflit — c'est voulu.
   --------------------------------------------------------------- */
.h2j-mm-tree__item--module-widget {
    padding: 0 12px;
}

/* Le wrapper .h2jeco-follow-us-widget n'applique que le padding vertical ;
   le padding horizontal vient du <li> parent (règle ci-dessus). */
.h2j-mm-tree__item--module-widget .h2jeco-follow-us-widget {
    padding: 12px 0 16px;
}

/* Dans le drawer : le titre adopte la coul/font du drawer via inherit.
   Le font-size, font-weight, text-transform et letter-spacing sont spécifiés
   pour un rendu uniforme avec les autres sections du drawer (style « label
   de section » discret au-dessus du contenu). */
.h2j-mm-tree__item--module-widget .h2jeco-follow-us-widget__title {
    font-size: 11px;
    font-weight: 700;
    color: inherit;
    opacity: 0.65; /* légerement estompé pour un look de section header */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px;
}

/* Les icônes dans le drawer : gap un peu plus resserré pour compenser
   la largeur limitée du drawer (320px par défaut).
   overflow:visible garantit que les effets hover (lift, glow, grow)
   ne sont pas coupés par un overflow:auto parent. */
.h2j-mm-tree__item--module-widget .h2j-social-followus {
    gap: 8px;
    overflow: visible;
}

/* ---------------------------------------------------------------
   11. ACCESSIBILITY — reduced motion
   Respecte la préférence système de l'utilisateur.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .h2j-social-icon,
    .h2j-social-icon:hover {
        transition: none !important;
        transform: none !important;
    }
}