/* ═══════════════════════════════════════════════════════
   dm-about-author.css
   Stili per il plugin DM About Author
   Coerente con il tema domenicomonteleone.com (dark + gold)
   v3.4
═══════════════════════════════════════════════════════ */

:root {
    --dm-aa-ink:          #080810;
    --dm-aa-ink-btn:      #0a0a0f;
    --dm-aa-surface:      rgba(255,255,255,.025);
    --dm-aa-line:         rgba(255,255,255,.08);
    --dm-aa-gold:         #FFD700;
    --dm-aa-gold-dim:     rgba(255,215,0,.07);
    --dm-aa-gold-border:  rgba(255,215,0,.22);
    --dm-aa-gold-strong:  rgba(255,215,0,.45);
    --dm-aa-text:         rgba(245,242,235,.93);
    --dm-aa-soft:         rgba(245,242,235,.52);
    --dm-aa-softer:       rgba(245,242,235,.32);
    --dm-aa-outline:      rgba(245,242,235,.2);
    --dm-aa-outline-text: rgba(245,242,235,.65);
    --dm-aa-mono:         'Courier New', Courier, monospace;
    --dm-aa-radius:       0px;
}

/* ── Base comune ── */
.dm-author-box {
    margin: 2.5rem 0 1.5rem;
    font-family: inherit;
}

/* ════════════════════════════════════════════════════
   BOX COMPLETO [about_author]  — INVARIATO
════════════════════════════════════════════════════ */
.dm-author-box--full {
    border: 1px solid var(--dm-aa-gold-border);
    background: var(--dm-aa-surface);
    padding: 1.5rem 1.6rem 1.4rem;
    position: relative;
    overflow: hidden;
}

.dm-author-box__inner {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
}

.dm-author-box__avatar {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dm-author-box__avatar img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--dm-aa-gold-border);
    display: block;
    filter: contrast(1.05);
}

.dm-author-box__content {
    flex: 1;
    min-width: 0;
}

.dm-author-box__top-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .1rem;
}

.dm-author-box__label {
    font-family: var(--dm-aa-mono);
    font-size: .52rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--dm-aa-gold);
    opacity: .6;
    margin: 0;
    white-space: nowrap;
    line-height: 1;
}

.dm-author-box__label-sep {
    display: block;
    height: 1px;
    width: 24px;
    min-width: 24px;
    background: var(--dm-aa-gold-border);
    flex-shrink: 0;
    align-self: center;
}

.dm-author-box__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dm-aa-text);
    margin-top: .5rem !important;
    margin-bottom: .25rem !important;
    line-height: 1.2;
    letter-spacing: .01em;
}

/* ── BUG FIX v3.3: margin-top e margin-bottom erano valori CSS invalidi ── */
.dm-author-box__role {
    font-family: var(--dm-aa-mono);
    font-size: .6rem;
    letter-spacing: .13em;
    color: var(--dm-aa-gold);
    margin-top: .25rem !important;
    margin-bottom: .75rem !important;
    text-transform: uppercase;
    opacity: .75;
    line-height: 1;
}

.dm-author-box__bio {
    font-size: .875rem;
    color: var(--dm-aa-soft);
    line-height: 1.72;
    margin: 0 0 1rem;
    border-left: 1px solid var(--dm-aa-gold-border);
    padding-left: .85rem;
}

