/**
 * Stile componente del blocco `bricks/share`.
 *
 * Caricato in front solo sulle pagine che contengono il blocco
 * (enqueue selettivo via `render_block` in block.php).
 *
 * SCHEMA DI VARIABILI — due livelli, come bricks/cta
 * ---------------------------------------------------
 * 1) Token PUBBLICI del core (`tailwind/preset.css`):
 *    --bricks-share-trigger-radius / -padding-x / -padding-y
 *    --bricks-share-trigger-primary-text / -primary-bg-hover / -primary-text-hover
 *    --bricks-share-trigger-secondary-text / -secondary-bg-hover / -secondary-text-hover
 *    --bricks-share-modal-radius / -padding-x / -padding-y / -max-width
 *    --bricks-share-btn-size / --bricks-share-float-btn-size
 *    Sovrascrivibili dal tema cliente nel proprio @theme.
 *
 * 2) Variabili "ruolo" INTERNE (questo file):
 *    --bricks-share--trigger-bg / -text / -border / -bg-hover / -text-hover
 *    --bricks-share--trigger-color-base / -color-contrast
 *
 * SEMVER — selettori CSS pubblici (conventions.md §6):
 * - .bricks-share / .bricks-share--mode-all / .bricks-share--mode-mobile-only
 * - .bricks-share__trigger + modifier stile + modifier colore
 * - .bricks-share__modal / .bricks-share__modal-inner
 * - .bricks-share__title / .bricks-share__close
 * - .bricks-share__buttons / .bricks-share__btn + .bricks-share__btn--{network}
 * - .bricks-share__inline / .bricks-share__floating / .bricks-share__float-btn
 * Rinominarli è MAJOR.
 */

/* ── Trigger (mode = all) ─────────────────────────────────────────────────── */

