/* ==== Bordo del box prodotto Amazon (comunicati stampa e guide) ====
   22/08/2026: su richiesta esplicita di Michele il box prodotto Amazon NON usa piu'
   il bordo animato condiviso col box Telegram (.tsw-neon, sotto): ora ha una cornice
   ROSSA FISSA, niente pseudo-elemento, niente @keyframes. Il box Telegram/riassunto AI
   resta animato come prima (vedi @keyframes pab-rotate piu' sotto, usata da .tsw-neon
   e dagli altri box con lo stesso effetto).
   Vedi press.py _box_prodotto_html per lo storico del box (perche' non @property,
   perche' un file esterno).

   Selettore ".press-amazon-box-anim" (NON il generico ".press-amazon-box"): quella classe
   e' condivisa anche dal box BOUNTY (offerte Amazon Music/Audible, _box_bounty_html), che
   per esplicita richiesta di Michele deve restare STATICO - "press-amazon-
   box-anim" la mette SOLO il box prodotto (_box_prodotto_html). */
.press-amazon-box-anim {
  border: 3px solid #ef4444;
  border-radius: 12px;
}
.tsw-neon {
  position: relative;
  z-index: 0;
}
.tsw-neon::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: conic-gradient(from 0deg, #00f2b2, #f600ff, #ef4444, #00f2b2);
  animation: pab-rotate 3s linear infinite;
}
@keyframes pab-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ==== Box "La notizia in sintesi" (riassunto AI) — stesso perimetro del box riassunto
   di tomshw.it, applicata la tecnica ROBUSTA gia' collaudata sopra (pseudo-elemento
   ruotato via transform, NIENTE @property/<angle>: quella sintassi viene corrotta da
   Advanced Ads Pro quando passa da wp_head/il contenuto dei post - vedi commento sopra
   e memoria project_press_release_service). File esterno vero per lo stesso motivo:
   uno stile inline nel post o in wp_head rischia di sparire del tutto (verificato).

   Struttura a 3 livelli (diversa dai box prodotto, quadrati - qui serve un livello
   in piu'): .dm-riass-box (contenitore, NESSUN overflow, cosi' il titolo puo'
   sporgere sopra il bordo) > .dm-riass-title (sporge) + .dm-riass-frame (questo SI'
   con overflow:hidden, contiene il bordo che ruota) > .dm-riass-inner (sfondo bianco). */
.dm-riass-box {
  position: relative;
  margin: 34px 0;
}
.dm-riass-frame {
  /* overflow:hidden e' l'ingrediente che manca rispetto ai box prodotto (quadrati):
     il bordo ruota con transform:rotate() (vedi @keyframes pab-rotate sopra), e su
     un rettangolo molto allungato come questo (largo quanto l'articolo, basso) la
     rotazione fa "sbandare" il pseudo-elemento visivamente ben oltre il riquadro
     durante l'animazione (l'ingombro di un rettangolo stretto ruotato e' molto
     piu' grande della sua area) - senza overflow:hidden si vedeva un grande rombo
     colorato invadere il resto della pagina invece di restare dentro al bordo.
     Sta su un elemento SEPARATO dal box esterno (non su .dm-riass-box) perche' il
     titolo (sotto) deve poter sporgere sopra il bordo senza essere tagliato. */
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 3px;
  border-radius: 24px 24px 8px 24px;
  /* Contorno grigio FISSO, sempre visibile, sopra il quale passa la striscia di
     colore animata (richiesta di Michele 16/08). Inset cosi' segue gli angoli
     arrotondati e sta esattamente al bordo, dove la striscia sfreccia sopra. */
  box-shadow: inset 0 0 0 1px #d1d5db;
}
.dm-riass-frame::before {
  /* inset:0 (non -75% come i box prodotto, quadrati/compatti): questo box e'
     largo quanto l'articolo e alto quanto l'elenco puntato - un overshoot
     proporzionale al 75% diventava enorme in pixel assoluti e "sforava"
     ben oltre il riquadro (visto su schermo: un rombo colorato gigante). */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: conic-gradient(from 0deg, #00f2b2, #f600ff, #ef4444, #00f2b2);
  animation: pab-rotate 3s linear infinite;
}
.dm-riass-inner {
  position: relative;
  background: #fff;
  border-radius: 22px 22px 6px 22px;
  padding: 36px 28px 24px;
}
.dm-riass-title {
  position: absolute;
  top: 0;
  left: 22px;
  transform: translateY(-50%);
  background: #fff;
  padding: 0 16px;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #1f2937;
  line-height: 1.2;
  z-index: 1;
}
.dm-riass-body ul { margin: 0; padding-left: 1.3em; }
.dm-riass-body li { margin: 7px 0; }
.dm-riass-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 16px 0 0;
  color: #9a9a9a;
  font-size: 12px;
}
@media (max-width: 600px) {
  .dm-riass-inner { padding: 32px 18px 20px; }
  .dm-riass-title { left: 14px; font-size: 1.15rem; }
}
/* 18/08/2026 — tolta la regola "prefers-reduced-motion: reduce" che spegneva
   l'animazione SOLO su questo box (non sul box prodotto sopra, restato sempre
   animato): su telefono con l'opzione di sistema "Riduci movimento" attiva
   (comune su iOS/Android) il bordo restava fisso mentre l'altro box girava,
   comportamento incoerente. Ora i due box si comportano allo stesso modo. */