.dm-author-box__links {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

.dm-author-box .dm-author-box__cta {
    font-family: 'Roboto', 'Courier New', monospace;
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .6rem 1.2rem;
    background: var(--dm-aa-gold);
    border: 1px solid var(--dm-aa-gold) !important;
    border-bottom: 1px solid var(--dm-aa-gold) !important;
    color: var(--dm-aa-ink-btn) !important;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: opacity .2s;
    min-height: 40px;
}
.dm-author-box .dm-author-box__cta:link,
.dm-author-box .dm-author-box__cta:visited { color: var(--dm-aa-ink-btn) !important; }
.dm-author-box .dm-author-box__cta:hover,
.dm-author-box .dm-author-box__cta:active  { opacity: .88; color: var(--dm-aa-ink-btn) !important; }

.dm-author-box .dm-author-box__linkedin {
    font-family: 'Roboto', 'Courier New', monospace;
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .6rem 1.2rem;
    border: 1px solid var(--dm-aa-outline) !important;
    border-bottom: 1px solid var(--dm-aa-outline) !important;
    color: var(--dm-aa-outline-text) !important;
    background: transparent;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: border-color .2s, color .2s;
    min-height: 40px;
}
.dm-author-box .dm-author-box__linkedin:link,
.dm-author-box .dm-author-box__linkedin:visited { color: var(--dm-aa-outline-text) !important; }
.dm-author-box .dm-author-box__linkedin:hover,
.dm-author-box .dm-author-box__linkedin:active  { border-color: var(--dm-aa-gold-border) !important; color: var(--dm-aa-gold) !important; }

/* ════════════════════════════════════════════════════
   BOX COMPATTO [about_author_short]  — RIVISTO v3.3
   Obiettivo: stesso linguaggio visivo del full,
   senza il peso della bio lunga.
════════════════════════════════════════════════════ */
.dm-author-box--short {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    border: 1px solid var(--dm-aa-gold-border);
    background: var(--dm-aa-surface);
    padding: 1.4rem 1.5rem 1.3rem;
}

.dm-author-box__avatar-sm {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--dm-aa-gold-border);
    filter: contrast(1.05);
    /* aggiunge un leggero margine top per allinearlo alla label */
    margin-top: .15rem;
}

.dm-author-box__content-sm {
    flex: 1;
    min-width: 0;
}

/* ── Top row: label "SCRITTO DA" + separatore ─ come nel full ── */
.dm-author-box__top-row-sm {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .1rem;
}
.dm-author-box__label-sm {
    font-family: var(--dm-aa-mono);
    font-size: .52rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--dm-aa-gold);
    opacity: .6;
    margin: 0;
    white-space: nowrap;
    line-height: 1;
}
.dm-author-box__label-sep-sm {
    display: block;
    height: 1px;
    width: 24px;
    min-width: 24px;
    background: var(--dm-aa-gold-border);
    flex-shrink: 0;
    align-self: center;
}

/* ── Nome su riga propria ── */
.dm-author-box__name-sm {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dm-aa-text);
    margin-top: .45rem !important;
    margin-bottom: .2rem !important;
    line-height: 1.2;
    letter-spacing: .01em;
    display: block;
}

/* ── Ruolo su riga propria ── */
.dm-author-box__role-sm {
    font-family: var(--dm-aa-mono);
    font-size: .6rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--dm-aa-gold);
    opacity: .75;
    margin-top: 0 !important;
    margin-bottom: .7rem !important;
    line-height: 1;
    display: block;
}

/* ── Bio con border-left gold ── */
.dm-author-box__bio-sm {
    font-size: .85rem;
    color: var(--dm-aa-soft);
    line-height: 1.7;
    margin: 0 0 .85rem;
    border-left: 1px solid var(--dm-aa-gold-border);
    padding-left: .8rem;
}

/* ── Link come bottone outline ── */
.dm-author-box__link-sm {
    font-family: 'Roboto', 'Courier New', monospace;
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dm-aa-outline-text) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border: 1px solid var(--dm-aa-outline);
    min-height: 36px;
    transition: border-color .2s, color .2s;
}
.dm-author-box__link-sm:hover {
    border-color: var(--dm-aa-gold-border);
    color: var(--dm-aa-gold) !important;
}

/* Rimuovo il separatore · inline — non più usato */
.dm-author-box__sep { display: none; }