.bricks-share__trigger {
    --bricks-share--trigger-bg:           transparent;
    --bricks-share--trigger-bg-hover:     transparent;
    --bricks-share--trigger-border:       transparent;
    --bricks-share--trigger-color-base:   var(--color-brand);
    --bricks-share--trigger-color-contrast: var(--color-brand-contrast);
    --bricks-share--trigger-text:         var(--bricks-share--trigger-color-base);
    --bricks-share--trigger-text-hover:   var(--bricks-share--trigger-color-base);

    align-items: center;
    background-color: var(--bricks-share--trigger-bg);
    border: 1px solid var(--bricks-share--trigger-border);
    border-radius: var(--bricks-share-trigger-radius);
    color: var(--bricks-share--trigger-text);
    cursor: pointer;
    display: inline-flex;
    font-weight: var(--font-weight-semibold);
    gap: var(--spacing-xs);
    line-height: 1.2;
    padding: var(--bricks-share-trigger-padding-y) var(--bricks-share-trigger-padding-x);
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.bricks-share__trigger:hover,
.bricks-share__trigger:focus-visible {
    background-color: var(--bricks-share--trigger-bg-hover);
    border-color: var(--bricks-share--trigger-bg-hover);
    color: var(--bricks-share--trigger-text-hover);
}

.bricks-share__trigger:focus-visible {
    outline: 2px solid var(--bricks-share--trigger-color-base);
    outline-offset: 2px;
}

/* ── Asse colore: accent / text (default = brand) ──────────────────────────── */

.bricks-share__trigger--accent {
    --bricks-share--trigger-color-base: var(--color-accent);
}

.bricks-share__trigger--text {
    --bricks-share--trigger-color-base: var(--color-text);
}

/* ── Asse stile: primary ──────────────────────────────────────────────────── */

.bricks-share__trigger--primary {
    --bricks-share--trigger-bg:        var(--bricks-share--trigger-color-base);
    --bricks-share--trigger-bg-hover:  var(--bricks-share-trigger-primary-bg-hover);
    --bricks-share--trigger-border:    var(--bricks-share--trigger-color-base);
    --bricks-share--trigger-text:      var(--bricks-share-trigger-primary-text);
    --bricks-share--trigger-text-hover: var(--bricks-share-trigger-primary-text-hover);
}

/* ── Asse stile: secondary (outline) ─────────────────────────────────────── */

.bricks-share__trigger--secondary {
    --bricks-share--trigger-bg:        transparent;
    --bricks-share--trigger-bg-hover:  var(--bricks-share-trigger-secondary-bg-hover);
    --bricks-share--trigger-border:    var(--bricks-share-trigger-secondary-text);
    --bricks-share--trigger-text:      var(--bricks-share-trigger-secondary-text);
    --bricks-share--trigger-text-hover: var(--bricks-share-trigger-secondary-text-hover);
}

/* ── Asse stile: ghost (solo icona/testo) ────────────────────────────────── */

.bricks-share__trigger--ghost {
    --bricks-share--trigger-bg:        transparent;
    --bricks-share--trigger-bg-hover:  var(--bricks-share--trigger-color-base);
    --bricks-share--trigger-border:    transparent;
    --bricks-share--trigger-text:      var(--bricks-share--trigger-color-base);
    --bricks-share--trigger-text-hover: var(--bricks-share--trigger-color-contrast);
}

/* Scambio bg ↔ testo per text+primary (stesso pattern di bricks/cta). */
.bricks-share__trigger--text.bricks-share__trigger--primary {
    --bricks-share--trigger-bg-hover:   var(--bricks-share--trigger-color-contrast);
    --bricks-share--trigger-text-hover: var(--bricks-share--trigger-color-base);
}

/* ── Floating button (mode = mobile-only, mobile) ────────────────────────── */

.bricks-share__float-btn {
    align-items: center;
    background-color: var(--color-surface, #fff);
    border: 1px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    height: var(--bricks-share-float-btn-size);
    justify-content: center;
    transition: box-shadow 150ms ease;
    width: var(--bricks-share-float-btn-size);
}

.bricks-share__float-btn:hover,
.bricks-share__float-btn:focus-visible {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.bricks-share__float-btn:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* ── Visibilità desktop/mobile (mode = mobile-only) ──────────────────────── */

/* Su desktop (≥ 768px): inline visibile, floating nascosto. */
.bricks-share--mode-mobile-only .bricks-share__floating {
    display: none;
}

/* Su mobile (< 768px): inline nascosto, floating fisso in basso a destra. */
@media (max-width: 767px) {
    .bricks-share--mode-mobile-only .bricks-share__inline {
        display: none;
    }

    .bricks-share--mode-mobile-only .bricks-share__floating {
        bottom: 1rem;
        display: block;
        position: fixed;
        right: 1rem;
        z-index: 9000;
    }
}

/* ── Sezione inline ───────────────────────────────────────────────────────── */

.bricks-share__inline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ── Titolo ──────────────────────────────────────────────────────────────── */

.bricks-share__title {
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-sm);
}

/* ── Modal (<dialog>) ────────────────────────────────────────────────────── */

.bricks-share__modal {
    border: none;
    border-radius: var(--bricks-share-modal-radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
    margin: auto;
    max-width: var(--bricks-share-modal-max-width);
    padding: 0;
    width: min(90vw, var(--bricks-share-modal-max-width));
}

.bricks-share__modal::backdrop {
    background: rgba(0, 0, 0, 0.46);
}

/* Animazione apertura. open è la classe nativa aggiunta da showModal(). */
.bricks-share__modal[open] {
    animation: bricks-share-modal-in 180ms ease forwards;
}

@keyframes bricks-share-modal-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.bricks-share__modal-inner {
    padding: var(--bricks-share-modal-padding-y) var(--bricks-share-modal-padding-x);
    position: relative;
}

/* ── Pulsante chiudi ──────────────────────────────────────────────────────── */

.bricks-share__close {
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
    position: absolute;
    right: var(--bricks-share-modal-padding-x);
    top: var(--bricks-share-modal-padding-y);
    transition: opacity 150ms ease;
}

.bricks-share__close:hover,
.bricks-share__close:focus-visible {
    opacity: 0.7;
}

.bricks-share__close:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Griglia pulsanti social ─────────────────────────────────────────────── */

.bricks-share__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Pulsante social: icona-only, dimensione fissa. */
.bricks-share__btn {
    align-items: center;
    background: none;
    border: 1px solid currentColor;
    border-radius: var(--bricks-share-btn-radius, var(--radius-sm));
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    height: var(--bricks-share-btn-size);
    justify-content: center;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
    width: var(--bricks-share-btn-size);
}

.bricks-share__btn:hover,
.bricks-share__btn:focus-visible {
    background-color: var(--color-text);
    color: var(--color-brand-contrast);
}

.bricks-share__btn:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* Variante "copiato": icona cambierà in checkmark via JS. */
.bricks-share__btn--copy-link.is-copied {
    background-color: var(--color-text);
    color: var(--color-brand-contrast);
}