/* ==== Box iscrizione newsletter dentro l'articolo (18/08) ====
   Stessa tecnica ROBUSTA e stessa struttura a 3 livelli del box riassunto sopra
   (.dm-riass-frame/.dm-riass-inner/.dm-riass-title): pseudo-elemento ruotato,
   overflow:hidden sul frame, inset:0, NIENTE @property. File esterno vero per lo
   stesso motivo (Advanced Ads Pro corrompe lo stile se sta in wp_head/post_content).
   Vedi mu-plugins/dm-box-iscrizione.php. */
.dm-nl-box {
  position: relative;
  margin: 34px 0;
}
.dm-nl-frame {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 3px;
  border-radius: 24px 24px 8px 24px;
  box-shadow: inset 0 0 0 1px #d1d5db;
}
.dm-nl-frame::before {
  /* 19/08: bordo di spessore FISSO (i 3px di padding sopra non cambiano),
     ma i colori SCORRONO lungo il perimetro invece di ruotare come un disco
     (era conic-gradient + pab-rotate, uguale agli altri box). Animazione
     dedicata dm-nl-flow, non tocca pab-rotate usata dal box Telegram. */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #00f2b2, #f600ff, #ef4444, #00f2b2, #f600ff, #ef4444, #00f2b2);
  background-size: 300% 100%;
  animation: dm-nl-flow 5s linear infinite;
}
.dm-nl-inner {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 22px 22px 6px 22px;
  padding: 36px 28px 24px;
}
.dm-nl-inner::before {
  /* sfondo che pulsa cambiando tinta in sinergia col colore che in quel
     momento passa sul bordo — stessa durata (5s) e stessa sequenza di colori
     dell'animazione del bordo qui sopra, cosi' restano sincronizzati. */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .09;
  animation: dm-nl-pulse-bg 5s linear infinite;
}
.dm-nl-inner > * {
  position: relative;
  z-index: 1;
}
@keyframes dm-nl-flow {
  to { background-position: 300% 0; }
}
@keyframes dm-nl-pulse-bg {
  0%, 100% { background-color: #00f2b2; }
  33% { background-color: #f600ff; }
  66% { background-color: #ef4444; }
}
.dm-nl-title {
  position: absolute;
  top: 0;
  left: 22px;
  transform: translateY(-50%);
  background: #fff;
  padding: 0 16px;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #1f2937;
  line-height: 1.2;
  z-index: 1;
}
.dm-nl-sub {
  margin: 0 0 16px;
  font-size: .95rem;
  color: #4b5563;
  line-height: 1.5;
}
.dm-nl-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dm-nl-email {
  flex: 1;
  min-width: 180px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 0 14px;
  font-size: .9rem;
  color: #1f2937;
  background: #fff;
}
.dm-nl-btn {
  height: 44px;
  padding: 0 24px;
  border-radius: 8px;
  border: none;
  background: #ef0c00;
  color: #fff;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .4px;
  cursor: pointer;
}
.dm-nl-btn:disabled { opacity: .65; cursor: default; }
.dm-nl-err {
  margin: 8px 0 0;
  font-size: .8rem;
  color: #d92626;
}
.dm-nl-mkt-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}
.dm-nl-mkt-title {
  font-size: .75rem;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 6px;
}
.dm-nl-mkt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.dm-nl-mkt input { margin-top: 2px; width: 15px; height: 15px; flex-shrink: 0; }
.dm-nl-mkt span { font-size: .75rem; color: #374151; line-height: 1.5; }
.dm-nl-legal {
  margin: 12px 0 0;
  font-size: .7rem;
  color: #9ca3af;
  line-height: 1.5;
}
.dm-nl-legal a { color: #2208a3; }
.dm-nl-esito {
  font-size: .9rem;
  padding: 12px 14px;
  border-radius: 8px;
}
.dm-nl-esito-ok {
  background: #eafaf0;
  color: #14663d;
}
.dm-nl-esito-dup {
  background: #fdecec;
  color: #9a2222;
}
@media (max-width: 600px) {
  .dm-nl-inner { padding: 32px 18px 20px; }
  .dm-nl-title { left: 14px; font-size: 1.15rem; }
}

/* ==== Box prodotto Amazon e card della vetrina: cosa succede al passaggio del mouse
   (25/08/2026, procedura unica box_amazon.py)

   Box e card sono scritti con stili IN LINEA per essere autonomi, e in linea non si
   possono esprimere ne' :hover ne' :active: stanno qui.

   ⚠️ IL PUNTO IMPORTANTE. Il tema del sito ha una regola su TUTTI i link:
       a:hover { background-color:#ea0c00; color:#fff; }
   Il pannello trasparente che rende cliccabile tutto il riquadro e' un <a> steso su
   tutta l'area: al passaggio del mouse si riempiva di ROSSO e la scheda diventava
   illeggibile (segnalato da Michele con screenshot delle card, 25/08/2026). Stessa cosa
   per ogni link dentro il box: titolo, prezzo, immagine, bottone.
   Qui sotto quella regola viene annullata dentro box e card (serve !important: e' una
   regola del tema, piu' generica ma sempre attiva).

   Regola decisa da Michele: al passaggio del mouse il riquadro fa SOLO l'effetto 3D -
   si solleva con l'ombra rossa - e nient'altro. Niente cambi di colore, niente
   sottolineature, niente sfondi. Resta l'abbassamento del bottone quando lo si preme
   (:active), che e' l'effetto 3D dei bottoni, non un colore. */

/* 0. ⚠️ LA REGOLA DA BATTERE (trovata col browser ispezionando la pagina vera,
   25/08/2026 - NON e' nel file del tema, e' in un <style> dentro la pagina):
       body.single-post .dynamic-entry-content a:not([class]):hover { background-color:#ea0c00 !important }
   Ha !important e specificita' (0,4,2). Colpisce i link SENZA classe: il pannello
   cliccabile steso su tutta la card non ne aveva, per questo il rosso si vedeva sulle
   card piccole e non sui box (li' il pannello si chiama .tsw-box-link).
   Qui si vince ripetendo la classe nel selettore - (0,5,1), e a parita' di !important
   conta prima il numero di classi, non gli elementi. Ripetere la classe e' brutto ma
   e' l'unico modo di alzare la specificita' senza dipendere dal nome del contenitore
   della pagina (.dynamic-entry-content oggi, chissa' domani).
   ⚠️ NON e' un rimedio "a tappeto": vale solo dentro i box e le card. Per tutti gli
   altri link del sito la regola del tema resta esattamente quella di prima. */
.tsw-showreel-card.dm-card-anim.dm-card-anim.dm-card-anim a:hover,
.tsw-showreel-card.dm-card-anim.dm-card-anim.dm-card-anim a:focus,
.press-amazon-box.press-amazon-box-anim.press-amazon-box-anim.press-amazon-box-anim a:hover,
.press-amazon-box.press-amazon-box-anim.press-amazon-box-anim.press-amazon-box-anim a:focus {
  background-color: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
}
/* ⚠️ La stessa regola del tema forza anche `color:#fff !important`, e un !important
   esterno batte perfino il colore scritto in linea nel box: con il mouse sopra la
   firma la scritta "Datamoney.ch" diventava bianca su bianco e SPARIVA (visto solo
   guardando la pagina online, 25/08/2026). Qui i colori si riprendono uno per uno. */
.tsw-showreel-card.dm-card-anim.dm-card-anim.dm-card-anim a:hover,
.press-amazon-box.press-amazon-box-anim.press-amazon-box-anim.press-amazon-box-anim a:hover {
  color: inherit !important;
}
.press-amazon-box.press-amazon-box-anim.press-amazon-box-anim.press-amazon-box-anim .tsw-firma a:hover {
  color: #0b64c4 !important;
}
.tsw-showreel-card.dm-card-anim.dm-card-anim.dm-card-anim a.tsw-card-name:hover,
.press-amazon-box.press-amazon-box-anim.press-amazon-box-anim.press-amazon-box-anim a.tsw-box-name:hover {
  color: #111 !important;
}

/* il bottone giallo resta giallo (una ripetizione in piu' per stare sopra) */
.tsw-showreel-card.dm-card-anim.dm-card-anim.dm-card-anim.dm-card-anim a.tsw-buy-btn:hover,
.press-amazon-box.press-amazon-box-anim.press-amazon-box-anim.press-amazon-box-anim.press-amazon-box-anim a.tsw-buy-btn:hover {
  background-color: #ffd814 !important;
  color: #0f1111 !important;
}

/* 0-bis. la stessa cosa nella forma precedente (utile se il tema cambia contenitore)
   ⚠️ LA REGOLA DA BATTERE, versione con .entry-content:
   E' del tema, ha !important E una specificita' (0,3,2) piu' alta di un semplice
   ".dm-card-anim a:hover" (0,2,1): a parita' di !important vince la piu' specifica,
   quindi la versione "corta" qui sotto da sola NON bastava. Colpisce i link SENZA
   classe: il pannello cliccabile della card non ne ha (quello del box si', si chiama
   tsw-box-link) - per questo il rosso si vedeva solo sulle card piccole.
   Qui si sale a (0,4,2) aggiungendo una seconda classe al selettore, cosi' vince.
   Vale SOLO dentro i box e le card: per tutti gli altri link del sito la regola del
   tema resta quella di prima. */
body.single-post .entry-content .press-amazon-box.press-amazon-box-anim a:hover,
body.single-post .entry-content .press-amazon-box.press-amazon-box-anim a:focus,
body.single-post .entry-content .tsw-showreel-card.dm-card-anim a:hover,
body.single-post .entry-content .tsw-showreel-card.dm-card-anim a:focus {
  background-color: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
}
/* il bottone giallo resta giallo anche qui (specificita' ancora piu' alta) */
body.single-post .entry-content .press-amazon-box.press-amazon-box-anim a.tsw-buy-btn:hover,
body.single-post .entry-content .tsw-showreel-card.dm-card-anim a.tsw-buy-btn:hover {
  background-color: #ffd814 !important;
  color: #0f1111 !important;
}

/* 1. la stessa cosa in forma corta, per le pagine che non sono "single-post"
   (pagine, archivi) dove il selettore lungo non aggancia. */
   NIENTE regola sul `color` qui: i testi hanno gia' il loro colore scritto in linea
   (titolo #111, prezzo verde, bottone #0f1111), e lo stile in linea batte da solo il
   color:#fff del tema. Una regola sul colore qui rischierebbe invece di scolorire i
   testi che il colore ce l'hanno gia' giusto. */
.press-amazon-box-anim a:hover,
.press-amazon-box-anim a:focus,
.dm-card-anim a:hover,
.dm-card-anim a:focus {
  background-color: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
}
/* ...tranne il bottone giallo, che il giallo lo deve tenere anche col mouse sopra
   (la regola qui sopra, da sola, lo renderebbe trasparente) */
.press-amazon-box-anim .tsw-buy-btn:hover,
.press-amazon-box-anim .tsw-buy-btn:focus,
.dm-card-anim .tsw-buy-btn:hover,
.dm-card-anim .tsw-buy-btn:focus {
  background-color: #ffd814 !important;
  color: #0f1111 !important;
}
/* il pannello cliccabile deve restare invisibile in ogni stato */
.press-amazon-box-anim > a.tsw-box-link,
.press-amazon-box-anim > a.tsw-box-link:hover,
.dm-card-anim > a[aria-label],
.dm-card-anim > a[aria-label]:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* 2. l'unico effetto voluto: il riquadro si solleva */
.press-amazon-box-anim,
.dm-card-anim { cursor:pointer; transition:box-shadow .15s, transform .15s; }
.press-amazon-box-anim:hover,
.dm-card-anim:hover { box-shadow:0 10px 26px rgba(239,68,68,.22); transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce) {
  .press-amazon-box-anim:hover, .dm-card-anim:hover { transform:none; }
}

/* 3. il bottone giallo si abbassa quando lo premi (effetto 3D, non un colore) */
.press-amazon-box-anim .tsw-buy-btn:active,
.dm-card-anim .tsw-buy-btn:active { transform:translateY(4px); box-shadow:0 0 0 #c69500; }

/* 4. il triangolino di <details> del fumetto "i" non si mostra */
.press-amazon-box-anim summary::-webkit-details-marker { display:none; }