/* ════════════════════════════════════════════════════
   BOX MINI [about_author_mini]  — RIVISTO v3.3
   Obiettivo: firme discreta ma riconoscibile,
   con un accento gold e separazione dal contenuto.
════════════════════════════════════════════════════ */
.dm-author-mini {
    font-size: .82rem;
    color: var(--dm-aa-soft);
    margin: 1.8rem 0 1rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    border: 1px solid var(--dm-aa-gold-border);
    background: var(--dm-aa-surface);
    position: relative;
}

/* Piccolo accento decorativo gold a sinistra della border-top */
.dm-author-mini::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 28px;
    height: 1px;
    background: var(--dm-aa-gold);
    opacity: .7;
}

.dm-author-mini a {
    color: var(--dm-aa-text);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .01em;
    transition: color .2s;
}
.dm-author-mini a:hover { color: var(--dm-aa-gold); }

.dm-author-mini__sep {
    color: var(--dm-aa-gold);
    opacity: .45;
    font-weight: 300;
}

.dm-author-mini__role {
    font-family: var(--dm-aa-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--dm-aa-soft);
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════
   BOX CTA [about_author_cta]  — RIVISTO v3.3
   Obiettivo: layout come il full (avatar a sx, tutto
   il contenuto a dx), con dot-avail sotto il ruolo
   e i bottoni in fondo. Più coeso, meno diviso.
════════════════════════════════════════════════════ */
.dm-author-box--cta {
    border: 1px solid var(--dm-aa-gold-border);
    background: linear-gradient(135deg, var(--dm-aa-gold-dim) 0%, transparent 60%);
    padding: 1.5rem 1.6rem 1.4rem;
    position: relative;
    overflow: hidden;
}
/* Watermark "DM" — due pseudo-elementi sovrapposti come .ld/.lm nell'header.
   ::before = "D" ancorata + traslata a destra
   ::after  = "M" ancorata + traslata a sinistra
   Si incontrano al centro creando la sovrapposizione parziale. */
.dm-author-box--cta::before,
.dm-author-box--cta::after {
    position: absolute;
    bottom: -1rem;
    font-size: 6rem;
    font-weight: 400;
    color: var(--dm-aa-gold);
    opacity: .055;
    pointer-events: none;
    line-height: 1;
    font-family: 'Great Vibes', serif;
    transition: opacity .35s cubic-bezier(.4,0,.2,1),
                transform .35s cubic-bezier(.4,0,.2,1),
                text-shadow .35s cubic-bezier(.4,0,.2,1);
}
/* "D" — ancorata più a sinistra, spinta verso destra (verso la M) */
.dm-author-box--cta::before {
    content: 'D';
    right: 10.1rem;
    transform: translateX(1.2rem);
    text-shadow: 0 0 14px rgba(255,215,0,.35);
}
/* "M" — ancorata a destra, spinta verso sinistra (verso la D) */
.dm-author-box--cta::after {
    content: 'M';
    right: 1.2rem;
    transform: translateX(-1.2rem);
    text-shadow: 0 0 14px rgba(255,165,0,.35);
}
.dm-author-box--cta:hover::before {
    opacity: .09;
    transform: translateX(1.2rem) scale(1.05) translateY(-2px);
    text-shadow: 0 0 24px rgba(255,215,0,.6);
}
.dm-author-box--cta:hover::after {
    opacity: .09;
    transform: translateX(-1.2rem) scale(1.05) translateY(-2px);
    text-shadow: 0 0 24px rgba(255,165,0,.55);
}

/* Layout identico al full: avatar | contenuto */
.dm-author-box__cta-inner {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    flex-wrap: nowrap;
}

/* Avatar colonna sinistra */
.dm-author-box__cta-left {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.dm-author-box__cta-left img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--dm-aa-gold-border);
    filter: contrast(1.05);
}

/* Tutto il contenuto a destra */
.dm-author-box__cta-right {
    flex: 1;
    min-width: 0;
}

/* ── Label CTA: "SCRITTO DA" con separatore ── */
.dm-author-box__cta-label-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .1rem;
}
.dm-author-box__cta-label {
    font-family: var(--dm-aa-mono);
    font-size: .52rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--dm-aa-gold);
    opacity: .6;
    margin: 0;
    white-space: nowrap;
    line-height: 1;
}
.dm-author-box__cta-label-sep {
    display: block;
    height: 1px;
    width: 24px;
    min-width: 24px;
    background: var(--dm-aa-gold-border);
    flex-shrink: 0;
    align-self: center;
}

/* Riusa le classi condivise .dm-author-box__name e .dm-author-box__role */

/* ── Dot disponibile: inline sotto il ruolo ── */
.dm-author-box__avail {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--dm-aa-mono);
    font-size: .55rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dm-aa-softer);
    margin: .1rem 0 .9rem;
}
.dm-author-box__dot {
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74,222,128,.5);
    animation: dm-aa-pulse 2.2s infinite;
    flex-shrink: 0;
}
@keyframes dm-aa-pulse {
    0%,100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: .6; }
}

/* Bio con border-left gold */
.dm-author-box--cta .dm-author-box__bio {
    margin-bottom: 1rem;
}

/* Bottoni CTA */
.dm-author-box__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Roboto', 'Courier New', monospace;
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .6rem 1.2rem;
    min-height: 40px;
    background: var(--dm-aa-gold);
    border: 1px solid var(--dm-aa-gold);
    color: var(--dm-aa-ink-btn) !important;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .2s;
}
.dm-author-box__cta-btn:link,
.dm-author-box__cta-btn:visited { color: var(--dm-aa-ink-btn) !important; }
.dm-author-box__cta-btn:hover,
.dm-author-box__cta-btn:active  { opacity: .88; color: var(--dm-aa-ink-btn) !important; }

.dm-author-box__linkedin-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Roboto', 'Courier New', monospace;
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .6rem 1.2rem;
    min-height: 40px;
    border: 1px solid var(--dm-aa-outline);
    color: var(--dm-aa-outline-text) !important;
    background: transparent;
    text-decoration: none;
    transition: border-color .2s, color .2s;
}
.dm-author-box__linkedin-btn:link,
.dm-author-box__linkedin-btn:visited { color: var(--dm-aa-outline-text) !important; }
.dm-author-box__linkedin-btn:hover,
.dm-author-box__linkedin-btn:active  { border-color: var(--dm-aa-gold-border); color: var(--dm-aa-gold) !important; }

/* ── Hover box: bordo gold più visibile su tutti i box ── */
.dm-author-box--full,
.dm-author-box--short,
.dm-author-box--cta {
    transition: border-color .25s;
}
.dm-author-box--full:hover,
.dm-author-box--short:hover,
.dm-author-box--cta:hover {
    border-color: var(--dm-aa-gold-strong);
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .dm-author-box--full,
    .dm-author-box--short,
    .dm-author-box--cta { padding: 1.2rem 1.1rem; }

    .dm-author-mini { padding: .65rem .9rem; }

    /* full */
    .dm-author-box__inner { flex-direction: column; gap: 1rem; }
    .dm-author-box__avatar { width: 56px; height: 56px; }
    .dm-author-box__avatar img { width: 56px !important; height: 56px !important; }

    /* cta */
    .dm-author-box__cta-inner { flex-direction: column; gap: 1rem; }
    .dm-author-box__cta-left { width: 56px; height: 56px; }
    .dm-author-box__cta-left img { width: 56px !important; height: 56px !important; }
    .dm-author-box__linkedin-btn { margin-left: 0; }
}

/* short: va a colonna solo su schermi davvero piccoli */
@media (max-width: 420px) {
    .dm-author-box--short { flex-direction: column; gap: .9rem; }
    .dm-author-box__avatar-sm { margin-top: 0; }
}